SlideShare a Scribd company logo
MILAN 20/21.11.2015
Use Ionic framework to develop mobile
applications
Lucio Grenzi
MILAN 20/21.11.2015
Who is this guy
• Freelance
• Front end web developer
• Over 10 years of
programming experience
• Open source addicted
• Github.com/dogwolf
MILAN 20/21.11.2015 - Grenzi Lucio
Overview
• Native vs Web vs Hybrid app
• Ionic intro
• Ionic CLI
• UI Components
• Demos
MILAN 20/21.11.2015 - Grenzi Lucio
I want build a new app!
MILAN 20/21.11.2015 - Grenzi Lucio
https://www.flickr.com/photos/johnjoh/448665548/
MILAN 20/21.11.2015 - Grenzi Lucio
Native apps
• More platform, more problem
• Language is specific to platform => codebase
separation
• Dimisihing the return
MILAN 20/21.11.2015 - Grenzi Lucio
Web apps
Are website that looks like an app
Run by a browser
Native-like functionality in the browser
MILAN 20/21.11.2015 - Grenzi Lucio
Hybrid apps
• Embed HTML5 apps inside a thin native
container
• They can take advantage of the many device
features available.
• Single base code (HTML 5 + Css + Js)
MILAN 20/21.11.2015 - Grenzi Lucio
Apache Cordova
Open-source framework
Run HTML/JavaScript based applications
Native device functionality is exposed
via JavaScript APIs
Does not include UI Components
MILAN 20/21.11.2015 - Grenzi Lucio
Cordova architecture
https://blog.codecentric.de/en/2014/11/ionic-
angularjs-framework-on-the-rise/
MILAN 20/21.11.2015 - Grenzi Lucio
ngCordova
collection of 70+ AngularJS extensions
built on top of the Cordova API
Made build, easy deploy, test Cordova apps
http://ngcordova.com/
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic framework
Build mobile apps faster with the
web mobile you know and love
MILAN 20/21.11.2015 - Grenzi Lucio
Modern web skills
MILAN 20/21.11.2015 - Grenzi Lucio
Supported devices
PlannedAndroid 4+IOS 6+
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Architecture
https://blog.codecentric.de/en/2014/11/ionic-
angularjs-framework-on-the-rise/
MILAN 20/21.11.2015 - Grenzi Lucio
Powered by AngularJs
• develop rich and robust
applications
• create a powerful SDK
• extend HTML vocabulary
for your application
• fully extensible
MILAN 20/21.11.2015 - Grenzi Lucio
Sass
• Give your app the
appropriate look and
feel
• CSS can be quickly
manipulated
• Standalone CSS
(indipendent of JS
framework)
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic's adoption in numbers
• Over 20.000 stars on GitHub (Top 40
project)
• 600.000+ Ionic apps have been started from
the CLI
• Ionic CLI was downloaded 208.114 times in
the last month
• Released v1.0 on May 2015
MILAN 20/21.11.2015 - Grenzi Lucio
How to get started
MILAN 20/21.11.2015 - Grenzi Lucio
Install Ionic
First install node.js
Install Android ADT / iOS Xcode
Open console and type
$ npm install -g cordova ionic
MILAN 20/21.11.2015 - Grenzi Lucio
Start a project
$ ionic start iorun blank
Comprehensive app structure
Ready for deploy and building
MILAN 20/21.11.2015 - Grenzi Lucio
Run it
$ cd iorun
$ ionic platform add android
$ ionic build android
$ ionic emulate android
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic built-in elements
MILAN 20/21.11.2015 - Grenzi Lucio
List
MILAN 20/21.11.2015 - Grenzi Lucio
Complex Lists
MILAN 20/21.11.2015 - Grenzi Lucio
Collection repeat
MILAN 20/21.11.2015 - Grenzi Lucio
Navigation
MILAN 20/21.11.2015 - Grenzi Lucio
Tabs
MILAN 20/21.11.2015 - Grenzi Lucio
Swipe menu'
MILAN 20/21.11.2015 - Grenzi Lucio
Action sheet
MILAN 20/21.11.2015 - Grenzi Lucio
Ionicons
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic box
• Ready-to-go hybrid development environment
for building mobile apps with Ionic,
Cordova, and Android
• https://github.com/driftyco/ionic-box
MILAN 20/21.11.2015 - Grenzi Lucio
Choose your Android version
Bootstrap.sh
MILAN 20/21.11.2015 - Grenzi Lucio
Android version adoption
https://developer.android.com/about/dashboards/index.html
MILAN 20/21.11.2015 - Grenzi Lucio
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Lab
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Creator
MILAN 20/21.11.2015 - Grenzi Lucio
Ionic Market
MILAN 20/21.11.2015 - Grenzi Lucio
Getting started guide
ionicframework.com/getting-started
Documentation
ionicframework.com/docs
Visit the Community Forum
forum.ionicframework.com
Contribute on GitHub
github.com/driftyco/ionic
MILAN 20/21.11.2015 - Grenzi Lucio
Questions?
https://www.flickr.com/photos/derek_b/3046770021/
MILAN 20/21.11.2015 - Grenzi Lucio
https://www.flickr.com/photos/wwworks/4759535950/
MILAN 20/21.11.2015 - SPEAKER’S NAME
Leave your feedback on Joind.in!
https://m.joind.in/event/codemotion-milan-2015

