Front end - ajax calls to the server frameworks

Question

I am a server side software developer.

In the last year or so i started to develop some front end as part of a pretty big web application (spring framework, spring mvc, and pure javascript \ html)

In that project i received html layouts that was constructed by someone else and i had to do all the js logic. (mainly ajax calls)

What i came to realize is that my js file was containing 20K lines of code that had the following pattern:

1) onclick functions \ triggers 2) the ajax call itself with the parameters 3) the callback for the ajax and the html(dom) manipulation to reflect the data

So buttom line i had an extreme spagetthi monster that contains lots of the functions i mentioned above.

 function createAccountButtonClicked() {

  // get input
  doCreateAccountAjax(params);

 }
  function doCreateAccountAjax(params) {

  ajax.(...) //define callbackFunc(params)

 }

 function callbackFunc(params) {

  // set dom stuff.

 }

As a framework freak (server) I couldn't believe this. and figured out there must be a front end framework to allow a better control and flow over the methodology i introduced here.

I would appreciate any pieces of references .

Thanks

Answer 1

There are indeed a few frameworks you can use for front-end development. They are based on either MVC or MVVM design patterns to abstract the view from the underlying logic. Check these:

• Backbone.js, usually combined with Underscore.js for HTML templates among other things.
• Angular.js, developed by Google
• Ember.js
• Knockout.js

My preferred one is Knockout.js, mainly because I believe it has the cleanest HTML template mechanism. I think this is important if you need to communicate with somebody that exclusively designs the HTML/CSS views of your application. Of course, the choice largely depends on your application, so I would recommend you read some of these:

• http://johndel.gr/blog/emberjs-vs-angular-js
• http://blogs.lessthandot.com/index.php/webdev/uidevelopment/angularjs-vs-knockout-final-thoughts-9/
• http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
• http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you#awesm=~oD0wpF2Rw8JWKo
• http://www.100percentjs.com/backbone-or-angular-or-ember-here-is-my-choice-and-why/
• Angular.js vs Knockout.js vs Backbone.js

which is of course a small part of the list of resources that compare these frameworks on the web.

Apart from MVC framework, you might considered use these as well:

• jQuery: I think almost everyone uses jQuery. It abstracts DOM manipulation, provides cross-browser AJAX support, event handling and tons of other things. I could not live without it.
• Bootstrap: It "bootstraps" your CSS with some very commonly used patterns and provides some very nice UI components as well.
• Require.js: Split your javascript code into modules and provide robust dependencies on them. Really usefull if your front end code becomes large and complex, I would recommend start using this from early on, it will simplify your code structure a lot.

I hope I helped :)