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