Tarek Elachkar, VP Customer Solutions - Jahia telachkar@jahia.com A real world story of Angular and Apache Unomi integration #ApacheCon 1
QUICK INTRODUCTIONS Me, myself and I
QUICK INTRODUCTIONS Our software 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. Private/Public App Stores Form Factory Jahia Studio Workspace Factory Portal Factory Marketing Factory Digital Experience Manager Apache Unomi 3
QUICK INTRODUCTIONS All about the UX Pioneered in-context content editing Rely on our Jahia Studio module builder Optimize the user experience, for ALL users (not just end-users) 4
QUICK INTRODUCTIONS Some customers that trust us 5
1 APACHE UNOMI What is this thing?
1 APACHE UNOMI In a nutshell A FRONT-END FOR PERSONALIZATION BIG DATA TECHNOLOGIES. WITH BUILT-IN DATA PRIVACY 7
1 APACHE UNOMI A 2 part project The Context Server Standard DATA PRIVACY Apache Unomi Reference Implementation Two trusted, solid and recognized communities 8
1 APACHE UNOMI OASIS CONTEXT SERVER TC USE CASES DOMAIN MODEL REST API 9
1 APACHE UNOMI The Big Picture REPORT RESTFUL API BACK-END BI ID MA CRM SALES Events + Tracking Engine + ID directory + Segmentation Engine Apache UNOMI CORE CXS FRONT-END ANALYTICS DATA 10
1 APACHE UNOMI Functionalities User tracking Privacy management Reporting Profile (visitor,contact,leads) management and export Event tracking UNOMI A/B testing Goal tracking, scoring Segmentation Form Input tracking Download tracking Impersonification (personas) 11
1 APACHE UNOMI Scalability CONTEXT SERVER DXM BIG DATA SYSTEMS Social CRM Issue tracking 12
1 APACHE UNOMI Input / Output CONTEXT SERVER EVENTS RULES SEGMENTS PROFILES CONTEXT ACTIONS CONDITIONS BIG DATA FRAMEWORKS Protocols HTTP REST + JSON 13
1 APACHE UNOMI Context Example digitaldata = { "loaded": true, "user": [{ "profiles": [{ "profileinfo": { "profileid": "d6454520-f2b6-40b7-829cd17214f209d1, "firstname": "Mick", "lastname": "Jagger", "username": "mickjag", "email": "mickj43@hotmail.com", "gender": "male", "itemclass": "org.oasis_open.context.server.api.user", "segments": ["alwaystrue", "malegender"] } }] }]}; 14
1 APACHE UNOMI Request Flow BROWSER DXM CONTEXT SERVER Load HTML page Load HTML + JS to connect Context Server Load context.js JS callbacks Context for current request (Optional) Load content based on context (Optional) Send event such as login / hover 15
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 16
1 APACHE UNOMI Building the product Using Angular and Apache Unomi to build the User Experience 17
1 APACHE UNOMI Building the UI 18
1 APACHE UNOMI Audience UI 19
1 APACHE UNOMI Profile UI 20
1 APACHE UNOMI Marketing Segments UI 21
1 APACHE UNOMI Integration architecture Digital Experience Manager Marketing Factory UI Admin endpoint (9443) Apache Unomi Live Content Pages Public endpoint (8181) 22
1 APACHE UNOMI Integration architecture, continued GWT / Sencha GXT UI Framework DX Module running in IFrame 23
2 TRY 1 JQuery + Spring MVC + JSP
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 25
3 TRY 2 Look at other stuff (Ember, Angular)
3 TRY 2 : EVALUATING ALTERNATIVES The problem is choice - Neo, The Matrix Source : brewhouse.io 27
3 TRY 2 : EVALUATING ALTERNATIVES Objectives MATURITY COMMUNITY DEV SPEED OBJECTIVES BROWSER SUPPORT FUTURE PROOF 28
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 29
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 scriptlets?) JSX was (at the time) very poorly documented and difficult to learn Binding mechanisms quite low level 30
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) 31
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 32
4 USING ANGULAR Let s write some code
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 DX Angular UI Apache Unomi 34
4 USING ANGULAR First difficulty : Rules UI Recursive conditions Drag & drop of conditions and actions 35
4 USING ANGULAR Condition Tree Example : match all minors or seniors interested in movies And (condition) Or (condition) Interested in movies (condition) Age < 18 (condition) Age > 65 (condition) Conditions should be Angular Components Conditions can have sub-types (and, or, interest, profile property matching) Rendering of conditions is dynamic and recursive! 36
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); } }; }]); 37
4 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); } 38
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 DX Angular UI Proxy Servlet Admin API Apache Unomi 39
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 40
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 41
5 NATURAL EVOLUTION Angular 2
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. 43
5 ANGULAR 2 Component Tree 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 (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> /></span> Source: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0 44
5 ANGULAR 2 Planned roadmap Sep 2014 Dec 2015 Jan 2016 May-2016 Angular 2 Started Angular 2 Beta 1 Angular 2 Beta 2 Angular 2 RC 45
6 THE FUTURE Looking at the big picture
6 THE FUTURE WEB COMPONENTS 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 47
6 THE FUTURE Conclusions 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 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) 48
THE END! See you at Jahia Experience US - April 24-27 2016 www.jahia.com http://unomi.incubator.apache.org 49