I recently had the privilege of giving a presentation for Ionic at Hack-a-ton SF. My goal was to show the attendees how to get up and running and start building mobile apps in as short an amount of time as possible. I asked Max Lynch, Adam Bradley and Andrew Joslin to share some of their best tips and tricks for working with Ionic. My presentation ending up as an ultra-condensed Ionic crash course and some awesome protips delivered on a silver platter for people to dig in and start rocking their mobile app.

I had a lot of great feedback on the presentation so I wanted to share a version of it in this post. So for your consumption, I recorded a version of the ultra-condensed version of what I did in the presentation as well as posted the slides and protips. I think Ionic is an amazing framework and I love working with it as it takes over and does a lot of the heavy lifting for me. Basically, I am lazy and it makes me appear more awesome than I am. FTW!

The Crash Course!

The Slides

The ProTips

Copy From The Docs

I am borrowing this line from Max because I thought it was so awesome. It is totally reasonable to make an Ionic app by copying and pasting example code from the docs. The Ionic documentation is really well done and an incredible resource for finding working code that you can use immediately.

CSS Components

http://ionicframework.com/docs/components/

JavaScript API

http://ionicframework.com/docs/api/

Check Out Ionic’s CodePens

Check out Ionic’s example CodePens if the docs don’t have enough example code for you. Seriously. Your next hackathon is pretty much in the bag with this resource.

One-Time Binding FTW

For scrolling and large lists, try to use Angular 1.3’s one-time binding for super fast updates. #micDrop

ngCordova Loves You

Ionic has a huge collection of device APIs wrapped with AngularJS to make them super easy to use, and do things like use promises, etc: http://ngcordova.com/

Use Crosswalk

Use crosswalk on Android to increase performance http://ionicframework.com/blog/crosswalk-comes-to-ionic/

Let Ionic Work For You

Ionic some great tools like Ionic View, Ionic Lab and the Ionic Resources generator to make testing easy and to make it easy to generate splashscreens and icons.

• http://ionicframework.com/blog/view-app-is-alive/
• http://ionicframework.com/blog/automating-icons-and-splash-screens/
• http://ionicframework.com/blog/ionic-lab/

BONUS: Use Ionic Run

Adam Bradley hit me up with another great tip to streamline our workflow and by “streamline our workflow” I mean “be totally lazy”. Use ionic run to combine ionic build and ionic emulate into a single command. Hey! Those single lines add up!

In Conclusion

I love when a technology just gets out of the way and lets me focus on expressing my ideas and building awesome stuff. This is why Ionic is one of my favorite tools in my toolkit and I especially appreciate the hard work that has been put into making the experience so pleasant and easy. I love it when I can be lazy and maintain an air of awesomeness!

Have Ionic tips of your own? Leave them in the comments below!