Framework to structure existing JS code

Question

I have some procedural javascript code that I have written for an open-source application and I'd Like to refactor it into OOP and since I have very little experience with javascript frameworks I have trouble finding a one suitable for my needs, though I haven't tried anything yet, I just read about AngularJS, Backbone.js and Knockout.

I want to structure the code, because, at the moment, there's a mess, global variables and functions scattered around.

I have to mention that all the business logic is handled at the server level, so the client-side code handles just the UI using the data it receives or requests from the server.

The code can be found here: https://github.com/paullik/webchat/blob/asp.net/webchat/Static/Js/chat.js

Do you have any suggestions?

Answer 1

Object-Oriented JavaScript is not necessarily the answer to all your problems.

My advice is to be careful the choice you pick on this topic.

In practice, OO-JS can add more complexity to your code for the sake of trying to be more like traditional object-oriented languages. As you probably know, JS is unique.

It is important to know that there are Design Patterns that will structure your code and keep implementation light and flexible.

It is Design Patterns that I see structuring advanced JS implementations, not OO. To paraphrase Axel Rauchmeyer - "Object Oriented methodology does not fit into basic JavaScript syntax, it is a twisted and contorted implementation, and JS is far more expressive with out it."

The root of this analysis boils down to the fact that JS has no class. In essence, since everything is an object, you already have object-oriented variables and functions. Thus the problem is slightly different than the one found in compiled languages (C/Java).

What Design Patterns are there for JavaScript?

An excellent resource to check is Addy O' Somani and Essential Design Patterns. He wrote this book on Design Patterns in JavaScript.

But there is more... much more.

A. require.js - There is a way to load modules of JS code in a very impressive way. These are generally called a module loaders, and are widely considered the future of loading js files since they optimize performance at runtime. yepnope and others exist. Keep this in mind if you are loading more than a few js files. (moved to top by request).

B. MVC - There are dozens of Model View Controller frameworks to help you structure code. It is a Pattern, but may be unreasonable for your purposes. You mentioned backbone, knockout and angular... Yes. These can do the trick for you, but I would be concerned that they might be 1) high learning-curve, and 2) overkill for your environment.

C. Namespace or Module Pattern. Are probably the most important for your needs. To solve global variables just wrap them in a namespace and reference that. These are very good patterns that give rise to module loaders.

D. Closure - You mentioned OO JS. On piece of this that is useful is the notion of closures to provide yourself with... private members. At first this is a cryptic idea, but after you recognize the pattern, it is trivial practice.

E. Custom Events - It becomes very important to not use hard references between objects. Example: AnotherObject.member; This is because it will tightly couple the two objects together and make both of them inflexible to change. To solve this, trigger and listen to events. In traditional Design Patterns this is the Observer. In JS it is called PubSub.

F. The Callback - The callback pattern is what enabled AJAX and it is revolutionizing development in terms of Window 8, Firefox OS, and Node.js - because of something called non-blocking-io. Very important.

Do not be afraid. This is the direction to go for long-term and advanced JavaScript implementations.

Once you recognize the patterns, it is down hill from there.

Hope this helps.