More Related Content
What's hot (20)
Similar to Hybrid vs. Native app - Ionic Framework with AngularJS (20)
Recently uploaded (20)
Hybrid vs. Native app - Ionic Framework with AngularJS
- 1. The beautiful, open source framework for developing hybrid mobile apps with HTML5 @Zvika Epstein
- 2. Overview 1. Native vs Hybrid Apps 2. Intro Ionic 3. UI Components 4. Ionic CLI
- 3. “I want a native app!”
- 4. The Pros of a Native ● Performance - Full use of functionality and Hardware - GPS, Contacts etc. ● Run on the device’s operating system. ● Fast graphics
- 5. The Downsides of a Native ● Proficiency in each platform required ● Entirely separate code bases ● Timely & expensive development
- 6. More Platforms. More Problems. Why are we still coding for multiple platforms?
- 7. “Is there an alternative?”
- 8. Hybrid Apps! ● HTML5 that acts like native ● Web wrapped in native layer ● Direct access to native APIs ● Phonegap renamed to Cordova ● Familiar web dev environment ● Fast deployment ● Develop a single code base (web platform)
- 9. Cons of a Hybrid App ● Performance - extra layer between the source code and the target mobile platform ● rely on a third party ● UI assets of iOS or Android
- 10. Apache Cordova is a platform for building native mobile applications using HTML, CSS and Javascript
- 11. ngCordova Plugins ● Battery Status ● Calendar ● Camera ● Clipboard ● Contacts ● More plugins
- 12. So, how do we bridge the gap between web and native?
- 13. “Hello.”
- 14. ● The ionic is an open source framework for developing hybrid mobile applications using AngularJS, Sass and Cordova. ● Ionic is the front-end framework. ● Ionic mainly uses Cordova to create, build, run and deploy the mobile applications. ● Modeled off of native SDKs ● Performance - Hardware accelerated animations What is Ionic?
- 15. Web Technologies You Already Know and Love
- 16. Standing on the Shoulders of AngularJS ● UI Components are AngularJS Directives ● Ready to work with your app
- 17. Native Focused Modeled off of native SDKs Built to work with Cordova
- 18. Performance Obsessed Hardware accelerated animations Minimal DOM Manipulation
- 20. “Ionic is Bootstrap for Native” ● Responsive - Ionic solves multiple device resolution issues. ● Icons ● UI Components
- 21. Icons Over 700 MIT licensed font-icons included ionicons.com
- 23. Lists <div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> <a class="item" href="#"> Kit Kat </a> ... </div>
- 24. Tabs <ion-tabs> <ion-tab title="Home" icon="ion-home"> <ion-nav-view name="home"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-information"> <ion-nav-view name="about"></ion-nav-view> </ion-tab> <ion-tab title="Contact" icon="ion-ios7-world"> <ion-nav-view name="contact"></ion-nav-view> </ion-tab> </ion-tabs>
- 25. Complex Lists ● AngularJS Directive ● Buttons exposed by swiping ● Reorder ● Delete <ion-list> <ion-item ng-repeat="item in items" class="item-thumbnail-left"> <img ng-src="{{ item.pic }}"> <h2>{{ item.name }}</h2> <p>{{ item.quote }}</p> </ion-item> </ion-list>
- 26. Slide box <ion-slide-box on-slide-changed="change(index)"> <ion-slide> Slide 1 </ion-slide> <ion-slide> Slide 2 </ion-slide> <ion-slide> Slide 3 </ion-slide> </ion-slide-box>
- 27. Pull to Refresh <ion-content on-refresh="refreshData()"> <ion-refresher></ion-refresher> <!-- content --> </ion-content>
- 28. Ionic CLI $ npm install -g ionic cordova $ ionic start myapp sidemenu $ cd myapp $ ionic serve
- 29. Thank You!