Skip to content

Guest Post: Parse x Angular JS Boilerplate by BRANDiD

We've got an exciting new tool for those of you looking to build web apps on Parse using Angular JS, courtesy of our friends at BRANDiD. Enjoy!


cloud iconAt BRANDiD, we're totally in love with Parse, which is saving us months and months of backend programming the more we use it. We also really love AngularJS for all its insane two-way data binding, its declarative semantics, and commitment to modularity. All of this means you can build apps FAST. And that's exactly what Parse wants to help you do too. In fact, we think AngularJS and Parse are a match made in heaven. To prove it, today, we're releasing the Parse x AngularJS Boilerplate, so you don't need dragon-ninja skills in asynchronous programming to build complex apps with Parse and AngularJS!

Who is this for?

Maybe you're already using Parse for mobile and you need a web presence now too.

Maybe you’re an AngularJS beginner and you want to learn how big AngularJS apps are built.

Maybe you're already familiar with AngularJS or Backbone and you need a solid architecture that will scale nicely as your app scales.

Maybe you're at a hackathon, and you need to quickly launch a dynamic web app that requires user sessions and data storage.

BRANDiD team onstage at TechCrunch Disrupt JavaScript Frameworks are coming of age

There has always been this endless JavaScript framework argument, but the fact is most of these frameworks (including AngularJS and Ember) are still so new. The world is still learning how to build big complex apps with these bleeding edge technologies, and the frameworks are evolving fast. One thing that is clear though, is that thick client is becoming a better way to build web apps. Parse is strategically positioned in the best place it can be, as a ‘thin’ backend layer to power all your thick client apps, but with the extensibility of a powerful backend (through Cloud Code).

Over the last year, we've built entirely on this stack, with no servers. We could run our business from a JSFiddle. This kind of scalability came in handy when we launched at TechCrunch Disrupt Battlefield (coincidentally, Parse’s own Ilya Sukhar was one of our judges), where we peaked at around 100 concurrent connections. Not crazy traffic, but the web app remained extremely performant.

Why Do You Need the Parse x AngularJS Boilerplate?

We really like AngularJS. However, you often hit the WTF ZONE of Angular, especially when you try to update scope variables outside of the "Angular Kingdom". Since all your data will be pulled in asynchronously from Parse, you'll run in to this issue pretty quickly.

Another problem is AngularJS is still quite a new technology, and there just aren't a lot of proven best practices around how you should structure big complex apps with AngularJS. Add Parse to the mix and you can get lost very easily.

This boilerplate makes it a cinch to get started and grows as your app grows without sacrificing maintainability. This is the key to a great architecture. We think its the fastest way to build big database enabled web apps. Not only did we build our web app with this boilerplate, we built all our internal shopper tools, reporting dashboards, our delivery-guy app, our chrome extension for our shoppers - everything - on this boilerplate. We made it to be scalable, performant, modular, flexible and maintainable.

Features include:

  • AngularJS wrapper for the Parse JS SDK

  • AngularJS wrapper for Cloud Code

  • AngularJS wrapper for the Facebook API

  • Enhanced Parse.Object and Parse.Collection

  • State Manager using ui-router

  • Resolve Parse Data Before State Changes

  • Easy Animations on State Change

  • Enhanced loading of the Parse and Facebook SDKs

  • Data Modules for Parse Models and Collections

  • ...and more

Parse x AngularJS Boilerplate

Check out the project above and let us know what you think on the HackerNews thread.

Build Your Next Web App with Parse and AngularJS

Now you have the vocabulary to tame the asynchronous world of AngularJS and Parse, go fork the boilerplate, play around with these new techniques and tell us what you think in the comments!