Backbone Project 1: Learning the Basics
After completing this project you should understand and apply:
- Basic Backbone.js development
- Client side template rendering in Handlebars.js
- Using Brunch as a build tool
Install the build tool
Brunch is a build tool for client-side application development and it includes the ability to run a local server along with a slew of other nice features that we'll be taking advantage of in this project.
You'll also need to install SASS (which requires Ruby).
Install and run the project template
You'll be submitting this project using a source code control sytemn called Git. The code itself will be hosted on Github. This will allow easy review of code.
I've created a template repository to get you started with Brunch and Backbone.
To get started:
- Install Git.
- Create a fork of this repository and pull it to your computer.
- Run the project on your computer using the following commands in your terminal:
cd ~/<path-to-your-project-folder> npm install brunch w -s
Once you've done that, you should be able to open a brower to
http://localhost:3333/ and see the text "Hello World!" displayed on the screen.
Exploring the code
Take a few minutes to browse the code that is being used to render "Hello World!" message on the screen.
The page that is being shown in the brower is
app/assets/index.html. You'll see some code in there that is loading a Backbone Model and View and displaying it on the page.
Try and change the message to something else (hint: set the
greeting attribute of the greeting model).
Now, we're going to commit your changes back to your fork of the Github repository. In your terminal and from your project folder type in the following command:
You'll see a list of changes that you've made to your code.
Commit the changes using:
git commit -am "change greeting"
Once you've commited your changes, the next step is to push the changes to Github. Push your code using:
git push origin master
This tells your git repository to push your local changes to the remote repository (origin) using the master branch.
Now is a good time to learn more about Git and I reccomend doing so using this online, interactive course: Try Git
Start the Project
In this project you'll be using HTML, CSS (via SASS), Backbone.js and Handlebars to create the album widget picture here:
- You must load the album data from the JSON file found in
app/assets/data/album.json. You may not include any of the album info or track info in your HTML templates. The data will need to be loaded via a Backbone model
- Use Handlebars.js templates (built into Backbone) to render the HTML for your widget.
- Create at least one Backbone View and one Backbone Model to render your album widget.
There's a lot to learn to be able to produce the desired result and meet the above requirements. You'll need to do quite a bit of practice and research before you're able to complete this project.
When you've completed your project, be sure to push it you your fork of this project then let me know and I will review your code.
Here is a collection of tutorials and resources that can help you as you're working through the project.
- The official documentation.
- Tutorials on various aspects of Backbone.
- Free Interactive Course from Code School.