Some pros and cons of going hybrid vs native, a brief intro to the Ionic framework, a few words on structuring your app, and how Angular resolves can help refine your application's UX.

1. My
Adventure

2. Who am I?
John
/jkosmetos @JohnKosmetos

3. It’s not 2012 anymore

5. Going Native
• Platform specific knowledge
• Multiple code bases
• Expensive
Objective-C
Pros: Cons:
• Refined performance
• Native UI components
• Access to 100% device functionality

6. 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

7. Apache Cordova
A set of Javascript API’s that expose native device functionality by mapping JS
functions to corresponding native methods
Objective-C

8. 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.com
http://drifty.com

10. The Ionic Stack
+
+

11. • 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

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

13. Ionic Components
CSS ComponentsJavascript UI
Library
CLI Wrapper Ionicons

15. Vanilla CSS List

16. List Directive

17. Side Menu

18. File Type Angular Structure
• OK for very small applications
• Obvious layout
• Doesn’t scale well
• Becomes messy and confusing very
quickly

19. 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

20. Angular UI-Router Resolves
awesome.config.js

21. awesome.factory.js

22. awesome.controller.js

23. Some more cool stuff

24. DEMO TIME!!!