I am starting a new job soon as a frontend developer. The App I would be working

Question

I am starting a new job soon as a frontend developer. The App I would be working on is 100% Javascript on the client side. all the server returns is an index page that loads all the Javascript files needed by the app.

Now here is the problem:

The whole of the application is built around having functions wrapped to different namespaces. And from what I see, a simple function like rendering the HTML of a page can be accomplished by having a call to 2 or more functions across different namespace...

My initial thought was "this does not feel like the perfect solution" and I can just envisage a lot of issues with maintaining the code and extending it down the line.

Now I would soon start working on taking the project forward and would like to have suggestions on good case practices when it comes to writing and managing a relatively large amount of javascript code.

Explanation / Answer

This is a very good question, and a common problem in advancing JavaScript architecture.

It sounds to me like you are describing the situation of "tight-coupling".

Once functions become objectified, the tendency is to reference these wonderful objects directly, from object to object, across namespaces even. Because it is easy right?

var Object1, Object2 = {};

Object1.somefunction = function(){
//Tight Coupling!!
Object2.functionCall();
}
It is easy, but these seemingly innocent hard-references gang up, to make you sad when you have to remove or replace objects. That happens a lot in JavaScript, so understanding tight-coupling is key to making a JS codebase maintainable.

Here are some other thoughts:

1 - If your objects are not already communicating by - triggering and listening to events; they should be. This is the solution to hard references.

2 - Design Patterns. There are many challenges that have already been solved out there, the standardized reusable solutions - are Design Patterns.

Understanding where the patterns are helps you focus on what solutions may make sense. One pattern for communicating across objects is called Publisher/Subscriber, or PubSub.

3 - These things help with maintainability: MVC with a router, Templates - data binding, AJAX - through a Proxy or Delegate objects.

4 - Look for frameworks and libraries that solve the cross-browser problems for you. Don't re-invent the wheels you don't need to know more about. Depending on your environment, some may frameworks may become obvious choices.

5 - Think about enhancement and optimizations like build systems, minification, linting, tdd, etc.

6 - Also, most important of all: Module Loaders. Take a look at Require.js It is a very nice way to break JS into modules, and then load them all in an optimized way.

Hope that helps.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.