We Keep Coding

Providing no-js fallbacks for clientside MV* frameworks

I just recently got introduced to MV* frameworks and have taken a chance to try out Ember.js with the TodoMVC app tutorial they have on their site.
I was considering using Ember for one of my upcoming projects (a Ruby on Rails CRUD app, similar to Twitter in some of the functionality), but I'm still a bit confused and before I take a final decision I would love it if somebody could clear the following concerns:
Is it a good idea to use such an advanced framework as Ember for a medium-sized multi-page CRUD app? Will it improve development time and maintenance compared to an interactivity layer built with jQuery's DOM manipulation and AJAX capabilities? Or is using Ember (and the like) only good when developing complex single-page apps (e.g.: Grooveshark)?
Considering the app will be developed using Rails, and assuming Ember will be used, is it going to be possible to offer a fallback with basic functionality for browsers with JavaScript disabled and/or for search engine crawlers? Will it require code duplication or other dirty tricks? Do you know of any technique that can be used to achieve it?
Will it be possible to adapt the website for mobile browsing (using only CSS) with valid results, or will the overhead imposed by running Ember on the phone make it hard for the device to render the website in a way that keeps it responsive?

We're in the middle of a pretty big Ember project right now, so here are my thoughts on your questions.
We've found Ember to be really productive for creating rich UIs for our single page app, but I don't know that it's going to be that much more helpful if you're creating an app designed for traditional multi-page (viewing pages, submitting forms, etc) layout.
I think this is the clincher - Ember is completely JS-based, so if you need to support browsers without JS, you'd basically have to write a parallel application. If this is a hard requirement for your app, I think Ember (or any MV* JS framework) would be out of the question
We've had very few performance issues on mobile - our site is fully responsive and renders on everything from Blackberries to the latest Chrome on desktop with good performance.

#Scott Rankin, has addressed most of the concerns with going with the Pure Ember approach. I'll add one quick way to make this decision.
Go with Ember/MVVM if the application is behind a login. Then you don't have to consider search engines, as the content is generally private and not supposed to be indexed.
For SEO you have to build atleast part of your content such that it is indexable. A good example of this is the Discourse application. They use Ember but also send down some generated html along with the app html slugs, so that search engines can index them. You can read about their approach here.

We have a different approach which can be seen as a fall back: We pre-render a static version of each page in the application (daily scheduled task). This static version is stored on the server as HTML file. Whenever we sniff as spider/ robot user agent, we deliver that version.

