Angular js mobile jsday 2014 - Verona 14 may

download Angular js mobile   jsday 2014 - Verona 14 may

of 94

  • date post

    23-Aug-2014
  • Category

    Mobile

  • view

    1.241
  • download

    5

Embed Size (px)

description

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

Transcript of Angular js mobile jsday 2014 - Verona 14 may

  • 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 the device, including the displaytype, width, height, orientation and even resolution.
  • LAYOUT / SET YOUR VIEWPORT
  • 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 elementpolyfill or aBBC solution: responsiveimages.org picturefill Images.js
  • IMAGES / RESPONSIVE our solution (the concept):
  • FEATURES You can use to provide differentcontentor behaviours (think aboutmouseover on atouch onlydevice!) Modernizr Butdon'tforgetto provied (expeciallyfor IE)polyfills
  • USEFUL RESOURCES You reallyshould read Google Web Fundamentals Butalso givingalook at is notabad idea! Yeoman generator-mobile
  • MOBILE ISSUES
  • DON'T MAKE THEM WAIT! PRETEND TO BE FAST
  • NGCLOAK

NGCLOAK 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 showanoverlyingsplashscreen 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) 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 REDUCE LATENCY AVOID HTTP CALLS 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 }); 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. 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 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; } 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 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 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 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 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 -> $scope