We Keep Coding

Angular js for non single-page Applications

I've been learning Angular 2 recently, and I must say that this is a great framework if I wanted to build a single-page application.
However, I was wondering how one would integrate angular with a normal, old style websites (say, built on codeigniter) if they only wanted the two way binding functionality?
Of course, I could use angular 2 for that, but with all the routing machinery of angular, it seems rather... out of place. It just seems like I'm trying to use an axe as a hammer.
So, my question is: what would you suggest to someone who wants to build a non single-page website, with old school loading pages, but for the page itself to be very interactive and utilize two way binding? For example, a users list which is a page in itself, but pagination is done via ajax... etc Should I just go with angular2, or maybe another library that's simply more suited for this purpose? Some suggested that ReactJS may just be what I'm looking for.
What do you think?

Although it's true that
client-side routing is just a small piece
of a very large framework, the fact that the structure of a Angular (2) project has exactly 1 index.html file with no server side code, at least implicitly tells us that there's a lot of framework intended for SPAs which a multi-page application may not need.
If what makes Angular 2 a great framework for you is data binding and productivity then have a look at Ember.js. Ember makes it easy to follow best practices rather than spending time on trivial choices.

What makes Angular and Backbone different from jQuery?

I have been using JavaScript and jQuery for quite a while now and want to extend my skill set further, during my search I came across two popular names Angular and Backbone and while reading about them I found one line common in both them which somehow also seems to be their USP i.e.
It is designed for developing single-page web applications
This makes my confused.
What is that I cannot do with JS or jQuery and I would require these?
I have created web application on single page, where users can perform CRUD operations on single page through asynchronous calls so why so much importance of for these others libraries?
And as a middle level web developer who has have good hands on JS is it right path to move to these two or here is something else I should look into before these?
Please help?

Structure.
In an ongoing project that started about 4 years ago we built the front end with jQuery. We were able to do just about everything that we needed creating several single page applications that were quite functional.
As the project progressed and the code base grew we started experiencing some major problems with maintainability of the code. We ended up with hundreds or thousands of lines of JavaScript code per page in a tangle that was almost impossible to navigate. This could have been avoided if we were more careful of course but at the time we focused on making sure the back end architecture was robust.
Many years ago the community learned that code needs structure to be maintainable. We developed MVC patterns, multi-tiered applications etc. But JavaScript was never a big player in the field and we largely ignored it.
Over the last 6 months or so we introduced Angular into the project and started sorting out some of the mess in the project. The results are remarkable. Not only is the code simpler and easier to create, the structure makes it easier to implement tests, easier to maintain and generally a huge improvement over what we had before. We still use jQuery but now we have been burnt by the lack of structure and know a thing or two about the architecture of a JavaScript application. Angular and its like provide you with the tools to architect a good application.

When you are creating larger scale web applications it is wise to check out Backbone, Angular or perhaps Meteor. jQuery supports neat tricks, but it does not help you structure your code in a maintainable way. Larger scale web apps build on jQuery need their own vision on how to separate the code into layers with their own responsibility.
The other frameworks give more support.
I would suggest checking out at least one of the libraries. Perhaps you eventually won't use them, but it will benefit how you work in jQuery.

Well Now a days there has been quite a hype about Angular.js and especially SPAs (Single Page Applications). Well to be honest, I had the same question in my mind about a month ago when my team decided to shift from Jquery to Angular.
Whenever it comes to Jquery, one of the first thing that comes in our mind is the DOM manipulation. While using Jquery we always think of manipulating the DOM. Show/hide elements, animating elements, getting data from tags you name it. But Angular offers something more than that. It offers you an architecture, a way to structure your applications at the front end.
So whenever you go for Angular.js, change the way you think about creating web applications (and believe me its worth it). Most of Angular's structure uses the concept of Dependency Injection which is a neat way to maintain your code.
Backbone is only a library whereas Angular.js is a complete framework to create and manage Single Page Applications
Talking about the fact that Angular.js should be used when we are creating large scalable apps, it is true. In my case the team I work with is full of Jquery Ninjas. We have been creating a great app for the last 3 years and believe me it became difficult for us to maintain and debug thousands of lines of Jquery. This is the main reason we have decided to revamp this app into Angular.
Kindly see some of these Helpful links. You will get a better idea.
http://net.tutsplus.com/tutorials/javascript-ajax/3-reasons-to-choose-angularjs-for-your-next-project/
"Thinking in AngularJS" if I have a jQuery background?

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.

