This document discusses hybrid mobile app development. A hybrid app is created with web technologies like HTML, CSS, and JavaScript and can run on multiple platforms. Hybrid apps are cross-platform, have quicker development times than native apps, and can access some native device features through plugins. Popular frameworks for building hybrid apps include PhoneGap/Cordova and Ionic, which are open source and allow building apps using web technologies that look and feel native. The document provides an overview of these frameworks and references for further information.

1. © mimacom ag
Mobile hybrid apps development
with
15/04/2015

2. © mimacom ag 2
@JaiL81
• Jaime López
• Senior Software Engineer
• mimacom Ibérica
• Valencia
• Travelling, food, coding, football.
About me
jaime.lopez@mimacom.com

3. © mimacom ag 22.04.2015 3
Do you need a mobile app?
• More platforms, more problems

4. © mimacom ag
What about hybrid apps?
22.04.2015 4
A hybrid app is an app usually created with web technologies and packaged to
be working in several platforms.

5. © mimacom ag
Native vs Hybrid
Native
• Platform specific
• Best performance
• More expensive
• More time consuming
• Specific development
tools
• Harder to learn
• Native resources and
animations
Hybrid
• Cross-platform
• Worse performance
• Web technologies
• Quick development
• Cheaper
• Access to native APIs
• Harder to look native
22.04.2015 5

6. © mimacom ag
Several hybrid platforms
22.04.2015 6

7. © 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
22.04.2015 7

8. © mimacom ag
Phonegap/Cordova
22.04.2015 8

9. © mimacom ag
Phonegap/Cordova
22.04.2015 9

10. © mimacom ag
• Powerful and popular JS Framework
• MVVM-MVC pattern design
• Dependency Injection
• Double binding
• Modularity
• Testability
• Layer architechture
22.04.2015 10

11. © 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.
22.04.2015 11

12. © 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+
22.04.2015 12

13. © mimacom ag
It’s an ecosystem
UI
Components
Ionicons
CLI
Ionic
View
Apps
platform
Push
Lab
LiveReload
Resource
generation
ngCordova
Creator
CSS
Framework
22.04.2015 13

14. © 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-
development/
• http://ionicframework.com/
• http://ionicframework.com/present-ionic/slides
22.04.2015 14

15. © mimacom ag 15
Demo

16. © mimacom ag
customer oriented
User friendly
Competently
Qualitatively
Efficient
16
…the open source integrator