Is backbone.js production ready? - javascript

I was recently hired at a startup as the front end developer. As our product is a user admin that will be used by financial organizations, we want the app to run as much like an application as possible. I have been tasked with finding the clientside framework.
After researching, I have chosen backbone.js. When I presented this choice today, I was asked some questions that I do not have the full answers for but thought you guys might.
Is backbone.js production ready?
Is it rock solid and is there any proof?
I will only be using models, views, and collections for this app. My question is, how confident can I be that backbone will not just randomly fail when dealing with models. Are there any official tests I might be able to look at? What are your experiences with backbone?
Is there any sort of support network in place for dealing with backbone related issues?
Answers to either of these questions as well as any insights you have that I could present to my boss would be most appreciated! I Really want to use backbone as I think its a perfect fit, but because its so new, I need to sell it.
Thanks in advance!

Is Backbone.js production ready?
Take a look at Backbone's example section. Some of its better known users include:
DocumentCloud themselves.
37signals for BaseCamp Mobile.
SoundCloud for their mobile site.
BitTorrent in a manner that is not immediately obvious from the description, but seemingly related to a beta product.
Is there a support network in place?
There is, of course, no guarantee that it will be supported by its authors indefinitely, but it has gained a lot of traction very quickly so I don't see it going anywhere soon. The authors recommend reporting issues on GitHub.
There is always Stack Overflow itself for support!

I too was looking for a front-end app framework a few months ago. Here's the list of requirements that we had and how Backbone.js responded to each of those:
1. Browser support (IE8+)
There is one caveat here: The backbone.history module makes use of hashchange event, which doesn't work in IE7 and below. There are ways to hack around this problem, so it's not a show stopper, but kind of an annoyance.
2. The ability to apply our own look and feel to UI elements
As backbone only enforces the MVC structure of your app (unlike frameworks like cappucino or sproutcore) this was a perfect fit for us.
3. Being able to hook up any other external JavaScript libraries
We were using jQuery already, and backbone supports it, so that was fine. However, it seems like backbone is trying to take a library agnostic approach (for instance you can use zepto.js instead of jQuery if you like).
4. Community Support
There is a lot of introductory material on backbone (like people posting tutorials on blogs). Unfortunately, when your APP get's complicated it turned out there were quite a few "architectural" parts we had to figure out by ourselves, there was no obvious way to do it. The DOCS are good, but not great.
I guess on of the pitfalls of opinionated frameworks (like rails), is that sometimes you get caught up in a "am I doing this right" feeling.
5. Real world examples
It's always convincing to see that someone else has actually done something "REAL" with backbone:
http://documentcloud.github.com/backbone/#examples
We ended up using Backbone, and it was overall a nice experience, and I will definetively be looking into it again for our next project.

Who is to say that something is production ready better than the product users?
I'm working with backbone.js on a relatively large project (livechat operator application, 13k+ lines, currently at early beta). I have more than three months of experience with backbone and in my opinion it's excellent. I haven't had any unpleasant surprises because of backbone. I can't imagine developing an app of this size without clean and well-structured code. With backbone you can achieve that easily.
There's also an excellent bonus when using backbone - underscore.js. You will use that a lot.
StackOverflow backbone.js tag is there for you!
Your company, being a startup, cannot be afraid of new things. You should adapt them and spread your experiences. Remember, that your product is also going to be new.

A little late to the game with this answer but I felt compelled to respond to the question "how confident can I be that backbone will not just randomly fail when dealing with models".
No code just randomly fails; code fails for a specific reason which can always be traced back to somewhere. Often code appears to randomly fail because it's so complex and obtuse you can't follow it. In the case of backbone.js, the source is small (1,500 lines FULLY documented) and REALLY well documented.
If you need to trace down what is breaking, it's a simple matter of diving into the source and seeing what is going on.
Anyhow, I hope you got to try it out at your job!

At Planbox We've been using Backbone JS in in production for over 6 months without any problems. I wrote a few posts about our experience here and here.
We even use Backbone JS for our mobile version along with jQuery.

Related

Jquery mobile - 1.4.2 : general documentation lakes?

