ANGULARJS MOBILE- VERONA 14 MAYJSDAY 2014

by Luciano Amodio

:

:

adamquadmon

@lucianoamodio

WHO AM I?

I'M A SOFTWARE ENGINEER

DOING CODE SINCE 2000

MY FIRST CONFERENCE (AS AUDITOR)

HERE IN VERONA IN 2012

THE SECOND ONE

MARCH 2013

HERE I MEET

AND WAS LOVE!

I STARTED STUDYING HARD

DOING IT WRONG

generator-angular-silex

DO YOU KNOW THIS GRAPH?

Ben Nadel: My experience with AngularJs

THEN I WAS INVOLVED IN

AND WITH AN INSPIRING LEADAND AN AMAZING TEAM

WE DID IT!

THE ANGULARJS VERSIONOF THE NAMSHI MOBILE WEBSITE

IN THIS TALK I WANT TO SHARE WITH YOUHOW WE MADE ROCKET INTERNET IN GERMANY SAY

WOW!

LET'S START

WHAT IS

RESPONSIVE?

a responsive website respond to the ambient adapting itself toprovide the best user experience

WHAT CAN BE RESPONSIVE?

LAYOUT

LAYOUT / MEDIA QUERIES

Media queries are filters that can be applied to CSS styles.

They make it easy to change styles based on the device, includingthe display type, width, height, orientation and even resolution.

LAYOUT / SET YOUR VIEWPORT

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

LAYOUT / TECNIQUES

Google Web Fundamentals

LAYOUT / MOSTLY FLUYD

LAYOUT / COLUMN DROP

LAYOUT / LAYOUT SHIFTER

LAYOUT / OFF CANVAS

IMAGES

IMAGES / OPTIMIZATION

You should

maybe with

Optimize Images

grunt-responsive-image

IMAGES / RESPONSIVE

Should I use srcset attribute or picture element?

Try ask those guys:

Maybe using for a picture element polyfill

or a BBC solution:

<img src="fallback.jpg" srcset="photo.jpg 1x, photo-hd.jpg 2x">

<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg"></picture>

responsiveimages.org

picturefill

Images.js

IMAGES / RESPONSIVE

our solution (the concept):

<img ng-src="//ourCdn.tld/imageName-{{deviceSize}}.jpg">

FEATURES

You can use to provide different content orbehaviours (think about mouseover on a touch only device!)

Modernizr

But don't forget to provied (expecially for IE)polyfills

USEFUL RESOURCES

You really should read Google Web Fundamentals

But also giving a look at is not a badidea!

Yeoman generator-mobile

MOBILE ISSUES

DON'T MAKE THEM WAIT!

PRETEND TO BE FAST

NGCLOAK

<style> [ng-cloak].splash { display: block !important; } [ng-cloak] {display: none;} .splash { background-color: blue; }</style><div class="splash" ng-cloak=""></div>

NGCLOAK

<style> [ng-cloak].splash { display: block !important; } [ng-cloak] {display: none;} .splash { background-color: blue; }</style><div class="splash" ng-cloak=""></div>

AngularJs ngCloak directive will remove the ng-cloakattribute once theapplication is ready.

Instead of hiding the underlying application (this is the standard use of ngCloak),this tecnique will show an overlying splash screen as soon as the first part of theresponse is served.

It's very important to serve the spalsh screen as soon as possible (deferringexternal resources, embedding needed CSS in the document itself and so on)

UX INSTANT FEEDBACK

For a mobile user is not big difference using a website or an app.

Provide the UX with visual/audio feedback and loading routines will make theuser feel the application is responsive to her input.

it's a library that help you add audio events to UI.

For loaders & spinners give a look to:

Howler.js

the state of the spinner

SpinKit

REDUCE LATENCY

AVOID HTTP CALLS

REDUCE LATENCY

