hybrid mobile application with ionic framework

19
Hybrid mobile application with Ionic Framework

Upload: dragos-ionita

Post on 15-Apr-2017

226 views

Category:

Software


2 download

TRANSCRIPT

Hybrid mobile application with Ionic Framework

Hybrid mobile applicationHybrid mobile application

The Downsides of Native

Ability in each platform required

Timely & expensive development

Entirely separate code bases

Hybrid mobile applicationHybrid mobile application

More Platforms. More Problems.

Why are we still coding for multiple platforms?

Hybrid mobile applicationHybrid mobile application

Is there an alternative?

Hybrid mobile applicationHybrid mobile application

Hybrid Apps: HTML5 that acts like native

Web wrapped in native layer

Direct access to native APIs

Web wrapped in native layer

Familiar web dev environment

Develop a single code base (web platform)

Hybrid mobile applicationHybrid mobile application

“Hybrid apps are slow!”

Hybrid mobile applicationHybrid mobile application

“Hybrid apps are slow!”

“The Times They Are a-Changin'”

Hybrid mobile applicationHybrid mobile application

Year Device Processor RAM

2007 iPhone 620 MHz 128 MB

Mobile devices have rapidly improved!

2010 iPhone 4 1 GHz 512 MB

2015 iPhone 6 1.4 GHz dual core 1 GB

Hybrid mobile applicationHybrid mobile application

Year Device Processor RAM

2007 iPhone 620 MHz 128 MB

Mobile devices have rapidly improved!

2010 iPhone 4 1 GHz 512 MB

2015 iPhone 6 1.4 GHz dual core 1 GB

2016 Galaxy S7 2.3 GHz quad-core 4 GB

Hybrid mobile applicationHybrid mobile application

Year Device Processor RAM

2007 iPhone 620 MHz 128 MB

Mobile devices have rapidly improved!

2010 iPhone 4 1 GHz 512 MB

2015 iPhone 6 1.4 GHz dual core 1 GB

2016 Galaxy S7 2.3 GHz quad-core 4 GB

Web-standards have rapidly improved!caniuse.com is lookin' pretty good nowadays

Android is now Chromium-basediOS users keep their devices up-to-date

Hybrid mobile applicationHybrid mobile application

Common UI

Native SDKs Are Great

Views

Navigation and stack history

Transitions

Gestures

Hybrid mobile applicationHybrid mobile application

Web Technologies You Already Know and Love

Hybrid mobile applicationHybrid mobile application

Proven for large-scale webapp development

Works with AngularJS

Extends the HTML vocabulary

UI Components using Directives and Services

Hybrid mobile applicationHybrid mobile application

Proven for large-scale webapp development

Works with AngularJS

Extends the HTML vocabulary

UI Components using Directives and Services

Native FocusedModeled off of native SDKs

Built to work with Cordova

Hybrid mobile applicationHybrid mobile application

Proven for large-scale webapp development

Works with AngularJS

Extends the HTML vocabulary

UI Components using Directives and Services

Native FocusedModeled off of native SDKs

Built to work with Cordova

Performance ObsessedHardware accelerated animations

Minimal DOM Manipulation

Hybrid mobile applicationHybrid mobile application

Proven for large-scale webapp development

Works with AngularJS

Extends the HTML vocabulary

UI Components using Directives and Services

Native FocusedModeled off of native SDKs

Built to work with Cordova

Performance ObsessedHardware accelerated animations

Minimal DOM Manipulation

Plain old CSS

Performance Obsessed

Nice visual systemClean and simpleStand-alone CSSClean and simple

Hybrid mobile applicationHybrid mobile application

Your APP

How does it all come together?

IonicAngularJS

WebView (Cordova)Native SDK

Hybrid mobile applicationHybrid mobile application

How exactly does work a hybrid mobile application

Thanks for watching!Thanks for watching!

Dragos IonitaSoftware Engineerhttps://ro.linkedin.com/in/dragos-ionita-8ab20756