Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Open Talk on Ionic Framework
Cristian Cortez
+ 8y Developer | + 4y Trainer
Full Stack + Ionic Developer
@cortezcristian
Ionic is an HTML5 mobile app development framework
targeted at building hybrid mobile apps.
Ionic Framework Docs
Ionic Stack
Leveraged in New Technologies
Apache Cordova is an open-source mobile development
framework.
Architecture
AngularJS is an open-source web application framework
mainly maintained by Google to address many of the
challenges encoun...
Gulp is a javascript task runner that lets you automate tasks
such as building, minifying, live reload, pre-process files a...
Server side javascript and it's package manager.
Node.js & npm
Local Storage, Audio, Video, Animations...
HTML5 Features and Tips
An extension of CSS that adds power and elegance to the
basic language. It allows to use variables, nested rules,
mixins, ...
And more...
bower
jasmine
karma
mocha
grunt
Hybrid Mobile Apps
the obvious Practical Market Solution
Native Hybrid
Graphics Native APIs HTML, Canvas, SVG
Performance Very Fast Fast
Look and feel Native Emulated
Distribution...
The Native Dilema
When developing for multiple platforms...
Mobile Experts are expensive and hard to find
Lot of new platfo...
Stack Overflow Survey 2016
Stack Overflow Survey 2015
Stack Overflow Survey Results
Item / Year 2015 2016
Mobile developers 9.1% 8.4%
Developer Occupations
There are roughly just as many developers who call
themselves Mobile Developers as there are Android...
Ionic Rapid Prototyping
The powerful command line utility
Ionic Client
$ npm install -g ionic cordova
$ ionic start demoapp sidemenu
$ cd demoapp
$ ionic serve
Ionic Up And Running
Tabs, Navigation, Menus and more...
Ionic Components
Contributed Templates
$ ionic start myMapDemo https://github.com/calende
$ cd myMapDemo
$ ionic serve
Leaftlet Mapping App...
Map Demo And Running
Adding Platforms
$ cordova plugin add cordova-plugin-geolocation
$ ionic platform add android
$ ionic platform add ios
$ i...
iPhone 6 Emulation
Run & Emulate on your Phone
Look & Feel
Ionic Material
Ionic Market
Ionic Market Example
Sharing and Publishing
Being Efficient with Ionic
Quick Sharing
Ionic View
Uploading / Viewing
$ ionic login # create account first
$ ionic upload
$ ionic share cortez.cristian@gmail.com
Invite a f...
Publish Android Market
$ ionic start sopa-de-letras blank
$ # do some work with AngularJS
$ ionic platform add android
$ c...
Android Publishing
Ionic Tools & Tips
Improving the development flow
Continuous Deployment
Continuously deploy your ionic app using Circle CI
Yeoman generator for creating Ionic hybrid mobile
applications using AngularJS and Cordova - lets you quickly
set up a pro...
Ionic Box is a ready-to-go hybrid development environment
(based on Vagrant) for building mobile apps with Ionic,
Cordova,...
Ionic 2
Why Ionic 2?
Because of...
Angular 2
TypeScript
ES6
ES5
JavaScript
Angular 2
TypeScript
Stay in touch:
cortez.cristian@gmail.com
@cortezcristian
Ionic Framework
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
AngularJS with TypeScript and Windows Azure Mobile Services
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

Ionic Framework

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Ionic Framework

  1. 1. Open Talk on Ionic Framework
  2. 2. Cristian Cortez + 8y Developer | + 4y Trainer Full Stack + Ionic Developer @cortezcristian
  3. 3. Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Ionic Framework Docs
  4. 4. Ionic Stack Leveraged in New Technologies
  5. 5. Apache Cordova is an open-source mobile development framework. Architecture
  6. 6. AngularJS is an open-source web application framework mainly maintained by Google to address many of the challenges encountered in developing SPA. AngularJS
  7. 7. Gulp is a javascript task runner that lets you automate tasks such as building, minifying, live reload, pre-process files and more... GulpJS
  8. 8. Server side javascript and it's package manager. Node.js & npm
  9. 9. Local Storage, Audio, Video, Animations... HTML5 Features and Tips
  10. 10. 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
  11. 11. And more... bower jasmine karma mocha grunt
  12. 12. Hybrid Mobile Apps the obvious Practical Market Solution
  13. 13. 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
  14. 14. 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
  15. 15. Stack Overflow Survey 2016
  16. 16. Stack Overflow Survey 2015
  17. 17. Stack Overflow Survey Results Item / Year 2015 2016 Mobile developers 9.1% 8.4%
  18. 18. 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
  19. 19. Ionic Rapid Prototyping The powerful command line utility
  20. 20. Ionic Client $ npm install -g ionic cordova $ ionic start demoapp sidemenu $ cd demoapp $ ionic serve
  21. 21. Ionic Up And Running
  22. 22. Tabs, Navigation, Menus and more... Ionic Components
  23. 23. Contributed Templates $ ionic start myMapDemo https://github.com/calende $ cd myMapDemo $ ionic serve Leaftlet Mapping Application
  24. 24. Map Demo And Running
  25. 25. Adding Platforms $ cordova plugin add cordova-plugin-geolocation $ ionic platform add android $ ionic platform add ios $ ionic emulate ios
  26. 26. iPhone 6 Emulation Run & Emulate on your Phone
  27. 27. Look & Feel Ionic Material
  28. 28. Ionic Market Ionic Market Example
  29. 29. Sharing and Publishing Being Efficient with Ionic
  30. 30. Quick Sharing Ionic View
  31. 31. Uploading / Viewing $ ionic login # create account first $ ionic upload $ ionic share cortez.cristian@gmail.com Invite a friend to your Ionic App
  32. 32. 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
  33. 33. Android Publishing Ionic Tools & Tips Improving the development flow
  34. 34. Continuous Deployment Continuously deploy your ionic app using Circle CI
  35. 35. 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
  36. 36. 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
  37. 37. Ionic 2
  38. 38. Why Ionic 2? Because of... Angular 2 TypeScript ES6 ES5 JavaScript
  39. 39. Angular 2
  40. 40. TypeScript
  41. 41. Stay in touch: cortez.cristian@gmail.com @cortezcristian
  • asaedi

    Oct. 20, 2019
  • hkharikrishnan9

    Sep. 12, 2018

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

Views

Total views

608

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

62

Shares

0

Comments

0

Likes

2

×