bridging the gap: single-page apps and aem
TRANSCRIPT
![Page 1: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/1.jpg)
APACHE SLING & FRIENDS TECH MEETUPBERLIN, 28-30 SEPTEMBER 2015
Bridging the Gap: Single-Page Apps and AEMBruce Lefebvre, Adobe
![Page 2: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/2.jpg)
adaptTo() 2015 2
Hello
@brucelefebvre
![Page 3: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/3.jpg)
Goals
adaptTo() 2015 3
Introduce the SPA pattern Propose using AngularJS as our
framework Involve our Authors with AEM Prosper in App Stores with PhoneGap
![Page 4: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/4.jpg)
adaptTo() 2015 4
The Case for Single-Page Apps
![Page 5: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/5.jpg)
SPAs: because your customers won’t wait
adaptTo() 2015 5
<TODO: gif of image loading dial-up style>
![Page 6: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/6.jpg)
SPAs: because connectivity is not a guarantee
adaptTo() 2015 6
![Page 7: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/7.jpg)
Benefits of the SPA pattern
adaptTo() 2015 7
Fluid, fast transitions between app states Achieve that ‘native app’ feel
Limits network requests Using page fragments and/or JSON
Offline capable Many framework options available
![Page 8: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/8.jpg)
Cons of the SPA pattern
adaptTo() 2015 8
SEO challenges Initial ‘time to glass’
increase Requires JavaScript Many framework options
available
![Page 9: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/9.jpg)
adaptTo() 2015 9
Speaking of JavaScript Frameworks…
![Page 10: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/10.jpg)
You have options
adaptTo() 2015 10
<Your framework here!>
![Page 11: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/11.jpg)
adaptTo() 2015 11
“When you decide to not pick a public framework, you will end up with a framework anyway: your own”
- Ryan Florence, You Can't Not Have a Framework
![Page 12: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/12.jpg)
<Your framework here!>
adaptTo() 2015 12
Getting simpler with ES6/2015
Early AEM Apps used github.com/blefebvre/single-page-nav
![Page 13: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/13.jpg)
adaptTo() 2015 13
![Page 14: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/14.jpg)
For example: a Single-Page App
adaptTo() 2015 14
Only one “complete” page often named index.html
Everything else is loaded dynamically, as required
https://github.com/blefebvre/cordova-sling-blog-sample
![Page 15: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/15.jpg)
adaptTo() 2015 15
Introducing Angular
![Page 16: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/16.jpg)
Proposal: AngularJS
adaptTo() 2015 16
Opinionated Means less boilerplate
Extends HTML vocabulary Components (aka Directives)
Seamless SPA routing Huge community & body of
knowledge
![Page 17: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/17.jpg)
Your first Angular component
adaptTo() 2015 17
Augment the HTML vocabulary as you wish
For example: <cant-touch-this> can't touch this! </cant-touch-this>
bit.ly/cant-touch
![Page 18: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/18.jpg)
Your first Angular component
adaptTo() 2015 18
app.directive('cantTouchThis', function() { var link = function(scope, element, attrs) { element.on('mouseenter', function() { // move element to random location }); }; return { // link this directive to the DOM link: link };});
bit.ly/cant-touch
![Page 19: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/19.jpg)
adaptTo() 2015 19
In ~30 lines of JS, we’ve extended HTML
![Page 20: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/20.jpg)
Basic Routing in Angular
adaptTo() 2015 20
HTML:
<div ng-app="MyApp"> <a href="#/page1">Page 1</a> <a href="#/page2">Page 2</a> <ng-view /></div>
bit.ly/basic-routing
![Page 21: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/21.jpg)
Basic Routing in Angular cont’d
adaptTo() 2015 21
JS:$routeProvider .when('/page1', { template: '<h3>Page 1 content!</h3>' }) // define other routes here .otherwise({ redirectTo: '/page1' });
bit.ly/basic-routing
![Page 22: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/22.jpg)
Controllers
adaptTo() 2015 22
Provide data to your templateRoute Config:$routeProvider .when('/page1', { template: '<h3>Page 1. Hello {{name}}!</h3>', controller: 'PageController’ })
bit.ly/basic-routing2
![Page 23: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/23.jpg)
Controllers cont’d
adaptTo() 2015 23
PageController:.controller('PageController', function($scope) { $scope.name = 'Bruce';}]);
bit.ly/basic-routing2
![Page 24: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/24.jpg)
Services
adaptTo() 2015 24
Where the work gets done Lazily instantiated for
speed Singletons Core Angular services
include: $http $scope $location (and many more)
![Page 25: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/25.jpg)
Services Example
adaptTo() 2015 25
Each service is a factory functionapp.factory(’counterService’, function() { var count = 1; return function() { return count++; } });
bit.ly/basic-service
![Page 26: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/26.jpg)
adaptTo() 2015 26
Goal: Authorable content in an Angular SPA
+
![Page 27: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/27.jpg)
Challenges
adaptTo() 2015 27
Single page apps vs. page based system Access control? Reusability of author’s skillset? Content reuse across channels? Automated testing?
![Page 28: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/28.jpg)
28adaptTo() 2015
![Page 29: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/29.jpg)
Solution
adaptTo() 2015 29
Serve complete page on author Produce partials for SPA Routes generated based on
hierarchy go(..) navigates based on wcmmode:<a ng-click="go('/content/phonegap/app/en/home/subpage')"> Subpage</a>
![Page 30: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/30.jpg)
Solution cont’d
adaptTo() 2015 30
Via Sling, each page produces: “Partial”
subpage.template.html Data
subpage.angular.json Supporting assets
sling:resourceType inheritance FTW!
![Page 31: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/31.jpg)
Angular Components in AEM
adaptTo() 2015 31
Include cq:template node Prop: frameworkType: angular
Optional: define a controller Via controller.js.jsp
Optional: include a data file Via angular.json.jsp
![Page 32: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/32.jpg)
adaptTo() 2015 32
Goal: App store presence
![Page 33: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/33.jpg)
Things you can do on Mobile
adaptTo() 201533
Nothing ALL the things
Mobile website Native app(2015)
Gap!
![Page 34: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/34.jpg)
adaptTo() 2015 34
Java
C#, C++
Objective-C, Swift
Java
Mobile platforms 2015
![Page 35: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/35.jpg)
adaptTo() 2015 35
Enter Cordova/PhoneGap
35
Web app wrapped in a device native shell Write once, run everywhere*
*aka “the promised land”
Native SDKs
![Page 36: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/36.jpg)
adaptTo() 2015 36
But… Web vs. Native!
Both built on the same set of technologies Web capabilities sufficient for most apps
“If a browser doesn’t do something its not because it can’t;it’s just because we haven’t gotten around to
implementing that part yet.”-Brian LeRoux
![Page 37: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/37.jpg)
Cordova/PhoneGap
adaptTo() 2015 37
Supported platforms iOS Android BB10 WP7, WP8, Windows
8 Amazon Fire OS Tizen and more…
![Page 38: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/38.jpg)
Cordova CLI at a glance
adaptTo() 2015 38
Create your app: cordova create helloAdaptTo
Add a platform:cd helloAdaptTocordova platform add ios
Run your app on a simulator:
cordova emulate ios
![Page 39: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/39.jpg)
Cordova Plugins
adaptTo() 2015 39
Core: Camera Geolocation Accelerometer File Contacts Events Connection Notification And many more…
New! ContentSync Push plugin NativePageTransitions
![Page 40: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/40.jpg)
adaptTo() 2015 40
Let’s bring it all together
+ +
![Page 41: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/41.jpg)
AEM Apps: In Action
adaptTo() 2015 41localhost:4502/aem/apps.html
![Page 42: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/42.jpg)
AEM Apps
adaptTo() 2015 42
Manage app content w/o writing code
Push Over the Air content updates AngularJS integration Send push notifications from AEM App analytics with Adobe Mobile
Services
![Page 43: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/43.jpg)
PhoneGap Enterprise
adaptTo() 2014 43
![Page 44: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/44.jpg)
“PhoneGap Enterprise” Viewer App
adaptTo() 2015 44
Development Staging Production
Internal Stakeholders
Users
![Page 45: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/45.jpg)
adaptTo() 2015 45
AEM Apps: Demo time!
+ +
![Page 46: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/46.jpg)
Recap
adaptTo() 2015 46
Introduce the SPA pattern Propose using AngularJS as our
framework Involve our Authors with AEM Prosper in App Stores with PhoneGap
![Page 47: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/47.jpg)
adaptTo() 2015 47
Thanks!
@brucelefebvre
bit.ly/aem-pg
![Page 48: Bridging the Gap: Single-Page Apps and AEM](https://reader035.vdocuments.us/reader035/viewer/2022070603/586f9b811a28abcc238b5789/html5/thumbnails/48.jpg)
References
adaptTo() 2015 48
You Can't Not Have a Framework - Ryan Florence Thumbs up image Thumbs down image U can’t touch this – MC Hammer Pedestrian Detour N64 controller Gray – Evan-Amos Hardhat and gloves – Compliance and Safety Devices image Unixstickers ‘all the things’