Mobile HTML5 websites and hybrid Apps with AngularJS - Bonamico

1,260 views
1,155 views

Published on

Slides from Carlo Bonamico talk @ codemotion roma 2014

Published in: Technology, Design

Mobile HTML5 websites and hybrid Apps with AngularJS - Bonamico

  1. 1. Mobile HTML5 websites and Hybrid Apps with AngularJS How to code today with tomorrow tools - mobile edition Carlo Bonamico - @carlobonamico NIS s.r.l. carlo.bonamico@gmail.com carlo.bonamico@nispro.it Web 0
  2. 2. AngularJS lets you use today the features of next-generation web standards, making front-end development more productive and fun What's better, it provides its "magic" tools to both web AND mobile apps databinding, dependency injection modularity, composable and event-driven architecture Thiscode-based interactive talk will share some lessons learned how to structure applications tune bandwidth and performance interact with mobile-specific elements such as touch, sensors native-looking UX with Ionic Framework In short 1
  3. 3. I do not want to join the fight ;-) The web tends to always be more powerful than people think! and the gap with native will only become smaller with time There are many use cases for web-based sites and hybrid apps (HTML5 packed in an app) avoiding install on device ensuring always latest version platform support: iOS, Android, Windows Phone... easier and more familiar development workflow And my favorite... to use Angular magic! Web vs Native 2
  4. 4. Open Source framwework fast-growing great community http://www.angularjs.org Lets you adopt future web architecture and tools today anticipate Web Components and EcmaScript 6 Create modular, robust, testable apps So why AngularJS 3
  5. 5. Dependency Injection split component definition from component wiring Module composition e.g. common modules mobile-only components desktop-only components What you get: write less code, reuse more the code you write! Angular gives structure and modularity 4
  6. 6. ...isn't a web / JS Mobile app unusably slow? Let's try... This presentation is an Angular-based Single Page Application Now we launch it on a phone and explore it with Chrome usb debugging But... 5
  7. 7. about:inspect enable port forwarding from laptop to phone open http://localhost:8000 on the phone Discovering the device 6
  8. 8. Monitoring CPU usage and FPS 7
  9. 9. Inspecting the page on the phone 8
  10. 10. A View: index.html a style.css peppered-up with AngularJS 'ng-something' directives A model data: slides.md code: array of slide object A controller script.js What's inside 9
  11. 11. var slide = { number: i + 1, title: "Title " + i, content: "#Title n markdown sample", html: "", background: "backgroundSlide" }; The model 10
  12. 12. ngSlides.service('slidesMarkdownService', function ($http) { var converter = new Showdown.converter(); return { getFromMarkdown: function (path) { var slides = []; $http({method: 'GET', url: path}). success(function (data, status, headers, config) { var slidesToLoad = data.split(separator); //two dashe s for (i = 0; i < slidesToLoad.length; i++) { var slide = { content: slidesToLoad[i], //.. init other slide fields }; slide.html = converter.makeHtml(slide.content); slides.push(slide); } }); return slides; } } }) A service to load slides from markdown 11
  13. 13. binding the model to the html <body ng-app="ngSlides" ng-class="slides[currentSlide].background" ng-controller="presentationCtrl"> <div id="slidesContainer" class="slidesContainer" > <div class="slide" ng-repeat="slide in slides" ng-show="slide.number == currentSlide" > <div ng-bind-html="slide.html"></div> <h4 class="number">{{slide.number}}</h4> </div> </div> </body> and a very simple css for positioning elements in the page A simple declarative view 12
  14. 14. ngSlides.controller("presentationCtrl", function ($scope, $http, $rootScope, slidesMarkdownService) { $scope.slides = slidesMarkdownService.getFromMarkdown('slides.md'); $scope.currentSlide = 0; $scope.next = function () { $scope.currentSlide = $scope.currentSlide + 1; }; $scope.previous = function () { $scope.currentSlide = $scope.currentSlide - 1; }; }); A controller focused on interaction 13
  15. 15. Any sufficiently advanced technology is indistinguishable from magic. Arthur C. Clarcke Add search within the slides in one line <div ng-repeat="slide in slides | filter:q">...</div> where q is a variable containing the search keyword AngularJS magic 14
  16. 16. Two-way Databinding split the view from the logic {{slide.number}} Dependency Injection gives decoupling, testability & enriching of code and tags function SlidesCtrl($scope, SlidesService) { SlidesService.loadFromMarkdown('slides.md'); } The power of composition - of modules module('slides',['slides.markdown']) directives <h1 ng-show='enableTitle' ng-class='titleClass'>..</h1> filters slide in slides | filter:q | orderBy:title | limit:3 ... AngularJS magic is made of 15
  17. 17. But what's more important, less "low value" code more readable code So you can concentrate on your application idea AngularJS is opinionated but it will let you follow a different way in case you really need it So Angular let you write less code 16
  18. 18. Speed can mean many things UX speed vs processing speed databinding lets you easily display data progressively client-side rich models and filtering let you respond quickly to user input network delays vs app response times But the challenge isn't just being performant Being an awesome mobile app handle gestures respect user expectations (e.g. swipeable cards ) manage navigation manage app state and off-line availability So, back to our mobile apps... 17
  19. 19. reduce DOM manipulation use simple markup move all styling to CSS no JS Animation, use CSS3 HW accelerated transitions optimize your databindings https://www.exratione.com/2013/12/considering-speed-and- slowness-in-angularjs/ bind once and targeted bindings https://github.com/Pasvaz/bindonce Performance Tips 18
  20. 20. Tune with AngularJS Batarang https://github.com/angular/angularjs-batarang Performance Tuning 19
  21. 21. The biggest cost is opening a connection, not transferring files use HTTP Keep-alive enable GZip compression https://developers.google.com/speed/pagespeed/module Local manipulation of data greatly reduces network traffic Local DB and sync Bandwidth optimizations 20
  22. 22. Module ng-touch fastclick: eliminate the 300ms delay easily manage swipes <div ng-swipe-left="next()" > for advanced cases: ionic-gestures hammer.js Support Touch and Gestures 21
  23. 23. On the device Session storage Local storage lawnchair PouchDB http://pouchdb.com/ In the cloud Mongolab http://mongolab.com Firebase with AngularFire https://www.firebase.com BaasBox http://www.baasbox.com Storing state 22
  24. 24. HTML5 standard APIs support only some sensors location (very good support) orientation acceleration Additional sensors require the PhoneGap APIs need to wrap all callbacks with $apply() or better, a dedicated service to notify Angular of changes occurred out of its lifecycle Managing sensors 23
  25. 25. Chrome remote debugging and screencast https://developers.google.com/chrome-developer- tools/docs/remote-debugging chrome://inspect/#devices Emulate device resolutions, DPIs, sensors: Chrome emulator Ripple Emulator http://emulate.phonegap.com How to develop for mobile? 24
  26. 26. Development-time structure multiple files component/dependency managers (bower...) Compile-time structure limited number of files concatenation minification Use a toolchain Marcello Teodori's talk on JS Power Tools Issues 25
  27. 27. first phase: prototyping on a Desktop browser second phase: unit testing way easier with AngularJS third phase: on device testing Chrome on-device debugging Testable mobile apps? 26
  28. 28. Phonegap http://phonegap.com/ https://cordova.apache.org/ Phonegap Build http://build.phonegap.com Chrome Apps for Mobile http://blog.chromium.org/2014/01/run-chrome-apps-on- mobile-using-apache.html Packaging apps for markets 27
  29. 29. Cordova Browser you install it once and open your code on your web server continuous refresh without reinstalling the app Development tips 28
  30. 30. or better the UX - User Experience? Comparing mobile web frameworks http://moduscreate.com/5-best-mobile-web-app-frameworks- ionic-angulalrjs/ JQuery Mobile widgets-only DOM-heavvy Angular integration is not simple (different lifecycles) at most, JQ Mobile for CSS and Angular for navigation and logic What about the UI? 29
  31. 31. AngularJS-based, Open Source performance obsessed mobile-looking extensible http://ionicframework.com/ http://ionicframework.com/getting-started/ http://ionicframework.com/docs/guide/ Enter Ionic Framework 30
  32. 32. Ionic CSS Ionic Icons Ionic Directives and support Tooling What's inside? 31
  33. 33. elegant yet very lightweight <div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> </div> http://ionicframework.com/docs/ 3D animations, HW accelerated sass-based for custom theming 500 free icons (ionicons) Ionic CSS 32
  34. 34. mobile navigation and interactions <ion-list> <ion-item ng-repeat="item in items" item="item" can-swipe="true" option-buttons="itemButtons"> </ion-item> </ion-list> services for gestures navigation http://ionicframework.com/docs/api Ionic Directives 33
  35. 35. http://plnkr.co/edit/Mcw6F2BQP3RbB8ZhBYRl?p=preview Let's play around... (with Live Reload) 34
  36. 36. based on UI-Router http://angular-ui.github.io/ui-router sub-views (e.g. Tabs) per-view navigation history UI Gallery http://ionicframework.com/present-ionic/slides/#/16 Navigation 35
  37. 37. PhoneGap based build chain $ npm -g install ionic $ ionic start myApp tabs $ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios Ionic Tooling 36
  38. 38. AngularJS 2.0 will be Mobile First performance browser support http://blog.angularjs.org/2014/03/angular-20.html Web Components on Mobile EcmaScript 6 - Object.observe() -> ultrafast binding The Future 37
  39. 39. AngularJS can be viable on mobile interactivity in plain HTML5 views AngularJS changes your way of working (for the better!) let you free of concentrating on your ideas makes for a way faster development cycle makes for a way faster interaction with customer cycle essential for Continuous Delivery! Lessons learnt 38
  40. 40. Like all the magic wands, you could end up like Mikey Mouse as the apprentice sorcerer Getting started is very easy But to go further you need to learn the key concepts scopes dependency injection directives promises So get your training! Codemotion training (june 2014) http://training.codemotion.it/ NEW! Advanced AngularJS course coming in July-September 2014 Lessons learnt 39
  41. 41. Books http://www.ng-book.com/ - Recommended! AngularJS and .NET http://henriquat.re Online tutorials and video trainings: http://www.yearofmoo.com/ http://egghead.io All links and reference from my Codemotion Workshop https://github.com/carlobonamico/angularjs-quickstart https://github.com/carlobonamico/angularjs- quickstart/blob/master/references.md Full lab from my Codemotion Workshop https://github.com/carlobonamico/angularjs-quickstart To learn more 40
  42. 42. Optimizing AngularJS for mobile http://blog.revolunet.com/angular-for-mobile http://www.ng-newsletter.com/posts/angular-on-mobile.html https://www.youtube.com/watch?v=xOAG7Ab_Oz0 http://www.bennadel.com/blog/2492-What-A-Select-watch- Teaches-Me-About-ngModel-And-AngularJS.htm Web Components http://mozilla.github.io/brick/docs.html http://www.polymer-project.org/ Even more 41
  43. 43. Explore these slides https://github.com/carlobonamico/mobile-html5-websites- and-hybrid-apps-with-angularjs https://github.com/carlobonamico/angularjs-future-web- development-slides My presentations http://slideshare.net/carlo.bonamico Follow me at @carlobonamico / @nis_srl will publish these slides in a few days Attend my Codemotion trainings http://training.codemotion.it/ Thank you! 42

×