The Beauty and the BeastModern Javascript Development

with AngularJS and Plone

Timo StollenwerkPlone Conference 2014 — Bristol

The State of Javascript in Plone

Problems

Requirements

Modern Javascript Solutions

Angular JS

0

300

600

900

1200

Angular Backbone Ember Knockout React

Contributors

0

5

10

15

20

Angular Backbone Ember Knockout React

Books

0

75

150

225

300

Angular Backbone Ember Knockout React

Meetups

Google Trends

„We're not building a new language, just making what we already have better“

!

— @mhevery

Zope Browser View

def persons(self): return [ {'title': 'John Doe'}, {'title': 'Jane Doe'} ]

<ul> <li tal:repeat="person view/persons"> <span tal:replace="person['title'}"/> </li> </ul>

Zope Page Template

$scope.persons = [ {'title': 'John Doe'}, {'title': 'Jane Doe'} ]

Angular Model / Controller

<ul> <li ng-repeat="person in persons"> {{person.title}} </li> </ul>

Angular Template

<ul> <li tal:repeat="person view/persons"> <span tal:replace="person['title'}"/> </li> </ul>

Zope Page Template

Angular Templates

<input type="text" ng-model="yourName"> !<h1>Hello {{yourName}}!</h1>

Two Way Binding

Two Way Binding

<input type="text" ng-model="yourName" placeholder="Your name here"> !

<h1>Hello {{yourName}}!</h1>

Angular Directives

!<portlet-navigation start-level="1" tree-depth="2" />

Dependency Injection

myApp.controller('MyUsers', function(getUsersService) { /* Do something with myUserService */ $scope.users = getUsersService(); } );

Demo

Modern Javascript Development

The Future of Plone?

The Future of Plone?

github.com/tisto/plone.app.angularjs

RESTful JSON API

Reasons not to use Javascript

Conclusion

The Beauty and the BeastModern Javascript Development

with AngularJS and Plone

Plone Conference 2014 — Bristol

Timo Stollenwerk http://timostollenwerk.net

tisto@plone.org irc: tisto

!github.com/tisto/plone.app.angularjs