Building a responsive mobile application with AngularJs. Tips and Tricks. How to use Ionic and AppGyver to fill the Cordova performance gap.

1. ANGULARJS MOBILE
- VERONA 14 MAYJSDAY 2014
byLucianoAmodio
:
:
adamquadmon
@lucianoamodio

2. WHO AM I?

3. I'M A SOFTWARE ENGINEER
DOING CODE SINCE 2000

4. MY FIRST CONFERENCE (AS AUDITOR)
HERE IN VERONA IN 2012

5. THE SECOND ONE
MARCH 2013

6. HERE I MEET
AND WAS LOVE!

7. I STARTED STUDYING HARD

8. DOING IT WRONG
generator-angular-silex

9. DO YOU KNOW THIS GRAPH?
Ben Nadel: Myexperience with AngularJs

10. THEN I WAS INVOLVED IN

11. AND WITH AN INSPIRING LEAD
AND AN AMAZING TEAM

12. WE DID IT!
THE ANGULARJS VERSION
OF THE NAMSHI MOBILE WEBSITE

13. IN THIS TALK I WANT TO SHARE WITH YOU
HOW WE MADE ROCKET INTERNET IN GERMANY SAY
WOW!

14. LET'S START

15. WHAT IS
RESPONSIVE?

16. aresponsive website respond to the ambientadaptingitself to
provide the bestuser experience

17. WHAT CAN BE RESPONSIVE?

18. LAYOUT

19. LAYOUT / MEDIA QUERIES
Mediaqueries are filters thatcan be applied to CSS styles.
Theymake iteasyto change styles based on the device, including
the displaytype, width, height, orientation and even resolution.

20. LAYOUT / SET YOUR VIEWPORT
<metaname="viewport"content="initial-scale=1,
maximum-scale=1,
user-scalable=no,
width=device-width">

21. LAYOUT / TECNIQUES
Google Web Fundamentals

22. LAYOUT / MOSTLY FLUYD

23. LAYOUT / COLUMN DROP

24. LAYOUT / LAYOUT SHIFTER

25. LAYOUT / OFF CANVAS

26. IMAGES

27. IMAGES / OPTIMIZATION
You should
maybe with
Optimize Images
grunt-responsive-image

28. IMAGES / RESPONSIVE
Should I use srcset attribute or picture element?
Tryask those guys:
Maybe using for apicture elementpolyfill
or aBBC solution:
<imgsrc="fallback.jpg"srcset="photo.jpg1x,photo-hd.jpg2x">
<picture>
<sourcemedia="(min-width:40em)"srcset="big.jpg1x,big-hd.jpg2x">
<sourcesrcset="small.jpg1x,small-hd.jpg2x">
<imgsrc="fallback.jpg">
</picture>
responsiveimages.org
picturefill
Images.js

29. IMAGES / RESPONSIVE
our solution (the concept):
<imgng-src="//ourCdn.tld/imageName-{{deviceSize}}.jpg">

30. FEATURES
You can use to provide differentcontentor
behaviours (think aboutmouseover on atouch onlydevice!)
Modernizr
Butdon'tforgetto provied (expeciallyfor IE)polyfills

31. USEFUL RESOURCES
You reallyshould read Google Web Fundamentals
Butalso givingalook at is notabad
idea!
Yeoman generator-mobile

32. MOBILE ISSUES

34. DON'T MAKE THEM WAIT!
PRETEND TO BE FAST

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

36. NGCLOAK
<style>
[ng-cloak].splash{
display:block!important;
}
[ng-cloak]{display:none;}
.splash{background-color:blue;}
</style>
<divclass="splash"ng-cloak=""></div>
AngularJs ngCloak directive will remove the ng-cloakattribute once the
application 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 the
response is served.
It's very important to serve the spalsh screen as soon as possible (deferring
externalresources, embedding neededCSSin the document itself andso on)

37. 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 the
user feelthe application is responsive to her input.
it's a library that help you addaudio events to UI.
For loaders &spinners give a look to:
Howler.js
the state of the spinner
SpinKit

38. REDUCE LATENCY
AVOID HTTP CALLS

