Software Development, Web Design, Training

May-17-2015

Dev-Objective Notes: Using Ionic to Awesomeify your Cordova Development - Ray Camden

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)