SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
Magnolia & AngularJS
JavaScript 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 from
a. Large Multi-Tier application
b. CMS Based Portal
2. What we do now
a. Angular JS components
b. Single page applications
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
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 from
a. Large Multi-Tier application
b. CMS Based Portal
2. What we do now
a. Angular JS components
b. 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 from
a. Large Multi-Tier application
b. CMS Based Portal
2. What we do now
a. Angular JS components
b. 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 from
a. Large Multi-Tier application
b. CMS Based Portal
2. What we do now
a. Angular JS components
b. Single page applications
Single page application
BROWSER
REST-Services
Single page application
BROWSER
REST-Services
REST-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

Weitere ähnliche Inhalte

Was ist angesagt?

GR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug inGR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug in
GR8Conf
 
Using React with Grails 3
Using React with Grails 3Using React with Grails 3
Using React with Grails 3
Zachary Klein
 
Building Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOSBuilding Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOS
FITC
 

Was ist angesagt? (20)

GR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug inGR8Conf 2011: Grails, how to plug in
GR8Conf 2011: Grails, how to plug in
 
React server side rendering performance
React server side rendering performanceReact server side rendering performance
React server side rendering performance
 
Intro to VueJS Workshop
Intro to VueJS WorkshopIntro to VueJS Workshop
Intro to VueJS Workshop
 
Front end microservices - October 2019
Front end microservices - October 2019Front end microservices - October 2019
Front end microservices - October 2019
 
Web Applications with AngularJS
Web Applications with AngularJSWeb Applications with AngularJS
Web Applications with AngularJS
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
 
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin   introduction-to-reactjsMuhammad azamuddin   introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
 
Introduction to Weex: Mobile Apps with VueJS
Introduction to Weex: Mobile Apps with VueJSIntroduction to Weex: Mobile Apps with VueJS
Introduction to Weex: Mobile Apps with VueJS
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
Vue, vue router, vuex
Vue, vue router, vuexVue, vue router, vuex
Vue, vue router, vuex
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
Using React with Grails 3
Using React with Grails 3Using React with Grails 3
Using React with Grails 3
 
The Evolution of Airbnb's Frontend
The Evolution of Airbnb's FrontendThe Evolution of Airbnb's Frontend
The Evolution of Airbnb's Frontend
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular js
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
 
Spring IO '15 - Developing microservices, Spring Boot or Grails?
Spring IO '15 - Developing microservices, Spring Boot or Grails?Spring IO '15 - Developing microservices, Spring Boot or Grails?
Spring IO '15 - Developing microservices, Spring Boot or Grails?
 
Design & Development of Web Applications using SpringMVC
Design & Development of Web Applications using SpringMVC Design & Development of Web Applications using SpringMVC
Design & Development of Web Applications using SpringMVC
 
Building Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOSBuilding Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOS
 
Introduction to react js
Introduction to react jsIntroduction to react js
Introduction to react js
 

Andere mochten auch

Andere mochten auch (10)

Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)Intro to IndexedDB (Beta)
Intro to IndexedDB (Beta)
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
 
Angular2 + New Firebase in Action
Angular2 + New Firebase in ActionAngular2 + New Firebase in Action
Angular2 + New Firebase in Action
 
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great AppsAngular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
 
29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
 
Nativescript with angular 2
Nativescript with angular 2Nativescript with angular 2
Nativescript with angular 2
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
 
Advanced AngularJS Concepts
Advanced AngularJS ConceptsAdvanced AngularJS Concepts
Advanced AngularJS Concepts
 

Ähnlich wie Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS

Ramesh Babu Resume Latest
Ramesh Babu Resume LatestRamesh Babu Resume Latest
Ramesh Babu Resume Latest
Ramesh Babu
 
Resume-Amar.compressed
Resume-Amar.compressedResume-Amar.compressed
Resume-Amar.compressed
Amarjeet Kumar
 

Ähnlich wie Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS (20)

AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
 
GDG Ibadan #pwa
GDG Ibadan #pwaGDG Ibadan #pwa
GDG Ibadan #pwa
 
The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
Single page applications - TernopilJS #2
Single page applications - TernopilJS #2Single page applications - TernopilJS #2
Single page applications - TernopilJS #2
 
Struts notes
Struts notesStruts notes
Struts notes
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satya
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satya
 
