Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Beauty and the Beast 
Modern Javascript Development 
with AngularJS and Plone 
Timo Stollenwerk 
Plone Conference 2014...
The State of Javascript in Plone
Problems
Requirements
Modern Javascript Solutions
Angular JS
1200 
900 
600 
300 
0 
Contributors 
Angular Backbone Ember Knockout React
20 
15 
10 
5 
0 
Books 
Angular Backbone Ember Knockout React
300 
225 
150 
75 
0 
Meetups 
Angular Backbone Ember Knockout React
Google Trends
„We're not building a new language, 
just making what we already have better“ 
! 
— @mhevery
def persons(self): 
return [ 
{'title': 'John Doe'}, 
{'title': 'Jane Doe'} 
Zope Browser View 
]
<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
<input type="text" ng-model="yourName"> 
! 
<h1>Hello {{yourName}}!</h1> 
Angular Templates
Two Way Binding
Two Way Binding 
<input type="text" 
ng-model="yourName" 
placeholder="Your name here"> 
! 
<h1>Hello {{yourName}}!</h1>
! 
<portlet-navigation 
start-level="1" 
tree-depth="2" 
/> 
Angular Directives
myApp.controller('MyUsers', 
function(getUsersService) { 
/* Do something with myUserService */ 
$scope.users = getUsersSe...
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 Beast 
Modern Javascript Development 
with AngularJS and Plone 
Timo Stollenwerk 
http://timostollenwer...
The Beauty and the Beast - Modern Javascript Development with AngularJS and Plone
The Beauty and the Beast - Modern Javascript Development with AngularJS and Plone
The Beauty and the Beast - Modern Javascript Development with AngularJS and Plone
The Beauty and the Beast - Modern Javascript Development with AngularJS and Plone
Upcoming SlideShare
Loading in …5
×

The Beauty and the Beast - Modern Javascript Development with AngularJS and Plone

2,585 views

Published on

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.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

The Beauty and the Beast - Modern Javascript Development with AngularJS and Plone

  1. 1. The Beauty and the Beast Modern Javascript Development with AngularJS and Plone Timo Stollenwerk Plone Conference 2014 — Bristol
  2. 2. The State of Javascript in Plone
  3. 3. Problems
  4. 4. Requirements
  5. 5. Modern Javascript Solutions
  6. 6. Angular JS
  7. 7. 1200 900 600 300 0 Contributors Angular Backbone Ember Knockout React
  8. 8. 20 15 10 5 0 Books Angular Backbone Ember Knockout React
  9. 9. 300 225 150 75 0 Meetups Angular Backbone Ember Knockout React
  10. 10. Google Trends
  11. 11. „We're not building a new language, just making what we already have better“ ! — @mhevery
  12. 12. def persons(self): return [ {'title': 'John Doe'}, {'title': 'Jane Doe'} Zope Browser View ]
  13. 13. <ul> <li tal:repeat="person view/persons"> <span tal:replace="person['title'}"/> </li> </ul> Zope Page Template
  14. 14. $scope.persons = [ {'title': 'John Doe'}, {'title': 'Jane Doe'} ] Angular Model / Controller
  15. 15. <ul> <li ng-repeat="person in persons"> {{person.title}} </li> </ul> Angular Template
  16. 16. <ul> <li tal:repeat="person view/persons"> <span tal:replace="person['title'}"/> </li> </ul> Zope Page Template
  17. 17. <input type="text" ng-model="yourName"> ! <h1>Hello {{yourName}}!</h1> Angular Templates
  18. 18. Two Way Binding
  19. 19. Two Way Binding <input type="text" ng-model="yourName" placeholder="Your name here"> ! <h1>Hello {{yourName}}!</h1>
  20. 20. ! <portlet-navigation start-level="1" tree-depth="2" /> Angular Directives
  21. 21. myApp.controller('MyUsers', function(getUsersService) { /* Do something with myUserService */ $scope.users = getUsersService(); } ); Dependency Injection
  22. 22. Demo
  23. 23. Modern Javascript Development
  24. 24. The Future of Plone?
  25. 25. The Future of Plone? github.com/tisto/plone.app.angularjs
  26. 26. RESTful JSON API
  27. 27. Reasons not to use Javascript
  28. 28. Conclusion
  29. 29. 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

×