What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps.
Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions.
In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device.
Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.
Cross Platform Mobile Apps with the Ionic Framework
1. Cross Platform Mobile Apps
with the Ionic Framework
SoCal Code Camp - 15 November 2014
Troy Miles
2.
3. Troy Miles
Over 30 years of programming experience
Blog: http://therockncoder.blogspot.com/
Twitter: @therockncoder
Email: rockncoder@gmail.com
GitHub: https://github.com/Rockncoder
4. Questions
What is the Ionic Framework?
Are people actually using it?
What should I know?
What is the easiest way to get started?
What’s building an app like?
6. The Ionic Framework?
Combines Apache Cordova
with Google's AngularJS
along with lots custom
JavaScript, HTML, and CSS3
to create purpose built mobile
apps
which perform like native ones
and look beautiful
8. Drifty Co.
Founded in 2012 by Ben Sperry (CEO) and Max Lynch
(CTO)
Based in Madison, WI
Creators of Codiqa, JetStrap, and Ionic
Raised $1 million from Arthur Ventures earlier this year
9. Cordova
PhoneGap started at 2008
iPhoneDevCamp by Nitobi
2011 Nitobi acquired by
Adobe
Donated to Apache
Foundation in 2011
Known as Apache Cordova
But pronounced “PhoneGap”
10. Cordova
Uses web technologies to build mobile apps
The apps have access to device hardware from JavaScript
The web files are hosted in the app
Apps are portable to other systems with little to no changes
Apps are packaged using platform SDKs
Cordova does not include a UI framework
11. AngularJS
Created by Miško Hevery and
Adam Abrons in 2009
JavaScript MVC
106 kb production version
(minimized, not gzipped)
Declarative programming for
UI
Imperative programming for
business logic
12. AngularJS Key Features
Two Way Data-binding
Model View Controller
Dependency Injection
Deep Linking
HTML Templates
Directives
Testability
21. Keychain
Like Uber for trucks
iOS and Android version
Scrapped prior version
built with PhoneGap
22. Sworkit
Created by Ryan Hanna
alone
Featured in the Health and
Fitness section of the App
Store
Downloaded over 3 million
times
in the App Store, Google
Play and Amazon Store
24. Modern Web Skills
HTML 5 / CSS 3 / JavaScript
Comfortable with command line tools
AngularJS
Sass (optional)
25. The US Market
Android has 61.9%
iOS has 32.5%
That leaves less than 6% for everyone else
26. Prerequisites
Java SDK 6 or 7
Android SDK + Eclipse/Android Studio
Node / NPM
Cordova
Gulp
Ionic
27. Why do I need Node?
Node apps are built in JavaScript
JavaScript runs on all platforms
Node comes bundled with NPM, Node Package
Manager
It makes installing, running, and updating tools easy
Hence Node is a popular way to ship tools
34. ngCordova
Cordova has a lot of available plugins
Plugins give access to the machine functions
ngCordova "Angularizes" plugins for ready use
You are always free to write your own wrapper code
35. What about tablets?
Ionic supports responsive design
Side menu supports split view
Components like Cards also work well in both formats
37. Summary
Ionic makes mobile development easier but not easy
Allows use of web skills
Installation is still a challenge
Not yet 1.0 release, but close