More Related Content

What's hot (20)

PPTX
Mobile Applications with Angular 4 and Ionic 3
Oleksandr Tryshchenko
 
PPTX
Ionic - Hybrid Mobile Application Framework
Sanjay Kumar
 
PPTX
Hybrid app in ionic framework overview
Sanket Devlekar
 
PDF
Creating mobile apps - an introduction to Ionic (Engage 2016)
Mark Leusink
 
PDF
Ionic 2 intro
Wojciech Langiewicz
 
PPTX
Hybrid mobile and Ionic
Liju Pillai
 
PPT
Ionic Framework
Thinh VoXuan
 
PDF
Cordova, Angularjs & Ionic @ Codeaholics
Eddie Lau
 
PPTX
Hybrid vs. Native app - Ionic Framework with AngularJS
Zvika Epstein
 
PDF
Building Mobile Apps with Cordova , AngularJS and Ionic
Kadhem Soltani
 
PPTX
Building mobile app with Ionic Framework
Huy Trần
 
PDF
Creating an hybrid app in minutes with Ionic Framework
Julien Renaux
 
PPTX
Intro to Ionic for Building Hybrid Mobile Applications
Sasha dos Santos
 
PPTX
Ionic Framework - Intro to Hybrid Mobile Application Development
Max Kaplan
 
PPTX
Introduction to the Ionic Framework
rrjohnson85
 
PDF
Intro to mobile apps with the ionic framework & angular js
Hector Iribarne
 
PDF
Hybrid app development with ionic
Wan Muzaffar Wan Hashim
 
PDF
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 
PPTX
Ionic Framework - get up and running to build hybrid mobile apps
Andreas Sahle
 
PDF
Ionic 2: Mobile apps with the Web
Mike Hartington
 
Mobile Applications with Angular 4 and Ionic 3
Oleksandr Tryshchenko
 
Ionic - Hybrid Mobile Application Framework
Sanjay Kumar
 
Hybrid app in ionic framework overview
Sanket Devlekar
 
Creating mobile apps - an introduction to Ionic (Engage 2016)
Mark Leusink
 
Ionic 2 intro
Wojciech Langiewicz
 
Hybrid mobile and Ionic
Liju Pillai
 
Ionic Framework
Thinh VoXuan
 
Cordova, Angularjs & Ionic @ Codeaholics
Eddie Lau
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Zvika Epstein
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Kadhem Soltani
 
Building mobile app with Ionic Framework
Huy Trần
 
Creating an hybrid app in minutes with Ionic Framework
Julien Renaux
 
Intro to Ionic for Building Hybrid Mobile Applications
Sasha dos Santos
 
Ionic Framework - Intro to Hybrid Mobile Application Development
Max Kaplan
 
Introduction to the Ionic Framework
rrjohnson85
 
Intro to mobile apps with the ionic framework & angular js
Hector Iribarne
 
Hybrid app development with ionic
Wan Muzaffar Wan Hashim
 
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 
Ionic Framework - get up and running to build hybrid mobile apps
Andreas Sahle
 
Ionic 2: Mobile apps with the Web
Mike Hartington
 

Similar to Use Ionic Framework to develop mobile application (20)

PPTX
Developing a native mobile apps using Ionic&Cordova
Damir Beylkhanov
 
PDF
Ionic Framework
Cristián Cortéz
 
PDF
Ionic vancouver 201604
Alamusi Alamusi
 
PDF
Your choices for building a mobile app in 2016
Jad Salhani
 
PPTX
Ionic framework
Software Infrastructure
 
PDF
Ionic - Revolutionizing Hybrid Mobile Application Development
Justin James
 
PPTX
Hybrid Apps in a Snap
Paulina Gallo
 
PPTX
Introduction To Ionic3
Knoldus Inc.
 
PPTX
What is ionic frameworks? Its features and benefits.
MikeKelvin1
 
PDF
Ionic in 30
Mike Hartington
 
PDF
Developing ionic apps for android and ios
gautham_m79
 
ODP
Hybrid application development
Knoldus Inc.
 
PPTX
Workshop on Hybrid App Development with Ionic Framework
Aayush Shrestha
 
