November 07, 2015

Javascript Roadmap For Backend Developer

For the people who have been implementing backend part of application for a while(short or long term), and want to do some tasks in client side, Javascript can be an issue or challengeable topic . In this article I am sharing my experiences to draw a roadmap for the backend developers, how to deal with Javascript programming in order to have a clean and much more standardize front-end product.
As the tilte shows up, I am not going to dig into each section in detail, just mentioning keywords and as a roadmap.

1- How to Start Javascript
   
As you have been programming for a while, most probably you don’t want and need to listen about Array, Variables, String or loop in Javascript. It seems, It is going to be boring for experienced developers. But I recommend to find a good source to have a general overview and comparison between your back-end language and Javascript to get close to Javascript syntax and abilities very fast.
For example for C# developer I recommend this video course: https://www.pluralsight.com/courses/js4cs

2- Avoiding Global Scope
    All of us have the same experience, putting var or function at the top or bottom of html pages or even separate JS file. However it is working well but it is in Global Scope and has a great potential for spaghetti coding and also conflicts. Needless to say that how much hard to maintain and debug such sort of Javascript codes.

        You Must to Avoid Putting Objects and Variables in Global Scope.

Try to focus and learn about these topics, google them as much as possible:
  • Scope    
  • Namespace
  • Functions (As Class and Object)
  • Clouser
 3- Modularity in JavaScript
    It is the time to put different Javascript tasks into separate sections out of the Global Scope and enjoy reusable and maintainable scripts. Instead of linear functions which cause spaghetti coding, let’s implement Javascript Modules.

Just follow up these topics and learn about as much as possible:
  • Module Pattern
  • Prototype Pattern
  I highly recommend this PluralSight video about them: https://www.pluralsight.com/courses/structuring-javascript

Meanwhile when you are working on these topics do not forget to observe these rules in Javascript Modules:
  • No DOM Manipulation Outside a Module
  • No Hard Coupling to Other Modules
  • No Accessing Global/Native Objects
  •  No Global Declarations

 4- JQuery Beside Javascript
    Most probably you have been asked many times to manipulate DOM elements or play with event handlers in client side using one the most famous library, JQuery. So it can be a good idea to get more familiar how to deal with using JQuery beside Javascript specially in JS modules.

Like always best practices are the best way to follow. Again PluralSight video is one of my offer: https://www.pluralsight.com/courses/javascript-jquery-advanced-techniques

5- Object Oriented Programming In Javascript.
    Let’s start challenging with OOP in Javascript. There are a lot of points and techniques are waiting for you to encounter. You need to get engaged with them, but my strong suggestion is to learn general topics overly and just dive into the parts which are necessary for your job. Step By Step.

Do not forget to watch this video on youtube: https://www.youtube.com/watch?v=PMfcsYzj-9M

    And also my other notices about this section:
  • Be ready for “this” keyword which is really tricky in Javascript.
  • Do not forget to use: "use strict" at the top of Javascript files.
  • Function arguments are a big deal. Object Parameter with Default Values is a proper topic to investigate. it is ubiquitous in all Js libraries
6- Dependency Management:
    As you may solved the dependency Injection in server side coding using different techniques and libraries, you also have the same concern in front-end duties. Below you can find a list of libraries which help you to overcome dependency injection in Javascript. You can find more if you are desired.
  • RequireJs
  • CommonJs
  • AngularJs
7- Smart Asynchrony
   
One of the most common tasks that you have been and also will be asked to implement a lot, is loading some part of html page via Ajax request. Before implementing any kind of asynchronous job, at first read about the below topics which are really vital in this area for having a clean Javascript cod.
  • Promises (In Jquery)
  • AsyncLibraries
 8- Loose Coupling 
    I am going to explain the use of Loose Coupling via an example.

Let’s assume that you have a html page with 3 different columns . By clicking the left column - for instance a tree view - the middle section is supposed to fetch some data via ajax asynchronously and show extra elements. Also the same story with the user activity on the middle section which causes to load some extra elements inside the right section.
        What is the best way to implement this task? Publish/Subscriber pattern for loosely coupling.
Each column does not talk to another directly, When user click on the left column, this section just triggers an event and all subscriber to this event will receive a message.

Investigate on these libraries for doing loosely coupling in Javascript:
  • JQUERY EVENTS
  • AMPLIFYJS
  • ANGULARJS
9- Lazy loading
    Do not load all your Javascript files at the page header which leads a really heavy file and affect the performance. Load JS files on demand.
  • RequiresJs
  •  LazyLoadJs
 10 - Finally, You are receiving a lot of Bugs in Javascript!?
    If you have a lot of bugs at the beginning of your programming tasks just do not be panic and try to take a look at this Pluralsight video.
    https://www.pluralsight.com/courses/fixing-common-javascript-bugs