Learn how a modern, full-featured Javascript front-end framework can play well with an enterprise-class content management system. This talk will present how we build a flexible AngularJS front-end solution on top of Plone, with a state-of-the-art Javascript development workflow.

1. The Beauty and the Beast
Modern Javascript Development
with AngularJS and Plone
Timo Stollenwerk
Plone Conference 2014 — Bristol

2. The State of Javascript in Plone

3. Problems

4. Requirements

5. Modern Javascript Solutions

6. Angular JS

7. 1200
900
600
300
0
Contributors
Angular Backbone Ember Knockout React

8. 20
15
10
5
0
Books
Angular Backbone Ember Knockout React

9. 300
225
150
75
0
Meetups
Angular Backbone Ember Knockout React

10. Google Trends

11. „We're not building a new language,
just making what we already have better“
!
— @mhevery

12. def persons(self):
return [
{'title': 'John Doe'},
{'title': 'Jane Doe'}
Zope Browser View
]

13. <ul>
<li tal:repeat="person view/persons">
<span tal:replace="person['title'}"/>
</li>
</ul>
Zope Page Template

14. $scope.persons = [
{'title': 'John Doe'},
{'title': 'Jane Doe'}
]
Angular Model / Controller

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

16. <ul>
<li tal:repeat="person view/persons">
<span tal:replace="person['title'}"/>
</li>
</ul>
Zope Page Template

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

18. Two Way Binding

19. Two Way Binding
<input type="text"
ng-model="yourName"
placeholder="Your name here">
!
<h1>Hello {{yourName}}!</h1>

21. !
<portlet-navigation
start-level="1"
tree-depth="2"
/>
Angular Directives

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

24. Demo

26. Modern Javascript Development

28. The Future of Plone?

29. The Future of Plone?
github.com/tisto/plone.app.angularjs

30. RESTful JSON API

31. Reasons not to use Javascript

32. Conclusion

33. The Beauty and the Beast
Modern Javascript Development
with AngularJS and Plone
Timo Stollenwerk
http://timostollenwerk.net
tisto@plone.org
irc: tisto
Plone Conference 2014 — Bristol
!
github.com/tisto/plone.app.angularjs