AVOID HTTP CALLS WHILE LOADING THE PAGEConcatenate and minify html, CSS and JS files.( and don't need this)

Inline images in css ( or )

Use a single sprite for CSS UI ( )

Defer every not critical resource after the app is ready (social media plugin asfacebook, twitter, etc):

HTTP2 Spdy

grunt-base64 grunt-data-uri

glue

if(document.readyState === 'complete') { //your code}

angular.run(function() { //your code});

REDUCE LATENCY

AVOID HTTP CALLSPaginate results.

If you are displaying a catalog page you can embed a small json with a bounce ofproducts in the document itself, and then ask the API for next resources.

If your json is not that big you can also serve a large number of items and show onthe client only a bounce of them at the same time.

Paginate client side will give a user the feeling of a super fast application.

REDUCE LATENCY

WITH ANGULARJSAngularJs provide an internal cache service you can use to avoid multiplerequests of the same resource.It's used, for example, to preload templates with .

is a module to enhance the angular cache sistem.

Batching network requests to fetch data at the same time it's also good to savebattery.

grunt-angular-templates

angular-cache

CSS PERFORMANCES

SELECTORSCSS selectors are read right to left

This mean you should avoid unnecessary ones

Nested selectors are slow, even if more verbose is better to avoid them

Yes, sad to say: you should avoid CSS3 selectors!

ul li.error { color: #fff; }

li.error { color: #fff; }

.li-error { color: #fff; }

CSS PERFORMANCES

SELECTORS BY PERFORMANCESID #header

Class .header

Tag div

Sibling div + p, div ~ p

Child div > p

Descendant div p

Universal div *

Attribute input[type="text"]

Pseudo p:first-child

CSS PERFORMANCES

ANIMATIONSAvoid css animations

At least avoid gradients and similar expensive stuff (you can use sprites).

CSS PERFORMANCES

CSS VS JS ANIMATION?

Someone says Js it'slow.

Well, it's not JS slow, jQuery is!

Try GASP

JAVASCRIPT OPTIMIZATION

This is a long talk, but let me give you a quick tip: (well, angulartoo!).

I strongly suggest you a couple of books: byN.Zakas and by S. Souders.

it's a very rich resource on how to profile (usingChrome Dev Tools) and optimize.

use jQuery wisely

High Performance JavaScriptEven Faster Web Sites

Google Performance Tips

THE CURSE OF 300MS

Mobile browsers will wait approximately 300ms from the time that you tapsomething before firing the click event.

The reason for this is that the browser is waiting to see if you are actuallyperforming a double tap.

What to do?

Use FastClick

YOU SHOULD TEST

Test always with real devices (even old ones).

AND DEBUG

You can use safari remote debugging for iOSor chrome remote debugging + for Androidangularjs-batarang

AUTOMATE TESTING

Automate tests with andProtractor Karma

AUTOMATE DELIVERY

Go CI or CD (continuous integration/deploy/delivery)with orSauceLabs BrowserStack

ANGULARJS

WHY ANGULARJS?

Because it's awesome!

It enhance HTML, CSS and JavaScriptand it's google and have a huge community:

Well, this is also a good reason to hate AngularJs:

You have ruined Javascript.

WHAT IS ANGULAR?

THE BEST PART

Less code well organized

DI

Testability

Directives and reusability

Promises

Model View Whatever

Whatever -> $scope <- View

Services

THE BEST PART*angular.module('myModule').controller('myController', function($scope, MyService) {

$scope.myData = { some: 'data' }; $scope.sendForm = function(){ MyService.performAction($scope.myData) .then( function(newData) { $scope.newData = newData; }) .catch( function(error) { $scope.errorMessage = error; }) .finally( function() { $scope.releaseKraken = true; }); };});

* the use of 'catch' and 'finally' willuse array notation instead: MyService.performAction($scope.myData).['catch']( ... )

break IE8

WHY IS ANGULAR STILL IMATURE?still a WIP (a very fast one)

WHY IS ANGULAR STILL IMATURE?

Still not a perfect knowledge about it

Services, Factories, ServiceProviders: "it's a mess!"

THE FUTURE

Angular 1.3: drop IE8 support

Angular 2.0: use ES6, better DI, better modularity (I hope so!)

ANGULAR OPTIMIZATIONS

Maybe you don't really need Angularize everything!

ANGULAR OPTIMIZATIONS

Avoid ngRepeat if not needed, this will reduce watchers and save CPU.

ANGULAR OPTIMIZATIONS

Don't use filters in views (will be fixed in next versions).

ANGULAR OPTIMIZATIONS

Watch the number of others watches (use )bindonce

ANGULAR OPTIMIZATIONS

Release resources when you leave a scope

(for example when you change view or remove a directive)

in particular remember to remove listeners.

$scope.$on('$destroy', function(){ // to release resources});

ANGULAR FRIENDS

There are some modules to try out:

: to implement hammerJs gestures

: a simple touch carusel

: to snap everything in AngularJs

And don't forget you can still implement simple JS libraries like:or

angular-gestures

angular-carousel

angular-snap

swipeJs hammerJs

WHY NOT NGTOUCH?

Remember the course of 300ms?

Well, it only binds ngClick.

Then? Guess what! Use FastClick!

or Ionic...

STORAGE

Mobile device can easily lose connection.

You can use localStorageto cache the needed data to make your website reactmore like a native app.

localStoragehave some issues on Safari, you can fallback to cookies.

If you have cross domain cookie problems try to give a look at It's adeprecated library we have used to share cross domain secured cookies.

If your project is an hybrid app, you can also use sqlLite or other dbs.

xAuth.

HYBRID APPS

An "Hybrid App" is an App build in HTML, CSS and JS that you can put in an AppStore.

Dealing with Html5 in a webView we can reuse our code

for both iOS AppStore

or Google Play Store

WHAT IS PHONEGAP / CORDOVA?

Fills the gap between browsers and native device features

(geo-location, camera, accelerometers, push notificatuons).

WHY PHONEGAP / CORDOVA?

It's Opensource, cross platform and device neutral.

There are more web than objective-C developers out there.

In 2011 PhoneGap source contributed to Apache Cordovaand Adobe aquires PhoneGap name & developers.

WHY PHONEGAP / CORDOVA?

It makes native mobile features accessible from javascript.

We can build and deploy fast.

Can be used with almost any web framework.

WHY PHONEGAP / CORDOVA?

We can debug iOs in safari and android with chrome

WHAT'S BAD WITH PHONEGAP / CORDOVA?

Performance

(especially for intensive graphic on old browsers)

PHONEGAP / CORDOVA TIPS

Don't call Cordova (native) js functions until after devicereadyfires oruse .

Cordova javascript callbacks should employ safeApply(to prevent errors like $apply already in progress).

Very useful is to check out apps build with angular:

angular-phonegap-ready

(search for "mobile" tag)

IONIC

As for Twitter Bootstrap,

Ionic is a complete framework

to build performant Apps

on top of AngularJs.

IONIC: INSTALL

The installation is similar to cordova, it needs :

and (or ).

And then the needed npm packages:

Ant

$ sudo apt-get -u install ant

androidSDK xCode

$ npm install -g cordova ionic$ ionic start myApp tabs$ cd myApp

IONIC: EMULATE

Emulate and build for a platform is simple like that:

$ ionic platform add android$ ionic build android$ ionic emulate android

IONIC: LAYOUT

Ionic is full of html components.

Check out the , you will find examples of the available UIs.I really like the .

Ionic Docshtml5 input types

IONIC: ANGULARJS

It use angular binding & controllers under the hood.

IONIC: YEOMAN GENERATOR

There is also a Yeoman generator: generator-ionic

$ npm install -g generator-ionic$ mkdir my-ionic-project && cd $_$ yo ionic$ grunt serve

APPGYVERFills the gap between cordova and performances.

APPGYVER: INSTALL

Installing is similar to Cordova and Ionicyou will also need or higher,

and .

AppGyverpython 2.7

Steroids CLI

APPGYVER: GENERATE PROJECTOnce steroids CLI is available all you have to do is:

$ steroids create myProject

$ cd myProject

APPGYVER: EMULATE

On your device: download AppGyver Scanner for iOS / Android

On your computer launch the steroids server:

Connect your device to the same WLAN as your computer and scann the QR thatappear on the monitor.

You will be able to test your project on your device in real time.

$ steroids connect --watch

APPGYVER: TUTORIALIf you want to discover more about AppGyver try the tutorial:

$ steroids generate tutorial begin

APPGYVER: BUGS!

Unfortunately those are relative new technologies.

There are some for example(and that's my phone)

bugs with android 4.4

SUMMARYThink mobile first

Make it responsive

Give Feedback

Avoid unnecessary HTTP requests

Optimize images, CSS and JS

Test!

Use AngularJs (wisely)

Use local storages to handle lose of connection

Go Hybrid using AppGyver and Ionic on top of PhoneGap

REFERENCE / ARTICLESYeoman - Grunt - Bower

Ben Nadel: AngularJs experience

Responsive

Media Queries

Don't mess with viewport

Optimize Images

responsiveimages.org

Webp

The state of the spinner

HTTP2

Spdy

CSS animations vs JS

Use jQuery wisely

ngNewsletter - mobile

High Performance JavaScript

Even Faster Web Sites

Google Performance Tips

You have ruined Javascript.

Safari localStorage nightmare

Mobile frameworks

REFERENCE / TOOLS:grunt-responsive-image

Picturefill

Images.js

Modernizr

HTML5 polyfills

Yeoman generator-mobile

Howler.js

SpinKit

grunt-base64

grunt-data-uri

glue

grunt-angular-templates

angular-cache

GASP

FastClick

angularjs-batarang

Protractor

Karma

SauceLabs

BrowserStack

REFERENCE / TOOLSbindonce

angular-gestures

angular-carousel

angular-snap

SwipeJs

HammerJs

xAuth

Cordova

angular-phonegap-ready

App build with angular

(search for "mobile" tag)

Ant

Android SDK

xCode

Ionic Docs

generator-ionic

ionic-angular-appgyver-seed

Ionic examples

AppGyver

Python

Steroids CLI

REFERENCE / OTHERS(surf it with a mobile device or choose "switch to mobile" at the bottom)

Namshi.com

Google Web Fundamentals

Going mobile with angular

AngularJs and phoneGap

ngConf 2014 mobile

THANKS!

QUESTIONS?(I hope so!)

:

:

adamquadmon

@lucianoamodio