My

Adventure

Who am I?

John

/jkosmetos @JohnKosmetos

It’s not 2012 anymore

Going Native

• Platform specific knowledge • Multiple code bases • Expensive

Objective-C

Pros: Cons:

• Refined performance • Native UI components • Access to 100% device functionality

Going Hybrid

• One code base • Use technologies you are familiar with, HTML5, CSS3 and Javascript

• Speedier development • Less expensive • Less of a learning curve

Pros: Cons:

• Device fragmentation (Android) • Performance • Hardware limitations

Apache Cordova

A set of Javascript API’s that expose native device functionality by mapping JS functions to corresponding native methods

Objective-C

What exactly is Ionic?

• HTML5 UI framework targeted specifically at hybrid mobile apps • Think Bootstrap for mobile • Let’s you focus on building your app, and not how it should work • Aims to fill the SDK gap for hybrid applications (animations, gestures, lists, navigation…etc)

http://www.ionicframework.comhttp://drifty.com

The Ionic Stack

+

+

• Powerful CSS preprocessor • Extends CSS and adds variables, nesting, inline imports… etc • Many useful functions for manipulating colours and other values • Helps keep large stylesheets well organised

• A streaming build system • Automate common tasks, minification, compiling preprocessed CSS, linting… etc

Ionic Components

CSS ComponentsJavascript UI Library

CLI Wrapper Ionicons

Vanilla CSS List

List Directive

Side Menu

File Type Angular Structure

• OK for very small applications • Obvious layout • Doesn’t scale well • Becomes messy and confusing very quickly

Modular Angular Structure

• Group by feature not type • Easier to navigate and find functionality • Scales exceptionally well • Promotes code reusability • Promotes collaboration • Promotes lean code

Angular UI-Router Resolves

awesome.config.js

awesome.factory.js

awesome.controller.js

Some more cool stuff

DEMO TIME!!!