Dev-Objective Notes: Using Ionic to Awesomeify your Cordova Development - Ray Camden
May 17, 2015
What is Ionic
open source app for building mobile apps in html5
What's in it
UI components
UX components
SPA framework (angularJS is built in)
very finely tuned for hybrid mobile dev
CAN use it for a desktop site, but it's really "wanting" you to use it with Cordova
everything in it is based on the assumption that you're building a Cordova hybrid app
It's open source and FREE
(but can expect later on that some pay-stuff and pay features might pop up)
released 1.0 yesterday (named "Uranium Unicorn")
What you need to know before working w/ ionic
because it's tuned for cordova, knowing cordova is helpful
don't NEED it, but it's helpful to know
Cool examples:
showcase.ionicframework.com
good job of highlighting good uses of ionic
NEED to install the SDKs for iPhone and Android
Plan for a day to install these. Seriously. It's not a quick process.
to install on mac:
sudo npm install -g ionic
will allow you to emulate and run and build and package your app
exact same thing that cordova does, because ionic runs on top of cordova
will also update the library -- jQuery Mobile, etc
with the CLI "ionic lib update", it updates the libraries in the app automatically
can also serve to the browser
can do it in cordova but ionic makes it a bit more powerful
handles icon/splash screen creation for you -- in 1 minute
and more stuff too!
to start your project:
ionic start APPNAME
ionic start APPNAME TEMPLATE
Templates: (can be listed from CLI)
"proper" blank template -- loads the framework and angular and that's IT, doesn't auto-write any extra unnecessary code
CodePen
testing / emulating
ionic serve
ionic serve --lab
to run the emulator
can also send it to the iOS simulator
ioniic emuloate iOS
ioniic emuloate -l -c iOS
-- will live reload on the emulator w/ those command options
deubbing --
find Ray at lunch, he'll show examples
the -c option
any console.log() messages show up in terminal
not step-debugging, etc. but hey it's something
UI-framework
works like all the others
just include class="…" stuff in your CSS
can customize the colors, etc.
works just like Bootstrap
JavaScript --
UI stuff
UX stuff -- pull to refresh, etc.
Directives too
<ion-header-bar>
slide box
<ion-slide-box>
<ion-slide>
<div> the page stuff </div>
</ion-slide>
</ion-slide-box>
pull to refresh demo --
<ion-refresher> -- that's IT. this tag and a little JavaScript to call the data/server is all you need
NGCordova --
optional extra thing
ngcordova.com
takes the cordova plugins and "angular-izes" them
ALL the core Cordova plugins and made them use JS promises
(at a high level, promises make it easier to deal with async operations.)
Ionic Creator
creator.ionic.io
useful for basic prototyping of UI stuff
the code it uses is sub-optimal angular, not really pro grade, maybe not safe to use in a real app
icon library
ionicons.com
can use them by themselves if you want, don't NEED to be in an ionic app
Ionic Box
Vagrant Based install to virtualize the whole dev stack
android sdk and ionic and cordova in the image
use it just like a file system
send your code to an android device or emulator
all WITHOUT having to install the SDK stuff
(should actually install the SDK on your dev box even tho it's a pain, but Vagrant is useful for prototyping and quick demos, etc)
Ionic View
view.ionic.io
iOS and they JUST added the Android app
play.ionic.io
"playground" for Ionic
extremely rough still
can't save yet, etc (just bookmark your uRL for now)
Coming soon --
(announced as of yesterday)
Push service-- IonicPush
takes time, have to set it up with providers: google, apple, etc.
Build Service ala PhoneGap Build
but more focused for ionic apps
Analytics Service
if you want to know how people are using your apps, where they are clicking, etc.
track user interaction
heat maps
"hamburger menu" testing with and without a label, etc.
more --
better Windows PHone support (the lack of Windows apps is the biggest thing wrong w/ Windows phones)
Better support for native scrolling
Visual Studio template support
New GUI tool coming soon
Learning more --
learn.ionicframework.com
codepen.io/ionic
Book: Ionic In Action
Manning Publisher -- book is in MEAP status -- will sell the book before it's done, so you can get updates as the author changes things
Ray's book is also MEAP status -- Cats with Cordova (title TBD)