We Keep Coding

Migrate backbone to angular 6

Currently, my project is running on backbone js which is a hybrid application. So, I want to migrate the backbone Js application to angular 6 but I need specification Why angular is better than Backbone Js for building a hybrid application.

Okay... I see what you try to achieve here. IMHO As a JS-developer you should be able to answer most of this question by yourself. No framework or toolkit is perfect, neither are Backbone.js or Angular (or PhoneGap / Ionic / React (native) / you call it)! If you want to migrate your app to another language, ask yourself for which reasons you would do so: Do you simply want to learn another language? Or has Backbone.js proven to fail in certain situations/scenarios?
I did a hybrid-app project several years ago only using Backbone.js - and had no problems so far. However, if I would have to do the same job with more complex views, view-transitions, routes and all that mobile-related stuff, I'd probably choose a toolkit that can handle these scenarios much better and with less amount of code - such as Flutter, React native or even native programming. That is why you will first have to assess for yourself what your hybrid-app project really needs. Do you have to deal with heavy data? Then keep on using Backbone.js. Do you need two-way data-binding in forms? Well, that one goes to Angular. Or are parts of your code simply too verbose, un-testable or buggy? Then you should assume refactoring your code as much as possible instead of re-inventing the wheel.
A last word: There have been several discussions in the Backbone.js/Marionette.js community about how to migrate an app to framework xy. As a rule of thumb you should keep in mind that developing NEW components in another language / scripting style is way smarter that re-developing the entire app (which would, as a matter of fact, break a lot of your given business logic and lead to endless nights of doing the same thing over and over).

JavaScript Web Application

I built a quiz taker app with Ruby on Rails, using the MVC framework. I want to do basically the same thing with pure JavaScript, and add more features with jQuery for mobile devices and special effects, since jQuery is just awesome like that.
I have looked around on sites like TodoMVC for comparisons on frameworks, but I'm foreign to how these frameworks function. Why do they use Collection rather than Controller in their MVC definition? It seems to me that these are just client-side frameworks. Would I use something like Backbone.js for client-side work and Node.js for server-side?
I'm just unsure as to how development with pure JavaScript functions. I need to create a database to store quiz and user information and be able to access that database when viewing most pages, so I feel the MVC framework is the best way to go.
Any suggestions as to where to start?

Wow, that's quite a broad post; let's take things one at a time
Why do they use Collection rather than Controller in their MVC definition?
The exact answer varies by library, but a simplistic answer is that the Controllers in most Javascript apps doesn't really need any framework; they can be raw Javascript and work just fine as they're usually not very complex.
Furthermore, parts what you might consider to be "the Controller" are often provided separately. The primary example of this is Backbone's Router object: it is similar to the implied routing (and routes.rb) in Rails, or the urls.py in Django. Just as those frameworks don't consider routing to be part of "the Controller", Backbone (and similar frameworks) provide routing as a separate piece ... even though it could fall under the C in MVC.
Similarly, much of the DOM manipulation functionality that jQuery provides would normally belong in the Controller of an MVC app, so in a sense jQuery helps you build your controllers; it's just not explicit the way Backbone.Model helps you build your models.
Would I use something like Backbone.js for client-side work and Node.js for server-side?
That's really apples and oranges; to put in server-side terms, Backbone is more like Rails, and Node is more like Ruby (or Mongrel or something). So yeah one's client-side and the other's server-side, but the differences are deeper than that.
Any suggestions as to where to start?
Pick a framework and get your hands dirty! Seriously, you can spend hours reading reviews of the different frameworks, and still be no closer to making a decision at the end than when you started (I speak from experience). But if you just pick one and try it, you'll likely find that it either "gels" with you or doesn't pretty fast.
Personally, I'd recommend starting with Backbone just because A) it's very popular these days, and B) I'm biased: I use it on a daily basis and love it. Also, it probably would fit you well because it was created by the CoffeeScript guy (and CoffeeScript was his attempt to make Javascript more Ruby-like). However, Ember.js is also very popular these days, and Hector mentioned ExpressJS, which I know nothing about but could be cool.
But the point is, pick one, do a hello world, or maybe something a little more complex like an introductory tutorial (Backbone has one around a To Do app). A few hours of coding with it will tell you far more than I (or anyone else on Stack Overflow) ever could about whether it's right for you.

