A Quickstart Boilerplate for Big AngularJS x Parse apps

An opinionated, battle-tested boilerplate for building large, powerful, serverless apps with AngularJS and Parse.

Built by guys who would rather be coding than shopping

---

Live Demo and Documentation

http://brandid.github.io/parse-angular-demo

---

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.

---

Why we made this

Thanks to Mahmoud from Balanced for the inspiration to be more open.

---

We love Parse and AngularJS. We hate servers. Whilst building BRANDiD we developed some best practices around this stack, so we decided to open source it here. We even talked about it on the Parse Blog.

This boilerplate is a quickstart for large, maintainable, database enabled AngularJS apps. Let us know what we can improve via twitter @spacenick and @arush!

---

Features

• AngularJS wrapper for the Parse JS SDK
• AngularJS wrapper for Cloud Code
• AngularJS wrapper for the Facebook API
• Bootstrap 2.3.2 + HTML5BP
• Enhanced Parse.Object and Parse.Collection with load(), saveParse(), destroyParse()
• State Manager using ui-router
• Resolve Parse Data Before State Changes for awesome UX e.g. return collection.load()
• Easy Animations on State Change
• Enhanced Load Performance of the Parse and Facebook SDKs
• Data Modules for Parse Models and Collections
• Genesis-Skeleton node / grunt setup for local development
• …and lots more

Read about all the features here

---

Installation Instructions

1. Install node - http://nodejs.org/
2. Install grunt v0.4.x - http://gruntjs.com/getting-started
3. Install bower npm install -g bower
4. Install coffee-script npm install -g coffee-script
5. Make sure you have compass installed (http://compass-style.org/install/)
6. Make sure you are running the latest version of Node (we can't assure you this is gonna work on older versions of Node)
7. Clone this repo git clone [email protected]:brandid/parse-angular-demo.git
8. Switch out your Parse keys in ParseServices.js (see below)
9. Switch out your Facebook App ID in ParseServices.js
10. Remove our GoSquared tracking snippet from index.html
11. cd parse-angular-demo
12. npm install
13. grunt server - builds and fires up the local node server on localhost:3000
14. Visit http://localhost.com:3000 to develop your site
15. grunt prod to build a deployable version in the parse-angular-demo/build folder (grunt prod is actually build followed by optimize)

---

Wire up your own Parse backend in seconds

client/app/scripts/services/ParseServices.js

// pro-tip: swap these keys out for PROD keys automatically on deploy using grunt-replace

...
Parse.initialize("***APP ID***", "***JAVASCRIPT KEY***");
...

---

Help / Knowledge base

Feel free to open an issue if you need help, check the Wiki before to check what has been answered already!

---

Performance

BRANDiD regularly gets over 100 concurrent connections, and this architecture handles it with ease.

---

Credits

ericlemmons/genesis-skeleton - server boilerplate

daneden/animate.css - animations

Bootstrap CDN - Bootstrap hosting

---

Contribute

• Angular Backbone bindings for easier forms with Parse SDK (60% complete - @spacenick)
• Better documentation/video on how to customise queries like ParseQueryTableViewController
• Convert to grunt-takana instead of grunt-contrib-compass (too slow)
• Tests (help!)
• Upgrade to Bootstrap 3.0.x
• Docs and examples on User session handling
• Docs and examples on ACL to protect against this Parse API design decision. For those who need to retrospectively protect their database, read this thread
• Open source the BRANDiD Customer.io Cloud Code module to securely trigger transactional emails with unlimited custom data (You cannot send large payloads with the Customer.io JS SDK)
• Include AngularFirebasePatch for real-time support, which is our simple alternative to AngularFire

---

License

parse-angular-demo is licensed under the ☺ license. (http://licence.visualidiot.com/)

---

If you found this useful

Next time you think of clothes, think BRANDiD - Shop. Like a Man.

• A dedicated expert shopper searches the ends of the earth just for you
• Try clothes from any ecommerce store in the world before you buy them, no commitment
• We ship and collect returns for free even if the retailer doesn't

Watch our TechCrunch Disrupt Battlefield Video here