Hybrid Gone Wrong – Lessons learned developing a hybrid app – Our first app

View Github Repository Open presentation in a new window

siirila

See all presentation from siirila

Hybrid Gone Wrong – Lessons learned developing a hybrid app – Our first app

0 0

hybrid-overview

On Github siirila / hybrid-overview

Hybrid Gone Wrong

Lessons learned developing a hybrid app

Created by Jared SiirilaTwitter @jtsiirilahttps://github.com/siirila/hybrid-overview

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

Our first app

None of us were seasoned JavaScript/web developers

We made mistakes

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 stateUse the model to abstract your backend data structures from your frontend codeShare models between views/pages

View

Templates are your friend

I thought it would be a performance issue. Premature optimizationKeeps separation of concernsChanging/iterating page designs was slow in JSLead to CSS mixed into the codeReact users can happily ignore this advice

Controller

Guess how many controllers we had in our application...1Not only that, we also integrated our router into our controllerCreate a controller for each pageEven better, create a controller for each distinct UI component

Framework Selection

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 DojoDojo 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

Good frameworks include

With more experience you might also consider combining libraries to build a framework

Packaging and Building

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

npm install -g 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

Example

Alternatively, use Adobe PhoneGap Build

Cloud based builds

Support for pushing updates to devices during testing

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?

Faster iterations

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 featuresProbably 50% of our defects were vendor, browser, or device specific

Emulators & Simulators

iOS Simulator

Android Emulator

Android Emulator Alternatives

I haven't used either of these, so I can't vouch for their quality

Physical Devices

Phonegap Developer App

Cloud Services

I don't have personal experience with any of these

Debugging

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

Weinre

  • 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

GapDebug

Looks promising

Performance

Performance

Performance

Are hybrid apps slow?

Yes

Compared to native apps

Does that mean I shouldn't develop a hybrid app?

No

It depends on the your use case

Making Hybrid Faster

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

Photo Credits