Why hybrid-is-important

Why Hybrid is important?

Jacob Nelson


• What is Native Mobile App?• What is Mobile Web App?• What is Hybrid App?• Why it is so important for Web Developers

(and enterprises)?


What is Native Mobile App?

Native apps are developed specifically for one platform, coded in a specific programming language, such as Swift or Objective C for iOS and Java for Android, and can take full advantage of all the device features — they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on.

They are installed through an application store (such as Google Play or Apple's App Store).


What is Mobile Web App?

Web apps are not real applications; they are really websites that, in many ways, look and feel like native applications, but are not implemented as such. They are run by a browser and typically written in HTML5.


What is Hybrid App?Hybrid application combines both native and HTML5 features. Hybrid apps are primarily web app, built using HTML5, CSS3 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features.

They are installed through an application store (such as Google Play or Apple's App Store).


PhoneGap


Access to device features

Battery Status Camera Device Motion

(accelerometer)

Contacts Device InfoDevice Orientation (compass)

Dialogs (notification) File/File Transfer Geolocation

Media Capture

Network Information Splash Screen

Vibration


How does PhoneGap work?


Device Fragmentation


Mobile device fragmentation is a phenomenon that occurs when some mobile users are running older versions of an operating system, while other users are running newer versions.




There are many versions of Android from many manufacturers, which affects the quality and features found in the native Android WebView that runs your Hybrid app.




With the platform variations in the market you are forced to assume that every Android WebView works differently. There are differences in:

Which JavaScript APIs are availableSupport and syntax for CSS propertiesHow your application's interface is rendered




Mobile device fragmentation can be a problem for software developers who must create different versions of the same app in order to make sure it works correctly with different versions of a given OS.




Developing an HTML5 application that works consistently across all versions of Android is very difficult.

Why Hybrid is important?Why Hybrid is important?

CrossWalk


What is CrossWalk?

Crosswalk is a web runtime that can be used to replace the stock WebView used by Android Cordova apps. Crosswalk is based on Google Chromium with Cordova API support and has better HTML5 feature support compared to the default WebView available in Android.

The Crosswalk Project was created by the Intel Open Source Technology Center.


Benefits of CrossWalk?

The Crosswalk runtime includes much more current and up-to-date HTML5 support than the default Android WebViews.

Helps to develop a hybrid application that works consistently across all versions of Android.


Benefits of CrossWalk?Crosswalk includes support for WebGL and the WebAudio APIs, which allow game developers to create immersive 3D games without having to learn native Android development.

WebRTC is another HTML5 feature that is not supported in the Android 4.x WebViews but is supported in the Crosswalk runtime.

Support for WebGL, WebAudio and WebRTC are added from Android 5.x


Downsides of CrossWalk?

The CrossWalk for Android build includes the complete WebView in your application package. The runtime itself consumes 15-20 MB in your apk. Apps built with CrossWalk will be 15-20 MB larger than those built for default android WebView.


When to use CrossWalk?

When you experience problems with inconsistent or missing HTML5 features, or poor CSS3 performance on Android.

when your HTML5 app uses any of the advanced HTML5 features that are not supported in the default Android WebViews.


PhoneGap


CSS Frameworks


Bootstrap

Foundation

Topcoat UI


Frameworks


Angular JS + Bootstrap + UI

Bootstrap

+

PhoneGap


Frameworks


jQuery Mobile

+

PhoneGap


Frameworks


Onsen UI

+

Angular JS or jQuery

+

PhoneGap


tap delay


User touches the display, the browser fires off

touchstart

User stop touching the display, the browser fires off

touchend

The browser waits for 300ms to see if the user taps

again

If the user didn’t tap, the browser fires off click event.


Ionic


Open source SDK for hybrid mobile app development

Is an npm module and requires node js

Built on top of Angular js and Apache Cordova

Provides tools and services for hybrid mobile app

development

Provides custom components and methods using

Angular js

Provides a powerful command line interface


Ionic


Hardware accelerated animations

Minimal Dom Manipulation, zero jQuery

Removes 300ms tap delay

Prevents ghostclicks

Stand alone CSS (independent of Ionic’s javascript)

Easy to customise


Ionic Supports


Android 4.1 and up

iOS 7 and up

Blackberry 10


Node js


Node.js is a JavaScript runtime built on Chrome's V8 JavaScript

engine.

Node.js is designed to build scalable network applications.

Node.js uses asynchronous event-driven, non-blocking I/O model.


Middle Layer


open-source Node.js frameworks

LoopBack

Sails JS

Express JS

Koa

Hapi


MongoDB

MongoDB is an open source, document-oriented database designed with both scalability and developer agility in mind. Instead of storing your data in tables and rows as you would with a relational database, in MongoDB you store JSON-like documents with dynamic schemas.


MEAN


MongoDB

+

Express js

+

Angular js

+

Node js


Unit Testing


Jasmine

Mocha

QUnit

Karma

Protractor


Conclusion

Knowledge of Web Technologies is all you need to develop an end to

end solution.

Thank YouJacob Nelson