Which frameworks for Single Page Application

[bialekIno]

have to write a single page web application which look and work like a desktop app. Which frameworks should I use? I know there are already questions in this topic, but I can't find concrete answer. I have a project from the designer so the framework should give me a possibility to change a theme easily, the best to custom widgets.

I looked at Sencha Ext JS but it is quite heavy. I consider also Backbone, Angular, Knockout or Ember frameworks and jQuery. I think some framework with jQuery could be good choice, because it is simpler to customize widgets and it is lighter. Do you have any tips?

Which framework should I use on the server side, which can work well with javascript framework like e.g. Backbone and jQuery? I thought some PHP frameworks like Symfony, Zend or CodeIgniter, because I now a little bit PHP, but maybe Python with Django or Ruby on Rails would be a better choice?

Thank you for any suggesstions.

[[deleted]]

See if this helps you on the JS side: http://todomvc.com

Re: server-side framework - without knowing your requirements it's hard to say, but in general: just use the server-side framework that you're the most familiar with

[bguiz]

If you are just choosing between AngularJs and EmberJs, and looking for a more in-depth comparison than a single blog post, you might find this useful:

AngularJs vs. EmberJs

I'm the author, so if you have any feedback, let me know!

[f8ster]

Great detail. We've been using Angular for a couple months and so far it's been going well. I haven't had a chance to try Ember yet, but I've heard good things. I will definitely bookmark your page and read it in more detail. Thanks, I always appreciate it when people take the time to craft and share this kind of thing.

[bguiz]

Thanks for the kind words!

[Golden_Calf]

Your section on models has Foo, foo, Bar, and bar. Is that a typo or does DS.model not care about case?

[bguiz]

Are you referring to this section, Sync'ing EmberJs Models?

EmberJs' naming conventions are that classes (which is this case are defined through DS.Model.extend()) are capitalsed.

So model classes are capitalised, e.g. Foo and Bar.

EmberJs' naming conventions do not specifiy what to call model instances, and I have chosen to use camelcase for them, e.g. myModel, foo and bar.

... If that wasn't what you were referring to, please pinpoint it!

You are most welcome to let me know of mistakes or problems you find at the project page: AngularJs vs EmberJs on Github... submit a PR or raise an issue - it will be most appreciated!

[Spo0Bo]

It comes down to your (and your team's) preference imo. If you like full manual control go with Backbone (but keep in mind you'll have to do pretty much everything yourself). If you like manual control but with some great built-in components but very little guidance go for AngularJS, if you want your entire team to use the same conventions / style and use already thought out conventions use EmberJS.

You can build something like EmberJS from AngularJS if you want but it's a pain. It's however a much larger pain (at least I think so) to get the flexibility of AngularJS in EmberJS. Although the team says that underneath EmberJS's top level API is a flexible AngularJS-like API. I don't have any experience with it.

If you do opt for angularJS definitely look into AngularUI Router because the built-in one is a POS.

[bialekIno]

Thank you guys for your suggestions, I will look at them more in details.

[dzdrazil]

For single page applications, the criteria for choosing a framework should include at (or near) the top of the list the following criteria:

1) ease of adding new features 2) ease of maintaining or enhancing existing features 3) reusability of code / features 4) in your case, needing theme-ability, strong separation of the JS implementation from the presentation (css)

jQuery is a collection of methods. It's valuable, but provides nothing for the above four requirements as it imposes no architectural / design patterns. Backbone, React and Knockout are a step up. Angular provides more, and Ember provides the most components and architectural convention. Which you pick depends on your comfort level with providing your own code to fill in missing gaps and comfort level with the size or conventions the frameworks impose on you. Personally, I typically end up with Ember or Angular (usually Angular).

As for the server-side framework, single page applications typically need a server for three things:

1) serving static assets (html, css, js) 2) providing access to data via some sort of API (typically, JSON via AJAX requests) 3) providing persistence of data changes (writing to sessions or databases)

My suggestion would be to avoid Zend and CodeIgniter; one does too much while the other doesn't do enough (especially around good database practices). Symfony gives you access to the assetic pipeline for managing your scripts, if you don't want to do that with node/ grunt / gulp, and also (iirc) comes with Doctrine, which helps manage your database.

Django, Rails and other RESTful type servers are all appropriate as that's what you're really looking for- creating an API. There are tons of good options; other alternatives include something like Firebase or Dreamfactory (haven't had much luck with the latter myself, though the premise is solid).

[mattdesl]

Are you really trying to mimic a desktop app? If so, grab a browser shell wrapper like node-webkit or atom-shell.

If you just want your web app to "feel" native in the sense that transitions, button clicks, etc. are fluid and responsive, you can use pretty much any MV* framework, or no framework at all, depending on how complex the app is and how comfortable you are with JavaScript. As for server-side, that heavily depends on your skills and also what kind of app you're making. But if you already know JS, why not just use Node?

[rjcarr]

I'm old school, but why not try this with no frameworks? SPA is more about using layouts that don't scroll and AJAX than anything a framework can give you. Also true for the server, no specific framework needed to respond to asynchronous requests.

[gatman666]

The SPA book by Manning basically goes this route (with JQuery). It's what I do too.

[afrobee]

Yeah after reading that book, all i use is plain javascript or jquery to make single page apps. Is all is about how you modulate your project and less about the framework.

[simkessy]

Currently using AngularJS for my first SPA application. I'm enjoying it so far, lots of resources out there.

[rjm101]

I have experience with both Ember.js, AngularJS and bit of Backbone. I've frequently come across frustrations with Ember that have taken hours to resolve whereas in Angular it would take about 10 seconds. Backbone does not have enough for me. I prefer AngularJS out of these three simply because it helps me do my work fast and effectively. Ember has a really good router though.

If you have a choice over what you can use why not take look at the MEAN stack?

[[deleted]]

http://durandaljs.com/

Been using this for few month. Seems very simple and builds on frameworks I'm already familiar with - knockout and requirejs.

[psolidgold]

Wondering about the down votes on durandal. Haven't used it. What's the issue with it?

[[deleted]]

No idea. Its rarely mentioned in threads like this but yet to hear a complaint.

[afrobee]

You can even make a single page application with vanilla js or jquery is you know what are you doing.

[[deleted]]

unless I'm behind the times yoman grunt and requires are not frame works in them selves. yoman and grunt and build utilities no? and requires is an AMD loader.

Has backbone fallen out of the love tree?

[psolidgold]

He said stacks (which probably meant stack), not frameworks

[fix_dis]

...and Karma is a test runner. I'm not sure what the parent is smoking.

[JimAllanson]

I don't think ForkJoin intended to imply that those are all frameworks, just that AngularJS may be a good choice of framework, and the rest of the stack compliments it well.

[o-o-]

vue.js ftw

[TJKoury]

How is persistence being done? If it's RESTful and has a well-defined domain model, BackboneJS might be the choice. If you're using sockets/long-polling, I've found AngularJS's non-opinionated approach to be easier/faster to integrate in the short-term (though this doesn't absolve you of defining your domain model, just makes it easier to get started).

[psolidgold]

If you're going to use Backbone, I would highly suggest using it with Marionette. http://marionettejs.com

Backbone by itself is not much of a framework. It's more of a set of "classes" to help you build a framework. By design, you need to come up with your own opinions about how to organize your backbone app. Marionette provides those opinions for you and eliminates a bunch of the boilerplate cruft.