Download as PDF, PPTX
![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"]
}
}]
}]};](https://image.slidesharecdn.com/angularandapacheunomi-160205152845/75/UXDev-Summit-Keynote-A-real-world-story-of-Angular-and-Apache-Unomi-integration-14-2048.jpg)
![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);
}
};
}]);](https://image.slidesharecdn.com/angularandapacheunomi-160205152845/75/UXDev-Summit-Keynote-A-real-world-story-of-Angular-and-Apache-Unomi-integration-37-2048.jpg)
![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);
}
}
};
}
};
}]);](https://image.slidesharecdn.com/angularandapacheunomi-160205152845/75/UXDev-Summit-Keynote-A-real-world-story-of-Angular-and-Apache-Unomi-integration-38-2048.jpg)
![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>](https://image.slidesharecdn.com/angularandapacheunomi-160205152845/75/UXDev-Summit-Keynote-A-real-world-story-of-Angular-and-Apache-Unomi-integration-45-2048.jpg)
Uploaded bySerge Huber
UXDev Summit Keynote : A real world story of Angular and Apache Unomi integration
The document details the integration of Apache Unomi with Angular to enhance user experience and personalization in digital platforms. It discusses Apache Unomi's functionalities, including user tracking and privacy management, as well as the challenges and advantages of using Angular compared to other frameworks. Additionally, it outlines the planned migration to Angular 2 and emphasizes the importance of web components and cross-framework compatibility.
In this document
Powered by AI
Introduction to the speaker's background and Jahia's focus on customer-centric digital success.
Overview of Apache Unomi as a personalization front-end, big data technologies, and its functionalities including data privacy and tracking.
Explains how Apache Unomi integrates with existing systems and use cases for user tracking and personalization.
Discussion of building the user experience using Angular in conjunction with Apache Unomi, exploring the integration architecture.
Analyzes different frameworks considered before settling on Angular for the project, discussing their pros and cons.
Describes the practical implementation process of Angular in the project, addressing challenges and necessary adjustments.
Details the migration path from Angular 1 to Angular 2, including benefits and plans for future development.
Looks ahead to the future of web components, Angular's community, and concluding thoughts on development choices.
More Related Content
![[DRUPALCON 2022] Open Personalization with Apache Unomi & Mautic (Workshop).pdf](https://cdn.slidesharecdn.com/ss_thumbnails/drupalcon2022openpersonalizationwithapacheunomimauticworkshop-230513211401-0e4b51e1-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to UXDev Summit Keynote : A real world story of Angular and Apache Unomi integration
UXDev Summit Keynote : A real world story of Angular and Apache Unomi integration
- 1. 1 A real worldstory of Angular and Apache Unomi integration shuber@jahia.com Serge Huber, Jahia CTO #uxdevsummit
- 2. 2 Quick ego boosting QUICKINTRODUCTIONS 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 A proud father QUICKINTRODUCTIONS 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 All about theUX 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 Some customers thattrust us QUICK INTRODUCTIONS
- 6. 1 APACHE UNOMI What isthis thing ?
- 7. 7 1 APACHE UNOMI In oneweird sentence A FRONT-END FOR PERSONALIZATION BIG DATA TECHNOLOGIES. WITH BUILT-IN DATA PRIVACY
- 8. 8 1 APACHE UNOMI Aka lotsof meetings DATA PRIVACY The Context Server Standard Apache Unomi Reference Implementation Two trusted, solid and recognized communities
- 9. 9 1 APACHE UNOMI OASIS CONTEXTSERVER TC REST API DOMAIN MODEL USE CASES
- 10. 10 1 APACHE UNOMI The BigPicture + 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 1 APACHE UNOMI Functionalities UNOMI User tracking Eventtracking 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 1 APACHE UNOMI Scalability CONTEXT SERVERCMS Issue trackingCRMSocial BIG DATA SYSTEMS
- 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 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 1 APACHE UNOMI Request Flow LoadHTML 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 1 APACHE UNOMI Example usecases 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 1 APACHE UNOMI Building theproduct Using Angular and Apache Unomi to build the User Experience
- 18.
- 19.
- 20.
- 21.
- 22. 22 1 APACHE UNOMI Integration architecture DigitalExperience Manager Marketing Factory UI Apache Unomi Live Content Pages Public endpoint (8181) Admin endpoint (9443)
- 23. 23 1 APACHE UNOMI Integration architecture,continued GWT / Sencha GXT UI Framework DX Module running in IFrame
- 24. 2 TRY 1 JQuery +Spring MVC + JSP
- 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. 3 TRY 2 Look atother stuff (Ember, Angular)
- 27. 27 3 TRY 2 :EVALUATING ALTERNATIVES “The problem is choice” - Neo, The Matrix Source : brewhouse.io
- 28. 28 3 TRY 2 :EVALUATING ALTERNATIVES Objectives COMMUNITY MATURITY DEV SPEED FUTURE PROOF BROWSER SUPPORT OBJECTIVES
- 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 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 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 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. 4 USING ANGULAR Let’s writesome code
- 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 4 USING ANGULAR First difficulty: Rules UI Recursive conditions Drag & drop of conditions and actions
- 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 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 # APACHE UNOMI Condition TreeRecursion 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 4 USING ANGULAR Integrating withDX 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 4 USING ANGULAR Unlearn jQuery jQueryAngular Source of DOM changes DOM Manipulation Javascript Objects modifications Reusing logic jQuery Plugins Angular directives Data binding No Yes Scopes No Yes
- 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.
- 43. 43 5 ANGULAR 2 Angular migrationpath 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 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 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 5 ANGULAR 2 Planned roadmap Sep2014 Dec 2015 Jan 2016 Mid-2016 Angular 2 Beta 1 Angular 2 Beta 2Angular 2 Started Angular 2 Release
- 47. 6 THE FUTURE Looking atthe big picture
- 48. Pros • Based onW3C 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. • Lots ofinteresting 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 THE END! See youat Jahia Experience US - April 24-27 2016 www.jahia.com http://unomi.incubator.apache.org