ANGULARJS MOBILE
- VERONA 14 MAYJSDAY 2014
byLucianoAmodio
:
:
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: Myexperience with AngularJs
THEN I WAS INVOLVED IN
AND WITH AN INSPIRING LEAD
AND AN AMAZING TEAM
WE DID IT!
THE ANGULARJS VERSION
OF THE NAMSHI MOBILE WEBSITE
IN THIS TALK I WANT TO SHARE WITH YOU
HOW WE MADE ROCKET INTERNET IN GERMANY SAY
WOW!
LET'S START
WHAT IS
RESPONSIVE?
aresponsive website respond to the ambientadaptingitself to
provide the bestuser experience
WHAT CAN BE RESPONSIVE?
LAYOUT
LAYOUT / MEDIA QUERIES
Mediaqueries are filters thatcan be applied to CSS styles.
Theymake iteasyto change styles based on...
LAYOUT / SET YOUR VIEWPORT
<metaname="viewport"content="initial-scale=1,
maximum-scale=1,
user-scalable=no,
width=device-w...
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?
Tryask those guys:
Maybe using for apicture elementp...
IMAGES / RESPONSIVE
our solution (the concept):
<imgng-src="//ourCdn.tld/imageName-{{deviceSize}}.jpg">
FEATURES
You can use to provide differentcontentor
behaviours (think aboutmouseover on atouch onlydevice!)
Modernizr
Butdo...
USEFUL RESOURCES
You reallyshould read Google Web Fundamentals
Butalso givingalook at is notabad
idea!
Yeoman generator-mo...
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;}
</...
NGCLOAK
<style>
[ng-cloak].splash{
display:block!important;
}
[ng-cloak]{display:none;}
.splash{background-color:blue;}
</...
UX INSTANT FEEDBACK
For a mobile user is not big difference using a website or an app.
Provide the UX with visual/audio fe...
REDUCE LATENCY
AVOID HTTP CALLS
REDUCE LATENCY
AVOID HTTP CALLS WHILE LOADING THE PAGE
Concatenate andminify html, CSSandJSfiles.
( and don't needthis)
In...
REDUCE LATENCY
AVOID HTTP CALLS
Paginate results.
If you are displaying a catalog page you can embed a small json with a b...
REDUCE LATENCY
WITH ANGULARJS
AngularJs provide an internal cache service you can use to avoid multiple
requests of the sa...
CSS PERFORMANCES
SELECTORS
CSSselectors are readright to left
This mean you shouldavoidunnecessary ones
Nestedselectors ar...
CSS PERFORMANCES
SELECTORS BY PERFORMANCES
ID #header
Class .header
Tag div
Sibling div + p, div ~ p
Child div > p
Descend...
CSS PERFORMANCES
ANIMATIONS
Avoidcss animations
At least avoidgradients andsimilar expensive stuff (you can use sprites).
CSS PERFORMANCES
CSS VS JS ANIMATION?
Someone says Js it'slow.
Well, it's notJS slow, jQueryis!
Try GASP
JAVASCRIPT OPTIMIZATION
This is a long talk, but let me give you a quick tip: (well, angular
too!).
I strongly suggest you...
THE CURSE OF 300MS
Mobile browsers will wait approximately 300ms from the time that you tap
something before firing the cl...
YOU SHOULD TEST
Test always with realdevices (even oldones).
AND DEBUG
You can use safariremote debugging for iOS
or 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!
Itenhance HTML, CSS and JavaScript
and it's google and have ahuge community:
Well, this is also agood reason to hate AngularJs:
You have ruined Javascript.
WHAT IS ANGULAR?
THE BEST PART
Less code wellorganized
DI
Testability
Directives andreusability
Promises
ModelViewWhatever
Whatever -> $sco...
THE BEST PART*
angular.module('myModule')
.controller('myController', function($scope, MyService) {
$scope.myData = {
some...
WHY IS ANGULAR STILL IMATURE?
stillaWIP (averyfastone)
WHY IS ANGULAR STILL IMATURE?
Stillnot 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 needAngularize everything!
ANGULAR OPTIMIZATIONS
AvoidngRepeat if not needed, this willreduce watchers andsave CPU.
ANGULAR OPTIMIZATIONS
Don't use filters in views (willbe fixedin 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 viewor remove a directive)
in ...
ANGULAR FRIENDS
There are some modules to try out:
:to implement hammerJs gestures
:a simple touch carusel
:to snap everyt...
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 neededdata to make your website rea...
HYBRID APPS
An "HybridApp" is an App buildin HTML, CSSandJSthat you can put in an App
Store.
Dealing with Html5 in a webVi...
WHAT IS PHONEGAP / CORDOVA?
Fills the gap between browsers andnative device features
(geo-location, camera, accelerometers...
WHY PHONEGAP / CORDOVA?
It's Opensource, cross platform anddevice neutral.
There are more webthan objective-C developers o...
WHY PHONEGAP / CORDOVA?
It makes native mobile features accessible from javascript.
We can buildanddeploy fast.
Can be use...
WHY PHONEGAP / CORDOVA?
We can debug iOs in safari andandroidwith chrome
WHAT'S BAD WITH PHONEGAP / CORDOVA?
Performance
(especially for intensive graphic on oldbrowsers)
PHONEGAP / CORDOVA TIPS
Don't callCordova (native) js functions untilafter devicereadyfires or
use .
Cordova javascript ca...
IONIC
As for Twitter Bootstrap,
Ionic is a complete framework
to buildperformant Apps
on top of AngularJs.
IONIC: INSTALL
The installation is similar to cordova, it needs :
and (or ).
Andthen the needednpm packages:
Ant
$ sudo ap...
IONIC: EMULATE
Emulate andbuildfor a platform is simple like that:
$ ionic platform add android
$ ionic build android
$ io...
IONIC: LAYOUT
Ionic is fullof htmlcomponents.
Check out the , you willfindexamples of the available UIs.
I really like the...
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-ioni...
APPGYVER
Fills the gap between cordova andperformances.
APPGYVER: INSTALL
Installing is similar to Cordovaand Ionic
you willalso need or higher,
and .
AppGyver
python 2.7
Steroid...
APPGYVER: GENERATE PROJECT
Once steroids CLI is available allyou have to do is:
$steroidscreatemyProject
$cdmyProject
APPGYVER: EMULATE
On your device:downloadAppGyver Scanner for iOS/ Android
On your computer launch the steroids server:
Co...
APPGYVER: TUTORIAL
If you wantto discover more aboutAppGyver trythe tutorial:
$steroidsgeneratetutorialbegin
APPGYVER: BUGS!
Unfortunately those are relative newtechnologies.
There are some for example
(andthat's my phone)
bugs wit...
SUMMARY
Think mobile first
Make itresponsive
Give Feedback
Avoid unnecessaryHTTP requests
Optimize images, CSS and JS
Test...
REFERENCE / ARTICLES
Yeoman - Grunt - Bower
Ben Nadel:AngularJs experience
Responsive
Media Queries
Don't mess with viewpo...
REFERENCE / TOOLS:
grunt-responsive-image
Picturefill
Images.js
Modernizr
HTML5 polyfills
Yeoman generator-mobile
Howler.j...
REFERENCE / TOOLS
bindonce
angular-gestures
angular-carousel
angular-snap
SwipeJs
HammerJs
xAuth
Cordova
angular-phonegap-...
REFERENCE / OTHERS
(surfitwithamobiledeviceorchoose"switchtomobile"atthebottom)
Namshi.com
Google WebFundamentals
Going mo...
THANKS!
QUESTIONS?
(I hope so!)
:
:
adamquadmon
@lucianoamodio
Angular js mobile   jsday 2014 - Verona 14 may
Upcoming SlideShare
Loading in...5
×

Angular js mobile jsday 2014 - Verona 14 may

1,979

Published on

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

Published in: Mobile, Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,979
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Angular js mobile jsday 2014 - Verona 14 may"

  1. 1. ANGULARJS MOBILE - VERONA 14 MAYJSDAY 2014 byLucianoAmodio : : adamquadmon @lucianoamodio
  2. 2. WHO AM I?
  3. 3. I'M A SOFTWARE ENGINEER DOING CODE SINCE 2000
  4. 4. MY FIRST CONFERENCE (AS AUDITOR) HERE IN VERONA IN 2012
  5. 5. THE SECOND ONE MARCH 2013
  6. 6. HERE I MEET AND WAS LOVE!
  7. 7. I STARTED STUDYING HARD
  8. 8. DOING IT WRONG generator-angular-silex
  9. 9. DO YOU KNOW THIS GRAPH? Ben Nadel: Myexperience with AngularJs
  10. 10. THEN I WAS INVOLVED IN
  11. 11. AND WITH AN INSPIRING LEAD AND AN AMAZING TEAM
  12. 12. WE DID IT! THE ANGULARJS VERSION OF THE NAMSHI MOBILE WEBSITE
  13. 13. IN THIS TALK I WANT TO SHARE WITH YOU HOW WE MADE ROCKET INTERNET IN GERMANY SAY WOW!
  14. 14. LET'S START
  15. 15. WHAT IS RESPONSIVE?
  16. 16. aresponsive website respond to the ambientadaptingitself to provide the bestuser experience
  17. 17. WHAT CAN BE RESPONSIVE?
  18. 18. LAYOUT
  19. 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. 20. LAYOUT / SET YOUR VIEWPORT <metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  21. 21. LAYOUT / TECNIQUES Google Web Fundamentals
  22. 22. LAYOUT / MOSTLY FLUYD
  23. 23. LAYOUT / COLUMN DROP
  24. 24. LAYOUT / LAYOUT SHIFTER
  25. 25. LAYOUT / OFF CANVAS
  26. 26. IMAGES
  27. 27. IMAGES / OPTIMIZATION You should maybe with Optimize Images grunt-responsive-image
  28. 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. 29. IMAGES / RESPONSIVE our solution (the concept): <imgng-src="//ourCdn.tld/imageName-{{deviceSize}}.jpg">
  30. 30. FEATURES You can use to provide differentcontentor behaviours (think aboutmouseover on atouch onlydevice!) Modernizr Butdon'tforgetto provied (expeciallyfor IE)polyfills
  31. 31. USEFUL RESOURCES You reallyshould read Google Web Fundamentals Butalso givingalook at is notabad idea! Yeoman generator-mobile
  32. 32. MOBILE ISSUES
  33. 33. DON'T MAKE THEM WAIT! PRETEND TO BE FAST
  34. 34. NGCLOAK <style> [ng-cloak].splash{ display:block!important; } [ng-cloak]{display:none;} .splash{background-color:blue;} </style> <divclass="splash"ng-cloak=""></div>
  35. 35. 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)
  36. 36. 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
  37. 37. REDUCE LATENCY AVOID HTTP CALLS
  38. 38. 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 });
  39. 39. 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.
  40. 40. 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
  41. 41. 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; }
  42. 42. 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
  43. 43. CSS PERFORMANCES ANIMATIONS Avoidcss animations At least avoidgradients andsimilar expensive stuff (you can use sprites).
  44. 44. CSS PERFORMANCES CSS VS JS ANIMATION? Someone says Js it'slow. Well, it's notJS slow, jQueryis! Try GASP
  45. 45. 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
  46. 46. 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
  47. 47. YOU SHOULD TEST Test always with realdevices (even oldones).
  48. 48. AND DEBUG You can use safariremote debugging for iOS or chrome remote debugging + for Androidangularjs-batarang
  49. 49. AUTOMATE TESTING Automate tests with andProtractor Karma
  50. 50. AUTOMATE DELIVERY Go CI or CD (continuous integration/deploy/delivery) with orSauceLabs BrowserStack
  51. 51. ANGULARJS
  52. 52. WHY ANGULARJS?
  53. 53. Because it's awesome! Itenhance HTML, CSS and JavaScript and it's google and have ahuge community:
  54. 54. Well, this is also agood reason to hate AngularJs: You have ruined Javascript.
  55. 55. WHAT IS ANGULAR?
  56. 56. THE BEST PART Less code wellorganized DI Testability Directives andreusability Promises ModelViewWhatever Whatever -> $scope <- View Services
  57. 57. 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
  58. 58. WHY IS ANGULAR STILL IMATURE? stillaWIP (averyfastone)
  59. 59. WHY IS ANGULAR STILL IMATURE? Stillnot a perfect knowledge about it Services, Factories, ServiceProviders: "it's a mess!"
  60. 60. THE FUTURE Angular 1.3:drop IE8 support Angular 2.0:use ES6, better DI, better modularity (I hope so!)
  61. 61. ANGULAR OPTIMIZATIONS Maybe you don't really needAngularize everything!
  62. 62. ANGULAR OPTIMIZATIONS AvoidngRepeat if not needed, this willreduce watchers andsave CPU.
  63. 63. ANGULAR OPTIMIZATIONS Don't use filters in views (willbe fixedin next versions).
  64. 64. ANGULAR OPTIMIZATIONS Watch the number of others watches (use )bindonce
  65. 65. 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 });
  66. 66. 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
  67. 67. WHY NOT NGTOUCH? Remember the course of 300ms? Well, it only binds ngClick. Then? Guess what! Use FastClick! or Ionic...
  68. 68. 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.
  69. 69. 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
  70. 70. WHAT IS PHONEGAP / CORDOVA? Fills the gap between browsers andnative device features (geo-location, camera, accelerometers, push notificatuons).
  71. 71. 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.
  72. 72. WHY PHONEGAP / CORDOVA? It makes native mobile features accessible from javascript. We can buildanddeploy fast. Can be usedwith almost any webframework.
  73. 73. WHY PHONEGAP / CORDOVA? We can debug iOs in safari andandroidwith chrome
  74. 74. WHAT'S BAD WITH PHONEGAP / CORDOVA? Performance (especially for intensive graphic on oldbrowsers)
  75. 75. 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)
  76. 76. IONIC As for Twitter Bootstrap, Ionic is a complete framework to buildperformant Apps on top of AngularJs.
  77. 77. 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
  78. 78. IONIC: EMULATE Emulate andbuildfor a platform is simple like that: $ ionic platform add android $ ionic build android $ ionic emulate android
  79. 79. IONIC: LAYOUT Ionic is fullof htmlcomponents. Check out the , you willfindexamples of the available UIs. I really like the . Ionic Docs html5 input types
  80. 80. IONIC: ANGULARJS It use angular binding &controllers under the hood.
  81. 81. 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
  82. 82. APPGYVER Fills the gap between cordova andperformances.
  83. 83. APPGYVER: INSTALL Installing is similar to Cordovaand Ionic you willalso need or higher, and . AppGyver python 2.7 Steroids CLI
  84. 84. APPGYVER: GENERATE PROJECT Once steroids CLI is available allyou have to do is: $steroidscreatemyProject $cdmyProject
  85. 85. 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
  86. 86. APPGYVER: TUTORIAL If you wantto discover more aboutAppGyver trythe tutorial: $steroidsgeneratetutorialbegin
  87. 87. APPGYVER: BUGS! Unfortunately those are relative newtechnologies. There are some for example (andthat's my phone) bugs with android4.4
  88. 88. 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
  89. 89. 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
  90. 90. 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
  91. 91. 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
  92. 92. REFERENCE / OTHERS (surfitwithamobiledeviceorchoose"switchtomobile"atthebottom) Namshi.com Google WebFundamentals Going mobile with angular AngularJs andphoneGap ngConf 2014 mobile
  93. 93. THANKS! QUESTIONS? (I hope so!) : : adamquadmon @lucianoamodio
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×