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.

1. 1
A real world story of Angular and
Apache Unomi integration
shuber@jahia.com
Serge Huber, Jahia CTO
#uxdevsummit

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
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
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
Some customers that trust us
QUICK INTRODUCTIONS

6. 1
APACHE UNOMI
What is this thing ?

7. 7
1
APACHE UNOMI
In one weird sentence
A FRONT-END
FOR PERSONALIZATION
BIG DATA TECHNOLOGIES.
WITH BUILT-IN DATA PRIVACY

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
1
APACHE UNOMI
OASIS CONTEXT SERVER TC
REST API
DOMAIN MODEL
USE CASES

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
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
1
APACHE UNOMI
Scalability
CONTEXT SERVER CMS
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
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
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
1
APACHE UNOMI
Building the product
Using Angular and Apache Unomi to build the
User Experience

18. 18
1
APACHE UNOMI
Building the UI

19. 19
1
APACHE UNOMI
Audience UI

20. 20
1
APACHE UNOMI
Profile UI

21. 21
1
APACHE UNOMI
Marketing Segments UI

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
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 at other 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 write some 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 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
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
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
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. 5
NATURAL EVOLUTION
Angular 2

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
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
Sep 2014 Dec 2015 Jan 2016 Mid-2016
Angular 2 Beta 1 Angular 2 Beta 2Angular 2 Started Angular 2 Release

47. 6
THE FUTURE
Looking at the big picture

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. • 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
THE END!
See you at Jahia Experience US - April 24-27 2016
www.jahia.com
http://unomi.incubator.apache.org