Timo Stollenwerk: The Beauty and the Beast. Modern Javascript Depelopment with AngularJS and Plone

What is the current state of javascript in Plone, version 4.3?

Javascript was always a needed skill for Plone developers. Progressive enhancement: the site works okay without Javascript and works nicer with it. We introduced overlays and other sugar on top of Plone.

My experience the last years is that I have a small project where I use Plone and do a small bit on top. And larger projects, for which I do not use anything from the standard Plone front-end at all. If the project is large enough, this is sensible.

Lazy loading of parts of the page. You do not want to load a thousand comments at once. That can still be done with jQuery and a bit extra on top of Plone.

Problems:

• Page load is too slow.
• With jQuery you end up with ever more spaghetti code, adding bindings to buttons everywhere.

For a project we made a list of requirements:

• full feature solution
• no best of breed solution where you need to combine three or more frameworks and know them all
• good documentation and books
• What I like about Zope is: it teaches me stuff. PHP did not teach me anything. It just did not work. I wrote crappy applications or I was using a crappy framework. Or both. Then Zope and Plone came along. I would learn new stuff, knowing I was learning really useful stuff. So I wanted a good framework, well thought through.
• A framework that was here to stay for a while.

I won't do a comparison, but we chose Angular. Why?

• Full feature frontend framework.
• Developed in 2009 by Google.
• Google is using it for more than a thousand apps internally. Very popular online and in conferences.

Angular does not try to reinvent the wheel.

• Model View Controller. You have a model in Javascript and bind it to your angular template.
• Two way binding: changing the model changes the input, but also if you change an input in a browser, the model is updated.
• Keep the complex code in your Javascript, not in your template.
• Create directives that contain code for your use case, for example for easy bootstrap integration.
• Dependency injection. You write an Angular script, with a function and the function call has getUsersService in it. Then it gets this service (from a file that is already loaded) and you can use it within that function.

BTW: it is cool to edit a css or js file and have the browser reloaded automatically, with grunt or gulp. Really fast development.

Might be nice to keep the good parts of Plone, like permission management, and do the front end in Angular (or a similar framework), where Plone mostly serves up some json.

See https://github.com/tisto/plone.app.angularjs

My personal opinion is that we need a RESTful json api.

Reasons not to use Javascript:

• You might still have users without javascript.
• Search engine optimization (Google cannot crawl data that is loaded by Angular).
• May not be nice for mobile users or for old browsers.
• You need a lot of testing, because a single error may break your complete javascript.

Let's see what we can come up with as Plone community, with Angular or ReactJS or something else. I certainly recommend that you check out Angular.

Watch the video and slides of this talk.

Watch the screencasts shown in the talk: BrowserSync, Two Way Binding, and plone.app.angularjs