Web Application with Backbone: BEGINNER TUTORIAL
Here is a tutorial I wrote for a quick start with Backbone and other JavaScript stuff. Only vague knowledge is assumed. Everything is included as comments in the code with each single line commented. It can be found HERE and the much shorter 'commentless' code can be run and downloaded HERE.
Below is the Introduction.
Here is a tutorial I wrote for a quick start with Backbone and other JavaScript stuff. Only vague knowledge is assumed. Everything is included as comments in the code with each single line commented. It can be found HERE and the much shorter 'commentless' code can be run and downloaded HERE.
Below is the Introduction.
Web Application with Backbone: BEGINNER TUTORIAL Backbone.js is a very popular and light(weight) JavaScript library for building Web Applications. However, learning it I found frustratingly few simple examples of true workable applications with all lines of code explained. Here is my attempt to hack the popular Jerome Gravel-Niquet's Backbone Todo App down to a MVA (Minimum Workable App), and turn it into a Beginner Tutorial by adding long and tedious explanations for every single line of Code. When not broken, this App should offer Entry Field for your Item, where you can enter any Text (and please be careful with other characters). Pressing ENTER will add the Item (if not empty) to the List. Then hovering your mouse over a List Entry, you see a little gray cross image at the very right, which you can click to instantly delete the Item for good. Just before deleting as your mouse hovers over that image ready to click, it turns black (i.e. the image, not your mouse, hopefully) to give you the last chance to save the Item from its coming death. This is it, as far as the unsofisticated functionality goes. Yet remarkably, this involves quite a few useful things Backbone can offer to sweeten your life when attempting to write something more useful. So the primary goal of this Tutorial is to explain all those little features and hopefully help the reader to get a quick start, even if she is only vaguely familiar with all this JavaScript stuff. Since I've stripped this App to its absolute bare nacked minimum, including whatever styles are used for decoration purposes, this is probably the ugliest looking App you have ever seen. And just to relieve the reader's pain, she is welcome to add any of her favorite styles to make the App 'not so hard on the eyes'. Unfortunately, every beautiful page seems to have very 'unbeautiful' CSS code underneath, which would leave no hope to keep this tutorial (reasonably) short keeping all lines ferociously explained. You can copy the file either with 'Download Gist' or the '<>' Icon "View Raw", and view it with your Browser, where you see links to download 4 missing files. Once those are in the same directory, the App should become functional. I could provide many links to the terms discussed. However, the links are known to become outdated or die/break at moments of viewing. Thus it will better serve the reader simply to copy-paste them into her favorite Search Engine. Practice. Yes, you can only learn through practice! Which is why I included little paragraphs with homework. To do it, you need to access JavaScript Console provided either by Firebug Extension for Firefox, or natively in the View/Developer menu in Chrome, also available for other Browsers. Have Fun!
