webinar-ionic
TRANSCRIPT
![Page 1: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/1.jpg)
© mimacom ag
Mobile hybrid apps development with
15/04/2015
![Page 2: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/2.jpg)
© mimacom ag
2
@JaiL81
• Jaime López• Senior Software Engineer • mimacom Ibérica• Valencia• Travelling, food, coding, football.
About me
![Page 3: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/3.jpg)
© mimacom ag
15.04.2023 3
Do you need a mobile app?
• More platforms, more problems
![Page 4: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/4.jpg)
© 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.
![Page 5: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/5.jpg)
© 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
![Page 6: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/6.jpg)
© mimacom ag
Several hybrid platforms
15.04.2023 6
![Page 7: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/7.jpg)
© 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
![Page 8: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/8.jpg)
© mimacom ag
Phonegap/Cordova
15.04.2023 8
![Page 9: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/9.jpg)
© mimacom ag
Phonegap/Cordova
15.04.2023 9
![Page 10: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/10.jpg)
© mimacom ag
• Powerful and popular JS Framework• MVVM-MVC pattern design• Dependency Injection• Double binding• Modularity• Testability• Layer architechture
15.04.2023 10
![Page 11: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/11.jpg)
© 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
![Page 12: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/12.jpg)
© 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
![Page 13: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/13.jpg)
© 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
![Page 14: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/14.jpg)
© 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
![Page 15: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/15.jpg)
© mimacom ag
15
Demo
![Page 16: webinar-ionic](https://reader036.vdocument.in/reader036/viewer/2022062711/55c3e4dcbb61eb8c6d8b46f7/html5/thumbnails/16.jpg)
© mimacom ag
customer orientedUser friendlyCompetentlyQualitatively
Efficient
16
…the open source integrator