A presentation about Ionic SDK in the first meetup of Google Developers Group (GDG) in Feira de Santana, Bahia, Brazil.

1. 1º GDG Feira de Santana

2. @matheuscas
matheuscas
Salvador, BA, BRA
Software developer at Maqhin

3. SO, YOU WANT TO BUILD APPS, RIGHT?
Did you developed
any apps before?

4. ERR…

5. SO, TELL ME HOW IS GOING TO BE
LEARN JAVA, OBJECTIVE C/SWIFT
AND C# AT THE SAME TIME

7. WHAT IF I TOLD YOU
THAT YOU CAN CREATE APPS WITH A
SINGLE JAVASCRIPT CODE BASE?

8. HYBRYD APPS
#gohybrid

9. They are like any other app
They install in your phone
You'll find them at app stores
They can access NATIVE FEATURES

11. HOW THIS WORKS?

12. Reduced development time and cost

13. Write once, build everywhere

14. LET’S DO THIS!

15. FRAMEWORKS
FRAMEWORKS EVERYWHERE

17. • 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!

18. Thumbnails list

19. Tabs Icons on Top

20. Image card

21. Pull to refresh

22. Slide box

23. Side Menu

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

27. It has guts too! ;)

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

30. Extends the HTML vocabulary
Proven for large-scale app development
UI Components using Directives & Services

31. • View elements left in the DOM
• State maintained
• Scroll positions maintained
• Highly configurable
CACHED VIEWS

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

33. • Scroll through thousands of items
• Only renders the viewable items
• Smooth scrolling!
Collection Repeat

34. YOUR IDEIA
IONIC
ANGULAR
WebView (CORDOVA)
NATIVE
HOW THEY WORK TOGETHER?

35. Ionic Platform

36. • SQLitePlugin"
• "Keyboard"
• "BarcodeScanner"
• "Battery"
• "Camera"
• "Console"
• “Device”
• "Device Motion"
• "Device Orientation"
• "Notification"
• "Geolocation"
• "Globalization"
• "Network Information"
• "Vibration"
• "Zip"

40. IONIC CLI

41. ionic start <app> [template]
Start a project
templates: tabs, sidemenu, maps, salesforce, tests,
complex-list, blank

42. ionic platform <platform>
Add platforms
platforms: ios, android (windows phone is on the road)

43. ionic serve
run in browser

44. ionic serve - -lab
Run in browser with android and iOS version side by side

46. ionic run <platform>
Run on your device or emulator

47. ionic run <platform> - - livereload
Run on your device or emulator and see changes in real time

48. ionic resources
Generates splashscreen and icons from PNG, PSD and AI
https://github.com/driftyco/ionic-cli

49. Let’s get started!

50. ionicframework.com

51. learn.ionicframework.com

52. forum.ionicframework.com

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

54. http://www.meetup.com/Ionic-Bahia
@IonicBrazil
@ionicframework
http://ionicworldwide.herokuapp.com/
http://ionicbrazil.herokuapp.com/

56. Sworkit

57. Malzee
http://showcase.ionicframework.com/

58. They are hybrid, did you know that? ;)

59. So, you thought that you knew all about hybrid, huh?
You got bad…

61. @matheuscas
matheuscas
Salvador, BA, BRA
Software developer at Maqhin
Obrigado!