Mobile apps

Made and managed in AEM




Hello


@brucelefebvre

Agenda


  `-- <root>
      |-- The long and winding road
      |-- 1. 3rd party client libs
      |   |-- Topcoat
      |   |-- AngularJS
      |   |   `-- Sharing with directives
      |-- 2. Device APIs
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- PhoneGap plugins
      `-- 3. Template sharing on Angular's terms

Let's go back...

PhoneGap + AEM CQ

The early days

The Good

  • Content updates *
  • Access to PhoneGap APIs (v. 1.2)
  • Nice demo

The Bad

  • iOS only
  • No offline support
  • As slow as the network
  • QR code??

The Bad (cont'd)

  • We just wrapped the mobile site
  • No page transitions
  • No visual differentiation from mobile site
  • Not 'App-y'

Aside: On rejection

PhoneGap + AEM x2

'Single page' apps

The Good

  • Access to PhoneGap APIs
  • Content updates
  • Single page app**: FAST!
  • 'Native' app feel
  • Cross platform
  • Micro libs only***

github.com/blefebvre/single-page-nav

The Bad

  • Literally a single HTML file
  • Micro libs only
  • Worked around content sync limitations

PhoneGap + AEM x3

AEM Apps

aka PhoneGap Enterprise


localhost:4503/content/phonegap/geometrixx/apps/ng-geometrixx-outdoors/en/home.html

The Good

  • Access to PhoneGap APIs (v. 3.4)
  • Single page app: FAST!
  • Native app feel
  • Adobe mobile services integration

Aside: Mobile services


    // Track page view
    ADB.trackState( path, {} );


    // Track timed event
    ADB.trackAction( 'updateApp', {} );
    ADB.trackTimedActionStart( 'updateAppTimed', {} );

    // do something 

    ADB.trackTimedActionEnd( 'updateAppTimed' );

The Good (cont'd)

  • Cross platform
  • AngularJS integration
  • Delta content updates
  • Content sync improvements

Aside: On content sync

  • mobileapprootpage
  • mobilepageassets
  • mobilecontentlisting

The Bad?

  • Constant platform evolution
  • Shifting dependencies

Agenda


  `-- <root>
      |-- The long and winding road
      |-- 1. 3rd party client libs
      |   |-- Topcoat
      |   |-- AngularJS
      |   |   `-- Sharing with directives
      |-- 2. Device APIs
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- PhoneGap plugins
      `-- 3. Template sharing on Angular's terms

Micro over full stack

Javascript over jQuery?


// Selectors
var $ = document.querySelectorAll.bind(document);

// Class manipulation
document.body.classList.add('hasJS');
document.body.classList.remove('hasJS');

// DOM manipulation
document.getElementById("container").innerHTML += "
content
";

Modular over monolithic

AngularJS

AngularJS

  • Modular
  • Opinionated
  • Two-way data binding
  • Single page apps
  • Community

AngularJS Projects

  • Ionic Framework
  • Angular Snap.js
  • angular-phonegap-ready

Angular + AEM

Routing


$routeProvider
    .when('/content/phonegap/geometrixx/apps/ng-geometrixx-outdoors/en/home', {
        templateUrl: 'home.template.html' + cacheKiller,
        controller: 'geometrixxoutdoorsenhome'
    })

Angular + AEM

Controllers


// Controller for page 'home'
.controller('geometrixxoutdoorsenhome', 
    ['$scope', '$http',
        function($scope, $http) {
            var data = $http.get('home.angular.json' + cacheKiller);

            /* swipe_carousel component controller */
            data.then(function(response) {
                $scope.playSpeed = 
                    response.data["content-par/swipe_carousel"].playSpeed;
                $scope.contentparngswipecarousel = 
                    response.data["content-par/swipe_carousel"].items;
            });
            
        }
    ])

Agenda


  `-- <root>
      |-- The long and winding road
      |-- 1. 3rd party client libs
      |   |-- Topcoat
      |   |-- AngularJS
      |   |   `-- Sharing with directives
      |-- 2. Device APIs
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- PhoneGap plugins
      `-- 3. Template sharing on Angular's terms

PhoneGap

Apps built with web tech

you know and love

Platforms

  • iOS
  • Android
  • WP7, WP8, Windows 8
  • BB10
  • Amazon Fire OS
  • Tizen
  • and more...

PhoneGap CLI

  create <path>
  build <platform>
  install <platform>
  run <platform>
  local [command]
  remote [command]

Plugins

Device APIs

  • Camera
  • Accelerometer
  • File system
  • Contacts
  • Lifecycle events
  • Connection
  • Notification
  • <your plugin here>

Plugins + AEM

In 3 easy steps

  1. Add the plugin to your hook
  2. Include it's .js file(s)
  3. Consume in your own script

github.com/blefebvre/aem-phonegap-kitchen-sink

Demo time

Agenda


  `-- <root>
      |-- The long and winding road
      |-- 1. 3rd party client libs
      |   |-- Topcoat
      |   |-- AngularJS
      |   |   `-- Sharing with directives
      |-- 2. Device APIs
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- PhoneGap plugins
      `-- 3. Template sharing on Angular's terms

Theoretically speaking

  • You have many things that you want to render in a similar fashion
  • You want to leverage AEM's commerce features

Demo time

Takeaways

| | | | | |
AEM + proven open source tech Developers apply existing web + AEM skills Authors leverage tools they use everyday

Q & A

bit.ly/aem-pg

Thank you

@brucelefebvre

References

Creative