SlideShare a Scribd company logo
The Beauty and the Beast 
Modern Javascript Development 
with AngularJS and Plone 
Timo Stollenwerk 
Plone Conference 2014 — Bristol
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 = getUsersService(); 
} 
); 
Dependency Injection
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://timostollenwerk.net 
tisto@plone.org 
irc: tisto 
Plone Conference 2014 — Bristol 
! 
github.com/tisto/plone.app.angularjs

More Related Content

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

Reactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJS
Martin Hochel
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Alessandro Nadalin
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponents
Martin Hochel
 
RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK - Nicola Iarocci - Co...
RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK -  Nicola Iarocci - Co...RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK -  Nicola Iarocci - Co...
RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK - Nicola Iarocci - Co...
Codemotion
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive Code
Laurence Svekis ✔
 
Jquery.Tmpl
Jquery.TmplJquery.Tmpl
Jquery.Tmpl
LearningTech
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
climboid
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
Emily Lewis
 
FamilySearch Reference Client
FamilySearch Reference ClientFamilySearch Reference Client
FamilySearch Reference Client
Dallan Quass
 
Practical Ruby Projects (Alex Sharp)
Practical Ruby Projects (Alex Sharp)Practical Ruby Projects (Alex Sharp)
Practical Ruby Projects (Alex Sharp)
MongoSF
 
Practical Ruby Projects with MongoDB - MongoSF
Practical Ruby Projects with MongoDB - MongoSFPractical Ruby Projects with MongoDB - MongoSF
Practical Ruby Projects with MongoDB - MongoSF
Alex Sharp
 
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решения
Olga Lavrentieva
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Responsive Responsive Design
Responsive Responsive DesignResponsive Responsive Design
Responsive Responsive Design
Tim Kadlec
 
Everything You Need to Know in Order to Start Using jQuery
Everything You Need to Know in Order to Start Using jQueryEverything You Need to Know in Order to Start Using jQuery
Everything You Need to Know in Order to Start Using jQuery
Dave Ross
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
Jarrod Overson
 
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Doris Chen
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
Tricode (part of Dept)
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
Steve McMahon
 

Similar to The Beauty and the Beast - Modern Javascript Development with AngularJS and Plone (20)

Reactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJS
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
 
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponents
 
RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK - Nicola Iarocci - Co...
RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK -  Nicola Iarocci - Co...RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK -  Nicola Iarocci - Co...
RESTFUL SERVICES MADE EASY: THE EVE REST API FRAMEWORK - Nicola Iarocci - Co...
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive Code
 
Jquery.Tmpl
Jquery.TmplJquery.Tmpl
Jquery.Tmpl
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
FamilySearch Reference Client
FamilySearch Reference ClientFamilySearch Reference Client
FamilySearch Reference Client
 
Practical Ruby Projects (Alex Sharp)
Practical Ruby Projects (Alex Sharp)Practical Ruby Projects (Alex Sharp)
Practical Ruby Projects (Alex Sharp)
 
Practical Ruby Projects with MongoDB - MongoSF
Practical Ruby Projects with MongoDB - MongoSFPractical Ruby Projects with MongoDB - MongoSF
Practical Ruby Projects with MongoDB - MongoSF
 
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решения
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Responsive Responsive Design
Responsive Responsive DesignResponsive Responsive Design
Responsive Responsive Design
 
Everything You Need to Know in Order to Start Using jQuery
Everything You Need to Know in Order to Start Using jQueryEverything You Need to Know in Order to Start Using jQuery
Everything You Need to Know in Order to Start Using jQuery
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
 

More from Timo Stollenwerk

German Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web RelaunchGerman Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web Relaunch
Timo Stollenwerk
 
Performance Testing (Python Barcamp Cologne 2020)
Performance Testing (Python Barcamp Cologne 2020)Performance Testing (Python Barcamp Cologne 2020)
Performance Testing (Python Barcamp Cologne 2020)
Timo Stollenwerk
 
Python & JavaScript
Python & JavaScriptPython & JavaScript
Python & JavaScript
Timo Stollenwerk
 
Roadmap to a Headless Plone
Roadmap to a Headless PloneRoadmap to a Headless Plone
Roadmap to a Headless Plone
Timo Stollenwerk
 
Plone.restapi - a bridge to the modern web
Plone.restapi - a bridge to the modern webPlone.restapi - a bridge to the modern web
Plone.restapi - a bridge to the modern web
Timo Stollenwerk
 
Divide et impera
Divide et imperaDivide et impera
Divide et impera
Timo Stollenwerk
 
The Butler and The Snake (Europython 2015)
The Butler and The Snake (Europython 2015)The Butler and The Snake (Europython 2015)
The Butler and The Snake (Europython 2015)
Timo Stollenwerk
 
Hypermedia APIs mit Javascript und Python
Hypermedia APIs mit Javascript und PythonHypermedia APIs mit Javascript und Python
Hypermedia APIs mit Javascript und Python
Timo Stollenwerk
 