PDF
Hybrid Apps with Ionic Framework
Bramus Van Damme
 
PDF
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Katy Slemon
 
PPTX
webinar-ionic
Jaime L. López Carratalá
 
PPTX
Charla taller Ionic + AngularJS Sysmana 2015
Rafael Terán Torralbo
 
PPTX
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Alessio Delmonti
 
PDF
Common Ionic Development Mistakes Developers Tend To Make!
Techugo
 
Developing a native mobile apps using Ionic&Cordova
Damir Beylkhanov
 
Ionic Framework
Cristián Cortéz
 
Ionic vancouver 201604
Alamusi Alamusi
 
Your choices for building a mobile app in 2016
Jad Salhani
 
Ionic framework
Software Infrastructure
 
Ionic - Revolutionizing Hybrid Mobile Application Development
Justin James
 
Hybrid Apps in a Snap
Paulina Gallo
 
Introduction To Ionic3
Knoldus Inc.
 
What is ionic frameworks? Its features and benefits.
MikeKelvin1
 
Ionic in 30
Mike Hartington
 
Developing ionic apps for android and ios
gautham_m79
 
Hybrid application development
Knoldus Inc.
 
Workshop on Hybrid App Development with Ionic Framework
Aayush Shrestha
 
Hybrid Apps with Ionic Framework
Bramus Van Damme
 
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Katy Slemon
 
Charla taller Ionic + AngularJS Sysmana 2015
Rafael Terán Torralbo
 
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015
Alessio Delmonti
 
Common Ionic Development Mistakes Developers Tend To Make!
Techugo
 
Ad

More from Lucio Grenzi (13)

ODP
How to use Postgresql in order to handle Prometheus metrics storage
Lucio Grenzi
 
ODP
Building serverless application on the Apache Openwhisk platform
Lucio Grenzi
 
ODP
Patroni: PostgreSQL HA in the cloud
Lucio Grenzi
 
ODP
Postgrest: the REST API for PostgreSQL databases
Lucio Grenzi
 
PPTX
Full slidescr16
Lucio Grenzi
 
ODP
Rabbitmq & Postgresql
Lucio Grenzi
 
ODP
Jenkins djangovillage
Lucio Grenzi
 
ODP
Geodjango and HTML 5
Lucio Grenzi
 
ODP
PLV8 - The PostgreSQL web side
Lucio Grenzi
 
ODP
Pg tap
Lucio Grenzi
 
PPT
Geodjango
Lucio Grenzi
 
PPT
Yui app-framework
Lucio Grenzi
 
PPT
node.js e Postgresql
Lucio Grenzi
 
How to use Postgresql in order to handle Prometheus metrics storage
Lucio Grenzi
 
Building serverless application on the Apache Openwhisk platform
Lucio Grenzi
 
Patroni: PostgreSQL HA in the cloud
Lucio Grenzi
 
Postgrest: the REST API for PostgreSQL databases
Lucio Grenzi
 
Full slidescr16
Lucio Grenzi
 
Rabbitmq & Postgresql
Lucio Grenzi
 
Jenkins djangovillage
Lucio Grenzi
 
Geodjango and HTML 5
Lucio Grenzi
 
PLV8 - The PostgreSQL web side
Lucio Grenzi
 
Pg tap
Lucio Grenzi
 
Geodjango
Lucio Grenzi
 
Yui app-framework
Lucio Grenzi
 
node.js e Postgresql
Lucio Grenzi
 
Ad

Recently uploaded (20)

PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 

