ionic: the web sdk for develop mobile apps
TRANSCRIPT
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!
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!