Skip to content

Latest commit

 

History

History
534 lines (451 loc) · 15.5 KB

slides.md

File metadata and controls

534 lines (451 loc) · 15.5 KB
Raw

Web



##Mobile HTML5 websites and Hybrid Apps with AngularJS
## _How to code today with tomorrow tools - mobile edition_ ###Carlo Bonamico - [@carlobonamico](https://twitter.com/carlobonamico) ###NIS s.r.l. ###[email protected] ###[email protected]

--

In short

  • AngularJS lets you use today the features of next-generation web standards,

    • making front-end development more productive and fun

  • What's better, it provides its "magic" tools to both web AND mobile apps

    • databinding, dependency injection
    • modularity, composable and event-driven architecture

  • Thiscode-based interactive talk will share some lessons learned

    • how to structure applications
    • tune bandwidth and performance
    • interact with mobile-specific elements such as touch, sensors
    • native-looking UX with Ionic Framework

-- #Web vs Native

  • I do not want to join the fight ;-)

  • The web tends to always be more powerful than people think!

    • and the gap with native will only become smaller with time

  • There are many use cases for web-based sites and hybrid apps (HTML5 packed in an app)

    • avoiding install on device
    • ensuring always latest version
    • platform support: iOS, Android, Windows Phone...
    • easier and more familiar development workflow

  • And my favorite...

    • to use Angular magic! -- #So why AngularJS

  • Open Source framwework

    • fast-growing
    • great community

##[http://www.angularjs.org](http://www.angularjs.org)
  • Lets you adopt future web architecture and tools today
    • anticipate Web Components and EcmaScript 6

##Create modular, robust, testable apps

#Angular gives structure and modularity

  • Dependency Injection

  • split component definition from component wiring

  • Module composition e.g.

    • common modules
    • mobile-only components
    • desktop-only components

What you get: write less code, reuse more the code you write!

-- #But... ##...isn't a web / JS Mobile app unusably slow?


Let's try...


##This presentation is an Angular-based Single Page Application


##Now we launch it on a phone and explore it with Chrome usb debugging -- #Discovering the device * ``about:inspect``

  • enable port forwarding from laptop to phone
  • open http://localhost:8000 on the phone -- #Monitoring CPU usage and FPS

-- #Inspecting the page on the phone

-- #What's inside * A View: index.html * + a [style.css](style.css) * peppered-up with AngularJS 'ng-something' directives * A model * data: slides.md * code: array of slide object * A controller * script.js -- #The model ```javascript var slide = { number: i + 1, title: "Title " + i, content: "#Title \n markdown sample", html: "", background: "backgroundSlide" }; ``` -- #A service to load slides from markdown ```js ngSlides.service('slidesMarkdownService', function ($http) { var converter = new Showdown.converter(); return { getFromMarkdown: function (path) { var slides = []; 
        $http({method: 'GET', url: path}).
            success(function (data, status, headers, config) {
                var slidesToLoad = data.split(separator); //two dashes
                for (i = 0; i < slidesToLoad.length; i++) {
                    var slide = {
                        content: slidesToLoad[i],
                        //.. init other slide fields
                    };
                    slide.html = converter.makeHtml(slide.content);
                    slides.push(slide);
                }
            });
        return slides;
    } } })

--
#A simple declarative view
* binding the model to the html