39. REDUCE LATENCY
AVOID HTTP CALLS WHILE LOADING THE PAGE
Concatenate andminify html, CSSandJSfiles.
( and don't needthis)
Inline images in css ( or )
Use a single sprite for CSSUI ( )
Defer every not critical resource after the app is ready (social media plugin as
facebook, twitter, etc):
HTTP2 Spdy
grunt-base64 grunt-data-uri
glue
if(document.readyState === 'complete') {
//your code
}
angular.run(function() {
//your code
});

40. REDUCE LATENCY
AVOID HTTP CALLS
Paginate results.
If you are displaying a catalog page you can embed a small json with a bounce of
products in the document itself, andthen ask the API for next resources.
If your json is not that big you can also serve a large number of items and show on
the client only a bounce of them at the same time.
Paginate client side willgive a user the feeling of a super fast application.

41. REDUCE LATENCY
WITH ANGULARJS
AngularJs provide an internal cache service you can use to avoid multiple
requests of the same resource.
It's used, for example, to preloadtemplates 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 save
battery.
grunt-angular-templates
angular-cache

42. CSS PERFORMANCES
SELECTORS
CSSselectors are readright to left
This mean you shouldavoidunnecessary ones
Nestedselectors are slow, even if more verbose is better to avoidthem
Yes, sadto say:you shouldavoidCSS3 selectors!
ul li.error { color: #fff; }
li.error { color: #fff; }
.li-error { color: #fff; }

43. CSS PERFORMANCES
SELECTORS BY PERFORMANCES
ID #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

44. CSS PERFORMANCES
ANIMATIONS
Avoidcss animations
At least avoidgradients andsimilar expensive stuff (you can use sprites).

45. CSS PERFORMANCES
CSS VS JS ANIMATION?
Someone says Js it'slow.
Well, it's notJS slow, jQueryis!
Try GASP

46. JAVASCRIPT OPTIMIZATION
This is a long talk, but let me give you a quick tip: (well, angular
too!).
I strongly suggest you a couple of books: by
N.Zakas and by S. Souders.
it's a very rich resource on how to profile (using
Chrome Dev Tools) andoptimize.
use jQuery wisely
High Performance JavaScript
Even Faster WebSites
Google Performance Tips

47. THE CURSE OF 300MS
Mobile browsers will wait approximately 300ms from the time that you tap
something before firing the click event.
The reason for this is that the browser is waiting to see if you are actually
performing a double tap.
What to do?
Use FastClick

48. YOU SHOULD TEST
Test always with realdevices (even oldones).

49. AND DEBUG
You can use safariremote debugging for iOS
or chrome remote debugging + for Androidangularjs-batarang

50. AUTOMATE TESTING
Automate tests with andProtractor Karma

51. AUTOMATE DELIVERY
Go CI or CD (continuous integration/deploy/delivery)
with orSauceLabs BrowserStack

52. ANGULARJS

53. WHY ANGULARJS?

54. Because it's awesome!
Itenhance HTML, CSS and JavaScript
and it's google and have ahuge community:

55. Well, this is also agood reason to hate AngularJs:
You have ruined Javascript.

56. WHAT IS ANGULAR?

57. THE BEST PART
Less code wellorganized
DI
Testability
Directives andreusability
Promises
ModelViewWhatever
Whatever -> $scope <- View
Services

58. 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; });
};
});
*theuseof'catch'and'finally'will
usearraynotationinstead: MyService.performAction($scope.myData).['catch'](...)
breakIE8

59. WHY IS ANGULAR STILL IMATURE?
stillaWIP (averyfastone)

60. WHY IS ANGULAR STILL IMATURE?
Stillnot a perfect knowledge about it
Services, Factories, ServiceProviders: "it's a mess!"

61. THE FUTURE
Angular 1.3:drop IE8 support
Angular 2.0:use ES6, better DI, better modularity (I hope so!)

62. ANGULAR OPTIMIZATIONS
Maybe you don't really needAngularize everything!

63. ANGULAR OPTIMIZATIONS
AvoidngRepeat if not needed, this willreduce watchers andsave CPU.

64. ANGULAR OPTIMIZATIONS
Don't use filters in views (willbe fixedin next versions).

65. ANGULAR OPTIMIZATIONS
Watch the number of others watches (use )bindonce

66. ANGULAR OPTIMIZATIONS
Release resources when you leave a scope
(for example when you change viewor remove a directive)
in particular remember to remove listeners.
$scope.$on('$destroy', function(){
// to release resources
});

67. ANGULAR FRIENDS
There are some modules to try out:
:to implement hammerJs gestures
:a simple touch carusel
:to snap everything in AngularJs
Anddon't forget you can stillimplement simple JSlibraries like:
or
angular-gestures
angular-carousel
angular-snap
swipeJs hammerJs

68. WHY NOT NGTOUCH?
Remember the course of 300ms?
Well, it only binds ngClick.
Then? Guess what! Use FastClick!
or Ionic...

69. STORAGE
Mobile device can easily lose connection.
You can use localStorageto cache the neededdata to make your website react
more 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 a
deprecatedlibrary we have usedto share cross domain securedcookies.
If your project is an hybridapp, you can also use sqlLite or other dbs.
xAuth.

