Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
A real world story of Angular and
Apache Unomi integration
shuber@jahia.com
Serge Huber, Jahia CTO
#uxdevsummit
2
Quick ego boosting
QUICK INTRODUCTIONS
Co-founder & CTO
of Jahia
17 years Web Dev
experience
Apache
committer Coder at h...
3
A proud father
QUICK INTRODUCTIONS
Jahia puts the customer at the heart of each enterprise’s digital success. Jahia enab...
4
All about the UX
QUICK INTRODUCTIONS
Pioneered on the page content editing (in 1999!)
Mobile compatible since the days o...
5
Some customers that trust us
QUICK INTRODUCTIONS
1
APACHE UNOMI
What is this thing ?
7
1
APACHE UNOMI
In one weird sentence
A FRONT-END
FOR PERSONALIZATION
BIG DATA TECHNOLOGIES.
WITH BUILT-IN DATA PRIVACY
8
1
APACHE UNOMI
Aka lots of meetings
DATA
PRIVACY
The Context Server
Standard
Apache Unomi
Reference Implementation
Two t...
9
1
APACHE UNOMI
OASIS CONTEXT SERVER TC
REST API
DOMAIN MODEL
USE CASES
10
1
APACHE UNOMI
The Big Picture
+
UNOMI CORE

CXSID directory
Segmentation Engine
Events
Tracking Engine
RESTFUL API
+
D...
11
1
APACHE UNOMI
Functionalities
UNOMI
User tracking
Event tracking
Goal tracking, scoring Segmentation Form
Input
tracki...
12
1
APACHE UNOMI
Scalability
CONTEXT SERVER CMS
Issue
trackingCRMSocial
BIG DATA
SYSTEMS
13
1
APACHE UNOMI
Input / Output
RULES
ACTIONS
Protocols

