Added in static pages

author: samot <thomasalwyndavis@gmail.com> 2011-04-04 00:12:25 +1000
committer: samot <thomasalwyndavis@gmail.com> 2011-04-04 00:12:25 +1000
commit: 3ca3d56b5c51760680823cce6612bc127929f79c (patch)
tree: 3f20507d401ee707e4794897a6a2a34a4c8c1d61 /_posts
parent: 464b6df44fbc7211f7976b4c10db78472dd4d1c2 (diff)
download: backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.zip
backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.tar.gz
backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.tar.bz2
1 files changed, 8 insertions, 204 deletions
diff --git a/_posts/2011-02-01-backbone-introduction.textile b/_posts/2011-02-01-backbone-introduction.textile
index 7c6b9fa..20b2e16 100644
--- a/_posts/2011-02-01-backbone-introduction.textile
+++ b/_posts/2011-02-01-backbone-introduction.textile
@@ -4,215 +4,19 @@ title: Why would you use backbone.js?
 type: beginner
 ---
 
-h2. Why would you use backbone.js?
+h2. Why do you need backbone.js?
 
-p. Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools.   The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure.   
+p. Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools.   The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure.   You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.
 
-h3. So how does backbone.js help?
-
-p. Backbone.js was written by a beautiful man called Jash Kenas.   Backbone.js supplies structure to heavy javascript applications.
-
-{% highlight html %}
-
-<!DOCTYPE html>
-<html>
-<head>
-    <title>I have a back bone</title>
-</head>
-<body>
-    <button id="add-friend">Add Friend</button>
-    <ul id="friends-list">
-    </ul>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-    <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
-    <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
-</body>
-</html>
-
-{% endhighlight %}
-
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-<br />
-
-p. The official "website":http://documentcloud.github.com/backbone/ describes Backbone.js as a library to supply structure to Javascript heavy web applications.    After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives.
-
-p. I have decided to write a quick introduction for those trying to grasp the mechanics behind it.   I am only a beginner also and would love suggestions and tips to improve my code.
-
-p. I am also very curious to hear what you think about how MVC ties into Javascript development and the most effective library you have used for logically organizing your Javascript.
-
-p. Would be great to get a discussion on MVC vs MVVM vs others etc leave comments at the bottom!
-
-p. Also could you implement this example better in another framework?
-
-h3. Understanding the Model View Controller Paradigm
-
-p. I have used many frameworks which promote that they use MVC.   I don't think I have ever seen the same fundamental principals implemented the same way. 
-
-p. Backbone.js has 4 classes: Models, Views, Controllers and Collections.   The Models and Collections class work hand in hand and when combined essentially make up the M(model) of MVC.
-
-p. The main concept I follow when using Backbone.js is to make Views listen for changes in the Model and react accordingly.   I would recommend bookmarking the homepage "documentation":http://documentcloud.github.com/backbone/ and I perusing  the annotated "source":http://documentcloud.github.com/backbone/docs/backbone.html code.
-
-h3. Getting started
-
-p. I am going to run you through a basic tutorial that should get you on the right path if you are a bit lost like I was when I started.
-
-p. First of all we are going to just setup a basic page and include Backbone.js and Underscore.js(a dependency of Backbone.js)
-
-{% highlight html %}
-
-<!DOCTYPE html>
-<html>
-<head>
-    <title>I have a back bone</title>
-</head>
-<body>
-    <button id="add-friend">Add Friend</button>
-    <ul id="friends-list">
-    </ul>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-    <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
-    <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
-</body>
-</html>
-
-{% endhighlight %}
+I shouldn't need to explain why building something without any structure is a bad idea.   Of course you can always invent your own way of implement your own way of structuring your application but you miss out on the benefits of the open source community.
 
-p. For those of you who are lazy the full example can be viewed "here":http://thomasdavis.github.com/examples/backbone-101/ and downloaded 
-"here":https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101
 
-h3. Setting up the main view
 