Plone Testing & Continuous Integration Team Report 2014
Plone Testing & Continuous Integration Team Report 2014Plone Testing & Continuous Integration Team Report 2014
Plone Testing & Continuous Integration Team Report 2014
Timo Stollenwerk
 
The Butler and the Snake - JCICPH
The Butler and the Snake - JCICPHThe Butler and the Snake - JCICPH
The Butler and the Snake - JCICPH
Timo Stollenwerk
 
The Butler and the Snake - Continuous Integration for Python
The Butler and the Snake - Continuous Integration for PythonThe Butler and the Snake - Continuous Integration for Python
The Butler and the Snake - Continuous Integration for Python
Timo Stollenwerk
 
AngularJS & Plone
AngularJS & PloneAngularJS & Plone
AngularJS & Plone
Timo Stollenwerk
 
Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...
Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...
Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...
Timo Stollenwerk
 
Plone5
Plone5Plone5
Who let the robot out? - Building high quality software with Continuous Integ...
Who let the robot out? - Building high quality software with Continuous Integ...Who let the robot out? - Building high quality software with Continuous Integ...
Who let the robot out? - Building high quality software with Continuous Integ...
Timo Stollenwerk
 
The Future Is Written - Building next generation Plone sites with plone.app.c...
The Future Is Written - Building next generation Plone sites with plone.app.c...The Future Is Written - Building next generation Plone sites with plone.app.c...
The Future Is Written - Building next generation Plone sites with plone.app.c...
Timo Stollenwerk
 
Plone Einführung
Plone EinführungPlone Einführung
Plone Einführung
Timo Stollenwerk
 
Einführung Test-driven Development
Einführung Test-driven DevelopmentEinführung Test-driven Development
Einführung Test-driven Development
Timo Stollenwerk
 
Test-Driven Development
Test-Driven DevelopmentTest-Driven Development
Test-Driven Development
Timo Stollenwerk
 
Mock testing mit Python
Mock testing mit PythonMock testing mit Python
Mock testing mit Python
Timo Stollenwerk
 

More from Timo Stollenwerk (20)

German Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web RelaunchGerman Aerospace Center (DLR) Web Relaunch
German Aerospace Center (DLR) Web Relaunch
 
Performance Testing (Python Barcamp Cologne 2020)
Performance Testing (Python Barcamp Cologne 2020)Performance Testing (Python Barcamp Cologne 2020)
Performance Testing (Python Barcamp Cologne 2020)
 
Python & JavaScript
Python & JavaScriptPython & JavaScript
Python & JavaScript
 
Roadmap to a Headless Plone
Roadmap to a Headless PloneRoadmap to a Headless Plone
Roadmap to a Headless Plone
 
Plone.restapi - a bridge to the modern web
Plone.restapi - a bridge to the modern webPlone.restapi - a bridge to the modern web
Plone.restapi - a bridge to the modern web
 
Divide et impera
Divide et imperaDivide et impera
Divide et impera
 
The Butler and The Snake (Europython 2015)
The Butler and The Snake (Europython 2015)The Butler and The Snake (Europython 2015)
The Butler and The Snake (Europython 2015)
 
Hypermedia APIs mit Javascript und Python
Hypermedia APIs mit Javascript und PythonHypermedia APIs mit Javascript und Python
Hypermedia APIs mit Javascript und Python
 
Plone Testing & Continuous Integration Team Report 2014
Plone Testing & Continuous Integration Team Report 2014Plone Testing & Continuous Integration Team Report 2014
Plone Testing & Continuous Integration Team Report 2014
 
The Butler and the Snake - JCICPH
The Butler and the Snake - JCICPHThe Butler and the Snake - JCICPH
The Butler and the Snake - JCICPH
 
The Butler and the Snake - Continuous Integration for Python
The Butler and the Snake - Continuous Integration for PythonThe Butler and the Snake - Continuous Integration for Python
The Butler and the Snake - Continuous Integration for Python
 
AngularJS & Plone
AngularJS & PloneAngularJS & Plone
AngularJS & Plone
 
Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...
Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...
Who let the robot out? Qualitativ hochwertige Software durch Continuous Integ...
 
Plone5
Plone5Plone5
Plone5
 
Who let the robot out? - Building high quality software with Continuous Integ...
Who let the robot out? - Building high quality software with Continuous Integ...Who let the robot out? - Building high quality software with Continuous Integ...
Who let the robot out? - Building high quality software with Continuous Integ...
 
The Future Is Written - Building next generation Plone sites with plone.app.c...
The Future Is Written - Building next generation Plone sites with plone.app.c...The Future Is Written - Building next generation Plone sites with plone.app.c...
The Future Is Written - Building next generation Plone sites with plone.app.c...
 
Plone Einführung
Plone EinführungPlone Einführung
Plone Einführung
 
Einführung Test-driven Development
Einführung Test-driven DevelopmentEinführung Test-driven Development
Einführung Test-driven Development
 
Test-Driven Development
Test-Driven DevelopmentTest-Driven Development
Test-Driven Development
 
Mock testing mit Python
Mock testing mit PythonMock testing mit Python
Mock testing mit Python
 

Recently uploaded

cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Infosec train
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 

Recently uploaded (11)

cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 

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