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
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 / 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
Recommended
