Web Unleashed Toronto 2015: Hybrid Mobile Apps with Ember.js
Download as PPTX, PDF1 like1,138 views
The document presents a talk outline on developing hybrid apps using Ember and Cordova, highlighting the benefits of a single codebase for multiple platforms. Key learnings include essential techniques for optimizing performance and avoiding common pitfalls in hybrid app development. It covers tools, best practices, and concepts like handling reflows and managing animations effectively.
Web Unleashed Toronto 2015: Hybrid Mobile Apps with Ember.js
- 2. Who am I • Programmer • Started with Java/C; • Mostly Ruby/Rails; • Go; • Ember for ~2.5 years;
- 3. Isle of Code • Toronto based development; • Focused on: • Prototyping; • Single sourcing mobile /w Ember.js & Cordova; and • A lot of beacon work.
- 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. Contents • 1: What are hybrid apps?; • 2: Our tools (Cordova, Ember & Good Programming); • 3: Make it go zoom;
- 6. 1 - What are hybrid apps
- 7. • Using one code base for multiple platforms; • vs. building custom code bases for each platform;
- 9. Less cost of building
- 10. Re-use app for web
- 11. Less cost to add new features
- 12. No out of sync experiences
- 14. How easy is it for you to find engineers?
- 15. “The biggest mistake we’ve made as a company is betting on HTML5 over native” Mark Zuckerberg, 2012
- 16. 2 - Our Tools
- 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
- 19. UIWebView
- 22. The Ember way is not about Ember
- 24. Cordova/Ember is easier now • Process has come a long way
- 26. Livereload
- 27. 3 - Make it go Zoom
- 28. Good Code == Good Hybrid • Much of making effective mobile is simply writing good code. • Desktops let us be lazier;
- 29. Cordova is not native
- 30. Cordova is not native
- 33. Hammer Example
- 35. Ghost Clicks
- 36. Ember Hack
- 37. Manage Reflows
- 38. 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
- 39. 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
- 42. 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/
- 44. Understand Viewport Android Viewport iOS 7+ Viewport
- 45. 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
- 46. 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
- 47. Occlusion
- 49. Animations
- 53. 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;