webinar-ionic

© mimacom ag

Mobile hybrid apps development with

15/04/2015

© mimacom ag

2

@JaiL81

• Jaime López• Senior Software Engineer • mimacom Ibérica• Valencia• Travelling, food, coding, football.

About me

[email protected]

© mimacom ag

15.04.2023 3

Do you need a mobile app?

• More platforms, more problems

© mimacom ag

What about hybrid apps?

15.04.2023 4

A hybrid app is an app usually created with web technologies and packaged to be working in several platforms.

© mimacom ag

Native vs Hybrid

Native• Platform specific• Best performance• More expensive• More time consuming• Specific development

tools• Harder to learn• Native resources and

animationsHybrid

• Cross-platform• Worse performance• Web technologies• Quick development• Cheaper• Access to native APIs• Harder to look native

15.04.2023 5

© mimacom ag

Several hybrid platforms

15.04.2023 6

© mimacom ag

Phonegap/Cordova

• Is there any difference?└ Yes, Phonegap is a distribution of Cordova.└ Adobe/Nitobi donated Phonegap codebase to Apache and

renamed it to Cordova.└ Currently the only difference are some commands to

integrate Phonegap with some Adobe services.• Free and open-source• HTML, JS and CSS• Same code base for several platforms• Lots of plugins to interact with native APIs• Great support of community• Powerful CLI

15.04.2023 7

© mimacom ag

Phonegap/Cordova

15.04.2023 8

© mimacom ag

Phonegap/Cordova

15.04.2023 9

© mimacom ag

• Powerful and popular JS Framework• MVVM-MVC pattern design• Dependency Injection• Double binding• Modularity• Testability• Layer architechture

15.04.2023 10

© mimacom ag

Create hybrid mobile apps with the web technologies you love.

Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building

highly interactive apps. Built with Sass and optimized for AngularJS.

15.04.2023 11

© mimacom ag

• Standing on the shoulders of AngularJS• Native support through Cordova• Focused in performance (HW accelerated

animations, minimal DOM manipulation)• Beautiful theme and clean and simple CSS• Built with Sass -> quickly personalization• Optimized for iOS 7+ and Android 4.1+

15.04.2023 12

© mimacom ag

It’s an ecosystemUI

Components

Ionicons

CLI

Ionic View

Apps platform

Push

Lab

LiveReload

Resource generation

ngCordova

Creator

CSS Framework

15.04.2023 13

© mimacom ag

References

• http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/

• http://www.slideshare.net/cihadhoruzoglu/hybrid-apps-with-angular-ionic-framework

• http://cordova.apache.org/• http://www.sitepoint.com/native-vs-hybrid-app-dev

elopment/• http://ionicframework.com/• http://ionicframework.com/present-ionic/slides

15.04.2023 14

© mimacom ag

15

Demo

© mimacom ag

customer orientedUser friendlyCompetentlyQualitatively

Efficient

16

…the open source integrator