Pat McLoughlin & Paul Michelotti - ICF Interactive A technical deep dive into the waters of hybrid app development on the AEM apps platform and an introduction to the open source Ionic development framework for AEM Apps.

1. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Hybrid App
Development with
AEM Apps
Pat McLoughlin &
Paul Michelotti
Crushin’ It 2012 - Present

2. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Application Goals
● Content reuse from the CIRCUIT website
● Native application interactions (Twitter, Maps)
● Use of Push Notifications
● Location Awareness (Geofencing, iBeacons)
● Engagement via Gameification
● Cross platform deployment (iOS and Android)

3. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Technical Overview
● AEM Apps
● Cordova
● Ionic Framework
● Angular
● AWS Elastic Beanstalk
● AWS Lambda
● AWS SNS
● AWS DynamoDB

4. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Introduction to
AEM Apps

5. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Why Did we Use AEM Apps?
● Application Authorability
● Content reuse across AEM - Canonical Content
● Over the air app updates - Update your app without
resubmission to the app store
● Business friendly application dashboard
● Integration with PhoneGap Build
● Integration with Analytics

6. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
A Word on Cordova
● Mobile application framework for building apps using web
technologies
● Exposes native functionality via a Javascript API
● Typically encapsulates single page web applications

7. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive

8. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
A Moment on Angular
● A Single Page web application framework

9. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
A Hot Minute on Ionic
● Ionic has done the heavy lifting of making your web app feel
like a native app
● CSS and Javascript to assist with the general look and feel of
your application, visually taking into account the user’s
platform
● A number of directives to build up application views, states,
navigation, lists, etc…
● A robust state history framework allowing for the caching of
views during app navigation

10. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
More Love for Ionic
● Provides tooling around Cordova and is continuously adding
more tools to their proverbial belt such as icon and splash
screen generation, push notification services, and testing
frameworks
● ngCordova - an Angular wrapper around a number of the
most commonly used Cordova plugins is produced by the
fine folks at Ionic

11. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
-

12. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Authoring a Single
Page Application

13. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Authoring an Entire Application on
a Single Page Would be Worse
than Fitting an Entire Presentation
onto a Single Slide
● Each state in the application lives as a page inside of AEM
● Application authors are able to author using a paradigm with
which they are familiar.
● Authors working in AEM have an expectation of inline
editability. That is to say, they expect that the environment
they author in projects a reasonable facsimile of the finished
product
● Authors also have an expectation of the ability to preview
their work prior to activation. This is especially important in a
production environment
● Accomplishing this is non trivial when the final product will be
a single page application.

14. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
AEM Author Expectations
● Page Based component editing - authors expect to author by
pulling components onto pages and modifying the content
and configuration of those components via edit dialogs
● Inline Editability - What an author is editing should be a
reasonable facsimile of the final product
● Preview - authors expect to be able to preview their updates
prior to publishing

15. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Enter the Ionic AEM
Apps Library
AKA - A Maven project full of
our opinions on how to do
stuff more better

16. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Pages as Application States
● Each page is an Application State
● The parent / child relationship between pages is mirrored in
the parent / child relationship between their states
● The Main Menu state and its child states in the CIRCUIT
application is an example of this relationship

17. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Root Page as Application Root
● Application root is the entry point of the application
● Houses the logic to dynamically generate the Application
module / bootstrapping mechanisms
● Determines the Angular Application’s required modules
based on the components used in the app
● Allows for a preview view of the functional application to the
extent that the application can function in a browser

18. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Content Reuse

19. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Goals of Content Reuse
● Make use of the existing Speakers and Sessions content
from the CIRCUIT website within the app without reauthoring
● Session and Speaker lists act as data within the application
to enable viewing of individual Session and Speaker details
● Packaging of Session and Speaker data within the
downloadable app

20. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
How a Single Page
Web Application
Becomes a Cordova
Application

21. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Structure of a Cordova Application
● hooks
○ Houses Javascript code which will run at various points in
the app build lifecycle
● www
○ config.xml
■ Defines a number of application properties such as
the url the webview should be directed to initially
○ Your application assets such as html, css, js, images, etc...

22. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
From AEM to Cordova
● Content Sync mechanisms are used to produce a .zip whose
contents follow the standard Cordova app structure
● A number of Content Sync configurations leveraging
numerous Content Handlers work in concert to put together
the application archive from your application’s content, other
used content, static files, and configuration
● Unzipping the result you will find a folder structure which
exactly matches what is expected of a Cordova application

23. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Over the Air Updates
● Content Sync also enables Over the Air application updates
● A check for new application content is performed at application
startup
● The last updated timestamp is checked against the content
sync endpoint on publish
● Content Sync creates a new .zip of changes
● Current content on the device is copied to a new location and
new content is written over the current
● Finally the application points the webview to the new location

24. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Wrapping Up

25. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Final Thoughts in the form of Links
● Ionic AEM Apps Library - https://github.com/Citytechinc/ionic-
aem-apps
● Ionic Framework - http://ionicframework.com/
● AEM Apps Starter Kit - https://github.com/blefebvre/aem-
phonegap-starter-kit
Paul Michelotti
paul.michelotti@icfi.com
@PaulMichelotti on Twitter
Pat McLoughlin
pat.mcloughlin@icfi.com
@CityPat on Twitter