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
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
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.
- 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
- State Manager using ui-router
- Resolve Parse Data Before State Changes for awesome UX e.g.
- 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
- Install node - http://nodejs.org/
- Install grunt v0.4.x - http://gruntjs.com/getting-started
- Install bower
npm install -g bower
- Install coffee-script
npm install -g coffee-script
- Make sure you have compass installed (http://compass-style.org/install/)
- Make sure you are running the latest version of Node (we can't assure you this is gonna work on older versions of Node)
- Clone this repo
git clone email@example.com:brandid/parse-angular-demo.git
- Switch out your Parse keys in ParseServices.js (see below)
- Switch out your Facebook App ID in ParseServices.js
- Remove our GoSquared tracking snippet from index.html
grunt server- builds and fires up the local node server on localhost:3000
- Visit http://localhost:3000 to develop your site
grunt prodto build a deployable version in the parse-angular-demo/build folder (
grunt prodis actually
Wire up your own Parse backend in seconds
Help / Knowledge base
Feel free to open an issue if you need help, check the Wiki before to check what has been answered already!
BRANDiD regularly gets over 100 concurrent connections, and this architecture handles it with ease.
ericlemmons/genesis-skeleton - server boilerplate
daneden/animate.css - animations
Bootstrap CDN - Bootstrap hosting
- 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
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