```html
<body ng-app="ngSlides" ng-class="slides[currentSlide].background"
      ng-controller="presentationCtrl">

<div id="slidesContainer" class="slidesContainer" >
    <div class="slide" ng-repeat="slide in slides"
                       ng-show="slide.number == currentSlide" >

        <div ng-bind-html="slide.html"></div>

        <h4 class="number">{{slide.number}}</h4>

    </div>

</div>
</body>
  • and a very simple css for positioning elements in the page -- #A controller focused on interaction
    ngSlides.controller("presentationCtrl", function ($scope, $http,
                                      $rootScope, slidesMarkdownService) {

    $scope.slides = slidesMarkdownService.getFromMarkdown('slides.md');

    $scope.currentSlide = 0;

    $scope.next = function () {
        $scope.currentSlide = $scope.currentSlide + 1;

    };

    $scope.previous = function () {
        $scope.currentSlide = $scope.currentSlide - 1;
    };


});

-- #AngularJS magic

Any sufficiently advanced technology is indistinguishable from magic.

###Arthur C. Clarcke


  • Add search within the slides in one line
<div ng-repeat="slide in slides | filter:q">...</div>
  • where q is a variable containing the search keyword -- #AngularJS magic is made of
  • Two-way Databinding
    • split the view from the logic {{slide.number}}
  • Dependency Injection
    • gives decoupling, testability & enriching of code and tags
  function SlidesCtrl($scope, SlidesService) {
    SlidesService.loadFromMarkdown('slides.md');
  }
  • The power of composition - of
    • modules
      • module('slides',['slides.markdown'])
    • directives
      • <h1 ng-show='enableTitle' ng-class='titleClass'>..</h1>
    • filters
      • slide in slides | filter:q | orderBy:title | limit:3
    • ...

-- #So Angular let you write less code

  • But what's more important,

    • less "low value" code
    • more readable code

  • So you can concentrate on your application idea

  • AngularJS is opinionated

    • but it will let you follow a different way in case you really need it -- #So, back to our mobile apps...

  • Speed can mean many things

  • UX speed vs processing speed

    • databinding lets you easily display data progressively
    • client-side rich models and filtering let you respond quickly to user input

  • network delays vs app response times

##But the challenge isn't just being performant

  • Being an awesome mobile app
    • handle gestures
    • respect user expectations (e.g. swipeable cards )
    • manage navigation
    • manage app state and off-line availability

-- #Performance Tips

-- #Bandwidth optimizations

  • The biggest cost is opening a connection, not transferring files

  • Local manipulation of data greatly reduces network traffic

    • Local DB and sync -- #Support Touch and Gestures

  • Module ng-touch

    • fastclick: eliminate the 300ms delay
    • easily manage swipes
    <div ng-swipe-left="next()" >

  • for advanced cases:

    • ionic-gestures

  • hammer.js

-- #Storing state

  • On the device

  • In the cloud

  • HTML5 standard APIs support only some sensors

    • location (very good support)
    • orientation
    • acceleration

  • Additional sensors require the PhoneGap APIs

  • need to wrap all callbacks with

    • $apply()
    • or better, a dedicated service

  • to notify Angular of changes occurred out of its lifecycle

--

How to develop for mobile?

chrome://inspect/#devices

-- #Issues

Development tips

  • Cordova Browser
    • you install it once
    • and open your code on your web server
    • continuous refresh without reinstalling the app

--

What about the UI?

  • or better the UX - User Experience?

  • Comparing mobile web frameworks

  • JQuery Mobile

    • widgets-only
    • DOM-heavvy
    • Angular integration is not simple (different lifecycles)
    • at most, JQ Mobile for CSS and Angular for navigation and logic -- #Enter Ionic Framework

  • AngularJS-based, Open Source

    • performance obsessed
    • mobile-looking
    • extensible

<div class="list">
  <div class="item item-divider">
    Candy Bars
  </div>
  <a class="item" href="#">
    Butterfinger
  </a>
</div>

-- #Ionic Directives

  • mobile navigation and interactions
<ion-list>
  <ion-item ng-repeat="item in items"
    item="item"
    can-swipe="true"
    option-buttons="itemButtons">
  </ion-item>
</ion-list>

-- #Navigation

-- #Ionic Tooling

  • PhoneGap based build chain
$ npm -g install ionic
$ ionic start myApp tabs

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

-- #The Future

-- #Lessons learnt

  • AngularJS can be viable on mobile

    • interactivity in plain HTML5 views

  • AngularJS changes your way of working (for the better!)

    • let you free of concentrating on your ideas
    • makes for a way faster development cycle
    • makes for a way faster interaction with customer cycle
    • essential for Continuous Delivery! -- #Lessons learnt

  • Like all the magic wands, you could end up like Mikey Mouse as the apprentice sorcerer

  • Getting started is very easy

  • But to go further you need to learn the key concepts

    • scopes
    • dependency injection
    • directives
    • promises

  • So get your training!

  • NEW! Advanced AngularJS course

    • coming in July-September 2014

-- #To learn more