Ramesh Babu Resume Latest
Ramesh Babu Resume LatestRamesh Babu Resume Latest
Ramesh Babu Resume Latest
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
How NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeHow NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscape
 
Resume-Amar.compressed
Resume-Amar.compressedResume-Amar.compressed
Resume-Amar.compressed
 
V Legakis Presentation
V Legakis PresentationV Legakis Presentation
V Legakis Presentation
 
JAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackJAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stack
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
GWT and PWA
GWT and PWAGWT and PWA
GWT and PWA
 
Vue micro frontend implementation patterns
Vue micro frontend implementation patternsVue micro frontend implementation patterns
Vue micro frontend implementation patterns
 

Mehr von Magnolia

Mehr von Magnolia (20)

The SEO Workflow
The SEO WorkflowThe SEO Workflow
The SEO Workflow
 
Magnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia 6 release walkthrough
Magnolia 6 release walkthrough
 
Buzzword bingo: The real deal behind omnichannel, personalization and headless
Buzzword bingo: The real deal behind  omnichannel, personalization and headlessBuzzword bingo: The real deal behind  omnichannel, personalization and headless
Buzzword bingo: The real deal behind omnichannel, personalization and headless
 
Developing Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficientlyDeveloping Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficiently
 
Integrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer ExperienceIntegrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer Experience
 
Customer Engagement in the Digital Era
Customer Engagement in the Digital EraCustomer Engagement in the Digital Era
Customer Engagement in the Digital Era
 
The Age of the IOT & Digital Business
The Age of the IOT & Digital BusinessThe Age of the IOT & Digital Business
The Age of the IOT & Digital Business
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
Magnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynoteMagnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynote
 
Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4
 
Launching Magnolia on demand
Launching Magnolia on demandLaunching Magnolia on demand
Launching Magnolia on demand
 
Front-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites fasterFront-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites faster
 
Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?
 
Magnolia and the IOT
Magnolia and the IOTMagnolia and the IOT
Magnolia and the IOT
 
Internationalization for globalized enterprise websites
Internationalization for globalized enterprise websitesInternationalization for globalized enterprise websites
Internationalization for globalized enterprise websites
 
The new visana website how to fit a square peg into a round hole
The new visana website   how to fit a square peg into a round holeThe new visana website   how to fit a square peg into a round hole
The new visana website how to fit a square peg into a round hole
 
Solving for complex UI designs: a front-end perspective and approach
Solving for complex UI designs: a front-end perspective and approachSolving for complex UI designs: a front-end perspective and approach
Solving for complex UI designs: a front-end perspective and approach
 
Extending Magnolia with our solutions
Extending Magnolia with our solutionsExtending Magnolia with our solutions
Extending Magnolia with our solutions
 
Boost your online e commerce with magnolia
Boost your online e commerce with magnoliaBoost your online e commerce with magnolia
Boost your online e commerce with magnolia
 
The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

The Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test AutomationThe Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test Automation
 
Sinoville Clinic ](+27832195400*)[🏥Abortion Pill Prices Sinoville ● Women's A...
Sinoville Clinic ](+27832195400*)[🏥Abortion Pill Prices Sinoville ● Women's A...Sinoville Clinic ](+27832195400*)[🏥Abortion Pill Prices Sinoville ● Women's A...
Sinoville Clinic ](+27832195400*)[🏥Abortion Pill Prices Sinoville ● Women's A...
 
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
 
Evolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI EraEvolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI Era
 
^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto
^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto
^Clinic ^%[+27788225528*Abortion Pills For Sale In soweto
 
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdf
 
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
 
BusinessGPT - Security and Governance for Generative AI
BusinessGPT  - Security and Governance for Generative AIBusinessGPT  - Security and Governance for Generative AI
BusinessGPT - Security and Governance for Generative AI
 
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-CloudAlluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
 
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
 
Transformer Neural Network Use Cases with Links
Transformer Neural Network Use Cases with LinksTransformer Neural Network Use Cases with Links
Transformer Neural Network Use Cases with Links
 
Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?
 
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdf
 
Effective Strategies for Wix's Scaling challenges - GeeCon
Effective Strategies for Wix's Scaling challenges - GeeConEffective Strategies for Wix's Scaling challenges - GeeCon
Effective Strategies for Wix's Scaling challenges - GeeCon
 
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea Goulet
 
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
 

Magnolia & Angular JS - an Approach for Javascript RIAs Delivered by a CMS

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