Lucio Grenzi gave a presentation on using the Ionic framework to develop hybrid mobile applications. He discussed the advantages of hybrid apps over native and web apps. Grenzi explained that Ionic uses Apache Cordova to allow HTML and JavaScript apps to access native device functionality. He demonstrated how to install Ionic and create a basic project, and described some of Ionic's built-in UI elements like lists, tabs and navigation. Grenzi also highlighted resources like Ionic Lab and Creator for designing apps visually without code.

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