hybrid mobile development - overview and intro to cordova/ionic framework

hello!I am Rashmika

NawaratneSoftware craftsman at 99X TechnologySpecialized in Hybrid Mobile Domain

Mobile Enablement

simple but not easy

Hybrid App Development

Why?

How?What?

Why?

Winning Product

Spee

d to

marke

t Widest customer

reach in niche

market

Why?

How?

Reaching user the fastest way

✘ Platform independent✘ Accessible from anywhere✘ Super fast learning curve for

development✘ Easy test and deploy

Spee

d to

marke

t

Get the maximum reach in audience

✘ Download from AppStore, GooglePlay and Windows Store

✘ Accessible anytime✘ Offline support✘ Full device access

Widest

customer reach

in niche market

Reaching your focus audience

iOS✘ Mac OS | Xcode✘ Objective C

W: 30% | E: 41% | A: 15% SL: 5.17%

Android✘ Win/Mac/Linux

OS✘ Java

W: 55% | E: 53% | A: 62% SL: 62.24%

Windows✘ Windows✘ XAML and ( C#.NET

or VB.NET ) W: 2% | E: 3% | A: 1.6% SL: 3.75%

W: Worldwide | E: Europe | A: Asia | SL: Sri LankaFrom October 2014 to October 2015

Best from both the worlds

Why?

How?What?

Depth of Hybrid Knowledge

Hybrid MobileDevelopment

Best of both worlds✘Native app with embedded HTML✘One app for many platforms✘Full device access✘Access anytime anywhere (Offline support)✘AppStore / Windows Store / Google Play✘Use your preferred language✘Learn fast and build faster

Myths!

✘They are just websites in app-stores✘You can’t access mobile features✘Native apps are more beautiful✘Slow!

Responsive Web

Hybrid Mobile

Native

Web view Native Translator

Hybrid Technologies

Xamarin Studio✘ Freemium by Xamarin ✘ Mac, Windows, Microsoft

Visual Studio✘ Write in C#

Appcelerator Titanium✘ Open Source by

Appcelerator Inc ✘ Mac, Windows, Linux,

Web / Cloud✘ Write in Web

technologies

Apache Cordova✘ Open Source by Apache✘ Mac, Windows, Linux,

Web / Cloud✘ Write in Web

technologies

PhoneGap✘ Open Source by Adobe✘ Mac, Windows, Linux,

Web / Cloud✘ Write in Web

technologies

Qt Creator✘ Open Source by Qt

Project✘ Mac, Windows, Linux,

BSD ✘ Use cross-platform C++,

JavaScript and QML

React/React Native✘ Open Source by Facebook✘ iOS, Android✘ Write in JS

“Oh No! The Zuck has spoken!”

Are You Building the Facebook app?

✘ Have a multi-million dollar budget?

✘ Have a large team of experienced native

developers?

✘ Does your billion-dollar revenue depend on this

app?

✘ If so...do native

✘ ...but today it's not so black and white

I choose Apache Cordova

✘ Widest community support

✘ Complete Eco-system✘ Plugins to support device

767 as at 2.30pm 13/11/2015

Concept behind hybrid development - Cordova

Technical Architecture - Cordova

Getting Started...Install Cordov

a

Download Mobile

Framework

Get the Bootstrap code

Test from Browser Emulator

Build the app

Push to

Cloud

✘ jQuery Mobile

✘ Ionic✘ Onsen UI✘ Intel XDK✘ Kendo UI✘ Sencha

Touch

Welcome Ionic

✘ Web Technologies You Already Know and LoveHTML5 / JS / CSS

✘ Standing on the Shoulders of AngularJS✘ Native Focused – build to work with Cordova✘ Performance Obsessed✘ Ionicons✘ Eco System of Services (Auth, Push, Analytics, Deploy,

View)

“How does it all come together?”

WebView (Cordova)

Native SDK

AngularJS

Ionic

Your App

Credits: Lucio Grenzi

Moving forward…1. Intro to Hybrid Mobile Domain2. Create and build an Ionic project using the CLI3. Debug and test Ionic project4. Build a modern mobile UI using Ionic components5. Access REST services6. Use controllers and routing7. Extending core Ionic capabilities using plugins8. Ionic ecosystem: Push, Auth, Analytics, Deployment,

Marketplace

What you need first?

Happy Coding!You can find me on

@razmik89RashmikaN@99x.lkblog.nawaratne.com

CreditsSpecial thanks to all the people who made and released these awesome resources for free:

✘Presentation template by SlidesCarnival✘Photographs by Unsplash