I have been a user of jQuery (and some of its minor plugins) for a while. The Javascript code I've developed over the years could be described best as... messy. It used a ton of global variables and functions here and there, didn't use standard ways of organizing the code, nor any design patterns whatsoever.
I am currently building the new version of a website, and I have completed doing the backend with PEAR::MDB2 and Smarty templates. The rest is just homebrew PHP with some classes.
Now I am at the point where I'll add the Javascript layer on top of the website to improve the user-friendliness of some features. (while making sure everything degrades gracefully) I want to write better, cleaner, more organized Javascript than I used to, so I did a little research. I read Stefanov's Object-Oriented Javascript to have a better grasp on some concepts I knew only loosely about (prototypes, constructors, etc.) as well. Now I'm stuck at a point where I wonder which Javascript frameworks I should use, and how to organize it all.
After conducting my research, I understood Cappuccino & Objective-J, and Sproutcore were not what I was looking for. To quote Cappucino's about page:
Cappuccino is not designed for building web sites, or making existing sites more "dynamic". We think these goals are too far removed from those of application development to be served well by a single framework. Projects like Prototype and jQuery are excellent at those tasks
So there's that. Then I found out about Coffee Script, which is more of a one-to-one "compiler" and wouldn't help me with the actual organization of my code.
I also stumbled on some articles that give guidelines:
Using Inheritance Patterns to Organize Large jQuery Applications
A JavaScript Module Pattern
I also found out about Backbone.js, Shoestring, JavaScriptMVC, Google Loader, jQuery Tools, jQuery UI. I don't really know what to do of all this... The things I know:
I don't want to invest too much time in learning something too complex, I want to keep things simple and flexible as much as possible (that is why I don't use Symfony on the backend, for example), yet clean and organized.
I want to use jQuery, the question is, what should I use with it? (that is compatible too)
Right now, I'd use jQuery and jQuery Tools and "organize" all that in a simple namespace/object literal with simple properties and methods and also, since the site is localized, I just plan on using the simple vsprintf (as I do on the backend) with key:value pairs loaded from an object literal provided by the backend. JavaScriptMVC seems interesting, but I fear it would bring way too much complexity for a project that is fairly small sized. That is where I need your advice! Thank you very much in advance.
Ok, my attempt at an answer:
There is no 'best' to way to do it. You now know what's there and I think you might have a preference for yourself for what you want. In that case, pick a framework and learn it inside-out. (sorry to burst your bubble, but each framework has a learning curve, some steep, some very easy, but in the end to use it well you have to invest in it. Just do it, you won't be sorry).
You of course have an preference for clean code, so you might take some considerations into account. You also say you have a preference for jQuery, which is fine, but there are some limitations (as also pointed out in the link provided by eskimoblood).
There are some nice lectures / and tutorials with advice on how to structure your code in jQuery:
How to manage large jquery apps
On Large jQuery apps
Essential Javascript and jQuery patterns (free ebook)
Some style guides:
Jquery core UI Styleguide
Google Closure Javascript Style Guide
Tools for checking your code
JSLint
JSHint (a more forgiving/practical fork)
Closure Linter (haven't tried it yet, but intend to)
Standard works (javascript)
Everything by Douglas Crockford
Quirksmode
There might be more.. perhaps more people can contribute, but I also think that you've almost reached the end of what you can learn before getting your hands dirty. Many of these guides are written in a very generic way, but the interesting thing is that javascript is called upon in many specific situations. It might be useful to just post some of the code that you regard as "messy" and we can help you figure out how to do it better. Good luck!
You should watch the video and read the links in this article and then you should ask yourself again if jquery is the right tool. Maybe you will use dojo, that is much better for larger projects or you take a look at backbone and where you can stay with jquery. After all both of them are more "javascriptish" then something like sproutcore, cappuciono or even GWT. And also much easier to understand when you come from jquery.
One framework that is to consider is definitely ReactJS from Facebook. This framework is pretty slick in many ways.
First thing you have to know is that it is a view framework. It can be used server-side to do the pre-rendering of pages, but it really shines on client side. Since it's a view framework, it can be used with backbone or any other "back-front"-end framework.
One of the main point of React is its rapidity. It keeps a virtual DOM in memory and virtualize all the webpages events. So the virtuals event are used to keep events browser agnostics.
The virtual DOM kind of make programming a dynamic site as if you were programming an old static website. You can just shoot the whole HTML to render to the view engine (as if you were "re-rendering" the whole page) and it will manage the DOM operations. It does a diff between the new virtual DOM and the current virtual DOM and only inserts nodes that needs to be inserted. This way you reduce the number of DOM ops and thus increase your render speed by a lot.
A good place to start is this tutorial which shows how to use "Flux" (the web flow designed by Facebook for its site) in order to realize a Todo application!
Are there any alternatives to something like backbone.js out there that provides some framework/structure to your front end javascript - but don't have any unwanted dependencies and are more closely married to jQuery?
Are you asking for an easy to use MVC framework?
because Sammy.js seems to be by far the most easy RESTful framework with routes, managing hash changes, and templating plugins.
have you checked SproutCore
also JavaScriptMVC
Spine
I think there's only one MVC framework that is as fully featured and still even more puristic and that's Spine http://spinejs.com/. It's not so closely married to jQuery though since it's actually not dependent on any other library.
Spine vs. Backbone
The fundamental difference between Backbone is that Spine wants to abstract the server away completely so that none of the asynchronous calls are being waited, but that the application just continues it's work while the calls are done in the background. (http://spinejs.com/docs/introduction)
I would recommend everyone to have a look at ember.js.
Ember is much more of a high level framework with many useful features implemented implemented out of the box. For example:
Two way data binding
Computed properties
Auto-updating templates
On the other hand the fact that is higher level than Backbone makes it less flexible , thus less attractive for those javascript developers that like tweaking the system and getting their hands dirty.
For those interested you can find a great comparison between the two at: http://smus.com/backbone-and-ember/
I know this is a few days old now, as well as a shameless plug - but I am the author of AFrameJS, which plays well with jQuery. There are a lot of docs there, also some on shanetomlinson.com. The source is on GitHub. K Ivanov already mentioned JavascriptMVC, and then there is KnockoutJS. Ext, is a library that would replace jQuery, but is also an MVC library that contains a ton of pre-built widgets. There are a ton to choose from - a very good thing.
current version of backbone.js seems to work with zepto.js library
it's a lightweight alternative to jquery (it's less that a quarter jquery's size)
I know jquery and javascript but never worked on other frameworks like EXTJS.
can somebody tell me the best way to quickly learn EXTJS? and also what is the process to configure EXTJS? Is it in the same way like we configure jquery (by just adding a standard js file)? or something else.
Thanks
Quite a few tutorials on this website:
http://www.sencha.com/learn/Tutorials
Or have a look at the answer to this question
https://stackoverflow.com/questions/2001112/ext-js-tutorial-or-videos
Try Garcia's book 'Ext JS in action'
http://www.manning.com/garcia/
I'd recommend Jorge Ramon's excellent ExtJS 3.0 Cookbook - it's what I used to learning by actually doing stuff. The projects start out pretty easy, and goes through everything to do with configuring ExtJS.
Once you've got the basics, the Sencha tutorials and FAQs are ok, but I reckon that for reference, the best resource they've got by far is their API.
Finally, Jozef Sakalos (aka Saki) has made some awesome examples on his blog and on his ExtJS Examples site.
Good luck learning ExtJS!
I always read files from here Sencha Docs
and use it as my reference for my tasks/projects
For the longest time I've used jQuery to hack together web sites. Now I'm interested in making a web application (one page load for the entire site to function, like Gmail).
Are there any jQuery Frameworks or practices that I can leverage to build my application so I don't have to recreate the wheel, or hack something together as I go?
Thanks
One of the (not so) many options is JavascriptMVC, which is pretty cool and I've used it for one midium-size project.
It's website is pretty discouraging, but give it a chance and watch the video. One possitive aspect is that it's creator always answers really fast in JMVC's google group.
But, actually, if I had to remake the project I mentioned, I would not use it, as jQuery provides (almost) all JMVC's functionality, you just have to get used to it. For an example in how to handle big apps with jQuery, I would recommend you to watch this video between others of Alex Sexton and other members of the yayQuery podcast.
I honestly don't know how someone could say jQuery provides almost all of JMVC's functionality. Yes, you can do a lot of similar things with jQuery, but you would have to write it an maintain it yourself.
Here's a quick list of what JavaScriptMVC provides that jQuery does not: (read more of them at http://jupiterjs.com/news/javascriptmvc-features)
Dependency Management
Building / Compression
Logging
Organized Folder Structures
Package Management
Code Cleaning
Functional Testing
Client Side Templates
A bunch of delegatable special events (drag-drop, hover, resize, etc)
A bunch of dom utilities
Language Extensions
An awesome widget factory
Documentation
Have you looked into Sammy.js? It's an mvc framework built on JQuery and is very beginner friendly. http://code.quirkey.com/sammy/
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Are there any client-side JavaScript MVC (micro-)frameworks?
I have a rather complicated HTML form, and it would benefit from the MVC pattern.
I imagine a good solution would provide the following:
Model and View update the Controller when values change (Observer pattern)
Populate the model from the form data when the page loads
Populate the form from the model when the model changes
Ajax, comet, JSONP and all that jazz are serious overkill.
Backbone is a great light-weight framework. Give it a try:
http://backbonejs.org/
JavaScriptMVC is an excellent solution. It's everything is a plugin approach enables you to select only the features you need. As of 2.0, it's based on jQuery.
On progressively enhancing your website, that's left up to the user as JMVC provides just a middle layer for development - it's up to you to make that design choice yourself.
However, JavaScriptMVC is simply the best general purpose JavaScriptMVC library because of its powerful event delegation based controllers.
Event delegation lets you escape having to attach event handlers, and simply create rules for your page.
Finally, JMVC is much more than a MVC architecture. It has all parts of the development cycle covered with:
Code Generators
Selenium and Env.js integrated testing
Documentation Engine
Automatic Concat+Compress
Error detection and reporting
Spine has an API similar to Backbone but it's a lot smaller. It features prototypal inheritance.
AngularJS works well together with jQuery and will help you a lot with MVC structure and strict separation of concerns.
Full testing environment and Dependency Injection included...
Check it out at http://angularjs.org
Indeed there is: http://www.javascriptmvc.com/
I think you will find this sufficient!
I think this one looks like something you should check out: http://knockoutjs.com/
(As a silverlight / wpf programmer this was the library that made me finally start learning javascript. It is based on the Model-View-View-Model (MVVM) pattern, as for me right now seems like a good choise!)
Ember.js
These are the three features that make Ember a joy to use:
Bindings
Computed properties
Auto-updating templates
Bindings
Use bindings to keep properties between two different objects in sync. You just declare a binding once, and Ember will make sure changes get propagated in either direction.
Here's how you create a binding between two objects:
MyApp.president = Ember.Object.create({
name: "Barack Obama"
});
MyApp.country = Ember.Object.create({
// Ending a property with 'Binding' tells Ember to
// create a binding to the presidentName property.
presidentNameBinding: 'MyApp.president.name'
});
MyApp.country.get('presidentName');
// "Barack Obama"
Bindings allow you to architect your application using the MVC (Model-View-Controller) pattern, then rest easy knowing that data will always flow correctly from layer to layer.
Computed Properties
Computed properties allow you to treat a function like a property.
Computed properties are useful because they can work with bindings, just like any other property.
Auto-updating Templates
Ember uses Handlebars, a semantic templating library. To take data from your JavaScript application and put it into the DOM, create a tag and put it into your HTML, wherever you'd like the value to appear:
<script type="text/x-handlebars">
The President of the United States is {{MyApp.president.fullName}}.
</script>
Stapes.js
Full disclosure: i'm the author of this library :)
If you're looking for something really tiny (1.5kb minified / gzipped) have a look, and tell me if you like it.
There is the popular Backbone.js
If your requirements are really simple, you could write your own simple MVC like Alex Netkachov did.
His examples are built on dojo (Note: they don't work for me on his page because of a missing dojo.js file), but you could follow the pattern in plain Javascript.
It's probably overkill for what you need, but SproutCore is an MVC framework, and it doesn't look any more heavyweight than JavaScriptMVC or TrimPath's Junction.
Unfortunately, none of these seem to be built on the principle of progressive enhancement.
The popular ActionScript MVC framework PureMVC was recently ported to JavaScript. I haven't had a chance to try it out yet, but I am confident it's good.
UPDATE 2016: Sammy.js seems to be abandoned.
Have a look at Sammy.js
Text from the site:
A small webframework with class.
SMALL Sammy's core is only 16K compressed and 5.2K compressed and gzipped
MODULAR Sammy is built on a system of plugins and adapters . Only include the code you need. It's also easy to extract your own code into reusable plugins.
CLEAN The entire API was designed to be easy to understand and read. Sammy tries to encourage good encapsulation and application design.
FUN What's the real point of development if its not enjoyable. Sammy tries to follow the MATZ approach. It is optimized for developer happiness.
Please also checkout jquery-claypool.
jquery-claypool is a small, fast, railable mvc framework built on jquery, based on my experience with django, rails, spring etc. Its very light weight and runs on both on the client and in server environments.
it provides a routing framework for clean mvc, category logging, filters (aop), lazy creation of controllers, inversion of control, convention-over-configuration and not much more by design.
it doesn't do anything jquery already does, feels like jquery, and works like a good framework should: simply.
jquery-claypool
Hope you check it out.
Jamal is the lightweightest I've seen. It's also based on jQuery (bonus). Have not used.
http://jamal-mvc.com/
If you want to keep things under control and quite simple, you may don't need a framework, but just implement your own mvc pattern.
Just check this article: Model-View-Controller (MVC) with JavaScript by Alex Netkachov on 2006.
Here is a list of all open-source JavaScript Frameworks known to mankind.
http://getopensource.info/explore/javascript/framework/
Or only MVC frameworks
http://getopensource.info/explore/javascript/mvc/
Disclosure: I'm the developer of this website.
Try kitty. It is only 1.4KB and its only dependency is EJS.
I wouldn't call this a micro-framework, but it sure looks interesting: Cappuccino Web Framework
CorMVC, easy to understand and to start with, jquery based and does not depend on any server technology
I have developed a very simple Javascript MVC framework called MCV. It does not do exactly what you ask for, but it is easily extensible with helpers. Anyway, it is definitely micro (1,9kb packed).
It works more or less like Jamal, but I decided to roll my own for two reasons:
remove the jQuery dependency (although I use it together with jQuery most of the time)
making it extensible with helpers. These are analog to CakePHP behaviors, components and helpers.
Just to make the list a little more complete:
ActiveJS
I upvoted the AngularJS (full disclosure, I'm involved in a limited way with the angular dev effort) and am very excited about it. I did a side-by-side comparison taking one feature for an internal project (sorry don't have signoff to share it) and implementing it in both AngularJS and Backbone. It was a great exercise and in the end, I'm very much leaning towards Angular. The core developers are great about answering questions and they've done a really nice job with builtin databinding, unit/e2e testing and documentation. Its still in beta with 1.0 coming out in near future. The beta is very stable.
There is a bit of a paradigm shift, and they use a fairly different approach than most. Integrating your favorite jquery plugins takes a bit of effort but is doable and has been done (angular-contrib on github).
I will say (and this is a problem for most js-centric frameworks), make sure to investigate how to make your content SEO-friendly (if its important to you). Since joining the angular community in June, I've noticed the interest is growing and a number of people are making posts saying that they've looked at Backbone and others but really like what they are seeing in Angular.
Maverick is a small JavaScript MVC framework — http://maverick.round.ee
I'm going to pipe up here too - AFrameJS works with jQuery, MooTools and Prototype.
Another one: MooTools-MVC
There was a key-value binding JavaScript framework called "Coherent", which was inspired by Apple's Cocoa Bindings. The framework has been bought by Apple, but there is still an old copy at http://github.com/trek/coherentjs/tree/master.
Try this jQuery based javascript MVC framework.
One more, lightweight and tiny: http://jqnano.oleksiy.pro/
Can.js has everything you need and weighs in at just 8 KB. It's taken the best bits from JavaScriptMVC and distilled it into one small, yet kickass framework with observers, widgets, binding, the works. It is compatible with major frameworks (jQuery, Dojo Toolkit, MooTools, etc.). Documentation is excellent and authors are responsive. It is definitely worth a look.