An opinionated, battle-tested boilerplate for building large, powerful, serverless apps with AngularJS and Parse.
Built by Try.com
http://brandid.github.io/parse-angular-demo
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.
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!
- 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
- 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 git@github.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
cd parse-angular-demonpm installgrunt 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 actuallybuildfollowed byoptimize)
// pro-tip: swap these keys out for PROD keys automatically on deploy using grunt-replace
...
Parse.initialize("***APP ID***", "***JAVASCRIPT KEY***");
...
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/)