The document discusses the workflow for building mobile apps using Ionic, including prototyping apps without coding using Ionic Creator, iterating on the codebase using live reloading, and deploying apps. It provides demonstrations of Ionic Creator for prototyping app structure and menus, live reloading for debugging, and techniques for optimizing apps such as using Sass and compressing files. The document recommends Ionic for building mobile apps without needing native code skills but notes some limitations may require native code knowledge.

1. How WE actually use ionic
With more than just one awesome
developer

3. Intro to Ionic
• iPhoneDevCamp 2009
• Adobe, Apache Cordova 2011
• Ionic founded by Drifty co in 2012
• 118k Seed 2013
• 1M Seed 2014
• 2.6M Venture 2015

4. Start Ionic Demo Deck
http://ionicframework.com/present-ionic/slides/
…unless everyone has already seen this

5. Our Workflow with Ionic
Prototype
• No Coding Skills Required
• Generates Boilerplate
• BUT Limited Interactions
Code
• Iterate Interactions
• Live-reload & simulator
• Add Cordova Plugins
Deploy
• CLI release process
• Immediate client feedback
• BUT Limited Plugins
Ionic Creator
Controllers
IDE
Ionic Deploy
/ Hockeyapp

6. That was a BADASS diagram
But what are you actually
talking about

7. Our Workflow with Ionic
Prototype
• No Coding Skills Required
• Generates Boilerplate
• BUT Limited Interactions
Code
• Iterate Interactions
• Live-reload & simulator
• Add Cordova Plugins
Deploy
• CLI release process
• Immediate client feedback
• BUT Limited Plugins
Ionic Creator
Controllers
IDE
Ionic Deploy
/ Hockeyapp

8. DEMO - Ionic Creator
• May the demo gods be kid
• Example of menu structure
• Example of export code
• Example of project setup

9. Our Workflow with Ionic
Prototype
• No Coding Skills Required
• Generates Boilerplate
• BUT Limited Interactions
Code
• Iterate Interactions
• Live-reload & simulator
• Add Cordova Plugins
Deploy
• CLI release process
• Immediate client feedback
• BUT Limited Plugins
Ionic Creator
Controllers
IDE
Ionic Deploy
/ Hockeyapp

10. Live-reload
• Reload flags
– L: live-reload
– S: server-logs
– C: console-logs
• For console logs, JSON.stringify is your friend
• You only need to re-build the iOS or android
project when you add plugins
• This is a LIFE SAVER for debugging cordova
plugins

11. Live Reload DEMO

12. Lets get Sass’y
• The sass is super modular
it’s designed to pull apart
• Leverage the color classes!
– Calm, royal, active, etc.

13. Our Workflow with Ionic
Prototype
• No Coding Skills Required
• Generates Boilerplate
• BUT Limited Interactions
Code
• Iterate Interactions
• Live-reload & simulator
• Add Cordova Plugins
Deploy
• CLI release process
• Immediate client feedback
• BUT Limited Plugins
Ionic Creator
Controllers
IDE
Ionic Deploy
/ Hockeyapp

14. WTF
• Woff the Font!
• We’ve found that the best way to get fonts
running across Android and iOS is to
convert them to a base64 and add them to
a CSS file
• Convert to
WOFF:https://cloudconvert.com/ttf-to-
woff
• Base64
Encode:http://www.motobit.com/util/bas
e64-decoder-encoder.asp

15. SVG
• Super Vegan Graphics (they are really skinny)
• They are XML!
• You can include them with ng-include and then style
them with CSS

16. Compressing for Release
• We use yeoman and the drifty grunt files for
out projects
• Ng-min and uglify can save about half your
packet size (we’ve had 35MB ipa files end up
at about 15MB)

17. Take it to the limit
• Animation at 60fps… if you like standard interactions
• Doesn’t always play well with others (angular
material, famo.us)
• You don’t need to know native code…
until you do 
• BUT You can use it with Cocoapods!!!!!