2015 Open Talk on Ionic Framework v1. Hybrid mobile best practices. Ionic market, share and publishing

1. Open Talk on Ionic Framework

2. Cristian Cortez
+ 8y Developer | + 4y Trainer
Full Stack + Ionic Developer
@cortezcristian

4. Ionic is an HTML5 mobile app development framework
targeted at building hybrid mobile apps.
Ionic Framework Docs

5. Ionic Stack
Leveraged in New Technologies

6. Apache Cordova is an open-source mobile development
framework.
Architecture

7. AngularJS is an open-source web application framework
mainly maintained by Google to address many of the
challenges encountered in developing SPA.
AngularJS

8. Gulp is a javascript task runner that lets you automate tasks
such as building, minifying, live reload, pre-process files and
more...
GulpJS

9. Server side javascript and it's package manager.
Node.js & npm

10. Local Storage, Audio, Video, Animations...
HTML5 Features and Tips

11. An extension of CSS that adds power and elegance to the
basic language. It allows to use variables, nested rules,
mixins, inline imports, and more...
Sass

12. And more...
bower
jasmine
karma
mocha
grunt

13. Hybrid Mobile Apps
the obvious Practical Market Solution

14. Native Hybrid
Graphics Native APIs HTML, Canvas, SVG
Performance Very Fast Fast
Look and feel Native Emulated
Distribution Appstore Appstore
Device Access Yes Yes
Development
Skills
ObjectiveC, Swift,
Java
JavaScript, HTML5,
CSS3
Native vs. Hybrid

15. The Native Dilema
When developing for multiple platforms...
Mobile Experts are expensive and hard to find
Lot of new platforms (Android, iOS, WP, BB10OS,
FirefoxOS...)
Sooner or later you'll like to reach users from different
platforms

16. Stack Overflow Survey 2016

17. Stack Overflow Survey 2015

18. Stack Overflow Survey Results
Item / Year 2015 2016
Mobile developers 9.1% 8.4%

19. Developer Occupations
There are roughly just as many developers who call
themselves Mobile Developers as there are Android Mobile
Developers (3% for each). About 2.5% of all developers are
iOS Mobile Developers. We received 59 responses from
Windows Phone Mobile Developers (.1%).
Stack Overflow Survey 2016

20. Ionic Rapid Prototyping
The powerful command line utility

21. Ionic Client
$ npm install -g ionic cordova
$ ionic start demoapp sidemenu
$ cd demoapp
$ ionic serve

22. Ionic Up And Running

23. Tabs, Navigation, Menus and more...
Ionic Components

24. Contributed Templates
$ ionic start myMapDemo https://github.com/calende
$ cd myMapDemo
$ ionic serve
Leaftlet Mapping Application

25. Map Demo And Running

26. Adding Platforms
$ cordova plugin add cordova-plugin-geolocation
$ ionic platform add android
$ ionic platform add ios
$ ionic emulate ios

27. iPhone 6 Emulation
Run & Emulate on your Phone

28. Look & Feel
Ionic Material

29. Ionic Market
Ionic Market Example

30. Sharing and Publishing
Being Efficient with Ionic

31. Quick Sharing
Ionic View

32. Uploading / Viewing
$ ionic login # create account first
$ ionic upload
$ ionic share cortez.cristian@gmail.com
Invite a friend to your Ionic App

33. Publish Android Market
$ ionic start sopa-de-letras blank
$ # do some work with AngularJS
$ ionic platform add android
$ cordova build --release android
$ # publish app on google play

34. Android Publishing
Ionic Tools & Tips
Improving the development flow

35. Continuous Deployment
Continuously deploy your ionic app using Circle CI

36. Yeoman generator for creating Ionic hybrid mobile
applications using AngularJS and Cordova - lets you quickly
set up a project with sensible defaults and best practices.
Generator Ionic
Yeoman Generators

37. Ionic Box is a ready-to-go hybrid development environment
(based on Vagrant) for building mobile apps with Ionic,
Cordova, and Android.
Ionic Box
Notes

38. Ionic 2

39. Why Ionic 2?
Because of...
Angular 2
TypeScript
ES6
ES5
JavaScript

40. Angular 2

41. TypeScript

42. Stay in touch:
cortez.cristian@gmail.com
@cortezcristian