JavaScript for Programmers [old]

The aim of the page is to give practical and widely adopted industry best practices and guidelines for all phases of JavaScript development life cycle.

This was written originally around 2012, when from long time back-end programming in Java and C++ had to do some GUI programming. Many things are changed since. But still as a quick list this may help someone, or me later on. Now I would recommend TypeScript over JavaScript

Part 1: Sensitizing with JavaScript language

Persons coming from other languages may not appreciate certain coding guidelines that is recommended and set in SONAR JS Analysis and that is also checked by popular tools like JSHint and JSLint;

Example the function below will return ‘undefined’ and not ‘Hello World’.

This is because in JS semi columns are not mandatory and JS will add semi colon automatically during code interpretation; So it will add a semicolon after return making the function return nothing; Such and other such quirks are present in the language which entails the need for mandatory code analysis integration.

Part 2: JavaScript Basic Development Guidelines

Code Structuring

The NEED — There is no public , private concept in JS; Everything is attached to the global window name space; So if you add some global variables or functions and a JS library that you are including is doing the same then this will cause name space collisions; which basically means that you code may work in undefined ways. With technologies like portlets it becomes worse as the JS in one portlet can have the same function/object names as the JS in another and it is pretty common problem. Maybe you have not heard of portlet, but it was fad back then , a different take on Servlets. Now I guess there is only legacy usage.

Solution: Module Pattern where-ever possible ; or Nested NameSpace where you need to create new objects

Option1 :Module Pattern → See below; basically simulates private and public accessors via JavaScript Closures

More details regarding this pattern

http://briancray.com/posts/javascript-module-pattern

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

http://elegantcode.com/2011/02/15/basic-javascript-part-10-the-module-pattern

Option 2: Using NameSpace- Use this if you need to create new objects which is not possible with closures/module pattern

This function can be accessed from any js (preferably within the same portlet) like //TTT.Abc.statusTable.setId(123);

Do not put logic in JSP

First Do not use scriptlets

(Scriptlets is the Java Code you typeaway between <% %> tags in JSP; This is a very common mistake done by almost everybody starting our from Java background; BEWARE )

I t is a bad practice and a common beginner’s error; neither generate the HTML page in the Servlet (which is okay for HelloWorld but not for anything more complicated)

Second: Use JSP minimally and only if really needed

So what is the way ? Here is the gist → Instead of using a JSP, GSP, or ERB to assemble a page server side and send back HTML, we have the server send back just the dynamic data as JSON and have the page assembled in the browser :You can leave or read the rest of the LinkedIn story

When using JSP’s (minimally and when needed) use with already available taglibs (JSTL) or liferay provided (mandatory rule)

Use JSON for Servlet to JS communication

JSON is wonderful . In the Servlet side you can use either Google’s GSON library to create JSON objects and JS can read JSON objects as is as it is a JavaScript Object; I

f it comes encoded in a string use a library

Use JavaScript Libraries for DOM Manipulation

Browser implementation of JavaScript methods vary; It is highly recommended to use a high level JavaScript library like JQuery for DOM manipulation.

Make sure that the library used supports all popular A grade browsers and not just some browsers or maybe latest browsers etc. Hence the recommendation for JQuery

Code Analysis -Mandatory prerequisite for Code Review

The NEED — As illustrated in the beginning, there are certain conventions that need to be mandatorily followed in JS , unlike in other languages. Since the rules are too many to write here it is best thatcode analysis tools catch these.

During development — JSHint Eclipse Plugin.

This will help in development and also show at a glance in code review too. Kindly install this

SnapShot from Eclipse IDE on one file where it can dynamically check

Installation, Usage, History

JS SONAR Analysis report

Steps to integrate your ContentPack for generating JS SONAR Analysis are give in confluence page

Related information regarding SONAR JS Analysis Plugin and JS Code analysis.

JavaScript: The Good Parts Doug Crockford video, book, blog his tool-JSLint which is the basis of most other rules and tools today

(Doug Crockfords has invented JSHint , JSON etc and his advice is pretty good; but we should be pragmatic about this)

Unit testing (where ever JS logic needs to be tested)

JSTestDriver is used and integrated also to build (SVN link to ASC can give an idea to start)

Unit testing JavaScript — JSTestdriver

Java Script can do DOM manipulation as well as do client side logic . The logic part should be kept testable as much a possible and not intermingled with DOM manipulation everywhere. Wherever the logic is trivial then there is no need to unit test it. If there is some logic that needs to be tested the JSTestdriver can be used. Jasmine is another popular framework but I don’t have much experience in that as JSTD serves the purpose.

External Links

https://code.google.com/p/js-test-driver/wiki/GettingStarted

https://code.google.com/p/js-test-driver/

http://stackoverflow.com/questions/11144537/run-headless-jstestdriver

Integration Testing — Selenium WebDriver

Selenium 2 /Selenium WebDriver based Test cases with TestNG (JUnit does not have test case tagging feature, else it can only be used)

Note -With TEX only Firefox though Selenium WebDriver can support all Grade A browsers including iOS and Android browsers, and in development you can modify it slightly to run across these browsers. With the maven-fail-safe way of testing this limitation too should go. API docs are available here

Note : It is very easy to create fragile test cases if you don’t use the technology right; I have compiled a page with the usual pitfalls we have come up;

Part 3: JavaScript Advanced Development Guidelines (optional)

Minify and optimize your JavaScript

Use Google’s Closure compiler to minify and optionally to optimize the JS code; This needs to be mandatory if the JS code size is huge and a practise that is followed in the industry. Be careful of adnaced optimization levels as it needs JS code to be structured according to Google’s JavaScript guidelines (and has bugs in generated code )

Closure Compiler Compilation Levels (Recommended — SIMPLE_OPTIMIZATIONS from experience with trying out only)

Minifying can be done as a java jar command or via the maven plugin for this and use it

Online Generation: http://closure-compiler.appspot.com/home for trying out

Note- Minifying makes it difficult to debug; One way out of that which is supported by Firefox , chrome etc is using source-map compiler option for the closure compiler when generating the minified code.with this during debugging via browser tools the original source code can be seen.

Related Info — http://highscalability.com/blog/2011/7/12/google-is-built-using-tools-you-can-use-too-closure-java-ser.html

Performance Driven Development

WebPage Tuning- Browser Plugins

Tuning your pages the Easy WayPageSpeed Insights (by Google) -

Other options

Load and Performance runs GUI measurement- JMeter with WebDriver Plugin

http://jmeter-plugins.org/wiki/WebDriverTutorial/

SW Architect/programmer /designer - in various languages and technologies from 2001 to now. That’s the story so far…