The document discusses Service2Media's approach to building mobile-first applications using a hybrid HTML5 architecture with AngularJS and Cordova. It describes a customer case where they modernized the front-end to create a coherent experience across both web and mobile apps. The architecture uses shared AngularJS components and reusable code while separating app-specific functionality. Initial results showed combined teams, shared codebases, and a single content source across web and apps.

1. Solving any mobile challenge, guaranteed. | 1
Web and App with Hippo CMS and AngularJS
Hippo.Connect
Nov. 2015, Amsterdam
Peter Broekroelofs, CTO Service2Media

2. Solving any mobile challenge, guaranteed. | 2

3. Solving any mobile challenge, guaranteed. | 3
At the heart of
Service2Media
continuous delivery of
mobile engagement
on the cutting edge of
user experience, IT efficiency
and business needs

4. Solving any mobile challenge, guaranteed. | 4
App en Web convergence - technology drivers
• Single Page web application frameworks, like AngularJS
• Hybrid HMTL5 multiplatform app framework: Cordova
• Libraries for styling and (responsive) page layout

5. Solving any mobile challenge, guaranteed. | 5
Customer Case: front-end architecture modernization
From fragmentation to coherence
Business Goals:
• Mobile First coherent engagement for app and web
• Serve personal and relevant content for optimal customer dialogue
• Increase innovation pace to embrace mobile opportunities
IT Goals:
• Increase efficiency via reuse and breaking silo's
• Improve cycle times and reduce cost in front-end development
• Increase control over the app lifecycle

6. Solving any mobile challenge, guaranteed. | 6
HTML5 based front-end architecture for App & Web
HTML CSS
JavaScript
Cordova and Ionic Hippo CMS
API
App
HTML CSS
JavaScript
AngularJS
App & Web Web
• Cordova app container
• Cordova native plugins
• Ionic app specific styling
• App specific code
• Angular reusable modules
• Re-usable HTML and styling
• Re-usable business logic
• Same API for web and app
• Hippo web delivery tier
• Server side web pages
• Angular components
HTML CSS
JavaScript

7. Solving any mobile challenge, guaranteed. | 7
Personalisation
API
App Web
App distribution / control
Back-end
Client tier
Delivery tier
Services tier
Aggregation tier
Systems of
EngagementPush notifications
ab testing
Systems of
Record
User Authentication
App/web analytics
AngularJS shared code
Mobile First delivery architecture
Marketing automation

8. Solving any mobile challenge, guaranteed. | 8
Hybrid HTML app development
app ≠ web
• Implementing native like navigation and animations
• Overcoming Android browser fragmentation
• Managing Cordova plugins
• Styling on smartphone and tablet
• App building and plugin version management

9. Solving any mobile challenge, guaranteed. | 9
Example Hybrid HTML5 app

10. Solving any mobile challenge, guaranteed. | 10
Adaptive design and component reuse

11. Solving any mobile challenge, guaranteed. | 11
Web front-end architecture
Back-end API
ODS
Single Page Web
AngularJS components
Back-end
Hippo
CMS
Back-end
ODSODS
Hippo API
Web sites
Browser
Hippo
Delivery
Tier

12. Solving any mobile challenge, guaranteed. | 12
Setup AngularJS in HippoCMS
Angular modules as micro applications:
• drag-drop components in the Hippo channel manager
• injected into the controllers of the front-end application
http://www.onehippo.com/en/resources/blogs/2014/08/angular-website-development-with-hippo.html
Hippo template:
<div ng-app="showcreditModule">
<div ng-view />
</div>
<script src="angular.js"></script>
<script src="app.js"></script>

13. Solving any mobile challenge, guaranteed. | 13
Experiences with App and web convergence
• Simultaneous development of
web and app
• Separation of shared and specific code
• Web/app integration decisions
• Awareness for App delivery tooling

14. Solving any mobile challenge, guaranteed. | 14
Case: Results so far
• Combined app and web teams
• Shared UI and business logic code for app and web
• Single integrations with other tiers
• Single source for web and app content (HippoCMS)
• High developer satisfaction
On track to achieve Business and IT goals

15. Solving any mobile challenge, guaranteed. | 15
peter@service2media.com