HTTP REST +
JSON
SEGMENTS
EVENTS
CONTEXT
CONDITIONS
PROFILES
CON...
14
1
APACHE UNOMI
Context Example
digitalData = {
"loaded": true,
"user": [{
"profiles": [{
"profileInfo": {
"profileId": ...
15
1
APACHE UNOMI
Request Flow
Load HTML page
Load HTML + JS
to connect Context Server
Load context.js
Context for current...
16
1
APACHE UNOMI
Example use cases
Use case 1
You have an existing website and you want to track users and personalize th...
17
1
APACHE UNOMI
Building the product
Using Angular and Apache Unomi to build the
User Experience
18
1
APACHE UNOMI
Building the UI
19
1
APACHE UNOMI
Audience UI
20
1
APACHE UNOMI
Profile UI
21
1
APACHE UNOMI
Marketing Segments UI
22
1
APACHE UNOMI
Integration architecture
Digital Experience Manager
Marketing Factory UI
Apache Unomi
Live Content Pages...
23
1
APACHE UNOMI
Integration architecture, continued
GWT / Sencha GXT UI Framework
DX Module running in IFrame
2
TRY 1
JQuery + Spring MVC + JSP
25
2
TRY 1 : JQUERY + SPRING MVC + JSP
Why ?
Pros
• Because a lot of the existing UI was already built this way
• No surpr...
3
TRY 2
Look at other stuff (Ember, Angular)
27
3
TRY 2 : EVALUATING ALTERNATIVES
“The problem is choice” - Neo, The Matrix
Source : brewhouse.io
28
3
TRY 2 : EVALUATING ALTERNATIVES
Objectives
COMMUNITY
MATURITY
DEV
SPEED
FUTURE
PROOF
BROWSER
SUPPORT
OBJECTIVES
29
3
TRY 2 : EVALUATING ALTERNATIVES
Ember.js
Pros
• Very mature
• Interesting component model
Cons
• More code needed tha...
30
3
TRY 2 : EVALUATING ALTERNATIVES
Why not ReactJS ?
Pros
• Interesting Virtual DOM concept
• Server-side rendering can ...
31
3
TRY 2 : EVALUATING ALTERNATIVES
RiotJS
Pros
• Looks like a “cleaner” version of ReactJS
• Much smaller
Cons
• Small c...
32
3
TRY 2 : EVALUATING ALTERNATIVES
Aurelia
Pros
• From the maker of Durandal
• Founder worked for a while to help with A...
4
USING ANGULAR
Let’s write some code
34
4
USING ANGULAR
Step 1 : POC
• Quick POC was developed to test the framework integration
• Had to integrate with existi...
35
4
USING ANGULAR
First difficulty : Rules UI
Recursive conditions
Drag & drop of conditions and actions
36
4
USING ANGULAR
Condition Tree
And (condition)
Or (condition)
Age < 18 (condition) Age > 65 (condition)
Interested in m...
37
4
USING ANGULAR
Condition Tree, continued
Difficulty : recursion didn’t work at the time by default with Angular
Requir...
38
#
APACHE UNOMI
Condition Tree Recursion Helper
module.factory('RecursionHelper',	['$compile',	function($compile){	
				...
39
4
USING ANGULAR
Integrating with DX security
Problem :
- AJAX calls to Apache Unomi Administration API must be controll...
40
4
USING ANGULAR
Unlearn jQuery
jQuery Angular
Source of DOM changes DOM Manipulation
Javascript Objects
modifications
R...
41
4
USING ANGULAR
Implementation pitfalls
• Existing Angular Components (such as Material Design) were discovered late,
r...
5
NATURAL EVOLUTION
Angular 2
43
5
ANGULAR 2
Angular migration path
Angular project news:
• We're enabling mixing of Angular 1 and Angular 2 in the same...
44
5
ANGULAR 2
Migration path, continued
1. Include the Angular 2 and ng-upgrade libraries with your existing application
...
45
5
ANGULAR 2
Component Tree
Source: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0
import	{C...
46
5
ANGULAR 2
Planned roadmap
Sep 2014 Dec 2015 Jan 2016 Mid-2016
Angular 2 Beta 1 Angular 2 Beta 2Angular 2 Started Angu...
6
THE FUTURE
Looking at the big picture
Pros
• Based on W3C standards
• Browser-based, can integrate with any JS framework
• Native integration with Angular 2
• E...
• Lots of interesting frameworks out there
• Angular has a large community
• Angular 2 improvements are a very good thing
...
50
THE END!
See you at Jahia Experience US - April 24-27 2016
www.jahia.com
http://unomi.incubator.apache.org
Upcoming SlideShare
Loading in …5
×

UXDev Summit Keynote : A real world story of Angular and Apache Unomi integration

1,324 views

Published on

In this presentation I talk about how we used Angular and Apache Unomi to build our Marketing Factory product. I talk about the process, best practices and lessons learned while selecting and then integration both technologies to deliver our new platform in record time.

Published in: Software
  • Be the first to comment

UXDev Summit Keynote : A real world story of Angular and Apache Unomi integration

  1. 1. 1 A real world story of Angular and Apache Unomi integration shuber@jahia.com Serge Huber, Jahia CTO #uxdevsummit
  2. 2. 2 Quick ego boosting QUICK INTRODUCTIONS Co-founder & CTO of Jahia 17 years Web Dev experience Apache committer Coder at heart (since I’m 7) Very interested in UX Had fear of flying & flew in from Switzerland have way too many Apple products Mobile App with over 1.2 million downloads
  3. 3. 3 A proud father QUICK INTRODUCTIONS Jahia puts the customer at the heart of each enterprise’s digital success. Jahia enables CMOs and CIOs to become digital leaders in their industry through 1:1 customer relationships powered by digital innovation, digital trust and a customer-centric digital workforce. Digital Experience Manager Marketing Factory Form Factory Workspace Factory Portal Factory Apache Unomi Jahia Studio Private/Public App Stores
  4. 4. 4 All about the UX QUICK INTRODUCTIONS Pioneered on the page content editing (in 1999!) Mobile compatible since the days of WAP! only (to our knowledge) solution with an integrated Jahia Studio module builder focusing on the user experience, for ALL users (not just end-users)
  5. 5. 5 Some customers that trust us QUICK INTRODUCTIONS
  6. 6. 1 APACHE UNOMI What is this thing ?
  7. 7. 7 1 APACHE UNOMI In one weird sentence A FRONT-END FOR PERSONALIZATION BIG DATA TECHNOLOGIES. WITH BUILT-IN DATA PRIVACY
  8. 8. 8 1 APACHE UNOMI Aka lots of meetings DATA PRIVACY The Context Server Standard Apache Unomi Reference Implementation Two trusted, solid and recognized communities
  9. 9. 9 1 APACHE UNOMI OASIS CONTEXT SERVER TC REST API DOMAIN MODEL USE CASES
  10. 10. 10 1 APACHE UNOMI The Big Picture + UNOMI CORE
 CXSID directory Segmentation Engine Events Tracking Engine RESTFUL API + DATA BACK-END FRONT-END + Apache BI SALES REPORT ANALYTICS CRM ID MA …
  11. 11. 11 1 APACHE UNOMI Functionalities UNOMI User tracking Event tracking Goal tracking, scoring Segmentation Form Input tracking Download tracking Impersonification (personas) A/B testing Profile (visitor,contact,leads) management and export Reporting Privacy management
  12. 12. 12 1 APACHE UNOMI Scalability CONTEXT SERVER CMS Issue trackingCRMSocial BIG DATA SYSTEMS
  13. 13. 13 1 APACHE UNOMI Input / Output RULES ACTIONS Protocols
 HTTP REST + JSON SEGMENTS EVENTS CONTEXT CONDITIONS PROFILES CONTEXT SERVER BIG DATA FRAMEWORKS
  14. 14. 14 1 APACHE UNOMI Context Example digitalData = { "loaded": true, "user": [{ "profiles": [{ "profileInfo": { "profileId": "d6454520-f2b6-40b7-829c- d17214f209d1”, "firstName": "Serge", "lastName": "Huber”, "userName": "Serge Huber", "email": "bhillou@yahoo.com", "gender": "male”, "itemClass": "org.oasis_open.context.server.api.User", "segments": ["alwaysTrue", "maleGender"] } }] }]};
  15. 15. 15 1 APACHE UNOMI Request Flow Load HTML page Load HTML + JS to connect Context Server Load context.js Context for current request (Optional) Load content based on context (Optional) Send event such as login / hover BROWSER CMS CONTEXT SERVER JS callbacks
  16. 16. 16 1 APACHE UNOMI Example use cases Use case 1 You have an existing website and you want to track users and personalize their experience • Use Apache Unomi as the context server to track and retrieve segments or profiles to personalize content Use case 2 You have a native mobile application and would like to track users and personalize the UI based on their behaviors • Send event data to Apache Unomi using the REST API and retrieve the context information to personalize the experience
  17. 17. 17 1 APACHE UNOMI Building the product Using Angular and Apache Unomi to build the User Experience
  18. 18. 18 1 APACHE UNOMI Building the UI
  19. 19. 19 1 APACHE UNOMI Audience UI
  20. 20. 20 1 APACHE UNOMI Profile UI
  21. 21. 21 1 APACHE UNOMI Marketing Segments UI
  22. 22. 22 1 APACHE UNOMI Integration architecture Digital Experience Manager Marketing Factory UI Apache Unomi Live Content Pages Public endpoint (8181) Admin endpoint (9443)
  23. 23. 23 1 APACHE UNOMI Integration architecture, continued GWT / Sencha GXT UI Framework DX Module running in IFrame
  24. 24. 2 TRY 1 JQuery + Spring MVC + JSP
  25. 25. 25 2 TRY 1 : JQUERY + SPRING MVC + JSP Why ? Pros • Because a lot of the existing UI was already built this way • No surprises : this way of implementing things is well known Cons • Requires most of the interface with Apache Unomi to happen on the DX server (because all rendering is done server-side) • Requires setting up multiple frameworks • Development velocity is slow because a lot of wiring code is needed First POC was abandoned because productivity was too low
  26. 26. 3 TRY 2 Look at other stuff (Ember, Angular)
  27. 27. 27 3 TRY 2 : EVALUATING ALTERNATIVES “The problem is choice” - Neo, The Matrix Source : brewhouse.io
  28. 28. 28 3 TRY 2 : EVALUATING ALTERNATIVES Objectives COMMUNITY MATURITY DEV SPEED FUTURE PROOF BROWSER SUPPORT OBJECTIVES
  29. 29. 29 3 TRY 2 : EVALUATING ALTERNATIVES Ember.js Pros • Very mature • Interesting component model Cons • More code needed than other (more recent) frameworks • Small community when compared to others • Data binding mechanism (at the time) less powerful • Productivity ok, but not great
  30. 30. 30 3 TRY 2 : EVALUATING ALTERNATIVES Why not ReactJS ? Pros • Interesting Virtual DOM concept • Server-side rendering can be very useful • Interesting component model Cons • At the time of choice very new (no security on maturity, and Facebook is no guarantee, see what happened to Parse !) • Still a rapidly changing platform • Mixing code and templating feels wrong (remember JSP script lets ?) • JSX was (at the time) very poorly documented and difficult to learn • Binding mechanisms quite low level
  31. 31. 31 3 TRY 2 : EVALUATING ALTERNATIVES RiotJS Pros • Looks like a “cleaner” version of ReactJS • Much smaller Cons • Small community • Just a view framework (could be seen as an advantage in other cases)
  32. 32. 32 3 TRY 2 : EVALUATING ALTERNATIVES Aurelia Pros • From the maker of Durandal • Founder worked for a while to help with Angular 2 • Definitely a project to watch Cons • Very young, not yet production ready • Small community
  33. 33. 4 USING ANGULAR Let’s write some code
  34. 34. 34 4 USING ANGULAR Step 1 : POC • Quick POC was developed to test the framework integration • Had to integrate with existing administration UI (be deployed as a DX module) • Performed direct REST calls to Apache Unomi, even for admin APIs Browser Apache UnomiDX Angular UI
  35. 35. 35 4 USING ANGULAR First difficulty : Rules UI Recursive conditions Drag & drop of conditions and actions
  36. 36. 36 4 USING ANGULAR Condition Tree And (condition) Or (condition) Age < 18 (condition) Age > 65 (condition) Interested in movies (condition) • Conditions should be Angular Components • Conditions can have sub-types (and, or, interest, profile property matching) • Rendering of conditions is dynamic and recursive ! Example : match all minors or seniors interested in movies
  37. 37. 37 4 USING ANGULAR Condition Tree, continued Difficulty : recursion didn’t work at the time by default with Angular Required hack found on Stack Overflow (http://stackoverflow.com/questions/ 14430655/recursion-in-angular-directives) module.directive("tree", ["RecursionHelper", function(RecursionHelper) { return { restrict: "E", scope: {family: '='}, template: '<p>{{ family.name }}</p>'+ '<ul>' + '<li ng-repeat="child in family.children">' + '<tree family="child"></tree>' + '</li>' + '</ul>', compile: function(element) { // Use the compile function from the RecursionHelper, // And return the linking function(s) which it returns return RecursionHelper.compile(element); } }; }]);
  38. 38. 38 # APACHE UNOMI Condition Tree Recursion Helper module.factory('RecursionHelper', ['$compile', function($compile){ return { /** * Manually compiles the element, fixing the recursion loop. * @param element * @param [link] A post-link function, or an object with function(s) registered via pre and post properties. * @returns An object containing the linking functions. */ compile: function(element, link){ // Normalize the link parameter if(angular.isFunction(link)){ link = { post: link }; } // Break the recursion loop by removing the contents var contents = element.contents().remove(); var compiledContents; return { pre: (link && link.pre) ? link.pre : null, /** * Compiles and re-adds the contents */ post: function(scope, element){ // Compile the contents if(!compiledContents){ compiledContents = $compile(contents); } // Re-add the compiled contents to the element compiledContents(scope, function(clone){ element.append(clone); }); // Call the post-linking function, if any if(link && link.post){ link.post.apply(null, arguments); } } }; } }; }]);
  39. 39. 39 4 USING ANGULAR Integrating with DX security Problem : - AJAX calls to Apache Unomi Administration API must be controlled by DX’s permissions Solution: - Proxy servlet controls access to Apache Unomi’s Admin REST API Browser Apache Unomi DX Proxy ServletAngular UI Admin API
  40. 40. 40 4 USING ANGULAR Unlearn jQuery jQuery Angular Source of DOM changes DOM Manipulation Javascript Objects modifications Reusing logic jQuery Plugins Angular directives Data binding No Yes Scopes No Yes
  41. 41. 41 4 USING ANGULAR Implementation pitfalls • Existing Angular Components (such as Material Design) were discovered late, reinvented the wheel • Properly learning how to leverage directives takes time, learning curve • Building dynamic UIs is always harder than implementing a static design • Dependency Injection is both a blessing and a curse (can be complex to understand and master) • High loading times because Angular 1 is not very modular
  42. 42. 5 NATURAL EVOLUTION Angular 2
  43. 43. 43 5 ANGULAR 2 Angular migration path Angular project news: • We're enabling mixing of Angular 1 and Angular 2 in the same application. • You can mix Angular 1 and Angular 2 components in the same view. • Angular 1 and Angular 2 can inject services across frameworks. • Data binding works across frameworks.
  44. 44. 44 5 ANGULAR 2 Migration path, continued 1. Include the Angular 2 and ng-upgrade libraries with your existing application 2. Pick a component which you would like to migrate A. Edit an Angular 1 directive's template to conform to Angular 2 syntax B. Convert the directive's controller/linking function into Angular 2 syntax/semantics C. Use ng-upgrade to export the directive (now a Component) as an Angular 1 component (this is needed if you wish to call the new Angular 2 component from an Angular 1 template) 3. Pick a service which you would would like to migrate A. Most services should require minimal to no change. B. Configure the service in Angular 2 C. (optionally) re-export the service into Angular 1 using ng-upgrade if it's still used by other parts of your Angular 1 code. 4. Repeat doing step #2 and #3 in an order convenient for your application developmen 5. Once no more services/components need to be converted drop the top level Angular 1 bootstrap and replace with Angular 2 bootstrap.
  45. 45. 45 5 ANGULAR 2 Component Tree Source: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0 import {Component, Input} from 'angular2/core'; import {Directory} from './directory'; @Component({ selector: 'tree-view', templateUrl: './components/tree-view/tree-view.html', directives: [TreeView] }) export class TreeView { @Input() directories: Array<Directory>; } <ul> <li *ngFor="#dir of directories"> <span><input type="checkbox" [checked]="dir.checked" (click)="dir.check()" /></span> <span (click)="dir.toggle()">{{ dir.name }}</span> <div *ngIf="dir.expanded"> <ul > <li *ngFor="#file of dir.files">{{file}}</li> </ul> <tree-view [directories]="dir.directories"></tree-view> </div> </li> </ul>
  46. 46. 46 5 ANGULAR 2 Planned roadmap Sep 2014 Dec 2015 Jan 2016 Mid-2016 Angular 2 Beta 1 Angular 2 Beta 2Angular 2 Started Angular 2 Release
  47. 47. 6 THE FUTURE Looking at the big picture
  48. 48. Pros • Based on W3C standards • Browser-based, can integrate with any JS framework • Native integration with Angular 2 • Existing implementations (Polymer, X-Tags) • Promotes reusability of components, as well as intra-component communication Cons • Limited browser support (especially Polymer) • Some standards not fully finalized 48 6 THE FUTURE WEB COMPONENTS
  49. 49. • Lots of interesting frameworks out there • Angular has a large community • Angular 2 improvements are a very good thing • Migration path now (finally) available • Web components are very interesting • Web components API not yet available on all browsers (Microsoft again :( ) • Choosing the right framework can really improve velocity • Frameworks that promote reusability of components are a good choice • Don’t forget mobile platforms • Don’t forget SEO (which usually require either server-side rendering or other tricks) 49 6 THE FUTURE Conclusions
  50. 50. 50 THE END! See you at Jahia Experience US - April 24-27 2016 www.jahia.com http://unomi.incubator.apache.org

×