FITC events. For digital creators. Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca Web, Native iOS and Native Android with One Ember.js App with Alexander Blom OVERVIEW Many companies maintain a separate repo for web and native mobile applications, and sometimes yet another for mobile web. Historically you may hear that ‘wrapped applications’ are slower and choppy. This is no longer the case – if your application is structured correctly. By using Ember.js with Cordova, it is possible to have a single code base powering all four (desktop web, mobile web, native iOS and native Android). Outside of the immediate cost/programming time savings, this technique enables you to build future iterations faster and stop the out of sync issues plaguing many code bases (e.g. the Android app has different features to iOS). OBJECTIVE Learn how to write a single code base which works on all platforms without the presumed drawbacks. TARGET AUDIENCE Developers/managers working on one of the three mentioned platforms, and who wish to no longer maintain separate code bases for each platform. ASSUMED AUDIENCE KNOWLEDGE A general knowledge of how either backend, front-end or mobile applications are developed is helpful. FIVE THINGS AUDIENCE MEMBERS WILL LEARN How to build a single code base working on all platforms What changes (if any) are required in the code base to achieve this How to avoid common draw-backs of wrapped applications, such as perceived slowness How to access native phone functions without muddling up the code base How such applications are packaged and deployed

1. Hybrid Apps with
Ember
@alexblom
alex@isleofcode.com

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;

8. Wrapped Apps are
everywhere

9. Less cost of building

10. Re-use app for web

11. Less cost to add new
features

12. No out of sync
experiences

13. How important is
complexity?

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

18. Cordova vs Phonegap

19. UIWebView

20. (mostly) consistent
API’s

22. The Ember way is not
about Ember

23. ember-cli-cordova

24. Cordova/Ember is easier
now
• Process has come a long way

25. Bind Cordova Service
https://github.com/isleofcode/ember-cli-cordova

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

31. <preference name="webviewbounce"
value="false" />

32. Touch Events
http://hammerjs.github.io

33. Hammer Example

34. Ember Gestures
https://github.com/runspired/ember-gestures

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

40. Use CSS Transforms

41. visibility:hidden

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/

43. -webkit-tap-highlight-color:rgba(0,0,0,0);

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

48. http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon

49. Animations

51. Animations - Velocity

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;

55. Mirage
https://github.com/samselikoff/ember-cli-mirage

56. Liquid Fire
http://ef4.github.io/liquid-fire/

57. Crosswalk
https://crosswalk-project.org/

58. Hybrid Apps with
Ember
@alexblom
alex@isleofcode.com