If you need a web app with a strong front-end interaction with access to back-end processing, such as querying an API for JSON data or building an admin dashboard to manage your assets, you can use this repo as a good starting point to hit the ground running.
There are several ways to get a RequireJS/Backbone App up and running, but I needed to be able support mulitple users, manage content and uploads, and be able to serve data through an API, so I have choosen to integrate everything together with the CodeIgniter framework since many of these extras are built in and well documented.
- CodeIgniter Version 3.0.3
- HTML5 Boilerplate
- Normalize
- Modernizr
- RequireJS
- jQuery
- jQueryUI
- Backbone
- Underscore
- Hogan
@see js/main.js for this is configured. Note that the CDN is commented out for development. Uncomment when you go live.
@see application/controllers/api/ajax and application/config/routes/ for how this is wired up.
The gist is I created a simple API controller to handle your Ajax calls. Configure for your calls
I created a super simple example to show a landing page which will load our header and footer templates, pass any CI data to the view from controller, RequireJS to load up our libraries when needed and make a call to a API Controller which return JSON data.
You need a LAMP stack, access to database, and a machine/server configured for running PHP version 5.1.6 or newer. Also see CodeIgniter Server Requirements for more CI info.
If you are not already aware of the CodeIgniter basic setup, you will need to edit the config files in your application. Navigate to application/config folder and see the CI Database Configuration and CI Encryption Class for starters, and then do some research to customize anything else you would need.
Require and Backbone are up and running with very basic settings. There are a quite a few tutorials on the web for taking Backbone to the next level. I found this article to be quite informative - JavaScript Architecture: RequireJS Dependency Management. I used the basic logic in setting up the structure to this client-side app. Refer to the js folder and implement your functionality there.
You can look through the commits to see how we ended up to this state, but just to note a few of the highlights and
Very helpful for being able to have multiple layouts for pages, widgets, popups, ect... @see: http://www.syahzul.com/codeigniter/codeigniter-layout-without-using-additional-library/
Add some extra basic functionality proves to be helpful.
@see application/core/MY_Model.php and application/core/MY_Controller.php
This was the main reason I set this all up. I wanted to be able to touch my database and get records from the client-side through an API until I get up and running fully with NoSQL and Node. So using CI to process data and output JSON data with this API Controller makes this possible to get data to the client-side in a pretty secure fashion.
NOTE: that moving forward you must use best practices to guard yourself against XSS attacks. @see OWASP for more info about security, and this is a good read about Testing for AJAX Vulnerabilities
Also, @see CI Input class and CI Security Class for built in Global XSS Filtering and Security options.