Javascript framework: Knockout, backbone, ember…

I'm currently on a web application project written in javascript with node.js and Express server-side and it's time to consider the client-side of this application. The two questions are:
Should I consider using a framework or can I write it without such a tool?
And if not, which framework?
I've chosen three of these: backbone, knockout and Ember. I read all the questions I found about them but I'm still hesitating. The points to consider are:
It is good to mix html with javascript like knockout does?
Will my application be easily maintainable?
Will the framework continue and not diappear tomorrow, leaving me in a very uncomfortable situation?
EDIT: And what do you think about JavaScriptMVC?

As #Christian Varga has said in the comments, it depends. However, I would make the following observations:
It is good to mix html with javascript like knockout does?
With knockout you are not forced to mix javascript into the html. See Unobstrusive Event Handling.
Will my application be easily maintainable?
In my experience with knockout , if the application gets especially large the pages do get complicated. However, if you are going for a SPA style page then the code will always get fairly involved. I haven't worked with Ember or Backbone but certainly Backbone does have a reputation for being be good for larger applications.
Will the framework continue and not diappear tomorrow, leaving me in a
very uncomfortable situation?
I think you have picked your three frameworks to consider wisely. Knockout and Backbone both have fairly wide adoption. Knockout is to be shipped with MVC4 which gives you some confidence behind its future. Ember is newer but there seems to be a lot of excitement behind it. There is a good discussion of Ember with various references to knockout and backbone here
Hope this helps you evaluate what will be best for your project.

All those are good frameworks. You can choose anyone and you won't make a huge mistake. Of course, you might like one most than others, but that's a matter of taste. All those frameworks will make your app easy mantainable.
Now, I want to add something more. You asked "Should I consider using a framework"? You can build your own stuff, that's something cool. I'd just recomend to keep in mind good organization of your project. In my short experience, Js is a mess. And these FWs help you to keep your code clean and organized.
1 more thing to add to organization: You should consider some AMD tool, like Require.js

If you're thinking of building an application with scalability and maintainability in mind you might want to consider a reference architecture such as Boilerplatejs.
BoilerplateJS incorporates best practices to be used when building a large scale application. Furthermore it ships with libraries such as knockoutjs and also utilities that would help structure and organize your code.

Architecture of a single-page JavaScript web application?

How should a complex single-page JS web application be structured on the client-side? Specifically I'm curious about how to cleanly structure the application in terms of its model objects, UI components, any controllers, and objects handling server persistence.
MVC seemed like a fit at first. But with UI components nested at various depths (each with their own way of acting on/reacting to model data, and each generating events which they themselves may or may not handle directly), it doesn't seem like MVC can be cleanly applied. (But please correct me if that's not the case.)
--
(This question resulted in two suggestions of using ajax, which is obviously needed for anything other than the most trivial one-page app.)

MVC architecture of PureMVC/JS is the most elegant IMO. I learned a lot from it. I also found Scalable JavaScript Application Architecture by Nicholas Zakas helpful in researching client side architecture options.
Two other tips
I've found view, focus, and input management are areas that need special attention in single page web apps
I also found it helpful to abstract away the JS library, leaving door open to change mind on what you use, or mix & match should the need arise.

Nicholas Zakas's presentation as shared by Dean is a very good place to start with. I was also struggling to answer the same question for a while. After doing couple of large scale Javascript products, thought of sharing the learnings as a reference architecture in case someone needs it. Have a look at:
http://boilerplatejs.org/
It addresses common Javascript development concerns such as:
Solution structuring
Creating complex module hierarchy
Self contained UI components
Event based inter module communication
Routing, History, Bookmarking
Unit Testing
Localization
Document Generation
etc.