-p. Each view has a HTML DOM element associated with it. You can read more about why "here":http://documentcloud.github.com/backbone/#View-el .
-Because this is our master view we are just going to associate the view with our page body in this example.
-
-p. If the el(element) specified does not exist, Backbone.js will attempt to create it.
-
-{% highlight javascript %}
-(function ($) {
-window.AppView = Backbone.View.extend({
-  el: $("body"),
-  events: {
-    "click #add-friend":  "showPrompt",
-  },
-  showPrompt: function () {
-    var friend_name = prompt("Who is your friend?");
-  }
-});
-var appview = new AppView;
-})(jQuery);
-{% endhighlight %}
-
-p. So we just wrapped our Backbone code with jQuery to make sure the page has loaded correctly. Then we create our main application view by extending Backbone and passing a JSON object with our options. We specified "body" to be the associated element for this view.
-
-p. The events property is very powerful and lets us attach listeners to our views.   In the example above we have attached a click listener to our button with id "add-friend". Read more about events "here":http://documentcloud.github.com/backbone/#View-delegateEvents
-
-p. After we have setup our AppView, we can just call to initiate it at anytime.
-
-h3. Collecting the Models
-
-p. A Model in Backbone.js can represent any entity you like and in this case we want it to represent a friend. We can easily create friend Models but without any structure they become fairly useless to us because we can't iterate through them unless they are grouped together.   So Backbone.js implements the Collection class which  allows us to order our models. Read more "here":http://documentcloud.github.com/backbone/#Collection .
-
-p. Now we get to the fun part. You can bind listeners/events to Models and Collections.   So whenever there are changes to the data we can call events to react accordingly.
-
-p. We are going to add this code to our example which lets us add a friend Model to our friend Collection. We will then bind a listener to create a new list element when the data has changed.
-
-{% highlight javascript %}
-(function ($) {
-
-Friend = Backbone.Model.extend({
-//Create a model to hold friend atribute
-name: null
-});
-
-Friends = Backbone.Collection.extend({
-//This is our Friends collection and holds our Friend models
-initialize: function (models, options) {
-this.bind("add", options.view.addFriendLi);
-//Listen for new additions to the collection and call a view function if so
-}
-});
-
-AppView = Backbone.View.extend({
-el: $("body"),
-initialize: function () {
-this.friends = new Friends( null, { view: this });
-//Create a friends collection when the view is initialized.
-//Pass it a reference to this view to create a connection between the two
-},
-events: {
-"click #add-friend":  "showPrompt",
-},
-showPrompt: function () {
-var friend_name = prompt("Who is your friend?");
-var friend_model = new Friend({ name: friend_name });
-//Add a new friend model to our friend collection
-this.friends.add( friend_model );
-},
-addFriendLi: function (model) {
-//The parameter passed is a reference to the model that was added
-$("#friends-list").append("<li>" + model.get('name') + "</li>");
-//Use .get to receive attributes of the model
-}
-});
-
-var appview = new AppView;
-
-})(jQuery);
-
-{% endhighlight %}
-
-h2. "Demo":http://thomasdavis.github.com/examples/backbone-101
-    "Source":https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101
-    
-h3. Conclusion
-
-p. I hope this helps anyone trying to pick it up.   I don't mind answering any questions that I have the ability to answer.  
-
-p. Would also love to hear to some optimization tips! 
-    p.s.  Would love some insight into MVVM, MVC etc
-
-p. Update: 	Changed the code to append the elements from the view and not the Model/Collection. The "problem":http://news.ycombinator.com/item?id=2158011 was described on ycombinator by emehrkay
+h3. So how does backbone.js help?
 
- Update 2: A user called <a href="http://twitter.com/svenlito" target="_blank">svnlto</a> had a pull request to fix up the example code to implement better coding practises, he was spot on so I merged his request into the master branch. You can view the pull request <a href="https://github.com/thomasdavis/thomasdavis.github.com/pull/1" target="_blank">here</a>.
-<span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span>
-<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script>	</article>
+p. Backbone is an incredibly small library for the amount of functionality and structure it gives you.   One can not easily summarize the benefits you will reap from using it.   If you read through some of the beginner tutorials the benefits will soon become self evident and due to backbone.js light nature you can incrementally include it in any current or future projects.
 
 
-<script type="text/javascript">
-SyntaxHighlighter.all()
-</script>
-<script>
-var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
-var idcomments_post_id = "backbone";
-var idcomments_post_url;
-</script>
-<span id="IDCommentsPostTitle" style="display:none"></span>
-<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
-</div>
+h3. Relevant Links
+* "backbone.js official website":http://documentcloud.github.com/backbone/
+* "great hackernews discussion /w post from author":http://news.ycombinator.com/item?id=2119704
author	samot <thomasalwyndavis@gmail.com>	2011-04-04 00:12:25 +1000
committer	samot <thomasalwyndavis@gmail.com>	2011-04-04 00:12:25 +1000
commit	3ca3d56b5c51760680823cce6612bc127929f79c (patch)
tree	3f20507d401ee707e4794897a6a2a34a4c8c1d61 /_posts
parent	464b6df44fbc7211f7976b4c10db78472dd4d1c2 (diff)
download	backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.zip backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.tar.gz backbonetutorials-3ca3d56b5c51760680823cce6612bc127929f79c.tar.bz2