Hybrid App Development with Angular and Ionic

Hybrid Sweet Spot - https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content

Choosing the Right JavaScript Framework - https://www.lullabot.com/articles/choosing-the-right-javascript-framework-for-the-job

Transcript

1. H Y B R I D A P P D E V E L O P M E N T W I T H A N G U L A R A N D I O N I C B U R L I N G T O N J S
2. J O E D I S T E FA N O W E B D E V E L O P E R H T T P : / / O K A Y P L . U S /
3. W H AT I S A H Y B R I D A P P ? W H AT I S A N G U L A R ? W H AT I S I O N I C ? W H AT I S C O R D O VA ? W H AT I S F I R E B A S E ? O V E R V I E W
4. W H A T I S A H Y B R I D A P P ? • A “hybrid” of web and native technologies. • HTML, CSS, and JavaScript • Target a WebView hosted inside a native container, as opposed to a traditional browser environment. • Can access hardware capabilities of the mobile device.
5. W H Y H Y B R I D V S . N A T I V E ? • Use your existing knowledge and experience as a web developer • Target multiple platforms with a single codebase • Avoid learning Objective-C, Swift, Java, C#, etc.
6. H Y B R I D L I M I TA T I O N S • Differences between platforms • Inconsistent web views • Potential performance limitations
7. H Y B R I D A P P R O A C H E S Full Native UI Native Nav WebView Content Full WebView UI e.g. NativeScript e.g. AppGyver e.g. Ionic
8. H Y B R I D E X A M P L E S SworkIt Untapped Basecamp
9. O N E A P P R O A C H
10. W H AT I S A N G U L A R ?
11. W H Y D O W E N E E D A J A VA S C R I P T F R A M E W O R K ? • HTML is used to describe documents not apps • Unless you are an extremely talented developer, your code will quickly become a mess • Documentation • Community
12. W H A T D O E S A J A VA S C R I P T F R A M E W O R K D O ? • Build single-page web apps • Live outside request-response cycle • Interactive, “app-like” experiences • Can also be used to enhance existing pages,
 but are probably overkill
13. W H I C H J A VA S C R I P T F R A M E W O R K ? Backbone Ember Angular React
14. W H A T D O E S A N G U L A R P R O V I D E ? • Two-way data binding • Routing • Controllers • Directives • Services • More…
15. W H A T D O E S A N G U L A R P R O V I D E ? Two-way data binding Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
16. W H A T D O E S A N G U L A R P R O V I D E ? Routing Ties a template, and optionally a controller, to a URL.
17. W H A T D O E S A N G U L A R P R O V I D E ? Controllers Contains the business logic for a view. Provides state and behavior to the scope.
18. W H A T D O E S A N G U L A R P R O V I D E ? Directives The real meat of Angular. This is where you can extend HTML with new nodes and attributes.
19. W H A T D O E S A N G U L A R P R O V I D E ? Services Services are singletons, used to share code across your app. You can add them as dependencies to controllers, other services, and directives.
20. W H AT I S I O N I C ?
21. W H A T D O E S I O N I C P R O V I D E ? CSS Components • Like Bootstrap but for apps • All of the basic elements you need to build a mobile app
22. W H A T D O E S I O N I C P R O V I D E ? Share Sheets
23. W H A T D O E S I O N I C P R O V I D E ? Navigation
24. W H A T D O E S I O N I C P R O V I D E ? Alerts
25. W H A T D O E S I O N I C P R O V I D E ? Side Menus
26. W H A T D O E S I O N I C P R O V I D E ? Tabs
27. W H A T D O E S I O N I C P R O V I D E ? Command Line Interface • ionic start myapp • ionic serve • ionic build ios • ionic emulate iOS • ionic upload
28. W H A T D O E S I O N I C P R O V I D E ? Ionic View App • Native app for iOS and Android • Allows you to load your app on a real device without going through app store • Don’t have to deal with provisioning profiles, etc.
29. W H A T D O E S I O N I C P R O V I D E ? Active Community • Great Documentation • Active Forums • Funding
30. W H AT I S C O R D O VA ?
31. W H A T D O E S C O R D O VA P R O V I D E ? Native Device Integration • Camera • Calendar • Touch ID • Push Notifications • Geolocation • Flashlight • Accelerometer • Vibration • Many more…
32. N G C O R D O VA • Angular services for accessing cordova plugins • Makes it ridiculously easy to use in your ionic app
33. N G C O R D O VA
34. W H AT I S F I R E B A S E ?
35. W H A T D O E S F I R E B A S E P R O V I D E ? Realtime Database • Store data using a cloud-based NoSQL database • Sync data across all connected clients in realtime • Available offline, syncing chances when you regain connectivity
36. W H A T D O E S F I R E B A S E P R O V I D E ? User Authentication • Email & Password authentication • Social Auth with Twitter, Facebook, Github Google, etc. • Integrates with any existing auth system • Set up rules in Firebase to determine which users can read/write from which nodes
37. A N G U L A R F I R E AngularFire is the officially supported AngularJS binding for Firebase. The combination of Angular and Firebase provides a three-way data binding between your HTML, your JavaScript, and the Firebase backend.
38. A N G U L A R F I R E Three-way Data Binding