Presented at adaptTo() 2015 in Berlin. Single-page apps (SPA) have reached critical mass, widely regarded as the most effective pattern for building seamless experiences with web technology. This session will dive into bringing this paradigm to an AEM instance near you - including tips and tricks for leveraging AngularJS to optimize your SPA development, and examples of bringing your content to the app store with Adobe’s PhoneGap.

1. APACHE SLING&FRIENDSTECHMEETUP
BERLIN, 28-30SEPTEMBER 2015
Bridging theGap: Single-PageApps and AEM
Bruce Lefebvre, Adobe

2. adaptTo()2015 2
Hello
@brucelefebvre

3. Goals
adaptTo()2015 3
 Introduce theSPApattern
 Propose using AngularJS as our framework
 Involve our Authors withAEM
 Prosper in App Stores with PhoneGap

4. adaptTo()2015 4
The Case for Single-PageApps

5. SPAs: because your customers won’twait
adaptTo()2015 5
 <TODO: gif of image loading dial-up style>

6. SPAs: because connectivity is not a guarantee
adaptTo()2015 6

7. Benefitsof theSPA pattern
adaptTo()2015 7
 Fluid, fasttransitionsbetweenapp states
 Achieve that ‘native app’ feel
 Limitsnetwork requests
 Using page fragments and/or JSON
 Offlinecapable
 Many framework options available

8. Cons of theSPA pattern
adaptTo()2015 8
 SEO challenges
 Initial‘time to glass’ increase
 Requires JavaScript
 Many frameworkoptions available

9. adaptTo()2015 9
Speakingof JavaScript Frameworks…

10. You have options
adaptTo()2015 10
<Your framework here!>

11. adaptTo()2015 11
“Whenyou decide to not picka public framework, you willend up
witha framework anyway: yourown”
-Ryan Florence,YouCan'tNotHaveaFramework

12. <Your frameworkhere!>
adaptTo()2015 12
 GettingsimplerwithES6/2015
 Early AEM Apps used github.com/blefebvre/single-
page-nav

13. adaptTo()2015 13

14. For example:a Single-PageApp
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

15. adaptTo()2015 15
IntroducingAngular

16. Proposal:AngularJS
adaptTo()2015 16
 Opinionated
 Means less boilerplate
 ExtendsHTML vocabulary
 Components (akaDirectives)
 Seamless SPA routing
 Hugecommunity& body of knowledge

17. Your first Angularcomponent
adaptTo()2015 17
 Augment theHTML vocabulary as you wish
 For example:
<cant-touch-this>
can't touch this!
</cant-touch-this>
bit.ly/cant-touch

18. Your first Angularcomponent
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

19. adaptTo()2015 19
In ~30 lines of JS, we’ve extendedHTML

20. Basic Routingin 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

21. Basic Routingin Angularcont’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

22. Controllers
adaptTo()2015 22
 Provide data to your template
Route Config:
$routeProvider
.when('/page1', {
template: '<h3>Page 1. Hello {{name}}!</h3>',
controller: 'PageController’
})
bit.ly/basic-routing2

23. Controllers cont’d
adaptTo()2015 23
PageController:
.controller('PageController', function($scope) {
$scope.name = 'Bruce';
}]);
bit.ly/basic-routing2

24. Services
adaptTo()2015 24
 Wherethe work gets done
 Lazilyinstantiatedfor speed
 Singletons
 Core Angular services include:
 $http
 $scope
 $location (and many more)

25. Services Example
adaptTo()2015 25
 Each service is a factory function
app.factory(’counterService’, function() {
var count = 1;
return function() {
return count++;
}
}
);
bit.ly/basic-service

26. adaptTo()2015 26
Goal: Authorablecontentin an Angular SPA
+

27. Challenges
adaptTo()2015 27
 Singlepage apps vs. page based system
 Access control?
 Reusability of author’s skillset?
 Content reuse across channels?
 Automated testing?

28. adaptTo()2015 28

29. Solution
adaptTo()2015 29
 Serve complete page on author
 Produce partials for SPA
 Routesgenerated based on hierarchy
 go(..) navigates based on wcmmode:
<a ng-click="go('/content/phonegap/app/en/home/subpage')">
Subpage
</a>

30. Solution cont’d
adaptTo()2015 30
 Via Sling, each page produces:
 “Partial”
subpage.template.html
 Data
subpage.angular.json
 Supporting assets
 sling:resourceType inheritanceFTW!

31. Angular Componentsin AEM
adaptTo()2015 31
 Includecq:template node
 Prop: frameworkType: angular
 Optional: definea controller
 Via controller.js.jsp
 Optional: includea data file
 Via angular.json.jsp

32. adaptTo()2015 32
Goal: App store presence

33. Things you can doon Mobile
adaptTo()2015
33
Nothing ALL the things
Mobile website Native app
(2015)
Gap!

34. adaptTo()2015 34
Java
C#, C++
Objective-C,
Swift
Java
Mobileplatforms2015

35. adaptTo()2015 35
Enter Cordova/PhoneGap
35
 Web app wrapped in a devicenative shell
 Write once,run everywhere*
 *aka“the promisedland”
Native SDKs

36. adaptTo()2015 36
But… Webvs. Native!
 Both built on the same set of technologies
 Web capabilities sufficient for most apps
“If abrowserdoesn’tdosomething its notbecauseit can’t;
it’sjustbecausewehaven’tgottenaroundtoimplementing thatpartyet.”
-BrianLeRoux

37. Cordova/PhoneGap
adaptTo()2015 37
 Supported platforms
 iOS
 Android
 BB10
 WP7, WP8, Windows 8
 Amazon Fire OS
 Tizen
 and more…

38. Cordova CLI ata glance
adaptTo()2015 38
 Create your app:
cordova create helloAdaptTo
 Add a platform:
cd helloAdaptTo
cordova platform add ios
 Run your app on a simulator:
cordova emulate ios

39. Cordova Plugins
adaptTo()2015 39
 Core:
 Camera
 Geolocation
 Accelerometer
 File
 Contacts
 Events
 Connection
 Notification
 Andmanymore…
 New!
 ContentSync
 Push plugin
 NativePageTransitions

40. adaptTo()2015 40
Let’s bring it all together
+ +

41. AEMApps: In Action
adaptTo()2015 41
localhost:4502/aem/apps.html

42. AEMApps
adaptTo()2015 42
 Manageapp contentw/o writing code
 PushOver the Air content updates
 AngularJSintegration
 Send push notificationsfrom AEM
 App analytics with Adobe Mobile Services

43. PhoneGap Enterprise
adaptTo()2014 43

44. “PhoneGapEnterprise”ViewerApp
adaptTo()2015 44
Development Staging Production
Internal
Stakeholders
Users

45. adaptTo()2015 45
AEM Apps: Demo time!
+ +

46. Recap
adaptTo()2015 46
 Introduce theSPApattern
 Propose using AngularJS as our framework
 Involve our Authors withAEM
 Prosper in App Stores with PhoneGap

47. adaptTo()2015 47
Thanks!
@brucelefebvre
bit.ly/aem-pg

48. References
adaptTo()2015 48
 YouCan'tNotHave a Framework- RyanFlorence
 Thumbsupimage
 Thumbsdownimage
 U can’ttouchthis– MC Hammer
 PedestrianDetour
 N64controllerGray–Evan-Amos
 Hardhatandgloves –Compliance and Safety
 Devices image
 Unixstickers‘all thethings’