Download as PDF, PPTX
![Angular JS components <div data-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ Plain HTML5 enriched with custom attributes and tags](https://image.slidesharecdn.com/magnoliaangularjsmoritzrebbertagido-140717075803-phpapp01/75/Magnolia-Angular-JS-an-Approach-for-Javascript-RIAs-Delivered-by-a-CMS-17-2048.jpg)
![Angular JS components <div data-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ Two-way-data-binding ➤ Ongoing rendering in client ➤ TWDB is a cool feature to build RIAs](https://image.slidesharecdn.com/magnoliaangularjsmoritzrebbertagido-140717075803-phpapp01/75/Magnolia-Angular-JS-an-Approach-for-Javascript-RIAs-Delivered-by-a-CMS-18-2048.jpg)
![Angular JS components <div data-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope, $rootScope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ data-ng-app defines root of application ➤ two or more apps per page possible](https://image.slidesharecdn.com/magnoliaangularjsmoritzrebbertagido-140717075803-phpapp01/75/Magnolia-Angular-JS-an-Approach-for-Javascript-RIAs-Delivered-by-a-CMS-19-2048.jpg)
![Angular JS components <div data-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ Devide DOM in components ➤ Each with its own $scope](https://image.slidesharecdn.com/magnoliaangularjsmoritzrebbertagido-140717075803-phpapp01/75/Magnolia-Angular-JS-an-Approach-for-Javascript-RIAs-Delivered-by-a-CMS-20-2048.jpg)
![Angular JS components page.ftl: <!DOCTYPE html> <html> <head lang="en"> [@cms.init /] <script> var add = angular.module('app',[]); </script> </head> <body data-ng-app="app"> [@cms.area name="filledWithComponents"/] </body> Frame ➤ Create surrounding page ➤ Initialize angular app](https://image.slidesharecdn.com/magnoliaangularjsmoritzrebbertagido-140717075803-phpapp01/75/Magnolia-Angular-JS-an-Approach-for-Javascript-RIAs-Delivered-by-a-CMS-24-2048.jpg)
Uploaded byMagnolia
Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS
Moritz Rebbert discusses the development of a large multi-tier application and a CMS-based portal utilizing AngularJS components and single-page applications. The presentation highlights the challenges faced with multi-tier architectures, the importance of customer control over structure, and the evolution towards rich client-side applications. Key lessons include the flexibility of Magnolia as an isolated part and the complexity introduced by integrating different markup styles.
Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS
- 1. Magnolia & AngularJS JavaScriptRIAs delivered by a CMS
- 2. Who am I ➤Moritz Rebbert, moritz.rebbert@agido.com ➤ Software Developer and Consultant ➤ Living in JCR-Trees for the last couple of years ➤ Employee of agido GmbH in Dortmund ➤ Using Magnolia since version 3.something ➤ Longterm developement and operations for a large sport betting application ➤ Mobile applications based on web technologies
- 3. What am Idoing here 1. Where we come from a. Large Multi-Tier application b. CMS Based Portal 2. What we do now a. Angular JS components b. Single page applications
- 4. What am Idoing here 1. Where we come from a. Large Multi-Tier application b. CMS Based Portal 2. What we do now a. Angular JS components b. Single page applications
- 5. Large Multi-Tier application ➤Classic Multi Tier Application ➤ Magnolia as content backend ➤ Internal Requests by Web-Tier Webclients Webserver Business Logic External Services User Terminals Magnolia CMS DB ~80 ~12
- 6. Large Multi-Tier application ➤JSF/SpringMVC as rendering master ➤ HTML-snippets ➤ No page structure in magnolia Webclients (HTML/ JavaScript) Webserver (SpringMVC, JSF) Business Logic (EJB3) WEB Mobile Tablet External Services Administration (Swing/Web) User Terminals (Special Hardware /Swing) Magnolia CMS DB Webclients Webserver Business Logic External Services User Terminals Magnolia CMS DB
- 7. Large Multi-Tier application Problems: ➤Designer: Templates at two locations ➤ Developer: At least three templating contexts Webclients (HTML/ JavaScript) Business Logic (EJB3) WEB Mobile Tablet External Services Administration (Swing/Web) User Terminals (Special Hardware /Swing) Magnolia CMS DB Webclients Webserver Business Logic External Services User Terminals Magnolia CMS DB .xhtml .jsp .jsp
- 8. Large Multi-Tier application Problems: ➤Author: No WYSIWYG of whole page in CMS Webclients (HTML/ JavaScript) Business Logic (EJB3) WEB Mobile Tablet External Services Administration (Swing/Web) User Terminals (Special Hardware /Swing) Magnolia CMS DB Webclients Webserver Business Logic External Services User Terminals Magnolia CMS DB
- 9. What am Idoing here 1. Where we come from a. Large Multi-Tier application b. CMS Based Portal 2. What we do now a. Angular JS components b. Single page applications
- 10. CMS Based Portal ➤Magnolia Based Reseller Portal ➤ Services ➤ DMS Access ➤ Communication to accounting system ➤ Custom user management ➤ Videos from additional streaming service Magnolia CMS Business Logic/ Servlet External Services
- 11. CMS Based Portal ➤Magnolia as rendering master ➤ Growing business logic ➤ Mess in CLASSPATH Magnolia CMS Business Logic/ Servlet External Services
- 12. What we havelearned Magnolia CMS Business Logic/ Servlet External Services Webclients (HTML/ JavaScript) Webserver (SpringMVC, JSF) Business Logic (EJB3) WEB Mobile Tablet External Services Administration (Swing/Web) User Terminals (Special Hardware /Swing) Magnolia CMS DB Webclients Webserver Business Logic External Services User Terminals Magnolia CMS DB
- 13. What we havelearned ➤ Flexibility, if magnolia is an isolated part (first approach) ➤ Customer needs to control overall structure (second approach) ➤ Growing need for rich client sided applications (complicated in both ways)
- 14. What am Idoing here 1. Where we come from a. Large Multi-Tier application b. CMS Based Portal 2. What we do now a. Angular JS components b. Single page applications
- 15. Angular JS components ➤Build mobile application based on web technologies ➤ Lots of user interaction ➤ Single page applications ➤ Offline mode
- 16. So what isAngular JS DEMO
- 17. Angular JS components <divdata-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ Plain HTML5 enriched with custom attributes and tags
- 18. Angular JS components <divdata-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ Two-way-data-binding ➤ Ongoing rendering in client ➤ TWDB is a cool feature to build RIAs
- 19. Angular JS components <divdata-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope, $rootScope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ data-ng-app defines root of application ➤ two or more apps per page possible
- 20. Angular JS components <divdata-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> </div> var add = angular.module('app',[]); function CopyController ($scope){ $scope.data = 13; }; function TwoTimesController($scope){ $scope.data = 7; }; ➤ Devide DOM in components ➤ Each with its own $scope
- 21. Angular JS components <divdata-ng-app="app"> <h3>Angular Demo</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="TwoTimesController"> <input type="text" data-ng-model="data"></input> {{data * 2}} </div> <div id=”info”> This is very static </div> </div> ➤ Easy to combine with non- active components
- 22. Angular JS components <divdata-ng-app="app"> <h3>${content.title}</h3> <div data-ng-controller="CopyController"> <input type="text" data-ng-model="data"></input> {{data}} </div> <div data-ng-controller="MultiplyController" data-ng-init="setFactor(${content.factor})"> <input type="text" data-ng-model="data"></input> {{data * factor}} </div> <div id=”info”> ${content.infoText} </div> </div> ➤ Initial values filled by magnolia ➤ Magnolia used to render the angular app Content
- 23. Angular JS components multiply.ftl: <!--SNIP !--> <div data-ng-controller="MutliplyController" data-ng-init="setFactor(${content.factor})"> <input type="text" data-ng-model="data"></input> {{data * factor}} </div> <script> function MultiplyController($scope){ $scope.data = 7; $scope.setFactor(factor) = function(f){ $scope.factor = f; }; }; </script> <!-- SNAP ! --> Components ➤ Combine js-controller and HTML-snippet ➤ Create magnolia component
- 24. Angular JS components page.ftl: <!DOCTYPEhtml> <html> <head lang="en"> [@cms.init /] <script> var add = angular.module('app',[]); </script> </head> <body data-ng-app="app"> [@cms.area name="filledWithComponents"/] </body> Frame ➤ Create surrounding page ➤ Initialize angular app
- 25.
- 26. Angular JS components Select Statistics NewsFeed Imprint Header / Navigation ➤ Components available in magnolia ➤ Same idea or buzzwords as Portles
- 27. $rootScope Angular JS components ➤Comunication via broadcast event ➤ Client sided interaction Select Statistics News Feed Imprint Header / Navigation
- 28. Angular JS components ➤Fetch data via REST- API ➤ CMS backend stays stateless. Select Statistics News Feed Imprint Header / Navigation Calls Twitter API Call Statistics API
- 29. Angular JS components ➤Angular.js as JavaScript Framework ➤ REST Services ➤ Magnolia delivers the application BROWSER REST-Services
- 30. Upsides ➤ Templates arein one place ➤ Scalability: Services are stateless. ➤ Server sided Portability: CMS uncoupled from angular application. Downsides ➤ Complexity: Two styles of markup. What is content what is data. ➤ Client sided Portablity: Components logical independent but share the same client sided libs
- 31. What am Idoing here 1. Where we come from a. Large Multi-Tier application b. CMS Based Portal 2. What we do now a. Angular JS components b. Single page applications
- 32.
- 33.
- 34. Single page application ➤Magnolia 5 is a REST- Service now ➤ Fetch page structure ➤ Page transformation with ng-route* ➤ Hierarchical structure of states ➤ Create navigation, wizard, workflow ➤ No full page refresh ➤ CMS Pages as subviews *(or ui-router)
- 35.
- 36. Single page application 1.Fetch Structure via REST-API 2. Generate model for navigation 5. fill subview 3. Trigger state change 4. Async fetch content of subview
- 37.
- 38. Characteristics ➤ Application logicin Angular JS more coupled with magnolias internal structure. ➤ Page in Magnolia might be only a part/subview of the visible view on client.
- 39.
- 40. Conclusion No WYSIWYG Complex developmentstack Templates spread accross application cms stateless
- 41. Conclusion No WYSIWYG Complex developmentstack Templates spread accross application cms stateless Editor controls whole page structure Static content and business logic mixed mess in CLASSPATH
- 42. Conclusion No WYSIWYG Complex developmentstack Templates spread accross application cms stateless Editor controls whole page structure Static content and business logic mixed cms stateless component based business logic separated from content Editor controls whole page structure mess in CLASSPATH
- 43. What is next ➤Requirement management for client libs ➤ require.js, other solutions ➤ CMS Context available in angular ➤ From ${content.title} to {{content.title}} ➤ Scalability but performance ¯(°_o)/¯
- 44. Thank you foryour attention! Questions? Contact: moritz.rebbert@agido.com http://agido.com @ztiromoritz