This presentation will explain, how to develop an end to end mobile application using Javascript frameworks and Other Web Technologies, from mobile to server to database and unit testing

1. Why Hybrid is important?
Jacob Nelson

2. Why Hybrid is important?
• What is Native Mobile App?
• What is Mobile Web App?
• What is Hybrid App?
• Why it is so important for Web Developers (and
enterprises)?

3. Why Hybrid is important?
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).

4. Why Hybrid is important?
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.

5. Why Hybrid is important?
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).

6. Why Hybrid is important?
PhoneGap

7. Why Hybrid is important?
Access to device features
Battery Status Camera
Device Motion
(accelerometer)
Contacts Device Info
Device Orientation
(compass)
Dialogs
(notification)
File/File Transfer Geolocation
Media Capture Network Information Splash Screen
Vibration

8. Why Hybrid is important?
How does PhoneGap work?

9. Why Hybrid is important?
Device Fragmentation
Why Hybrid is important?
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.

10. Why Hybrid is important?
Device Fragmentation
Why Hybrid is important?
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.

11. Why Hybrid is important?
Device Fragmentation
Why Hybrid is important?
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 available
Support and syntax for CSS properties
How your application's interface is rendered

12. Why Hybrid is important?
Device Fragmentation
Why Hybrid is important?
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.

13. Why Hybrid is important?
Device Fragmentation
Why Hybrid is important?
Developing an HTML5 application that works consistently across
all versions of Android is very difficult.

14. Why Hybrid is important?Why Hybrid is important?
CrossWalk

15. Why Hybrid is important?
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.

16. Why Hybrid is important?
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.

17. Why Hybrid is important?
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

18. Why Hybrid is important?
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.

19. Why Hybrid is important?
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.

20. Why Hybrid is important?
PhoneGap

21. Why Hybrid is important?
CSS Frameworks
Why Hybrid is important?
Bootstrap
Foundation
Topcoat UI

22. Why Hybrid is important?
Frameworks
Why Hybrid is important?
Angular JS + Bootstrap + UI Bootstrap
+
PhoneGap

23. Why Hybrid is important?
Frameworks
Why Hybrid is important?
jQuery Mobile
+
PhoneGap

24. Why Hybrid is important?
Frameworks
Why Hybrid is important?
Onsen UI
+
Angular JS or jQuery
+
PhoneGap

25. Why Hybrid is important?
tap delay
Why Hybrid is important?
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.

26. Why Hybrid is important?
Ionic
Why Hybrid is important?
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

27. Why Hybrid is important?
Ionic
Why Hybrid is important?
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

28. Why Hybrid is important?
Ionic Supports
Why Hybrid is important?
Android 4.1 and up
iOS 7 and up
Blackberry 10

29. Why Hybrid is important?
Node js
Why Hybrid is important?
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.

30. Why Hybrid is important?
Middle Layer
Why Hybrid is important?
open-source Node.js frameworks
LoopBack
Sails JS
Express JS
Koa
Hapi

31. Why Hybrid is important?
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.

32. Why Hybrid is important?
MEAN
Why Hybrid is important?
MongoDB
+
Express js
+
Angular js
+
Node js

33. Why Hybrid is important?
Unit Testing
Why Hybrid is important?
Jasmine
Mocha
QUnit
Karma
Protractor

34. Why Hybrid is important?
Conclusion
Knowledge of Web Technologies is all
you need to develop an end to end
solution.

35. Thank You
Jacob Nelson