Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Web Unleashed Toronto 2015: Hybrid Mobile Apps with Ember.js

Talk at Web Unleashed Toronto 2015: Building Hybrid Mobile applications with Cordova and Ember.js.

Talk provided a general overview of ember, and Cordova/Phonegap tips that apply generically to any framework.

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Web Unleashed Toronto 2015: Hybrid Mobile Apps with Ember.js

  1. 1. Hybrid Apps with Ember @alexblom alex@isleofcode.com
  2. 2. Who am I • Programmer • Started with Java/C; • Mostly Ruby/Rails; • Go; • Ember for ~2.5 years;
  3. 3. Isle of Code • Toronto based development; • Focused on: • Prototyping; • Single sourcing mobile /w Ember.js & Cordova; and • A lot of beacon work.
  4. 4. Five things audience members will learn 1. How to build a single code base working on all platforms 2. What changes (if any) are required in the code base to achieve this 3. How to avoid common draw-backs of wrapped applications, such as perceived slowness 4. How to access native phone functions without muddling up the code base 5. How such applications are packaged and deployed
  5. 5. Contents • 1: What are hybrid apps?; • 2: Our tools (Cordova, Ember & Good Programming); • 3: Make it go zoom;
  6. 6. 1 - What are hybrid apps
  7. 7. • Using one code base for multiple platforms; • vs. building custom code bases for each platform;
  8. 8. Wrapped Apps are everywhere
  9. 9. Less cost of building
  10. 10. Re-use app for web
  11. 11. Less cost to add new features
  12. 12. No out of sync experiences
  13. 13. How important is complexity?
  14. 14. How easy is it for you to find engineers?
  15. 15. “The biggest mistake we’ve made as a company is betting on HTML5 over native” Mark Zuckerberg, 2012
  16. 16. 2 - Our Tools
  17. 17. What is Cordova? • Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript • https://cordova.apache.org/ • "Cordova" refers to the street the office was on when the PhoneGap project first began
  18. 18. Cordova vs Phonegap
  19. 19. UIWebView
  20. 20. (mostly) consistent API’s
  21. 21. The Ember way is not about Ember
  22. 22. ember-cli-cordova
  23. 23. Cordova/Ember is easier now • Process has come a long way
  24. 24. Bind Cordova Service https://github.com/isleofcode/ember-cli-cordova
  25. 25. Livereload
  26. 26. 3 - Make it go Zoom
  27. 27. Good Code == Good Hybrid • Much of making effective mobile is simply writing good code. • Desktops let us be lazier;
  28. 28. Cordova is not native
  29. 29. Cordova is not native
  30. 30. <preference name="webviewbounce" value="false" />
  31. 31. Touch Events http://hammerjs.github.io
  32. 32. Hammer Example
  33. 33. Ember Gestures https://github.com/runspired/ember-gestures
  34. 34. Ghost Clicks
  35. 35. Ember Hack
  36. 36. Manage Reflows
  37. 37. Manage Reflows • “Reflow is the process by which the geometry of the layout engine's formatting objects are computed. The HTML formatting objects are called frames: a frame corresponds to the geometric information for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model. A frame is rectangular, with width, height, and an offset from the parent frame that contains it.” • http://www-archive.mozilla.org/newlayout/doc/reflow.html
  38. 38. What causes Reflow? • Resizing the browser window; • using JavaScript methods involving computed styles; • adding or removing elements from the DOM; and • changing an element's classes. • https://developers.google.com/speed/articles/reflo w
  39. 39. Use CSS Transforms
  40. 40. visibility:hidden
  41. 41. Best Practices for avoiding Reflow 1. Avoid setting multiple inline styles; avoid setting styles individually. 2. Use class names of elements, and do so as low in the DOM tree as possible. 3. Batch your DOM changes and perform them offline; 4. Avoid computing styles too often. If you must then cache those values. 5. Apply animations with position: fixed or absolute so it doesn’t affect the layout of other elements. 6. Avoid table layouts, they trigger more reflows than block layouts because multiple passes must be made over the elements. 7. Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the the way down into the children of the modified node. This leads to more time being spent performing reflow. 8. Minimize CSS rules and remove unused CSS rules. 9. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this. 10.Avoid unnecessary complex CSS selectors - descendant selectors in particular. http://stage.docs.phonegap.com/tutorials/optimize/03-min-reflows/
  42. 42. -webkit-tap-highlight-color:rgba(0,0,0,0);
  43. 43. Understand Viewport Android Viewport iOS 7+ Viewport
  44. 44. ionic Keyboard • cordova.plugins.Keyboard.isVisible • cordova.plugins.Keyboard.hideKeyboardAccessoryBar • cordova.plugins.Keyboard.close • cordova.plugins.Keyboard.disableScroll • cordova.plugins.Keyboard.show • https://github.com/driftyco/ionic-plugin-keyboard
  45. 45. Infinite Scrolling • Smoke & Mirrors: https://github.com/runspired/smoke-and-mirrors • Ember ListView: https://github.com/emberjs/list- view • Ember Cloaking: https://github.com/eviltrout/ember-cloaking
  46. 46. Occlusion
  47. 47. http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon
  48. 48. Animations
  49. 49. Animations - Velocity
  50. 50. Canvas • Choppy and deal breaking. This is common when working with DOM; • Need to move to Canvas; • ~16ms target for animations, DOM can’t do this;
  51. 51. Mirage https://github.com/samselikoff/ember-cli-mirage
  52. 52. Liquid Fire http://ef4.github.io/liquid-fire/
  53. 53. Crosswalk https://crosswalk-project.org/
  54. 54. Hybrid Apps with Ember @alexblom alex@isleofcode.com

×