Use Ionic Framework to develop mobile application

  • 1. MILAN 20/21.11.2015 Use Ionic framework to develop mobile applications Lucio Grenzi
  • 2. MILAN 20/21.11.2015 Who is this guy • Freelance • Front end web developer • Over 10 years of programming experience • Open source addicted • Github.com/dogwolf
  • 3. MILAN 20/21.11.2015 - Grenzi Lucio Overview • Native vs Web vs Hybrid app • Ionic intro • Ionic CLI • UI Components • Demos
  • 4. MILAN 20/21.11.2015 - Grenzi Lucio I want build a new app!
  • 5. MILAN 20/21.11.2015 - Grenzi Lucio https://www.flickr.com/photos/johnjoh/448665548/
  • 6. MILAN 20/21.11.2015 - Grenzi Lucio Native apps • More platform, more problem • Language is specific to platform => codebase separation • Dimisihing the return
  • 7. MILAN 20/21.11.2015 - Grenzi Lucio Web apps Are website that looks like an app Run by a browser Native-like functionality in the browser
  • 8. MILAN 20/21.11.2015 - Grenzi Lucio Hybrid apps • Embed HTML5 apps inside a thin native container • They can take advantage of the many device features available. • Single base code (HTML 5 + Css + Js)
  • 9. MILAN 20/21.11.2015 - Grenzi Lucio Apache Cordova Open-source framework Run HTML/JavaScript based applications Native device functionality is exposed via JavaScript APIs Does not include UI Components
  • 10. MILAN 20/21.11.2015 - Grenzi Lucio Cordova architecture https://blog.codecentric.de/en/2014/11/ionic- angularjs-framework-on-the-rise/
  • 11. MILAN 20/21.11.2015 - Grenzi Lucio ngCordova collection of 70+ AngularJS extensions built on top of the Cordova API Made build, easy deploy, test Cordova apps http://ngcordova.com/
  • 12. MILAN 20/21.11.2015 - Grenzi Lucio Ionic framework Build mobile apps faster with the web mobile you know and love
  • 13. MILAN 20/21.11.2015 - Grenzi Lucio Modern web skills
  • 14. MILAN 20/21.11.2015 - Grenzi Lucio Supported devices PlannedAndroid 4+IOS 6+
  • 15. MILAN 20/21.11.2015 - Grenzi Lucio Ionic Architecture https://blog.codecentric.de/en/2014/11/ionic- angularjs-framework-on-the-rise/
  • 16. MILAN 20/21.11.2015 - Grenzi Lucio Powered by AngularJs • develop rich and robust applications • create a powerful SDK • extend HTML vocabulary for your application • fully extensible
  • 17. MILAN 20/21.11.2015 - Grenzi Lucio Sass • Give your app the appropriate look and feel • CSS can be quickly manipulated • Standalone CSS (indipendent of JS framework)
  • 18. MILAN 20/21.11.2015 - Grenzi Lucio Ionic's adoption in numbers • Over 20.000 stars on GitHub (Top 40 project) • 600.000+ Ionic apps have been started from the CLI • Ionic CLI was downloaded 208.114 times in the last month • Released v1.0 on May 2015
  • 19. MILAN 20/21.11.2015 - Grenzi Lucio How to get started
  • 20. MILAN 20/21.11.2015 - Grenzi Lucio Install Ionic First install node.js Install Android ADT / iOS Xcode Open console and type $ npm install -g cordova ionic
  • 21. MILAN 20/21.11.2015 - Grenzi Lucio Start a project $ ionic start iorun blank Comprehensive app structure Ready for deploy and building
  • 22. MILAN 20/21.11.2015 - Grenzi Lucio Run it $ cd iorun $ ionic platform add android $ ionic build android $ ionic emulate android
  • 23. MILAN 20/21.11.2015 - Grenzi Lucio Ionic built-in elements
  • 24. MILAN 20/21.11.2015 - Grenzi Lucio List
  • 25. MILAN 20/21.11.2015 - Grenzi Lucio Complex Lists
  • 26. MILAN 20/21.11.2015 - Grenzi Lucio Collection repeat
  • 27. MILAN 20/21.11.2015 - Grenzi Lucio Navigation
  • 28. MILAN 20/21.11.2015 - Grenzi Lucio Tabs
  • 29. MILAN 20/21.11.2015 - Grenzi Lucio Swipe menu'
  • 30. MILAN 20/21.11.2015 - Grenzi Lucio Action sheet
  • 31. MILAN 20/21.11.2015 - Grenzi Lucio Ionicons
  • 32. MILAN 20/21.11.2015 - Grenzi Lucio Ionic box • Ready-to-go hybrid development environment for building mobile apps with Ionic, Cordova, and Android • https://github.com/driftyco/ionic-box
  • 33. MILAN 20/21.11.2015 - Grenzi Lucio Choose your Android version Bootstrap.sh
  • 34. MILAN 20/21.11.2015 - Grenzi Lucio Android version adoption https://developer.android.com/about/dashboards/index.html
  • 35. MILAN 20/21.11.2015 - Grenzi Lucio
  • 36. MILAN 20/21.11.2015 - Grenzi Lucio Ionic Lab
  • 37. MILAN 20/21.11.2015 - Grenzi Lucio Ionic Creator
  • 38. MILAN 20/21.11.2015 - Grenzi Lucio Ionic Market
  • 39. MILAN 20/21.11.2015 - Grenzi Lucio Getting started guide ionicframework.com/getting-started Documentation ionicframework.com/docs Visit the Community Forum forum.ionicframework.com Contribute on GitHub github.com/driftyco/ionic
  • 40. MILAN 20/21.11.2015 - Grenzi Lucio Questions? https://www.flickr.com/photos/derek_b/3046770021/
  • 41. MILAN 20/21.11.2015 - Grenzi Lucio https://www.flickr.com/photos/wwworks/4759535950/
  • 42. MILAN 20/21.11.2015 - SPEAKER’S NAME Leave your feedback on Joind.in! https://m.joind.in/event/codemotion-milan-2015