The way I build apps:
ExtJS framework, single page app, every component defined in a separate JS file, loaded on-demand
Every component contacts its own dedicated web service (sometimes more than one), fetching data into ExtJS stores or special-purpose data structures
The rendering uses standard ExtJS components, so I can bind stores to grids, load forms from records, ...
Just choose a javascript framework, and follow its best practices. My favorites are ExtJS and GWT, but YMMV.
Do NOT roll your own solution for this. The effort required to duplicate what modern javascript frameworks do is too big. It is always faster to adapt something existing than to build it all from scratch.

Question - What makes an application complex ?
Answer - The use of word 'complex' in the question itself. Hence, a common tendency will be to look out for a complex solution right from the beginning.
Question - What does the word complex means ?
Answer - Anything that is unknown or partially understood. Example : The theory of Gravity even today is COMPLEX to me but not to Sir Isaac Newton who discovered it in 1655.
Question - What tools can I use to deal with complexity ?
Answer - Understanding and simplicity.
Question - But I understand my application . Its still complex ?
Answer - Think twice, because understanding and complexity does not co-exist. If you understand a huge huge application, I am sure you will agree that it is nothing but an integration of small and simple units.
Question - Why all of the above philosophical discussion for a question on
Single Page Application (SAP)?
Answer - Because,
-> SPA is not some kind of core technology that is newly invented for which we need to reinvent the wheel for a lot of things that we are doing in application development.
-> Its a concept driven by the need for better performance, availability, scalability and maintainability of web applications.
-> Its a fairly newly identified design pattern, so an understanding of SPA as a design pattern goes long way in making informed decisions about the architecture of a SPA.
-> At the root level no SPA is complex, because after understanding the needs of an application and the SPA pattern, you will realize that you are still creating an application, pretty much the same way you did before with some modifications and re-arrangements in the development approach.
Question - What about the use of Frameworks ?
Answer - Frameworks are boiler plate code / solution for some commonly identified and generic patterns, hence they can take off x% (variable, based on the application) load from application development but then not a lot should be expected out of them specially for heavy and growing applications. Its always a good case to be in complete control of your application structure and flow but most importantly the code for it. There should be no grey or black areas in the application code.
Question - Can you suggest one of the many approaches to SPA architecture ?
Answer - Think of your own framework based on the nature of your application. Categorize application components. Look for an existing framework that is close to your derived framework, if you find it then use it, if you do not find it then I suggest going ahead with your own. Creating framework is quite an effort upfront but produces better results in long run. Some basic components in my SPA framework will be:
Data Source : Models / Collections of Models
Mark Up for presenting data : Templates
Interaction with the application : Events
State capturing and navigation : Routing
Utilities , widgets and plug-ins : libraries
Let me know if this helped in any way and good luck with your SPA architecture !!

The best thing to do is to look at example uses of other frameworks:
TodoMVC showcases many many SPA frameworks.

You can use javascript MVC framework http://javascriptmvc.com/

The web application that I am currently working on uses JQuery and I would not recommend it for any large single page web application. Most frameworks i.e. Dojo, yahoo, google and others use namespaces in their libraries but JQuery does not and this is a significant drawback.
If your web site is intended to be small then JQuery would be ok but if you intended to build a large site then I would recommend looking at all the Javascript frameworks available and deciding which one most meets your needs.
And I would recommend applying the MVC pattern to your javascript/html and probably most of your object model for the javascript could be done as the json that you actually return from the server through ajax and the javascirpt uses the json to render html.
I would recommend reading the book Ajax in action as it covers most of the stuff you will need to know.

I'm using Samm.js in several one page applications with great success

I would go with jQuery MVC

Check out http://bennadel.com/projects/cormvc-jquery-framework.htm Ben is pretty sharp and if you dig around on his blog he has some nice posts about how CorMVC is put together and why.

Alternative: take a look to ItsNat
Think in JavaScript but code the same in Java in server with the same DOM APIs, in server is way easier to manage your application without custom client/bridges because UI and data are together.

Or have a look at https://github.com/flosse/scaleApp

NikaFramework allows you to create single-page application. Also allows you to write HTML, CSS (SASS), JavaScript into separate files and bundle them into only one output file in the end.

I would recommend to explore Yeoman. It allow you to use existing "best practice" for your new project.
For example:
if you decide to use Angular.js, there is a Yeoman generator, that give you a structure for routing, views, services, etc. Also allow you to Test, minify your code, etc.
If you decide to use Backbone, checkout this generator