Bio
Say something witty about myself
Hybrid apps, like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the JavaScript locally. A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as the accelerometer, camera and local storage.
Telerik post source
None of us were seasoned JavaScript/web developers
But, we accomplished the most important thing...
We shipped
Architecture
Heavily dictated by your framework choice, but there are still mistakes that can be made
Use an MV* architecture
MVC - Model View Controller
MVP - Model View Presenter
MVVM - Model View View Model
HMVC - Hierarchical Model View Controller
Etc...
Model
Model
We didn't separate our models from our views, and as a result we couldn't delete our views or we would lose state
Use the model to abstract your backend data structures from your frontend code
Share models between views/pages
View
Templates are your friend
I thought it would be a performance issue. Premature optimization
Keeps separation of concerns
Changing/iterating page designs was slow in JS
Lead to CSS mixed into the code
React users can happily ignore this advice
Controller
Guess how many controllers we had in our application...1
Not only that, we also integrated our router into our controller
Create a controller for each page
Even better, create a controller for each distinct UI component
Good Idea - Select a framework based on your existing skills, requirements, and features
Bad Idea - Select a framework for non-technical reasons
We used Dojo because the business used Dojo
Dojo didn't yet have a stable set of mobile widgets, no MVC support, not opinionated
Framework considerations
Mobile support
Performance
Ease of use
Maturity
Community
For a first app use a full featured MV* framework
With more experience you might also consider combining libraries to build a framework
Spend the time to make builds fast
How fast?
< 1 minute
why?
Set ambitious targets
Attention Span
On device testing
Fail fast
Avoid multi-tasking
Long builds force multitasking, and every study done shows that humans are bad at multitasking when performing mentally challenging tasks like programming
How
Partial builds
Parallel build steps
Faster build tools
What if we can't get our builds that fast?
Find ways to test changes that don't require full builds
PhoneGap/Cordova prerequisites
Platform SDKs (i.e. Android SDK)
For Android testing, a connected Android device or configured Android emulator
npm, node, and Android tools in your path
Installing PhoneGap/Cordova
-
First App
cordova create my-app
cd my-app
cordova platform add android
cordova build
cordova emulate android
Using your own web code
Replace the content of the www directory with your content
Cloud based builds
Support for pushing updates to devices during testing
Would you say I have a plethora of testing options?
Oh yes, you have a plethora.
What is a plethora?
Desktop Browser
Mobile Browser
Official Emulator/Simulator
3rd Party Emulators/Simulators
Physical Devices
PhoneGap Developer App
Cloud Services
Test with a desktop browser first
Why?
Powerful emulation DevTools in Chrome
They just improved this function in Chrome 38
Desktop browser drawbacks
Useless for performance testing
Misses WebView/browser/vendor/device specific issues
These accounted for >50% of our defects
Hard/impossible to test device features
Probably 50% of our defects were vendor, browser, or device specific
iOS Simulator
Android Emulator
Android Emulator Alternatives
I haven't used either of these, so I can't vouch for their quality
Cloud Services
I don't have personal experience with any of these
3 years ago
Now
iOS
Since iOS 6, it's easy to connect to desktop Safari to debug
Android
As of 4.4 desktop Chrome DevTools can debug a webview
Alternative debugging tools
useful for debugging older versions of Android and iOS
Similar to the built in debugging tools, but with more limited function
A little difficult to setup and use
Performance
Performance
Performance
Are hybrid apps slow?
Compared to native apps
Does that mean I shouldn't develop a hybrid app?
No
It depends on the your use case
Scrolling
Persistent pain point of hybrid apps
Use native scrollable block elements, supported on iOS 5+ and Android 3+
overflow : auto;
-webkit-overflow -scrolling: touch;
Fix for iOS 7 issues with scrollable elements
Most of the mobile frameworks handle this already
How does a touch device recognize a double click/tap?
It waits 300ms after a tap to see if another one happens
This can be avoided with tools such as Fastclick
Most of the mobile frameworks handle this already
Network access can be slow
Create the UI in JavaScript, not on the server
Cache data locally where feasible
Minimize network requests
Sprite sheets
Compression
Combine and minify files
Images
Avoid SVGs
If shadows and gradients are needed, use images not CSS
Use the right image size, avoid scaling
Store images in app, don't download from server
Minimize Browser Reflows
Minimize DOM nodes and DOM nesting
Use CSS transforms
Use fixed widths and heights
Avoid loops that directly modify the DOM within the loop
