Single Page Web Applications - part one(petermartinblog.com)
petermartinblog.com
Single Page Web Applications - part one
http://www.petermartinblog.com/2013/02/07/single-page-web-application/
5 comments
http://todomvc.com can give you an answer to this question. It implements the same Todo app in a variety of different frameworks and has a jQuery implementation to compare against. The differences become very obvious in this case.
When the logic and interactivity of your page grows, you reach a point where it is really hard to maintain it all with just jQuery. You'll be firing events, and listening for them, and tracking a lot of state that could become global if you don't fight against that really hard.
If the state does become global, then you will have all the struggles that come with that ... something will change "foo" in the global state, and that will cause problems in some completely unrelated part of the page, which will take you hours/days to track down. This is just one example of the kind of problem you can experience.
What the Single Page App frameworks offer is a nicer way to organize all this complexity. You have models, which can fire events. You have Controllers, which (though defined differently in each framework) help you capture and express event listeners in one well-managed location. And you have views to generate changes to the HTML, which usually have enough integration with the models that it greatly reduces the amount of event handling/template re-generation code you have to write.
They really do make a difference, and the MVC frameworks that are out there these days are excellent. I guess the only real way to get a handle on what they do for you is to try a quick demo.
If the state does become global, then you will have all the struggles that come with that ... something will change "foo" in the global state, and that will cause problems in some completely unrelated part of the page, which will take you hours/days to track down. This is just one example of the kind of problem you can experience.
What the Single Page App frameworks offer is a nicer way to organize all this complexity. You have models, which can fire events. You have Controllers, which (though defined differently in each framework) help you capture and express event listeners in one well-managed location. And you have views to generate changes to the HTML, which usually have enough integration with the models that it greatly reduces the amount of event handling/template re-generation code you have to write.
They really do make a difference, and the MVC frameworks that are out there these days are excellent. I guess the only real way to get a handle on what they do for you is to try a quick demo.
Jquery has no native mechanism of doing MVC. Building a page with a few sets of interactive elements using jquery is perfectly fine, but scaling it up to a hundred screens all packed into a single page is essentially impossible.
Python guy here, who is looking to build a client side MVC app and so far Ember and Angular are my top 2 choices because their docs were just easier to follow (especially for JS noob such as myself) any insight on why OP chose knockout?
FYI: Check out http://egghead.io for a great series of instructional videos about angular.
Haven't started with Knockout myself yet, but hear it has both excellent docs/tutorials/community and is fast for DOM-based templating (the only other DOM-based being Angular). There have been a couple of roundup comparisons in the last year, here are two:
http://blog.stevensanderson.com/2012/08/01/rich-javascript-a...
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frame...
http://blog.stevensanderson.com/2012/08/01/rich-javascript-a...
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frame...
It's mature and well documented. In other performance tests it has fared OK to well (I think another commenter linked to some). It isn't a 'full' MVC framework (e.g. it has no routing capabilities) but binding DOM elements to an underlying model can be a simple and powerful abstraction.
Knockout has some amazing docs and a great tutorial: http://learn.knockoutjs.com/#/?tutorial=intro.
As far as routing goes, I use Backbone.router. I've written more about why we chose this setup on my blog: http://www.rivvir.com/for-us-for-now-knockout-js-backbone-ro...
As far as routing goes, I use Backbone.router. I've written more about why we chose this setup on my blog: http://www.rivvir.com/for-us-for-now-knockout-js-backbone-ro...
Knockout (and to some degree Angular) allows to write declarative (read: markup) apps quickly, without having to spend most of your time initially creating controllers, models with computed properties, etc.
When you want to rapidly develop an all with two way data-binding, dynamic views, and a little bit of XHR, declarative-friendly JavaScript frameworks like Angular and Knockout really shine.
When you want to rapidly develop an all with two way data-binding, dynamic views, and a little bit of XHR, declarative-friendly JavaScript frameworks like Angular and Knockout really shine.
Well.. Part one was kind of useless. This should have been a paragraph in the part two article where you actually show how to build the one page web app.
Here you go: http://jsfiddle.net/skilesare/J9Jyx/
<html> <head> <script type='text/javascript' src='knockout-2.2.1.js'></script> </head> <body> <!-- This is a view - HTML markup that defines the appearance of your UI -->
<p>First name: <strong data-bind="text:firstName">todo</strong></p> <p>Last name: <strong data-bind="text:lastName">todo</strong></p>
<script type="text/javascript"> // This is a simple viewmodel - JavaScript that defines the data and behavior of your UI function AppViewModel() { this.firstName = "Bert"; this.lastName = "Bertington"; }
// Activates knockout.js ko.applyBindings(new AppViewModel()); </script> </body> </html>
<html> <head> <script type='text/javascript' src='knockout-2.2.1.js'></script> </head> <body> <!-- This is a view - HTML markup that defines the appearance of your UI -->
<p>First name: <strong data-bind="text:firstName">todo</strong></p> <p>Last name: <strong data-bind="text:lastName">todo</strong></p>
<script type="text/javascript"> // This is a simple viewmodel - JavaScript that defines the data and behavior of your UI function AppViewModel() { this.firstName = "Bert"; this.lastName = "Bertington"; }
// Activates knockout.js ko.applyBindings(new AppViewModel()); </script> </body> </html>
The title is misleading.. the real action starts in next part.. This should be 'choice of frameworks for single page app' thats all.
Link to app?
My question to the community in this thread is, why all these new JS libraries? Do they offer something that I don't know about, something jquery doesn't?
He didn't even mention jquery in his post, yet he mentioned a ton of other libraries I had never heard of before. So I'm very curious.