app and web with hippo cms and angularjs

Solving any mobile challenge, guaranteed. | 1

Web and App with Hippo CMS and AngularJS

Hippo.ConnectNov. 2015, Amsterdam

Peter Broekroelofs, CTO Service2Media


At the heart of Service2Media

continuous delivery of

mobile engagement

on the cutting edge of

user experience, IT efficiencyand business needs


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


Customer Case: front-end architecture modernizationFrom 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


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


Personalisation

API

App Web

App distribution / control

Back-end

Client tier

Delivery tier

Services tier

Aggregation tier

Systems ofEngagementPush notifications

ab testing

Systems ofRecord

User Authentication

App/web analytics

AngularJS shared code

Mobile First delivery architecture

Marketing automation


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


Example Hybrid HTML5 app


Adaptive design and component reuse


Web front-end architecture

Back-end API

ODS

Single Page WebAngularJS components

Back-end

Hippo CMS

Back-endODSODS

Hippo API

Web sites

Browser

Hippo Delivery

Tier


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>


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


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


[email protected]