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.
- Going Hybrid With Ionic Daniel Blair – Bit Space Development
- 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
- Way Cooler Than Native Application Development
- 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.
- 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
- Hybrid Benefits Target multiple platforms with a single codebase Rapidly develop and iterate on a design
- What Makes Ionic Special?
- 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
- More Features
- What Does it Look Like!?
- 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.
- 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
- Getting Started
- Ionic Requirements ● NodeJS v4 ● NPM (Node Package Manager) ● Ionic / Cordova CLI Tools ● Android / iOS tools ○ SDKs ○ IDEs ○ etc.
- 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.
- 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.
- The File Structure Various Git files Config.xml Gulpfile Hooks Ionic.project Package.json Platforms Plugins Scss
- WWW Standard web project root Directory for templates Index.html root file Js folder in my project is actually empty (for a reason)
- 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/