If you are looking for a JavaScript MVC-like framework take a look at Express.js http://expressjs.com
Express.js is more like Sinatra than Rails, but it will give you a good foundation on the server side.

I would definitely look at Google Closure. I have started to use it with LimeJs on a personnal pet project and really got caught with it's compiler and it's modular design.
It's not really MVC, but since JavaScript should be thought more in an asynchronous fashion, I tend to think more of it as event driven than simply a request-pipeline-response way.
So, Closure Library and jQuery / jQuery UI (both on Google API) for the client side and ExpressJs for the server side. Also, take a look at this framework comparison chart, you might find it interesting.

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

Is there a JavaScript MVC (micro-)framework? [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.
Are there any client-side JavaScript MVC (micro-)frameworks?
I have a rather complicated HTML form, and it would benefit from the MVC pattern.
I imagine a good solution would provide the following:
Model and View update the Controller when values change (Observer pattern)
Populate the model from the form data when the page loads
Populate the form from the model when the model changes
Ajax, comet, JSONP and all that jazz are serious overkill.

Backbone is a great light-weight framework. Give it a try:
http://backbonejs.org/

JavaScriptMVC is an excellent solution. It's everything is a plugin approach enables you to select only the features you need. As of 2.0, it's based on jQuery.
On progressively enhancing your website, that's left up to the user as JMVC provides just a middle layer for development - it's up to you to make that design choice yourself.
However, JavaScriptMVC is simply the best general purpose JavaScriptMVC library because of its powerful event delegation based controllers.
Event delegation lets you escape having to attach event handlers, and simply create rules for your page.
Finally, JMVC is much more than a MVC architecture. It has all parts of the development cycle covered with:
Code Generators
Selenium and Env.js integrated testing
Documentation Engine
Automatic Concat+Compress
Error detection and reporting

Spine has an API similar to Backbone but it's a lot smaller. It features prototypal inheritance.

AngularJS works well together with jQuery and will help you a lot with MVC structure and strict separation of concerns.
Full testing environment and Dependency Injection included...
Check it out at http://angularjs.org

Indeed there is: http://www.javascriptmvc.com/
I think you will find this sufficient!

I think this one looks like something you should check out: http://knockoutjs.com/
(As a silverlight / wpf programmer this was the library that made me finally start learning javascript. It is based on the Model-View-View-Model (MVVM) pattern, as for me right now seems like a good choise!)

Ember.js
These are the three features that make Ember a joy to use:
Bindings
Computed properties
Auto-updating templates
Bindings
Use bindings to keep properties between two different objects in sync. You just declare a binding once, and Ember will make sure changes get propagated in either direction.
Here's how you create a binding between two objects:
MyApp.president = Ember.Object.create({
name: "Barack Obama"
});
MyApp.country = Ember.Object.create({
// Ending a property with 'Binding' tells Ember to
// create a binding to the presidentName property.
presidentNameBinding: 'MyApp.president.name'
});
MyApp.country.get('presidentName');
// "Barack Obama"
Bindings allow you to architect your application using the MVC (Model-View-Controller) pattern, then rest easy knowing that data will always flow correctly from layer to layer.
Computed Properties
Computed properties allow you to treat a function like a property.
Computed properties are useful because they can work with bindings, just like any other property.
Auto-updating Templates
Ember uses Handlebars, a semantic templating library. To take data from your JavaScript application and put it into the DOM, create a tag and put it into your HTML, wherever you'd like the value to appear:
<script type="text/x-handlebars">
The President of the United States is {{MyApp.president.fullName}}.
</script>

Stapes.js
Full disclosure: i'm the author of this library :)
If you're looking for something really tiny (1.5kb minified / gzipped) have a look, and tell me if you like it.

There is the popular Backbone.js

If your requirements are really simple, you could write your own simple MVC like Alex Netkachov did.
His examples are built on dojo (Note: they don't work for me on his page because of a missing dojo.js file), but you could follow the pattern in plain Javascript.

It's probably overkill for what you need, but SproutCore is an MVC framework, and it doesn't look any more heavyweight than JavaScriptMVC or TrimPath's Junction.
Unfortunately, none of these seem to be built on the principle of progressive enhancement.

The popular ActionScript MVC framework PureMVC was recently ported to JavaScript. I haven't had a chance to try it out yet, but I am confident it's good.

UPDATE 2016: Sammy.js seems to be abandoned.
Have a look at Sammy.js
Text from the site:
A small webframework with class.
SMALL Sammy's core is only 16K compressed and 5.2K compressed and gzipped
MODULAR Sammy is built on a system of plugins and adapters . Only include the code you need. It's also easy to extract your own code into reusable plugins.
CLEAN The entire API was designed to be easy to understand and read. Sammy tries to encourage good encapsulation and application design.
FUN What's the real point of development if its not enjoyable. Sammy tries to follow the MATZ approach. It is optimized for developer happiness.

Please also checkout jquery-claypool.
jquery-claypool is a small, fast, railable mvc framework built on jquery, based on my experience with django, rails, spring etc. Its very light weight and runs on both on the client and in server environments.
it provides a routing framework for clean mvc, category logging, filters (aop), lazy creation of controllers, inversion of control, convention-over-configuration and not much more by design.
it doesn't do anything jquery already does, feels like jquery, and works like a good framework should: simply.
jquery-claypool
Hope you check it out.

Jamal is the lightweightest I've seen. It's also based on jQuery (bonus). Have not used.
http://jamal-mvc.com/

If you want to keep things under control and quite simple, you may don't need a framework, but just implement your own mvc pattern.
Just check this article: Model-View-Controller (MVC) with JavaScript by Alex Netkachov on 2006.

Here is a list of all open-source JavaScript Frameworks known to mankind.
http://getopensource.info/explore/javascript/framework/
Or only MVC frameworks
http://getopensource.info/explore/javascript/mvc/
Disclosure: I'm the developer of this website.

Try kitty. It is only 1.4KB and its only dependency is EJS.

I wouldn't call this a micro-framework, but it sure looks interesting: Cappuccino Web Framework

CorMVC, easy to understand and to start with, jquery based and does not depend on any server technology

I have developed a very simple Javascript MVC framework called MCV. It does not do exactly what you ask for, but it is easily extensible with helpers. Anyway, it is definitely micro (1,9kb packed).
It works more or less like Jamal, but I decided to roll my own for two reasons:
remove the jQuery dependency (although I use it together with jQuery most of the time)
making it extensible with helpers. These are analog to CakePHP behaviors, components and helpers.

Just to make the list a little more complete:
ActiveJS

I upvoted the AngularJS (full disclosure, I'm involved in a limited way with the angular dev effort) and am very excited about it. I did a side-by-side comparison taking one feature for an internal project (sorry don't have signoff to share it) and implementing it in both AngularJS and Backbone. It was a great exercise and in the end, I'm very much leaning towards Angular. The core developers are great about answering questions and they've done a really nice job with builtin databinding, unit/e2e testing and documentation. Its still in beta with 1.0 coming out in near future. The beta is very stable.
There is a bit of a paradigm shift, and they use a fairly different approach than most. Integrating your favorite jquery plugins takes a bit of effort but is doable and has been done (angular-contrib on github).
I will say (and this is a problem for most js-centric frameworks), make sure to investigate how to make your content SEO-friendly (if its important to you). Since joining the angular community in June, I've noticed the interest is growing and a number of people are making posts saying that they've looked at Backbone and others but really like what they are seeing in Angular.

Maverick is a small JavaScript MVC framework — http://maverick.round.ee

I'm going to pipe up here too - AFrameJS works with jQuery, MooTools and Prototype.

Another one: MooTools-MVC

There was a key-value binding JavaScript framework called "Coherent", which was inspired by Apple's Cocoa Bindings. The framework has been bought by Apple, but there is still an old copy at http://github.com/trek/coherentjs/tree/master.

Try this jQuery based javascript MVC framework.

One more, lightweight and tiny: http://jqnano.oleksiy.pro/

Can.js has everything you need and weighs in at just 8 KB. It's taken the best bits from JavaScriptMVC and distilled it into one small, yet kickass framework with observers, widgets, binding, the works. It is compatible with major frameworks (jQuery, Dojo Toolkit, MooTools, etc.). Documentation is excellent and authors are responsive. It is definitely worth a look.