ionic: the web sdk for develop mobile apps

1º GDG Feira de Santana

@matheuscas

matheuscas

Salvador, BA, BRA

Software developer at Maqhin

SO, YOU WANT TO BUILD APPS, RIGHT?

Did you developed any apps before?

ERR…

SO, TELL ME HOW IS GOING TO BE

LEARN JAVA, OBJECTIVE C/SWIFT AND C# AT THE SAME TIME

WHAT IF I TOLD YOU

THAT YOU CAN CREATE APPS WITH A SINGLE JAVASCRIPT CODE BASE?

HYBRYD APPS

#gohybrid

They are like any other app

They install in your phone

You'll find them at app stores

They can access NATIVE FEATURES

HOW THIS WORKS?

Reduced development time and cost

Write once, build everywhere

LET’S DO THIS!

FRAMEWORKS

FRAMEWORKS EVERYWHERE

• It’s a UI Framework• It’s rides on top of giant’s shoulders• It’s has highly integrated services• Powerful CLI• And a awesome community!

Thumbnails list

Tabs Icons on Top

Image card

Pull to refresh

Slide box

Side Menu

But, wait a minute! Ionic has not only beautiful eyes.

It has guts too! ;)

• Minimal DOM manipulation• Zero jQuery• Hardware accelerated transitions• Removed 300ms delay

Extends the HTML vocabulary

Proven for large-scale app development

UI Components using Directives & Services

• View elements left in the DOM• State maintained• Scroll positions maintained• Highly configurable

CACHED VIEWS

• Uses AngularUI Router• Shows back button when possible• Transitions follow direction of nav• Updates the app's URL• Multi-history stack

NAVIGATION

• Scroll through thousands of items • Only renders the viewable items • Smooth scrolling!

Collection Repeat

YOUR IDEIA

IONIC

ANGULAR

WebView (CORDOVA)

NATIVE

HOW THEY WORK TOGETHER?

Ionic Platform

• SQLitePlugin"

• "Keyboard"

• "BarcodeScanner"

• "Battery"

• "Camera"

• "Console"

• “Device”

• "Device Motion"

• "Device Orientation"

• "Notification"

• "Geolocation"

• "Globalization"

• "Network Information"

• "Vibration"

• "Zip"

IONIC CLI

ionic start <app> [template]Start a project

templates: tabs, sidemenu, maps, salesforce, tests, complex-list, blank

ionic platform <platform>Add platforms

platforms: ios, android (windows phone is on the road)

ionic serverun in browser

ionic serve - -labRun in browser with android and iOS version side by side

ionic run <platform>Run on your device or emulator

ionic run <platform> - - livereloadRun on your device or emulator and see changes in real time

ionic resourcesGenerates splashscreen and icons from PNG, PSD and AI

https://github.com/driftyco/ionic-cli

Let’s get started!

ionicframework.com

learn.ionicframework.com

forum.ionicframework.com

https://github.com/juarezpaf/ionic-adventures

http://www.meetup.com/Ionic-Bahia

@IonicBrazil

@ionicframework

http://ionicworldwide.herokuapp.com/http://ionicbrazil.herokuapp.com/

Sworkit

Malzee

http://showcase.ionicframework.com/

They are hybrid, did you know that? ;)

So, you thought that you knew all about hybrid, huh?

You got bad…

@matheuscas

matheuscas

Salvador, BA, BRA

Software developer at Maqhin

Obrigado!