JavaScript frameworks to build single page applications [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
My goal is to migrate an existing web application to a RESTful single page application (SPA).
Currently, I'm evaluating several Javascript web application frameworks.
My requirements are as follow:
RESTful data layer (like ember-data)
MV*-structure
Dynamic routes
Testing-support
Coding by convention
SEO-support
Browser-History-Support
Good (API-) documentation
Production-ready
Living community
Backbone
The current application is using backbone.js. Overall, backbone.js is a nice project, but I'm missing well-defined structures that determine where what has to happen and how things must get implemented. Working in a bigger team with changing developers this leads to some kind of unstructured code, difficult to maintain and difficult to understand. This is why I'm searching now for a framework, that already defines all this stuff.
Ember
I looked into ember.js the last days. The approach seems very promising to me. But, unfortunately, the code changes almost daily. So, I won't call it production-ready. And, unfortunately, we can't wait for it to be version 1.0. But I really like the idea behind this framework.
Angular
Angular.js is a widely spread framework as well, maintained by Google. But I could not get familiar with angular. For me, the structure seems kind of unclear, explanations are missing of the overall responsibilities of each part of the framework, and the implementations feel circuitous.
Just to get this straight: this is just my personal impression and might be based on missing knowledge.
Batman and Meteor
As I understood, both frameworks need a server part as well. And since we just want a RESTful backend - no matter what language, technic or software, this is not what we want. Further, the backend API does already exist (RoR).
Knockout, CanJS and Spine
I did not go any deeper into these three candidates. Maybe this will be my next step.
So my questions now:
Am I missing any good SPA-frameworks?
What framework would you suggest/recommend?
Would you avoid any of the mentioned frameworks?
What is your experience in bigger SP applications?
PS: I'd would like to recommend a great blogpost from Steven Anderson (core developer from Knockout.js) about the "Throne of JS"-conference (from 2012) and javascript frameworks in general.
PS: Yes, I know there are already some question on SO. But since the development is so rapidly and fast for SPAs, most of them are already out-of-date.

I recently had to decide on a JavaScript SPA framework on a project too.
Ember
Looked at Ember early on and had similar thoughts as you about it - I really liked it but it felt like it was still too early to use... about half the tutorials I read didn't work with the current version because something had recently changed in how templating works.
Backbone
Backbone was the first frameworks we seriously looked at. I'm not sure I understand why you think it doesn't have "well defined structures"? Backbone is pretty clear about how to divide up Model and View code. Maybe you mean there's not some kind of app template? Anyway, Backbone seems really focused on the model/REST-binding part, but doesn't really prescribe anything for view binding. If model binding's important to you and you're using Rails it should be a breeze to do this. Unfortunately, the web services for my app didn't really match up, and I had to write my own .sync and .parse methods for everything. The separation of Model and View code was nice, but since we'd have to write all our bindings from scratch it wasn't worth it.
Knockout
Knockout is like the Yin to Backbone's Yang. Where Backbone is focused on the Model, Knockout is a MVVM framework and is focused on the View. It has observable wrappers for JavaScript object properties and uses a data-bind attribute to bind properties to your HTML. In the end we went with Knockout since view binding was mainly what we needed for our app. (...plus others, as discussed later...) If you like Knockout's view binding and Backbone's model bindings there's also KnockBack which combines both frameworks.
Angular
Looked at this after Knockout - unfortunately we all seemed pretty happy with how Knockout did view binding. It seemed a lot more complex and harder to get into than Knockout. And it uses a bunch of custom HTML attributes to do bindings, which I'm not sure I like... I may take another look at Angular later, because since I've come across multiple people who really like the framework - maybe we just looked at it too late for this project.
Batman, Meteor, CanJS, Spine
Didn't really look too closely at any of these. Though I know Spine is a similar framework to Backbone with explicit Controller objects, and is written in CoffeeScript.
Afterword
As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJS for modularization, crossroads and Hasher to handle routing and history, Jasmine for testing, as well as JQuery, Twitter Bootstrap, and Underscore.js (and probably more libraries I'm forgetting at the moment).
Javascript app development is more like the Java ecosystem than the Rails ecosystem. Rails provides a solid core of stuff you're going to use for every app (Rails framework), and the community provides a lot of customizations on top of that (gems). Java provides... a language. And then you can choose Java EE or Spring or Play or Struts or Tapestry. And choose JDBC or Hibernate or TopLink or Ibatis to talk to the database. And then you can use Ant or Maven or Gradle to build it. And choose Tomcat or Jetty or JBoss or WebLogin to run it in. So there's more emphasis on choosing what you need and what works together than choosing THE framework to use.

it's been a year since we started development on our Cloud services project with numerous SPAs, so it was a big decision, which javascript framework to use for our UI to satisfy our RESTful architecture needs.
and after a lot of researches we ended up using Dojo framework .
main features you'll love:
educated community and a team that came up with a perfect design pattern. great conventions and modular/object-oriented architecture. with CrossBrowser programming attitudes :)
MV* structure. build UI widgets with external .htm templates and for production, build all your javascript & templates into a single, minified and small .js
build classes with inheritance. property setters, a lot of function tools.
pub/sub mechanism (named topics in dojo)
a lot of UI controls, from validation form control, dialogs/tooltips to a heavy featured, highly customizable (but lightweight) chart & data-grid solution.
a good unit test system named DOH. it also have a robot to reproduce mouse/keyboard actions.
a querying tool (like JQuery) named NodeList with all jquery features and even a lot of it's plugins.
and the good but not so complete part. it has a JsonRest module to use with your REST services. its a handy tool but it lacks a lot of features.
to overcome these issues, we developed an AJAX poller, error handling and universal, loading & notifications solution.
we did it very easily using dojo framework conventions and structures.
if you don't want to do that, perhaps you have to use another framework for this part.
looking at great SPAs around the web you'll find out all of them are customized and using multiple frameworks. but our experience with Dojo alone was fantastic. and therefore I suggest you to don't think of any other framework since all of them are incomplete for a SPA. but ultimately you have also another option (which I don't recommend and have no details information on). go with a JAVA framework that is capable of building SPAs, by automatically generating UI & javascript.

KISS Javascript frameworks for Rich Web Apps

Is there a simple convention over configuration application framework that is javascript based, which looks and feels like a rich client side application, out-of-the-box? For example, there is GWT... But it is heavy weight (i.e. it requires compilation).
More specifically, given that tools like JQuery continue to gain popularity - are there any vanilla CSS + JQuery application frameworks that (again, like GWT), just "work" out of the box, with intuitive and natural layout managers similar to those defined by the GWT/Swing toolkits ? These parts of any such framework might be driven by a high level js wrapper.
Since JQuery is modular, and modularity has its benefits, the above may not be a fair expectation. Java is quite modular, but by picking a stack (hibernate + Spring + JSP, for example) we can simplify java development. Is there such thing as a common JQuery stack for full service front end development ?
The closest thing I have found so far to embody this are :
GWT
SproutCore (recent discovery which I haven't done too much with).
FLEX related technologies.
I'm sure other approaches to High level web / CSS / js / html5 programming exist- what are they? Although its that many js tools exist, it's not clear which ones are low level DIY ones (for DOM hackers) and which ones are the (less flexible) pre packaged frameworks that "just work".

UPD: 2014 answer
It's great to see insane progress in the field, be sure to check out the following frameworks:
EmberJS
AngularJS
KnockoutJS
It's virtually impossible to recommend a specific one without being opinionated but you can find plenty of comparison articles on the web and related questions here on SO.
From your description, the top 2 frameworks for RIA (Rich Internet Application) development that I would suggest are:
ExtJS. A rich and mature framework with a big community and lots of complementary tools. Gives you OOP-like class system, an event system, a pretty rich and flexible library of widgets (with layout managers) and lots of other cool abstractions, just check out their website. Very good an extensive documentation. They also have a product named Sencha GXT (ex ExtGWT) if you want interoperability with GWT, they've been doing it for quite a while.
Dojo Toolkit. Another robust framework, quite similar to ExtJS but probably more lightweight (which is framework's strength, they use AMD to define/load modules)
Also worth noting that the second one is free for commercial use and the second one isn't. I suggest you to look at what these two frameworks have to offer out of the box and decide which one better suits your needs.
Other less popular (someone please correct me if I'm wrong) and generally smaller frameworks that have some community around them are:
Sproutcore. that you've mentioned
YUI. RIA framework maintained by Yahoo. ExtJS was originally created as extension to YUI.
qooxdoo. I'm not familiar with the framework but I've seen people recommend it. The description on the website looks promising.
These are the the frameworks that can help you architect "serious" single-page rich web applications. I should note that jQuery isn't generally suitable for such projects as a core. If what you want is more like library of widgets built on top of jQuery then you should check out jQuery UI but there's lots of other similar toolkits.
Also, check out these similar threads on SO:
free and open source alternative to extjs
What are alternatives to ExtJS?

How to write a modular JavaScript application?

I am planning to rewrite an existing Silverlight application using HTML, JavaScript and CSS. This will be a rich internet application connecting to a server only for data (JSON based web services) - so there will be no server-side presentation framework such as JSP or ASP.NET. The application consists of about 8 screens, most of them in a tabbed layout. The question is...
What is the best way to write such an application in a modular fashion? I would like to write the individual screens as standalone modules communicating with each other only via events. I would also like to use some sort of an MVC framework to decouple the presentation layer from the model.
Any thoughts on which frameworks I should look at? Have you had a good experience using them? I am starting to look at Backbone.js, JavaScriptMVC and SproutCore. Am I missing anything that is worth considering?
Thanks in advance for your time.
P.S. If you'd like to see the application that I am trying to rewrite, an online demo is available here - it is a realistic trading application built for learning and comparing technologies.

I haven't yet had a chance to try SproutCore, but I hear good things about it and want to look into it at some point. I would recommend trying out at least Backbone and Sproutcore to see which of the two fits your needs and your programming style better.
I do a lot of work with Backbone, and what your suggesting sounds like it would be a very easy fit with backbone. I follow an event-driven architecture with my backbone apps and I find it works very well. it keeps code clean and separated, and allows me to add functionality easily by binding to events that my objects raise.
there are a lot of great tutorials and screencasts for backbone out there, too. here a few of them that should hopefully give you some of the information you need (including my own blog posts):
http://lostechies.com/derickbailey/category/backbone/
http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ (introduce event-driven apps in backbone)
http://joeybeninghove.com/2011/08/16/backbone-screencast-introduction-views/
http://peepcode.com/products/backbone-js ($)
http://tekpub.com/view/mvc3/6 ($ and specific to ASP.NET MVC integration)
again, don't just pick one and never look back. it's worth your time to at least do some simple trial applications in backbone and sproutcore, if not additional frameworks.
hope that helps.

With Sproutcore, you can create so-called frameworks so separate your application. Every SC project has a frameworks directory, you just add a directory for your custom frameworks, and include the frameworks in your buildfile.
It's not a bad idea with SC to at least separate your Model layer into its own framework, for loose coupling and testing purposes (SC is heavily MVC). It might make sense to separate your screens into their own frameworks, depending on how beefy they are. One of the benefits of this approach is you can reuse your frameworks in other projects if needed.
SC also includes a robust Statechart mechanism, so using custom events is quite natural, and because of the statecharts its relatively easy to insure that the events are handled only when the app is in the right state.

Have you tried the Relay framework? Your write your individual screens as standalone modules and use relay's event system to link them together.
http://relay.github.com

HTML5 frameworks for an enamoured Flex Developer [closed]

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.
I've been working as a flex dev for many years, building really complex apps. With all the recent hype, I'm interested in learning HTML5.
What I like about the Flex framework is it's a consistent, coherent, complete stack for building RIA's. I like that it has a broad set of components out-of-the-box, and a framework for extending and building really complex, heavily customized & skinned components.
Are there similar frameworks out in the HTML5 space?
From the searching I've done, I see there's tonnes of useful .js scripts out there which provide nifty components, effects, etc. However, I haven't been able to find a solid js framework with a mature and architected component library.
This worries me that in building a complex application, I may end up writing lots of plumbing code to wire together disparate components.
I know that HTML5 is still in it's infancy, so if there are promising frameworks that I should be keeping an eye on, I'd like to know about 'em.
My shopping list of ideal framework requirements would be as follows:
Solid component architecture (including lifecycle events)
Extensible
Layout managers
Browser agnostic
Support for data binding
Support for complex Skinning
Abstraction of services layers & protocols (ie., SOAP / JSON / XML services are all a type of IRemoteService)
Along with the UI framework itself, what frameworks exist in the Javascript space for
MVC architectures. (Similar to Parsley, or Maté in the Flex world)
Dependency Injection
Unit testing

If you're a Flex dev, then might be be interested in checking out both the desktop and mobile versions of the Sencha Frameworks (my company): Ext JS for desktop apps and Sencha Touch for mobile/tablet apps.
Ext JS is focused on desktop web apps that can work all the way back to IE6, so there's not much room to be "HTML5"y although where we can we are (our new charting stuff uses Canvas, SVG or VML depending on the browser it finds itself on).
Sencha Touch is focused on Android, iOS, Blackberry and IE9(?) mobile browsers, so we get to use all the CSS3, localStorage, etc. etc. that you can shake a stick at. If you're looking for a test case of what you can do when you start with an assumption of a modern browser then this is it.
Ext JS & Sencha Touch is components all the way down. The best overview of both components and layouts is this article that was written for Ext JS 2, although the component and layout model hasn't changed much for Ext JS 3. Layouts are getting a rewrite for Ext JS 4 - which will have its first beta this month - to make them more like the CSS3 flexbox layout system.
Extensibility is the outgrowth of having a proper component model. Ext JS has a bunch of user extension components that can be mixed and matched. A good example of a professional after market component is Ext Scheduler. There's also a good tutorial on how to create components.
Data binding: UI components are bound to stores, so multiple UI elements are updated with new data as it changes. You can read the store API reference to get a sense of how it works.
Complex skinning - Sencha Touch has an excellent theming system which is being ported to Ext JS 4 - but Ext JS 3 and 2 are a little more involved to theme due to IE6 compatibility requirements (you have to generate images)
Services layers are abstracted with data proxy, which is extended for JSON, Http, XML etc.
Sencha Touch and Ext JS 4 have a (simple) MVC architecture. Ext JS 3 and below does not.
Here's a good write-up on dependency injection in Ext JS (but it should generalize to Touch)
For unit testing, we recommend Jasmine - which came out of Pivotal Labs.
Ext JS and Sencha Touch are pretty widely used - Ext JS mostly for corporate apps, but there are lots of big companies using it like Salesforce, Marketo and more for externally focused users. Sencha Touch has a nice gallery of apps from our latest dev contest, you should check it out.
If you care about tooling, we also have a GUI drag and drop Designer and a CSS3 animation tool (the latter in developer preview)

The HTML5 Boilerplate may be interesting to you. http://html5boilerplate.com/
I'm not sure about JS frameworks for MVC or Dependency, but for unit testing Dojo's Harness (due to new user restrictions I can't post a second link, but it should be easy to find) is pretty powerful. I'd take a look at more of Dojo's stuff as they do some pretty cool work with JS

Sproutcore is a javascript application framework. It is fully MVC with a rich key-value observing/binding infrastructure that reduces the amount of plumbing code you need to write, if you use it correctly. It supports most of your requirements:
"Solid component architecture (including lifecycle events)" -- every view has a bunch of lifecycle events.
"Extensible" -- Sproutcore supports mixins, and has its own 'convert prototypal inheritance' to classical inheritance stuff so you feel like you are creating classes in JS.
"Layout managers" -- You lay out your own views, where they are, how big they are. There are SplitViews which you can resize, and nest, but this might be one area where SC does not meet your requirements (although you can easily implement view resizing via observing)
"Browser agnostic" -- it is pretty browser agnostic, like any other JS framework will be.
"Support for data binding" -- very extensive binding infrastructure. If you bind a view field to a model field, it will update when the model is changed.
"Support for complex Skinning" -- skinned via css like any other web app if you don't like the default theme.
"Unit testing" -- SC comes with a qunit test harness in place. When you use the SC command line tool to create a class (be it an M, a V, or a C) the tool creates a test stub for you.
'HTML5' -- sort of a nebulous concept to start. SC definitely supports generating an html5 app manifest in the build tools. There are frameworks available for writing to browser local storage. I think more html5 capabilities will come online in the near future.
The NPR app on chrome app store and this sudoku app are both SC apps.

I think you might like the Sencha Framework which complies with some of the things you are looking for.

I'm in the same boat as you.
All the js frameworks I found require a lot of CSS to make them half as good as native flex.
Most of the newer js frameworks give up on older browsers.
Funding and cool demos may make meteor the long term js framework winner.
I like the simplicity of angularJs
here's a good comparison of some popular ones
http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/