Angular js mobile   jsday 2014 - Verona 14 may
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Angular js mobile jsday 2014 - Verona 14 may

  • 1,705 views
Uploaded on

Building a responsive mobile application with AngularJs. Tips and Tricks. ...

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

More in: Mobile , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,705
On Slideshare
1,539
From Embeds
166
Number of Embeds
4

Actions

Shares
Downloads
12
Comments
0
Likes
5

Embeds 166

https://twitter.com 150
http://www.slideee.com 13
https://www.linkedin.com 2
http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 33. DON'T MAKE THEM WAIT! PRETEND TO BE FAST
  • 34. NGCLOAK <style> [ng-cloak].splash{ display:block!important; } [ng-cloak]{display:none;} .splash{background-color:blue;} </style> <divclass="splash"ng-cloak=""></div>
  • 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. 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. REDUCE LATENCY AVOID HTTP CALLS
  • 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. 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. 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. 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. 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. CSS PERFORMANCES ANIMATIONS Avoidcss animations At least avoidgradients andsimilar expensive stuff (you can use sprites).
  • 44. CSS PERFORMANCES CSS VS JS ANIMATION? Someone says Js it'slow. Well, it's notJS slow, jQueryis! Try GASP
  • 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. 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. YOU SHOULD TEST Test always with realdevices (even oldones).
  • 48. AND DEBUG You can use safariremote debugging for iOS or chrome remote debugging + for Androidangularjs-batarang
  • 49. AUTOMATE TESTING Automate tests with andProtractor Karma
  • 50. AUTOMATE DELIVERY Go CI or CD (continuous integration/deploy/delivery) with orSauceLabs BrowserStack
  • 51. ANGULARJS
  • 52. WHY ANGULARJS?
  • 53. Because it's awesome! Itenhance HTML, CSS and JavaScript and it's google and have ahuge community:
  • 54. Well, this is also agood reason to hate AngularJs: You have ruined Javascript.
  • 55. WHAT IS ANGULAR?
  • 56. THE BEST PART Less code wellorganized DI Testability Directives andreusability Promises ModelViewWhatever Whatever -> $scope <- View Services
  • 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. WHY IS ANGULAR STILL IMATURE? stillaWIP (averyfastone)
  • 59. WHY IS ANGULAR STILL IMATURE? Stillnot a perfect knowledge about it Services, Factories, ServiceProviders: "it's a mess!"
  • 60. THE FUTURE Angular 1.3:drop IE8 support Angular 2.0:use ES6, better DI, better modularity (I hope so!)
  • 61. ANGULAR OPTIMIZATIONS Maybe you don't really needAngularize everything!
  • 62. ANGULAR OPTIMIZATIONS AvoidngRepeat if not needed, this willreduce watchers andsave CPU.
  • 63. ANGULAR OPTIMIZATIONS Don't use filters in views (willbe fixedin next versions).
  • 64. ANGULAR OPTIMIZATIONS Watch the number of others watches (use )bindonce
  • 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. 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. WHY NOT NGTOUCH? Remember the course of 300ms? Well, it only binds ngClick. Then? Guess what! Use FastClick! or Ionic...
  • 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. 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. WHAT IS PHONEGAP / CORDOVA? Fills the gap between browsers andnative device features (geo-location, camera, accelerometers, push notificatuons).
  • 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. WHY PHONEGAP / CORDOVA? It makes native mobile features accessible from javascript. We can buildanddeploy fast. Can be usedwith almost any webframework.
  • 73. WHY PHONEGAP / CORDOVA? We can debug iOs in safari andandroidwith chrome
  • 74. WHAT'S BAD WITH PHONEGAP / CORDOVA? Performance (especially for intensive graphic on oldbrowsers)
  • 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. IONIC As for Twitter Bootstrap, Ionic is a complete framework to buildperformant Apps on top of AngularJs.
  • 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. IONIC: EMULATE Emulate andbuildfor a platform is simple like that: $ ionic platform add android $ ionic build android $ ionic emulate android
  • 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. IONIC: ANGULARJS It use angular binding &controllers under the hood.
  • 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. APPGYVER Fills the gap between cordova andperformances.
  • 83. APPGYVER: INSTALL Installing is similar to Cordovaand Ionic you willalso need or higher, and . AppGyver python 2.7 Steroids CLI
  • 84. APPGYVER: GENERATE PROJECT Once steroids CLI is available allyou have to do is: $steroidscreatemyProject $cdmyProject
  • 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. APPGYVER: TUTORIAL If you wantto discover more aboutAppGyver trythe tutorial: $steroidsgeneratetutorialbegin
  • 87. APPGYVER: BUGS! Unfortunately those are relative newtechnologies. There are some for example (andthat's my phone) bugs with android4.4
  • 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. 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. 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. 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. REFERENCE / OTHERS (surfitwithamobiledeviceorchoose"switchtomobile"atthebottom) Namshi.com Google WebFundamentals Going mobile with angular AngularJs andphoneGap ngConf 2014 mobile
  • 93. THANKS! QUESTIONS? (I hope so!) : : adamquadmon @lucianoamodio