Learn to Build & Deploy Native Speed HTML5 Based Apps

Visit Tutorial Page ( Report)

A Phoenix Arises

Web development technologies have evolved at an incredible clip over the past few years. We've gone from rudimentary DOM manipulation with libraries like jQuery to supercharged web applications organized & powered by elegant MV* based frameworks like AngularJS. Pair this with significant increases in browser rendering speeds, and it is now easier than ever before to build production quality applications on top of Javascript, HTML5, and CSS3.

While these advances have been incredible, they are only just starting to affect the clear platform of the future: mobile. For years, mobile rendering speeds were atrocious, and the MVC frameworks & UI libraries provided by iOS and Android were far superior to writing mobile apps using web technologies. There were also some very public failures -- Facebook famously wrote their first iOS app in 2011 using HTML5 but ended up scrapping it due to terrible performance.

For years now, hybrid apps have been mocked and jeered by native app developers for being clunky and ugly, having subpar performance, and having no advantages over native apps. While these may have been valid reasons in 2011, they are now virtually baseless, thanks to a collection of new technologies that have emerged over the past two years. With these technologies, you can design, build, and deploy robust mobile apps faster than you could with native technologies, all while incurring little to no app performance penalties. This is thanks in large part to super fast mobile browser rendering speeds and better JavaScript performance. This course is designed to teach you how to effectively use these new technologies to build insanely great mobile apps.

Without further ado, we'd like to welcome you to the future of mobile app development, freed from the shackles of native languages & frameworks. Let's learn what the new mobile stack consists of and how it works.

 

  • A Phoenix Arises

    Web development technologies have evolved at an incredible clip over the past few years. We've gone from rudimentary DOM manipulation with libraries like jQuery to supercharged web applications organized & powered by elegant MV* based frameworks like AngularJS. Pair this with significant increases in browser rendering speeds, and it is now easier than ever before to build production quality applications on top of Javascript, HTML5, and CSS3.

  • Starting our project

    When you want to start a new Ionic project, typically all you need to do is run ionic start myApp blank, and it will scaffold a new application for you. However, for simplicity's sake, we've created a starter project specifically for this course that includes all the base HTML/CSS/JS files we'll be using.

  • Building interface functionality

    Lets start with our main interface, "Discover", where the user will be presented with songs to "favorite" or "skip".In a few chapters we will retrieve these songs from a server, but for now we'll add some mock data to the discover controller to prototype with.

  • Wiring Up to A Server

    For this course, we've created a node.js server with which our app will be interacting. There is a publicly accessible version of this server available on Heroku at https://ionic-songhop.herokuapp.com. Very soon, we will be releasing a version of this server that you can run locally, but until then, you can just use the Heroku server.

  • Playing & managing audio

    The key functionality of our app is the ability to quickly sample songs, but getting the proper licensing rights to play song clips is exceptionally difficult. For months we dug around various APIs trying to find a reasonable solution, but to no avail. That was until the summer of 2014, when Spotify made waves by releasing a new set of APIs for interacting with their platform. Their new API provides us with the key bit of functionality for our app: 30 second song previews, as well as album art and other relevant song metadata.

  • Wrapping up the UI and core functionality

    When our app is retrieving data from a server, it's important that we give the user some sort of visual indicator while the app is waiting for the server's response. This especially relevant for the music sampling experience, so let's set up some loading indicators on the Discover page.

  • Creating and persisting user data

    When an Ionic application needs to authenticate with a server, it's usually done with token based session management instead of cookies. It's easier to store an access token on the device than to ensure a browser cookie persists across app usages. For this course, we're going to use an insanely simple implementation of token based authentication. If you're planning on implementing token based authentication in a real app, we recommend reading this post on the topic as well as taking a look at this Github repo of an Ionic app that performs user authentication using bearer tokens, as specified by RFC 6750.

  • Deploying to the emulator, devices and App Stores

    Sometimes, mobile websites just won't cut it. Maybe you need to allow users to download your app from their respective app store, or maybe you need to access native device features that don't have web APIs (like the device's accelerometer, for example). Cordova is the solution.

  • App development is a journey, not a destination

    While this course is a very comprehensive overview of how to build amazing hybrid apps, it really is just an overview. The world of hybrid app development is changing at a rapid pace, and there is so much more to learn. To stay up to date on the latest and greatest, I highly recommend following @IonicFramework and signing up for their newsletter on their website. This course will be updated frequently, so if you're interested in keeping your skills up to date with Ionic and other hybrid app technologies, feel free to follow me @ericsimons40. I also tweet about other cool things besides programming stuff, like Aaron Levie's socks. With that said, welcome to the bleeding edge of mobile app development! You did an amazing job completing this course, and I'd love to hear your feedback on it.

Write Your Review

Reviews