Hello Ionic

How WE actually use ionicWith more than just one awesome developer

Intro to IoniciPhoneDevCamp 2009Adobe, Apache Cordova 2011Ionic founded by Drifty co in 2012118k Seed 20131M Seed 20142.6M Venture 2015

Start Ionic Demo Deckhttp://ionicframework.com/present-ionic/slides/unless everyone has already seen this

Our Workflow with Ionic

That was a BADASS diagramBut what are you actually talking about

Our Workflow with Ionic

DEMO - Ionic CreatorMay the demo gods be kidExample of menu structureExample of export codeExample of project setup

8

Our Workflow with Ionic

Live-reloadReload flagsL: live-reloadS: server-logsC: console-logsFor console logs, JSON.stringify is your friendYou only need to re-build the iOS or android project when you add pluginsThis is a LIFE SAVER for debugging cordova plugins

10

Live Reload DEMO

Lets get SassyThe sass is super modular its designed to pull apartLeverage the color classes!Calm, royal, active, etc.

12

Our Workflow with Ionic

WTFWoff the Font!Weve 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 fileConvert to WOFF:https://cloudconvert.com/ttf-to-woffBase64 Encode:http://www.motobit.com/util/base64-decoder-encoder.asp

14

SVGSuper Vegan Graphics (they are really skinny)They are XML!You can include them with ng-include and then style them with CSS

15

Compressing for ReleaseWe use yeoman and the drifty grunt files for out projectsNg-min and uglify can save about half your packet size (weve had 35MB ipa files end up at about 15MB)

16

Take it to the limitAnimation at 60fps if you like standard interactionsDoesnt always play well with others (angular material, famo.us)You dont need to know native code until you do BUT You can use it with Cocoapods!!!!!

17