I'm trying to learn some Jquery Mobile basic to state if this language would be appropriate to build inhouse mobile application prototypes.
I'm using the 1.4.2 version and the associated documentation looks very strange for me.
For example, a lot of methods are declared deprecated as of 1.5 version , but corresponding replacement examples are never given.
Perhaps have I serious problems to understand but reading this jqmData() documentation page for example, Quick reading this article I understand :
1°) that the jqmData() method doesn't accept arguments (green highlighted section)
.jqmData()
This method does not accept any arguments.
2) and few lines bellow :
you should use $("div:jqmData(role='page')")
This is just an isolated example but a lot of posts give advice that are cons for others with no serious reasons as if everybody was always searching for workarounds instead of using consistent and stated development policies.
is it just my own feeling or is it shared opinion ? It's really disturbing when you're learning not to be confident in such basic material.
In fact my feeling is that information is spread over a huge number of sources that don't state about version level issues and future compliance constraints. For example What's the right development strategy to adopt : using html 5 data-* attributes or jqm classes ? what's the advice ? A mix of both is really not a proper choice for code readability in team devellopment.
Would you have 1.4 jqm consitent documentation references ?
thanks in advance
I hope it's not to late, I will try to give you a honest answer.
On the first glance jQuery Mobile documentation looks like hell, chaotic bunch of ambiguous data.
A lot of information without a real context. This documentation is written for developers with prior jQuery knowledge. If you carefully take a look you will see that basic documentation form reflects jQuery documentation. Basically it is useful only if you know what and where to look.
On the other side, once you learn what's what it becomes obviously easy to read.
There are a lot of mistakes and it takes to much time for them to get corrected. This is partially fixed thanks to StackOverflow, here you will more answers (better explained) and information regarding jQuery Mobile then provided in official documentation.
I don't know what happened to 1.4 documentation, 1.3 had much better one. You would learn everything from DEMO site and API site will only give you better perspective.
Don't worry about deprecated methods, jQuery Mobile 1.5 will have all needed answers. Old documentation rarely has information about future software releases (I'm not talking here only about jQuery Mobile, it is always like that). When few years ago development started on jQuery Mobile, plan was created six versions in advance, you can still find it online.
jQuery Mobile developers don't have that much resources like jQuery developers, plus everything is done on pro bono basis. Free product are tied to certain limitations, in this case documentation pulled the shortest straw.
While jQuery Mobile don't have best documentation ever it has best 3rd party support, other mobile frameworks don't come close, except maybe Sencha Touch but that's completely different story.
Also, when you find an error just report it on their github page. It will be fixed in notime, plus support is free ;)
Regarding your second question .jqmData() is a method while :jqmData( is a selector. But you are correct, method .jqmData( accepts parameters so it's a documentation mistake.
Regarding your third question, use of data-* attributes is a right development strategy but ultimately not the only one, you can use anything you like. Don't forget sometimes it is not easy to be HTML developer in HTML5 world.
If you are still not certain regarding jQuery Mobile then take a look at my article covering currently best known frameworks. These are oldest and best known frameworks, all of them are still in development and they are more then stable.
My advice would be these three frameworks:
Sencha Touch
Kendo UI (PhoneJS as an alternative)
jQuery Mobile
Several newer frameworks like Famo.us advertise themselves like second coming so you can also look at them. Just be careful newer is far from better.
If you have more questions feel free to ask, I have more then enough experience with mobile world, specially with jQuery Mobile.

Best practice to create Custom UI framework in JavaScript [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I want to create a custom UI framework in JavaScript for web applications (like Google Docs ui) (do not confuse with web application that deploy using languages like PHP, Python, etc.). However, after reading several books about web development, I understand that the best website is layered as follows:
Structure in HTML
Presentation in CSS
Behaviour in JavaScript
So there are several approaches to creating my own HTML document and control it in JavaScript. However in this approach HTML and CSS will be mixed, like in case of extJS UI. I am confused now, and I need some answers from experienced developers on how to write this kind of framework.
If HTML, CSS, and JavaScript is mixed.
What was advantages?
What was disadvantages?
Is there are other methods?
What was the usual type of creating UI frameworks?
I apologize that this answer is extremely long and at times may seem somewhat off-topic, but please keep in mind that the question was not very specific. If it is improved, or made less general, then I will gladly remove the superfluous parts, but until then, just bear with me. This is somewhat of a compilation of the other answers here, in addition to my own thoughts and research. Hopefully my ramblings will be at least somewhat helpful for answering this question.
General Tips for Frameworks
Frameworks are a ton of work, so don't spend all of that time for nothing. Work Smarter, Not Harder. In general, you should remember these things when creating a framework:
Don't Reinvent the wheel: There are tons of great frameworks out there, and if you create a framework that does the exact same thing as another framework, you've wasted a ton of your time. Of course, understanding what goes on inside another library is a great way to make your own library better. Quoting #ShadowScripter, "knowledge -> innovation." However, don't try to rewrite jQuery by yourself. :)
Solve a Problem: All good frameworks (and programs) start with a problem they are trying to solve, then design an elegant solution to solve this problem. So don't just start writing code to "create a custom UI framework," but rather come up with a specific problem you want to solve, or something you want to make easier. jQuery makes selecting and manipulating the DOM easier. Modernizr helps developers identify the features supported by a browser. Knowing the purpose of your framework will make it more worthwhile, and may even give it a chance of becoming popular.
Fork, don't rewrite: If the problem you aim to solve is already partially solved by another framework, then fork that framework and modify it to fully fit your needs. There's no shame in building of the work of others.
Optimize and Test: This is kind of a no-brainer, but before publishing version 1.0 on your website, test every single part of the function, under every single possible scenario, to make sure it won't crash and burn in production. Also, another no-brainer, minify your code (after testing) for performance benefits.
DRY and KISS: Don't repeat yourself, and keep it simple, stupid. Pretty self-explanatory.
Stick to Stable: (This is mostly my personal opinion) Unless you're trying to create a framework specifically targetted to HTML5 in Chrome 31, using experimental features and unstable code will make your framework slower, uncompatible with older browsers, and harder to develop with.
Open Source: (Another of my opinions) It takes years for huge companies like Google with thousands of dollars invested to create frameworks (e.g. AngularJS) so it is an excellent idea to make your source openly available. Having a community of developers contributing to your project will make development faster, and will make the end product faster, bug-free, and better all around. Of course, if you're going to sell it, that's another story...
For more information about best practices when making libraries, take a look at these links:
Javascript Library Design
Javascript Module Pattern: In Depth
Best Practices in Javascript Library Design
Building a Javascript Library
Types of Frameworks
The first thing you need to think about, as mentioned above, is what functionality you want your framework to provide. Here are is the list of types of frameworks/libraries (thanks to #prong for the link). For a much more comprehensive list, see jster, which has 1478 libraries, put into 8 categories, each with several subcategories.
DOM (manipulation) related
GUI-related (Widget libraries)
Graphical/Visualization (Canvas or SVG related)
Web-application related (MVC, MVVM, or otherwise)
Pure Javascript/AJAX
Template Systems
Unit Testing
Other
As you can see from the link, there are already dozens of libraries and frameworks in each of these categories, so there's not exactly much room for something new. That being said, I don't want to discourage you- who knows, you could create the next bootstrap or jQuery. So, here are some resources about each type of framework.
Note: you can't say that any type is better than the others, they simply are designed for different goals. It's like comparing apples and oranges.
DOM (manipulation) related
These types of libraries are designed to interact with, modify, and control the DOM of a website. Here are just a few of the things they do:
Select Elements in the DOM ($("div#id .class"))
Add/Remove Elements in the DOM ($("div#id .class").remove())
Edit Attributes of Elements in the DOM ($(div#id .class).height("30px"))
Edit CSS of Elements in the DOM ($(div#id .class).css("property","value"))
Add listeners for various events taking place in the DOM ($(div#id .class).click(callback))
The most notable of these, of course, is jQuery, and it has one of the largest user bases of any Javascript library. However, it is by no means perfect, and if your library wants to compete, the best thing to do would be to make it excel in the areas that jQuery fails- speed, fragmentation, and "spaghetti" code. (The last two aren't completely in your control, but there are certainly things that you can do to make it easier for users to use the most update version, and keep their code maintainable)
GUI-related (Widget libraries)
I think that this may be the type of framework you're looking to create. These types of libraries provide widgets (datepickers, accordians, sliders, tabs, etc.), interactions (drag, drop, sort, etc.) and effects (show, hide, animations, etc.). For these, people are looking for quantity- the best frameworks out there have several useful widgets/effects that work well. This is one case where it's "the more, the merrier," of course, if it works properly.
Graphical/Visualization (Canvas or SVG related)
The purpose of these libraries is to control animations on the page, specifically on an HTML5 Canvas. These feature animations and sprites for games, interactive charts, and other animations. Again, successful graphical libraries have many, many sprites/animations. For example kineticjs has over 20 different sprites available. However, make sure that quantity does not compromise performance and overall quality.
Web-application related (MVC, MVVM, or otherwise)
Basically, the idea is to provide a layout for the users to put their code in, typically separating the model (data) from the view(what the user sees), with a small controller to provide an interface between these two. This is known as MVC. While it is by no means the only software pattern to base a framework off of, it has become quite popular recently, as it makes development much easier (that's why Rails is so popular).
Pure Javascript- AJAX
This should really be two categories. The first, AJAX libraries, are often paired with a server side library and/or database (though not always) and are designed to make connections with a server and get data asynchronously. The second, "Pure Javascript" are designed to make Javascript easier to program in, as a language, provide helpful functions and programming constructs.
Template Systems
This might also be the type of framework you're looking to create. The idea is to provide components that developers can use. There's a thin line between Template Frameworks and Widget Frameworks (which twitter bootstrap, one of the most popular template frameworks, crosses a lot). While widget frameworks just give a bunch of little elements that can be put in a site, template frameworks give structure to a website (e.g. responsive columns), in addition to making it look good.
Unit Testing
This type of framework is designed to let developers test, or systematically ensure the correctness, of their code. Pretty boring, but also really useful.
Other
This type of framework is for really specific purposes that don't really fit into any of these other categories. For example, MathQuill is designed for rendering math interactively in web pages. It doesn't really fit into any other category. However, these types of frameworks aren't bad or useless, they're just unique. A perfect example is Modernizr, a library for detecting a browser's support for features. While it doesn't really have any direct competitors, can't be put into any of the other categories, and does a very small task, it works very well, and is very popular as a result.
More Types
There are a bunch of other types of libraries. Below are the categories (I'm not listing subcategories because that would take half an hour to copy down) that JSter puts their 1478 libraries into:
Essentials
UI
Multimedia
Graphics
Data
Development
Utilities
Applications
It depends on what you really want. The first distinction that needs to be made is between a Javascript UI framework (which provides structure to the app), an HTML UI Framework (Presentation) and Widget Libs.
Javascript Frameworks such as backbone, angular, ember, and knockout provide MVC-like structure to the app.
UI frameworks such as YUI, bootstrap, and Foundation provide a consistent HTML and CSS base.
Widget Libraries such as jQuery UI, Fuel UX, and Kendo UI provide ready made widgets.
There are also fully-fledged frameworks which provide things across the board, such as Google Closure tools, Dojo with Dijit.
This Wikipedia list pretty much sums it up, and here is the comparison.
In order to find the best way to create a framework, first ask this question: Can any of the above frameworks/libraries solve all or some of the problems/requirements I have?
If something solves all the problems, you can use it right away.
If something solves your problem partially, you can start by extending/forking that project/framework.
Follow DRY and KISS rules. Only solve a problem which nobody has solved as of now.
Fortunately, there is already a good solution: Google Closure Library. This is what Google uses. It shows the approach of mixing HTML, CSS and JS. I wouldn't say it's perfect, but I believe it's one of the best ones at this moment. Its architectural principles rely on proven component based and OOP concepts, and it's accompanied with a static compiler for Javascript. It's definitely worth of studying before baking your own solution.
I'd like to say that cloudcoder2000's answer sums it up nicely. I'm just writing this answer because it didn't seem right in the comment section :P
If you are thinking of making another framework, my suggesting is to stop thinking.
First find the thing in current implementations which troubles you the most, and try to find how you can improve it. Contribute to existing projects, nearly all of them are open source anyways. Also, you don't really need to be a JS-ninja to get into their midst. Take a fork, and get started. Once you're done, and feel that you're code is good enough, make it known to the original repo's maintainers that you have done improvements, and are looking for it to be merged into the project.
Keep in mind here that I'm not discouraging you from solving the problem at all.
I'm just pointing out that there are so MANY frameworks out there, wouldn't it be better if you went ahead and contributed to one of them instead of going for complete glory and implementing a full framework yourself? Making a framework is hard, but getting people interested in your framework is HARD. Really Really HARD, even for Google! Only once Angular got a very good documentation (which itself took quite some time, and resources, of Angular evangelists), that it has gathered so much steam. So, I'm just saying that instead of creating your own monument, perhaps lending a hand to others would be a more worthwhile exercise.
Most importantly though, is the fact that since you are just starting out, I presume you wouldn't have much experience designing frameworks, or thinking in those design terms even. It would of immense value if you contribute to existing projects. Then you will be gathering knowledge and experience of how things are built. Then, you'll be more confident. Then, you can go ahead and make your own framework! Then you'll be more equipped to tackle mammoth projects such as designing a framework. And Then, my friend, will you make something which would be worth the time of countless developers.
Short answer
Build a skinny DOM and only focus on JS code to make it more efficient.
Long answer
A good architect always replies with "it depends." You can't have one single framework that enjoys all others' benefits and suffers from no disadvantages, all at once. There's always a trade-off.
In order to create a framework that is really lightweight, you would probably want the lightest DOM (HTML) structure. However, having a skinny DOM might have the cost of more JS code. So you would probably try to write the most efficient code. You can start here.
Needless to say, you should be keeping the open-close principle, and have the stylesheets separated from HTML, using only classes and never inline styling. I would suggest using less. It makes the implementation faster, and the result is pure css so you suffer from no performance issues around it.
I must respectfully disagree with cloudcoder2000,
From a young age I have been being told don't re-invent the wheel, but why?
During the last 3.5 years, I have re-invented almost all of my web controls using javascript/html/css. From the extremely complex; for example a grid, rich text editor, tree view, dialog. To the very simple, like a progress bar, dropdown. What I gained is a better understanding of html/js/css.
No pain, no gain. I'm so happy with what I was doing these years as I learned more than others.
Some of the controls I re-invented, I think, are much better than the popular ones, like telerik, jquery mobile, extJS. For example, my tree view is fully customizable, with it one can build very complex trees.
So, I encourage you re-invent the wheels, and you will definitely get more than you expected. But also, from the beginning, you need to learn the source code of the popular controls, and re-invent them. You will be very happy when you find yourself be able to make the controls better.
Then the tips on creating HTML controls:
1. use jquery;
2. write jquery plugins(jQuery.prototype...) for simple controls, while define classes for complex controls;
3. separate css from html and js files. Define the html template in js, don't use html files, which make using the controls hard.
Regards,
Leo
For best performance in your UI design, you need to use a lightweight JavaScript framework like angular or backbone, Twitter Bootstrap for the UI, AJAX for base script load and use gzip compression in your app to make it lightweight and help the UI render faster.

Dropping Spine.js into an existing app?

I've been looking at quite a few of the MVC for JavaScript frameworks lately and I quite like the overall feel of Spine.js as well as the fact it is using CoffeeScript. That said, my primary concern at this stage is I need to be able to drop an MVC framework iteratively into a fairly large existing application. Most of the documentation that I have seen on Spine.js focuses on creating new applications.
Does anyone have any suggestions on the best way to go about doing this; if there is a good tutorial somewhere that would be great too, but Google was not my friend on that one.
Or is this just a bad idea and I should go elsewhere when dealing with legacy? While Angular didn't click with me in the same way; it did however seem pretty straight forward on how I could use it iteratively with a legacy application.
I think it's rather a bad idea to do it "iteratively". I'm working as freelancer for a company where they decided to do a complete UI rework splited over a few releases. In the first stage it was planned to drop the existing JS and use spine js as MVC and require js as AMD. So far so good - but the process was "iteratively". The project/App is quite complex and it took over a half year (I'm involved since 2,5 months).
It was a big mistake to leave all the existing JS and "iteratively" replace the functionality for the release. We ran into multiple problems, because of that. If you have hundreds of js files, inline scripts, dependencies it's much easier to simply throw them away, because you can tell literally if your new code works or not. Otherwise you always have to distinguish whose fault is it: new or old code.
This was also responsible for trouble that could have been avoided, or at least alleviated, if it were a hard cut:
The product owner was not really aware of the status, because he couldn't see any visible progress. He only figured out bugs and misbehaviour. That was unsatisfying/frustrating for both parties. One quote I've heard over and over again: "It did work the other day/before - now it's not"
You start to update some outdated libs, plugins that sometimes will cause compatibility issues, because API's tend to change, so you have to fix that in your old code as well. Means: at some point it starts to feel like hacking around problems and not to develop a cool/good App. Thats's extremely frustrating too.
It took waaays longer than expected/estimated.
You've been developing in dependency of your old code that does not exist in the very end.
My personal advice is: don't do it iteratively. Do hot fixes for the live App and develop the new one on a separate branch.
I can't see how conforming any legacy app that didn't have an explicit mvc structure into a spine.js or backbone or angular etc. is likely to be a drop in experience.
Iteratively converting is going to be a lot like writing a new app minus the boilerplate stuff for defining the app GUI interaction. Start by focusing on models and controllers by pulling out components that fit well into the MVC structure. I would suggest early on to avoid certain app interaction components of Spine like stacks, and routes as those make a lot more sense once everything else is ready to be used according to spine convention.

Rich Javascript UI Frameworks, EXT, DOJO and YUI

Disclaimer & Long Winding Question Approaching
I know topics like this have been beaten to death here so suffice to say I'm not asking about which framework is better, I don't really care about opinions on the better framework. They all do pretty amazing things.
The Question
Given that I have an existing web application, made of mostly regular HTML+CSS (jQuery where needed), which is the optimal framework to integrate a few "rich" pages into typically a regular stream of HTML.
Reason
I am trying to bring our proven application into the realm of awesome desktop like UI but I want to do it one small piece, one screen at time. But for our users, support personel and especially me taking it slow is the only option.
Also, with our branding requirements having a framework that just takes over the viewport isn't an option, it has to play nice with other HTML on the screen.
Imagine the example being a rich user manager in an otherwise plain HTML+CSS environment.
Experience Thus Far
Dojo + Dijit
Pros: The new 1.5 widgets plus the claro theme is the cure for what ails us. Dojo seems to be able to use markup to create the UI which is very appealing and has a fair amount of widgets.
Cons: Holy bloated lib Batman! Dojo seems to be enormous and I have to learn a custom build system to get it to stop requesting 4,800 javascript files. This complex empire of Javascript makes me believe I won't be able to create much that isn't already there.
ExtJS
Pros: Amazing set of widgets, does everything we could possibly want. Seems quick, every version brings new improvements.
Cons: I'm not sure how to use this without the entire display being EXT. I'm still building a web site, so I would prefer something that could integrate into what we already have. Some pointers here would be great.
YUI
Pros: Well, it's Yahoo isn't it? AWS console is downright wicked. Plenty of support and a giant community.
Cons: Well, it's Yahoo isn't it? AWS console is the only wicked thing. Complex for someone who's used to jQuery.
Help Me
I am willing to accept experience, links to ways to solve problems I've outlined, new toolkits (even though I'm pretty sure I've seen most by now) or even just advice.
Regarding ExtJS, it's pretty easy to start it in an existing div with something like this:
Ext.onReady(function() {
App = new Ext.Panel({...})
App.render('div-id')
});
The App panel can then have it's own layout manager.
This might be useful if you're familiar with jQuery, but not yet familiar with YUI 3 syntax: http://www.jsrosettastone.com/
Each of the libs you listed is excellent. When embarking on a larger scale project, the quality of a lib's documentation, community, and commitment to support become more relevant.
With Dojo, keep in mind that outside of dojo base, it only ever loads what you tell it to. But yes, without a built layer, that means it could easily end up requesting 50 JS files at startup for a large application using a bunch of widgets.
There are several pages in the reference guide documenting the build script: http://www.dojotoolkit.org/reference-guide/build/index.html
Rebecca Murphey wrote a nice blog post outlining an example app and build profile that you might find illuminative: http://blog.rebeccamurphey.com/scaffolding-a-buildable-dojo-application
If you get stuck, there's likely to be people in the Dojo IRC channel that can help.
RE ExtJS: I'm not sure what your exact situation is, but keep in mind that if you're intending to use it in commercial non-open-source software, you need to pay for licenses: http://www.sencha.com/store/js/
I'm a little curious as to why you think the size / number of requests is specifically an issue with Dojo though. I haven't used the others, but I'd expect it to be somewhat of a potential concern with any of them.

sproutcore vs javascriptMVC for web app development

I want to use a javascript framework with MVC for a complex web application (which will be one of a set of related apps and pages) for an intranet in a digital archives. I have been looking at SproutCore and JavascriptMVC. I want to choose one framework and stick with it.
Does anybody know what the distinguishing features are when comparing these two?
I want something that is simple, straightforward that I can customize/hack easily, and that doesn't get in my way too much, but that at the same time gives me a basis for keeping my code nicely organized, and event-driven. I also plan on using jquery substantially.
I know sproutcore is backed by Apple, and looks like it is getting more popular by the day, and it has a nice green website :), whereas JavascriptMVC looks less professional, with less of a following and less momentum behind it.
I've done the tutorials for both and I was impressed by SproutCore more (in the JMVC tutorial you don't really do anything substantial) - but somewhere in the back of my mind I feel that JMVC might just be better because it doesn't try and do too much - it just gives you MVC functionality based on a couple of jquery plugins, and you can use jquery for everything else, so its flexible. Whereas SproutCore seems to have more of its own API etc... which is also nice in a way... but then you're kind of stuck within that.... hmmm I'm confused :).
Any thoughts would be much appreciated.
Being a JavaScriptMVC contributor, I'm extremely biased. But I'll try to give the best answer I can.
JavaScriptMVC has also taken years to develop. But instead of focusing on ui functionality, it focused on the layers just below that. There are a few reasons for this:
You can find a jQuery widget to meet almost every need. There's no reason to compete these plugins. Instead, JavaScriptMVC tries to work with them.
Most people need one or two custom widgets / controls. JavaScriptMVC wants to make building and maintaining these pieces as easy as possible.'
Flexibility+API. I'm not sure exactly how to say this one ... but here's my best shot ... With JavaScriptMVC, we wanted every layer of the application to be as easy to understand and maintain as possible. This is why we picked jQuery as our low-level library. It's API is about the best abstraction for the dom possible. People typically go directly from the low-level API to build the Widget/Control. This is why most jQuery widgets' code look very dissimilar. We wanted a middle layer that organize our code and promote best practices, while providing enough flexibility to meet almost any requirement. So with JavaScriptMVC, you get very solid low and middle-level layers. But, you don't get widgets.
JavaScriptMVC has testing, error reporting, and documentation baked into the framework. The testing is the most impressive part. It has integrated selenium and envjs testing.
My recommendation would be to go with SproutCoreif your requirements can be built pretty straightforward with SproutCore. But if you know jQuery, have to build a lot of custom controls, or need really awesome testing, use JavaScriptMVC.
Funny, because just a month back or so, our team evaluated exactly these 2 frameworks head to head. We ended up choosing JavaScriptMVC, and I've been working hands-on with it for about a month.
I like it ... but, I was a HUGE proponent of SproutCore. I had never heard of either framework before we eval'd them, but once I saw SproutCore and looked under the hood, I was very, very impressed. Honestly, I don't think there's anything out there that can give you the kind of power it gives. Yes, you'll have a learning curve, but it's the kind of thing that lets one person accomplish the work of 5 or 10 once you know it.
So I'd use SproutCore in a heartbeat.
That being said, JavascriptMVC (aka "JMVC") is nice. It doesn't really give you a ton on top of jQuery itself. You will still have some infrastructure to build yourself (depending on how complicated your requirements are). This is both a pro and a con. One nice thing about it is that, if you need to dig into the details of some piece of JMVC, you can ... it is not so incredibly huge that it is impenetrable.
In summary, there's not a thing wrong with JMVC. But there is, in my opinion, nothing even in the ballpark with SproutCore.
I think that the main difference between them is that SproutCore includes a GUI while the JMVC is something low-level without any graphic, so if you need a GUI you can't use JMVC without including other scripts like the jQuery UI or jQuery plugins.
You said that "JMVC might just be better because it doesn't try and do too much" i don't agree with this, it took years before SproutCore 1.0 was released, so developers had the time to make a great product.
I suggest you to use SproutCore, maybe you'll have to learn more things, you'll spend more time to practice and understand everything, but you'll learn how to use a very good framework that can be usefull also for future projects.
Sproutcore-2.0 eliminates the ui-constraints and plays nice with completely custom app-uis.
http://blog.sproutcore.com/announcing-sproutcore-2-0/
http://blog.sproutcore.com/dispatches-from-the-edge-dropping-in-a-sproutcore-2-0-application/

Categories

Resources