magnolia & angular js - an approach for javascript rias delivered by a cms
DESCRIPTION
When the technology stack of a content and logic driven web application gets defined, there is often the question if it should be build on an open source content management system like Magnolia or if it should be a standalone app which might include several pages from a CMS. Agido's Moritz Rebbert will show an approach where the web application is based on and delivered by the CMS but it's logic is completely separated within REST based services and AngularJS based client side code.TRANSCRIPT
![Page 1: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/1.jpg)
Magnolia & AngularJSJavaScript RIAs delivered by a CMS
![Page 2: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/2.jpg)
Who am I
➤ Moritz Rebbert, [email protected]➤ 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
![Page 3: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/3.jpg)
What am I doing here
1. Where we come froma. Large Multi-Tier applicationb. CMS Based Portal
2. What we do nowa. Angular JS componentsb. Single page applications
![Page 4: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/4.jpg)
What am I doing here
1. Where we come froma. Large Multi-Tier applicationb. CMS Based Portal
2. What we do nowa. Angular JS componentsb. Single page applications
![Page 5: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/5.jpg)
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
![Page 6: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/6.jpg)
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
![Page 7: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/7.jpg)
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
![Page 8: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/8.jpg)
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
![Page 9: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/9.jpg)
What am I doing here
1. Where we come froma. Large Multi-Tier applicationb. CMS Based Portal
2. What we do nowa. Angular JS componentsb. Single page applications
![Page 10: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/10.jpg)
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
![Page 11: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/11.jpg)
CMS Based Portal
➤ Magnolia as rendering master
➤ Growing business logic
➤ Mess in CLASSPATH
Magnolia CMS
Business Logic/Servlet
External Services
![Page 12: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/12.jpg)
What we have learned
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
![Page 13: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/13.jpg)
What we have learned
➤ 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)
![Page 14: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/14.jpg)
What am I doing here
1. Where we come froma. Large Multi-Tier applicationb. CMS Based Portal
2. What we do nowa. Angular JS componentsb. Single page applications
![Page 15: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/15.jpg)
Angular JS components
➤ Build mobile application based on web technologies
➤ Lots of user interaction➤ Single page applications ➤ Offline mode
![Page 17: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/17.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;};
➤ Plain HTML5 enriched with custom attributes and tags
![Page 18: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/18.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
![Page 19: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/19.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
![Page 20: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/20.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
![Page 21: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/21.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 id=”info”>This is very static
</div>
</div>
➤ Easy to combine with non-active components
![Page 22: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/22.jpg)
Angular JS components
<div data-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
![Page 23: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/23.jpg)
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
![Page 24: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/24.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
![Page 25: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/25.jpg)
Usecase
DEMO
![Page 26: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/26.jpg)
Angular JS components
Select
Statistics
News Feed
Imprint
Header / Navigation
➤ Components available in magnolia
➤ Same idea or buzzwords as Portles
![Page 27: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/27.jpg)
$rootScope
Angular JS components
➤ Comunication via broadcast event
➤ Client sided interaction
Select
Statistics
News Feed
Imprint
Header / Navigation
![Page 28: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/28.jpg)
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
![Page 29: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/29.jpg)
Angular JS components
➤ Angular.js as JavaScript Framework➤ REST Services➤ Magnolia delivers the application
BROWSER
REST-Services
![Page 30: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/30.jpg)
Upsides
➤ Templates are in 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
![Page 31: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/31.jpg)
What am I doing here
1. Where we come froma. Large Multi-Tier applicationb. CMS Based Portal
2. What we do nowa. Angular JS componentsb. Single page applications
![Page 32: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/32.jpg)
Single page application
BROWSER
REST-Services
![Page 33: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/33.jpg)
Single page application
BROWSER
REST-ServicesREST-API
![Page 34: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/34.jpg)
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)
![Page 35: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/35.jpg)
Single page application
![Page 36: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/36.jpg)
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
![Page 37: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/37.jpg)
Again, DEMO
![Page 38: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/38.jpg)
Characteristics
➤ Application logic in Angular JS more coupled with magnolias internal structure.
➤ Page in Magnolia might be only a part/subview of the visible view on client.
![Page 39: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/39.jpg)
Conclusion
![Page 40: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/40.jpg)
Conclusion
No WYSIWYG
Complex development stack
Templates spread accross application
cms stateless
![Page 41: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/41.jpg)
Conclusion
No WYSIWYG
Complex development stack
Templates spread accross application
cms stateless
Editor controls whole page structure
Static content and business logic mixed
mess in CLASSPATH
![Page 42: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/42.jpg)
Conclusion
No WYSIWYG
Complex development stack
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
![Page 43: Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS](https://reader033.vdocument.in/reader033/viewer/2022060108/554f51bdb4c905b9508b4dfd/html5/thumbnails/43.jpg)
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)/¯