magnolia & angular js - an approach for javascript rias delivered by a cms

Magnolia & AngularJSJavaScript RIAs delivered by a CMS

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

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

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

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

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

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

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

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

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

CMS Based Portal

➤ Magnolia as rendering master

➤ Growing business logic

➤ Mess in CLASSPATH

Magnolia CMS

Business Logic/Servlet

External Services

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

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)

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

Angular JS components

➤ Build mobile application based on web technologies

➤ Lots of user interaction➤ Single page applications ➤ Offline mode

So what is Angular JS

DEMO

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

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

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

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

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

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

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

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

Usecase

DEMO

Angular JS components

Select

Statistics

News Feed

Imprint

Header / Navigation

➤ Components available in magnolia

➤ Same idea or buzzwords as Portles

$rootScope

Angular JS components

➤ Comunication via broadcast event

➤ Client sided interaction

Select

Statistics

News Feed

Imprint

Header / Navigation

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

Angular JS components

➤ Angular.js as JavaScript Framework➤ REST Services➤ Magnolia delivers the application

BROWSER

REST-Services

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

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

Single page application

BROWSER

REST-Services

Single page application

BROWSER

REST-ServicesREST-API

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)

Single page application

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

Again, DEMO

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.

Conclusion

Conclusion

No WYSIWYG

Complex development stack

Templates spread accross application

cms stateless

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

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

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)/¯

Thank you for your attention!

Questions?

Contact: moritz.rebbert@agido.com

http://agido.com

@ztiromoritz