Mobile HTML5 websites and hybrid Apps with AngularJS - Bonamico

  • 890 views
Uploaded on

Slides from Carlo Bonamico talk @ codemotion roma 2014

Slides from Carlo Bonamico talk @ codemotion roma 2014

More in: 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
890
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
23
Comments
0
Likes
5

Embeds 0

No embeds

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. 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. 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. 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. 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. 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. ...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. about:inspect enable port forwarding from laptop to phone open http://localhost:8000 on the phone Discovering the device 6
  • 8. Monitoring CPU usage and FPS 7
  • 9. Inspecting the page on the phone 8
  • 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. var slide = { number: i + 1, title: "Title " + i, content: "#Title n markdown sample", html: "", background: "backgroundSlide" }; The model 10
  • 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. 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. 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. 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. 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. 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. 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. 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. Tune with AngularJS Batarang https://github.com/angular/angularjs-batarang Performance Tuning 19
  • 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. 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. 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. 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. 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. 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. 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. 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. Cordova Browser you install it once and open your code on your web server continuous refresh without reinstalling the app Development tips 28
  • 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. 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. Ionic CSS Ionic Icons Ionic Directives and support Tooling What's inside? 31
  • 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. 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. http://plnkr.co/edit/Mcw6F2BQP3RbB8ZhBYRl?p=preview Let's play around... (with Live Reload) 34
  • 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. 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. 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. 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. 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. 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. 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. 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