The presentation I prepared for in-house skill building. Introduction to Hybrid development. Understanding different frameworks and choosing the right one.
2. Who am I?
• Sr. Developer @ Synerzip Softech
• 5+ years of development experience
• Mobile Application development in Android, J2ME,
Blackberry
• Web development using Javascript, HTML5, AngularJS,
Polymer
• Current interests: Hybrid application development
• Contact
• kunj.t.2490@gmail.com
• LinkedIn https://in.linkedin.com/in/kunjan-thakkar-4199b129
3. What are hybrid applications?
• A hybrid application is basically
a native application with
embedded HTML
• It has all the benefits of native
apps like full access to APIs,
app-store presence, etc.
• Selected portions of the app are
written using web technologies.
4. Skills needed for hybrid apps
All hybrid applications are based on javascript. They might
be based on some specific javascript technologies like
jquery/angularjs
9. Phonegap
• Phonegap is a mobile application development framework. It
enables developers to build applications for mobile devices
using Javascript, HTML5 and CSS3 instead of relying on
platform specific APIs in IOS/Android/Windows Phone.
• Although the applications are developed using HTML, CSS
and Javascript, the end product is a binary that can be
distributed through the respective ecosystems.
• Phonegap was created by Nitobi and Adobe acquired it in
2011.
10. Cordova
• The core engine for Phonegap is 100% open source under the
Apache Cordova project.
• Cordova is the engine that powers Phonegap. It bridges the
gap between Javascript, HTML5 and native.
• The hybrid application would run in a web browser view that
takes up 100% device height and 100% device width.
• The web view used by the application is the same web view
used by the native operating system.
• On iOS, this is the Objective-C UIWebView class
• On Android, this is android.webkit.WebView.
11. Cordova
• When an application is created using cordova, it creates
a skeleton for the native app
• For eg: For an android application, it would create a
manifest file and a main activity to launch the application.
The main activity would then initialize the WebView class
where your javascript loads
• This means you get access to the generated code base in
native as well. You could add any special permissions that
you want for a particular platform, in case they are
unavailable through config.xml
12. Jquery Mobile
• Build on popular jquery library and uses cordova
• Easy access to DOM
• Shallower learning curve as compared to other hybrid
frameworks
• Several built-in widgets like page, panel, etc
• You can create your own theme using theme roller.
• AJAX calls are made automatically to load dynamic
content.
• Rich set of third party plugins
• [Demo]
13. Mobile angular UI
• Based on AngularJS and Bootstrap. Uses cordova
• Several built-in components like switches, overlays,
sidebars, absolute positioned navigation bars.
• Works seamlessly from mobile to desktop and back
• No dependencies on jquery or bootstrap.js
• Internally uses bootstrap to provide responsiveness
• Font awesome ions are included by default in place of
glyphicons
• [Demo]
14. Ionic
• Built with Sass and optimized for AngularJS. Uses
cordova
• Built-in app templates help you get started in minutes
• Its native focussed - same code but renders differently
on different OS giving the application a more native feel
• Uses templating which reduces code bloat.
• Minimal DOM manipulation
• No dependencies on jquery
• Hardware accelerated transitions
• [Demo]
15. Introduction to Appery.io
• Appery.io is a cloud-based platform that provides UI
development tools and integrated backend services.
• It uses bootstrap for responsiveness and cordova for
building the application
• It gives you a choice of the UI framework you want to
work with. You could create an application using Jquery
mobile/mobile angular UI/Ionic
• Appery has built in support for backend/databases/push
notifications.
• The created application has some commonly used
cordova plugins like google analytics pre-installed. Also
you can install any other cordova plugin easily.
18. What if I need to access some
native functionality thats not
currently supported?
• A plugin is a bit of add-on code that provides JavaScript
interface to native components.
• It allows the Cordova webview within which the app
renders to communicate with the native platform on
which it runs.
• These are some plugins created by developers -
http://cordova.apache.org/plugins/
20. Why I should I go for a hybrid
application(I)?
• One code runs everywhere - all mobile platforms as well
desktops. Hybrid applications are cross-platform, which saves
you money and time (which saves you even more money ;))
• Time to market is comparatively less
• Consistent UI throughout all platforms which is tricky to
achieve with native apps.
• CSS is powerful! You can customize almost anything right
from headers to switches to transitions. Several UI
frameworks now have built-in transitions which are hardware
accelerated giving your users a smooth experience.
21. Why I should I go for a hybrid
application(II)?
• Need to access some native APIs? Write a plugin :) Hybrid
apps give you benefits of javascript and native both. You get
access of native and power of javascript.
• You can make use of the powerful javascript libraries that are
at our disposal for eg: gmaps.js which supports geolocation
and several other map features. On native you might have to
implement these by yourself. And the list is endless ..
23. So what do I use and when?
Jquery Mobile Mobile angular UI Ionic
Supports all mobile devices and
all desktop browsers
Supports all mobile devices and
all desktop browsers
Supports android and ios. Minimal
windows phone support. No
guaranteed support for browsers
Well suited for simple
applications. Not well suited for
applications having complex
UI/DOM manipulations
Well suited for applications that
require binding and have complex
UI
Well suited for applications that
require binding and have complex
UI
UI appears similar on all devices.
However, can be configured using
device type checks
UI appears similar on all devices.
However, can be configured using
device type checks
Native focussed. Same code
renders differently on different OS
giving the application a more
native feel
Create your own theme using
theme roller
Themes can be created using css Themes can be created using css
24. No built in responsiveness. Need
to include third party libraries for it.
Uses Bootstrap3 internally for
responsiveness
Offers built in responsive grid
support
Performance can degrade for
complex applications
Performance is better than JQM,
however, not as smooth as ionic
Excellent performance and speed
on native devices.
Limited built in transitions Limited built in transitions Several built in hardware
accelerated transitions
No built in app templates. No built in app templates.
However, the application created
contains a rich bunch of samples.
Built in app templates get you
started in minutes
Executable needs to be
distributed manually if you do not
want to upload it on app store
Executable needs to be
distributed manually if you do not
want to upload it on app store
You can use the Ionic View app to
share your application with
selected users without uploading
it to app store
