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
[email protected] irc: tisto
!github.com/tisto/plone.app.angularjs