agenda - jazoon...• on ios, the default webview is a uiwebview; • ember-cordova will default to...
TRANSCRIPT
![Page 1: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/1.jpg)
Agenda
• 1) Preamble;
• 2) Cordova / Ember ecosystem;
• 3) ember-cordova;
• 4) Build an app together;
• 5) Performance & Optimization;
![Page 2: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/2.jpg)
whoami
![Page 3: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/3.jpg)
Isle of Code
• Toronto based;
• Focused on Ember, Cordova & Electron;
![Page 4: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/4.jpg)
Why Cordova & Ember
• Because Ember;
• Cost;
• Hiring;
• Developer sanity;
• Single source;
• Speed of development;
![Page 5: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/5.jpg)
Ember
• Framework for ambitious applications;
• We like it because it forces a very organized approach
to large applications;
• Glimmer2 can out benchmark React. Without having a
shit slinging contest, Ember is not ‘slower’;
• Items like Routing, Controllers, Components are all
first class. CLI is standardized and add ons are easy;
• We’ll tour an Ember app in the demo;
![Page 6: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/6.jpg)
Mirage
ember-cli-mirage.com
![Page 7: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/7.jpg)
Mirage
ember-cli-mirage.com
![Page 8: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/8.jpg)
Good Code === Good Hybrid
• Much of making effective mobile is simply writing
good code;
• Desktops let us be lazier;
• JS ecosystem is littered with bad/leaky code;
![Page 9: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/9.jpg)
Cordova v PhoneGap
• PhoneGap was initially started in ~2008;
• In 2011, Adobe punched Nitobi;
• The open-source version was then called
Cordova;
• PhoneGap describes a productized version of
Cordova;
![Page 10: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/10.jpg)
![Page 11: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/11.jpg)
What does Cordova do?
• Creates an app, which is a full screen WebView;
• Adds a relatively stable api to a window.cordova
object;
• Each platform is added manually (e.g. cordova-
ios, cordova-android);
![Page 12: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/12.jpg)
Platforms
• Handling its own build process;
• Creating a native application that is a WebView;
• Including cordova.js for the platform;
• Defining each window.cordova function as
required;
![Page 13: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/13.jpg)
Plugins
• Similar to platforms;
• Generally defined a window.foo API in common
JS, and bindings to each platform manallly;
• To find plugins:
https://cordova.apache.org/plugins/
![Page 14: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/14.jpg)
cordova-cli cordova-lib app
platform ios
platform android
plugin camera
plugin network
![Page 15: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/15.jpg)
![Page 16: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/16.jpg)
cordova-build
• Runs internal tasks like prepare & validations;
• Looks for the API path:
• platforms/$platformName/cordova/Api.js
• Triggers a platform specific build, and copies
your assets from www to
platforms/$platformName/platform_www;
![Page 17: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/17.jpg)
In the old days
![Page 18: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/18.jpg)
ember-cordova
http://ember-cordova.com
![Page 19: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/19.jpg)
ember-cordova
• Library for packaging Ember/Cordova
applications together;
• Also includes support for:
• live reload;
• icon/splash generation;
• growing ecosystem of plugins;
![Page 20: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/20.jpg)
ember-cordova
• Is not a UI Library;
• Is not a component library;
• Currently has no opinions on which css
frameworks you should use;
• Does not protect you from bad performance (but
we do need to publish best practices);
![Page 21: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/21.jpg)
ember-cordova
cordova-lib app
platform ios
platform android
plugin camera
plugin network
ember-
cordova ember-cdv-plugin
![Page 22: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/22.jpg)
Improved WebViews
• On iOS, the default WebView is a UIWebView;
• ember-cordova will default to the newer and
more performant WKWebView;
• To disable this default, use the following flag:
• `ember cdv:platform add ios —default-
webview;
![Page 23: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/23.jpg)
Crosswalk
• https://crosswalk-project.org;
• For Android;
• Increases app size by ~20mb;
• ~5-10x speed improvement on older devices.
Especially 4.x;
• Consistent browser environment for stuff like css;
![Page 24: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/24.jpg)
Build Together
![Page 25: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/25.jpg)
Cordova serves from file urls
ember-cordova will warn you if this is not ‘hash’;
config/environment.js
![Page 26: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/26.jpg)
• App already has:
• A basic top menu;
• A big index of ‘users’;
• A button which re-shuffles to new users;
Build app together
![Page 27: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/27.jpg)
Hammer Example
![Page 28: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/28.jpg)
Ghost Clicks
![Page 29: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/29.jpg)
![Page 30: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/30.jpg)
A note on deviceready
• You probably need to use it for any custom
initializers;
• Has special handling. Even if you register the
handler after deviceready fires, it will still be
triggered.
![Page 31: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/31.jpg)
Manage Reflows
![Page 32: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/32.jpg)
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
![Page 33: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/33.jpg)
visibility:hidden
![Page 34: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/34.jpg)
Animation Frames
• ~15ms target;
• Taking longer will clog your thread;
• This 15ms target includes the work your browser
needs to do. Best to target ~10;
• Allows the browser to batch animation work;
![Page 35: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/35.jpg)
Other Commands
• ember cdv:prepare;
• ember cdv proxy;
![Page 36: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/36.jpg)
Hooks
• beforeBuild
• afterBuild
• beforePrepare
• afterPrepare
• Use hooks for any customization, warnings, etc;
• Hooks are just exported functions;
![Page 37: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/37.jpg)
Links will not appear as they have been clicked,
just like a native app.
styles/app.css
![Page 38: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/38.jpg)
• Mobile Safari raises touch vs click events on
anything but an a link;
Do this or action bindings will not work;
styles/app.css
![Page 39: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/39.jpg)
Understand Viewport
![Page 40: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/40.jpg)
Fix on Android
• <preference name="android-
windowSoftInputMode" value="adjustPan" />
• <preference name="android-configChanges"
value="orientation|keyboardHidden" />
![Page 41: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/41.jpg)
Keyboard
![Page 42: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/42.jpg)
Performance & Further
Optimization
![Page 43: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/43.jpg)
Further Optimization Tips
• Payload size matters (Glimmer2);
• Flat DOM matters;
![Page 44: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/44.jpg)
Infinite Scrolling
• Occlusion based scroll;
• Smoke & Mirrors:
https://github.com/runspired/smoke-and-mirrors
![Page 45: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/45.jpg)
http://runspired.github.io/smoke-and-mirrors/#/examples/dbmon
![Page 46: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/46.jpg)
Using too much memory
has negative implications
![Page 47: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/47.jpg)
http://www-
cs.canisius.edu/~hertzm/gcmalloc-oopsla-
2005.pdf
![Page 48: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/48.jpg)
Memory Leaks
• Garbage Collection: 2 types:
• Young Generation & Old Generation
![Page 49: Agenda - Jazoon...• On iOS, the default WebView is a UIWebView; • ember-cordova will default to the newer and more performant WKWebView; • To disable this default, use the following](https://reader033.vdocuments.site/reader033/viewer/2022041604/5e32ca1c09a0e328696664d2/html5/thumbnails/49.jpg)