My Ionic Adventure
2 likes686 views
The document outlines the differences between native and hybrid mobile app development, highlighting the pros and cons of each approach. It introduces Apache Cordova and Ionic, with Ionic being described as an HTML5 UI framework for hybrid apps that simplifies development through reusable components. Lastly, it discusses Angular structure for organizing code efficiently, emphasizing modular approaches for scalability and collaboration.
My Ionic Adventure
- 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
- 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
- 23. Some more cool stuff
- 24. DEMO TIME!!!