Going Hybrid With Ionic

At Priairie Dev Con 2016 I was given the opportunity to talk about Ionic Framework and some of the benefits of working with Hybrid apps. You can find the demo code on my GitHub and the slides below.


Transcription:

  1. Going Hybrid With Ionic Daniel Blair – Bit Space Development
  2. Daniel Blair CEO Bit Space Development Ltd Founder – PanoPla Founder – Geofy Inc. Winnipeg Android Web & Mobile Dev Group Ramp Up Weekend Board Member @CMDannCA @BitSpaceDevelop
  3. Way Cooler Than Native Application Development
  4. Overview In this session we’ll look at building a production ready application using the Ionic framework. We’ll talk about going hybrid, explore some of the more interesting aspects of hybrid applications, and look at the benefits of cross platform development as we write a simple application using Ionic. This talk will get you started with building applications using JavaScript and get you familiar with the tools needed to get started with Ionic.
  5. What IS A Hybrid App? A hybrid application is a cross between a web app and a native application. You get the best of both worlds like native APIs while relying on web technologies to build.
  6. Examples of Hybrid apps 1. Netflix 2. OkCupid 3. SongHop 4. Slack 5. Pacifica 6. Evernote 7. Wunderlist 8. Ricoh’s Theta Software 9. The Google App for iPad
  7. Hybrid Benefits Target multiple platforms with a single codebase Rapidly develop and iterate on a design
  8. What Makes Ionic Special?
  9. Ionic Ecosystem At a high level, there is a huge platform of tools available to you: Ionic View Ionic Creator IonIcons LearnIonic Apache Cordova AngularJS Cordova Plugins
  10. More Features
  11. What Does it Look Like!?
  12. Ionic Styling Consistent look and feel across platforms A style framework to get you started Style documentation for modular design, easy to add elements Similar to using Bootstrap or a similar framework in your web project. At the end of the day it is just HTML and CSS so you can style it however you want.
  13. Restrictions You can only build your iOS on an Apple device… obviously You need to install the Android SDK and command line tools for Android Windows requires Visual Studio to build You need to actually open iOS apps in XCode to build and deploy Ionic Package Helps.. But I don’t trust it. ionic package build ios –profile dev
  14. Getting Started
  15. Ionic Requirements ● NodeJS v4 ● NPM (Node Package Manager) ● Ionic / Cordova CLI Tools ● Android / iOS tools ○ SDKs ○ IDEs ○ etc.
  16. Actually starting an Ionic app is silly simple. There is a basic command that will actually build the application start. The application scaffolding is built for you and you can start coding.
  17. The Starter App Right out of the box we are given a simple app with 3 tabs. Angular App built for us Controllers are generated Starter project gives you the foundation to rapidly build your own app.
  18. The File Structure Various Git files Config.xml Gulpfile Hooks Ionic.project Package.json Platforms Plugins Scss
  19.  WWW Standard web project root Directory for templates Index.html root file Js folder in my project is actually empty (for a reason)
  20. Optimization
  21.  Make An App That Doesn’t Suck 1. Hybrid apps, because they are an Angular app, on top of a cordova layer, on top of a web view, on top of a native application layer can be sluggish 2. It is easy to write bad JavaScript and eat up memory 3. Older phones that have a hard time with complex web pages can have a hard time with
  22. How Can You Combat This? Gulp Optimizing your application’s images (smaller images) Use $ImageCacheFactory to preload your images Move your nonessential JavaScript to the bottom of the body element to speed up the actual application. (Libraries etc) Be smart about load order
  23. Fin
  24. Questions? Contact Me: @CMDannCA http://dan-blair.ca [email protected] http://bitspacedevelopment.com @BitSpaceDevelop Learn More: https://github.com/CMDann https://github.com/CMDann/Odin http://ionicframework.com/ http://ionicframework.com/