Download - App and web with Hippo CMS and AngularJS
![Page 1: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/1.jpg)
Solving any mobile challenge, guaranteed. | 1
Web and App with Hippo CMS and AngularJS
Hippo.ConnectNov. 2015, Amsterdam
Peter Broekroelofs, CTO Service2Media
![Page 2: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/2.jpg)
Solving any mobile challenge, guaranteed. | 2
![Page 3: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/3.jpg)
Solving any mobile challenge, guaranteed. | 3
At the heart of Service2Media
continuous delivery of
mobile engagement
on the cutting edge of
user experience, IT efficiencyand business needs
![Page 4: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/4.jpg)
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
![Page 5: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/5.jpg)
Solving any mobile challenge, guaranteed. | 5
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
![Page 6: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/6.jpg)
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
![Page 7: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/7.jpg)
Solving any mobile challenge, guaranteed. | 7
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
![Page 8: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/8.jpg)
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
![Page 9: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/9.jpg)
Solving any mobile challenge, guaranteed. | 9
Example Hybrid HTML5 app
![Page 10: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/10.jpg)
Solving any mobile challenge, guaranteed. | 10
Adaptive design and component reuse
![Page 11: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/11.jpg)
Solving any mobile challenge, guaranteed. | 11
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
![Page 12: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/12.jpg)
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>
![Page 13: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/13.jpg)
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
![Page 14: App and web with Hippo CMS and AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ed26241a28ab6d578b4715/html5/thumbnails/14.jpg)
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