backbonetutorials/_site/why-would-you-use-backbone/index.html at 94259502b48e65704fc45e55a9840ac1bac24b85 · thomasdavis/backbonetutorials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Why would you use Backbone.js? - Backbone.js Tutorials</title>
<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml">
   <meta name="author" content="Backbone Tutorials" />

   <!-- syntax highlighting CSS -->

   <!-- syntax highlighting CSS -->
   <link rel="stylesheet" href="/css/syntax.css" type="text/css" />

  <link rel="stylesheet" href="http://cdn.moot.it/1.1/moot.css"/>
   <!-- Homepage CSS -->
   <link rel="stylesheet" href="/css/bootstrap.css" type="text/css" media="screen, projection" />
   <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" />


   <!-- Typekit -->
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>


    <script type="text/javascript">
/* <![CDATA[ */
    (function() {
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
        t.parentNode.insertBefore(s, t);
    })();
/* ]]> */
</script>
     <!-- (1) Moot depends on jQuery v1.7 or greater -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>
<body>
<div class="container">

  <div class="row">
    <div class="col-lg-12">
      <div class="navbar" style="margin-top:10px;">
        <div class="container">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Backbone Tutorials</a>
          <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
              <li class=""><a href="/">Home</a></li>

            </ul>
            <ul class="nav navbar-nav pull-right">
              <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li>
              <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li>
            </ul>
          </div><!-- /.nav-collapse -->
        </div><!-- /.container -->
      </div>


    </div>
  </div>
</div>


<div style=""></div>
<div class="container">
<div class="row">
  <div class="col-lg-4">
<div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">About</h3>
      </div>

    <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p>
    </div>
  </div>
  <div class="col-lg-8">
        <h3 >Backbone.js Beginner Video Tutorial</h3>
      <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free.   It is 70mins long and covers everything you need to know when getting started.</p>
      <a href="http://gum.co/backbone-beginner-screencast" class="btn btn-primary">Watch Video</a>
  </div>
</div>
  <div class="container">
      <div class="panel">
      <div class="panel-heading">
        <h3 class="panel-title">Tutorial</h3>
      </div>


<div id="post">
<h1>Why do you need Backbone.js?</h1>

<p>Building single-page web apps or complicated user interfaces will get extremely difficult by simply using <a href="http://jquery.com">jQuery</a> or <a href="http://mootools.net">MooTools</a>. 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.</p>

<p>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 structuring your application but you miss out on the benefits of the open source community.</p>

<h2>Why single page applications are the future</h2>

<p>Backbone.js enforces that communication to the server should be done entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.</p>

<h2>So how does Backbone.js help?</h2>

<p>Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. 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.</p>

<h2>Other frameworks</h2>

<p>If you are looking for comparisons to build your single page application, try some of these resourceful links.</p>

<ul>
<li><a href="http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/">A feature comparison of different frontend frameworks</a></li>
<li><a href="https://github.com/tastejs/todomvc">Todo MVC - Todo list implemented in the many different types of frontend frameworks</a></li>
</ul>


<h3>Contributors</h3>

<ul>
<li><a href="https://github.com/FND">FND</a></li>
</ul>


<p><strong>If you questions regarding why you should choose Backbone.js as your framework, please leave a comment below</strong></p>

</div>
  </div>


<div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">Authored by Thomas Davis</h3>
      </div>
        <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a>
        <a href="https://twitter.com/neutralthoughts">Twitter</a>
        <a href="https://github.com/thomasdavis">Github</a>

</div>
<div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">Comments</h3>
      </div>
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'bbtutes'; // required: replace example with your forum shortname
    var disqus_url = 'http://backbonetutorials.com/what-would-you-use-backbone';
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
</div>

  </div>

</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-520b31815dc3cdc8"></script>
<!-- AddThis Button END -->
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript>
</body>
</html>