70. HYBRID APPS
An "HybridApp" is an App buildin HTML, CSSandJSthat you can put in an App
Store.
Dealing with Html5 in a webView we can reuse our code
for both iOSAppStore
or Google Play Store

71. WHAT IS PHONEGAP / CORDOVA?
Fills the gap between browsers andnative device features
(geo-location, camera, accelerometers, push notificatuons).

72. WHY PHONEGAP / CORDOVA?
It's Opensource, cross platform anddevice neutral.
There are more webthan objective-C developers out there.
In 2011 PhoneGap source contributedto Apache Cordova
andAdobe aquires PhoneGap name &developers.

73. WHY PHONEGAP / CORDOVA?
It makes native mobile features accessible from javascript.
We can buildanddeploy fast.
Can be usedwith almost any webframework.

74. WHY PHONEGAP / CORDOVA?
We can debug iOs in safari andandroidwith chrome

75. WHAT'S BAD WITH PHONEGAP / CORDOVA?
Performance
(especially for intensive graphic on oldbrowsers)

76. PHONEGAP / CORDOVA TIPS
Don't callCordova (native) js functions untilafter devicereadyfires or
use .
Cordova javascript callbacks shouldemploy safeApply
(to prevent errors like $apply already in progress).
Very usefulis to check out apps buildwith angular:
angular-phonegap-ready
(search for "mobile" tag)

77. IONIC
As for Twitter Bootstrap,
Ionic is a complete framework
to buildperformant Apps
on top of AngularJs.

78. IONIC: INSTALL
The installation is similar to cordova, it needs :
and (or ).
Andthen the needednpm packages:
Ant
$ sudo apt-get -u install ant
androidSDK xCode
$ npm install -g cordova ionic
$ ionic start myApp tabs
$ cd myApp

79. IONIC: EMULATE
Emulate andbuildfor a platform is simple like that:
$ ionic platform add android
$ ionic build android
$ ionic emulate android

80. IONIC: LAYOUT
Ionic is fullof htmlcomponents.
Check out the , you willfindexamples of the available UIs.
I really like the .
Ionic Docs
html5 input types

81. IONIC: ANGULARJS
It use angular binding &controllers under the hood.

82. 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

83. APPGYVER
Fills the gap between cordova andperformances.

84. APPGYVER: INSTALL
Installing is similar to Cordovaand Ionic
you willalso need or higher,
and .
AppGyver
python 2.7
Steroids CLI

85. APPGYVER: GENERATE PROJECT
Once steroids CLI is available allyou have to do is:
$steroidscreatemyProject
$cdmyProject

86. APPGYVER: EMULATE
On your device:downloadAppGyver Scanner for iOS/ Android
On your computer launch the steroids server:
Connect your device to the same WLAN as your computer andscann the QR that
appear on the monitor.
You willbe able to test your project on your device in realtime.
$ steroids connect --watch

87. APPGYVER: TUTORIAL
If you wantto discover more aboutAppGyver trythe tutorial:
$steroidsgeneratetutorialbegin

88. APPGYVER: BUGS!
Unfortunately those are relative newtechnologies.
There are some for example
(andthat's my phone)
bugs with android4.4

89. SUMMARY
Think mobile first
Make itresponsive
Give Feedback
Avoid unnecessaryHTTP requests
Optimize images, CSS and JS
Test!
Use AngularJs (wisely)
Use localstorages to handle lose of connection
Go Hybrid usingAppGyver and Ionic on top of PhoneGap

90. REFERENCE / ARTICLES
Yeoman - 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
CSSanimations vs JS
Use jQuery wisely
ngNewsletter - mobile
High Performance JavaScript
Even Faster WebSites
Google Performance Tips
You have ruinedJavascript.
SafarilocalStorage nightmare
Mobile frameworks

91. 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

92. REFERENCE / TOOLS
bindonce
angular-gestures
angular-carousel
angular-snap
SwipeJs
HammerJs
xAuth
Cordova
angular-phonegap-ready
App buildwith angular
(searchfor"mobile"tag)
Ant
AndroidSDK
xCode
Ionic Docs
generator-ionic
ionic-angular-appgyver-seed
Ionic examples
AppGyver
Python
Steroids CLI

93. REFERENCE / OTHERS
(surfitwithamobiledeviceorchoose"switchtomobile"atthebottom)
Namshi.com
Google WebFundamentals
Going mobile with angular
AngularJs andphoneGap
ngConf 2014 mobile

94. THANKS!
QUESTIONS?
(I hope so!)
:
:
adamquadmon
@lucianoamodio