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.

1. Magnolia & AngularJS
JavaScript RIAs 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 I doing 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 I doing 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 I doing 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 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

13. 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)

14. What am I doing 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 is Angular JS
DEMO

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

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:
<!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

25. Usecase
DEMO

26. Angular JS components
Select
Statistics
News Feed
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 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

31. What am I doing 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. Single page application
BROWSER
REST-Services

33. Single page application
BROWSER
REST-Services
REST-API

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. Single page application

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. Again, DEMO

38. 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.

39. Conclusion

40. Conclusion
No WYSIWYG
Complex development stack
Templates spread
accross application
cms stateless

41. 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

42. 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

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 for your attention!
Questions?
Contact: moritz.rebbert@agido.com
http://agido.com
@ztiromoritz