Javascript Coding Standards and Best Programming Practices

ByAseem Sudha

IOMEDIAINTERACTIVE DIGITAL ARCHTECTS

Purpose of coding standards and best programming practices

• Easy maintenance

• Better efficiency

Who cares ?

Your Employer Your Co-workers, Present and Future

What happens ?

At work , you’re part of a team.Awesome happens when all are at one page.

Anatomy of an Application

• Modules• OOPS Concepts• Design Pattern

Modules

It is all about planning the application structure for easy maintenance and reusability.

OOPS Concepts• Inheritance

continue…

OOPS Concepts• Interface

Design Patterns(Observer pattern)

• Reusability• Flexibility• Reduce coupling

Code Styling• Variables• Functions• Folders and files• Access Modifiers• Loops• Black Box• Services• Scope of variables• Comments• Modifying Classes / Libraries / Functions

Variables• Use logical names for variables . - Don’t worry about length. - Don’t use names such as “temp” , “myLoader” , “foo” etc.• Use camel case e.g. “deviceToken”• Different naming for public and private variables. - private variable to start with “_” e.g. “_deviceToken”. - public variable to start without “_” e.g. “deviceToken”. - getters and setters to be named as “getName” and “setName”.• Avoid interference in global scope.• Name of templates in backbone based project same as template file

name.

continue…

Variables

continue…

• Proper structure of conditional statements e.g. if (condition) { statements } else if (condition) { statements } else { statements }• Easy to read e.g. if( (name == “abc” && address == “xyz”) )

• 1. Memory - new and delete. Destroy everything you create. • 2. USe inheritance when available. Extend your own classes when required.• 3. Use interfaces if available. • 4. Modification/Extended of libraries / existing classes / functions• GetMyClass()

{}

GetMyClassE(){}

• 5. Comments - RnD on JavaDocs & AS3 similar document generation - Initials - Date - Short Description - Parameter Desription

• 6. Access specifiers - DONT MAKE EVERYTHING PUBLIC/PRIVATE/PROTECTED. Understand and implement proper one.• 7. Know your editor - shortcuts, codegenerators• 8. Reduce Coupling - use design patterns where possible.

eg. Do not instantiate Objects of Module 1 in Module 2. Refer: Observer pattern. • 9. Sensitive to LOOPS - use the most efficient one. Avoid nesting.If nested, exit when precondition met.

- use helper methods within loops - use recursive methods.

• 10. DO NOT INTERFERE IN THE GLOBAL SCOPE.• 11. SVN - REsolve conflicts.• 12. OOPS! clear your concepts. var myVar is different from this.myVar!• 13. Start thinking black box!• 14. Fake your services.• 15. Understand Scoping - this/that and where your variables are defined/destroyed/accessible.• 12. Jquery is not god. Understand what is happening and which method is better to use.• 13. Make your code modular, make sure other people can easily integrate it into their modules.

Modifying Classes / Libraries / Functions

Naming Conventions and Standards

• Use logical names for functions. Don’t worry about length.• Function names should be like getName().• Function returning boolean should begin with “is” e.g. isValid().• loop variable name i change it to something else• camel case in case of function • folder structure of project.• Meaningful filename SeatCollection.js , DoctorListView.js• It is preferred that each variable be given its own line and

comment. They should be listed in alphabetical order.

• No getter setter so use _in parameters of a function.

Other points to remember• Keep functions out of the html. • Add comments with a proper format . E.g. //ASI:2014_01_14 collection for seats of a particular sectionVar seatCollection:Collection;

• String ConcatenationAlways use a space between the + and the concatenated parts to improve readability.var string = 'Foo' + bar;string = bar + 'foo';string = bar() + 'foo';string = 'foo' + 'bar';

• CamelCasingUnlike the variables and functions defined in Drupal's PHP, multi-word variables and functions in JavaScript should be lowerCamelCased. The first letter of each variable or function should be lowercase, while the first letter of subsequent words should be capitalized. There should be no underscores between the words.

• Exception handling

• In general, use functionNamesLikeThis, variableNamesLikeThis, ClassNamesLikeThis, EnumNamesLikeThis, methodNamesLikeThis, CONSTANT_VALUES_LIKE_THIS, foo.namespaceNamesLikeThis.bar, and filenameslikethis.js.

• Namespaces• JavaScript has no inherent packaging or namespacing support.• Global name conflicts are difficult to debug, and can cause intractable problems when two projects try to integrate. In order

to make it possible to share common JavaScript code, we've adopted conventions to prevent collisions.• Use namespaces for global code• ALWAYS prefix identifiers in the global scope with a unique pseudo namespace related to the project or library. If you are

working on "Project Sloth", a reasonable pseudo namespace would be sloth.*.• var sloth = {}; sloth.sleep = function() { ... };• Many JavaScript libraries, including the Closure Library and Dojo toolkit give you high-level functions for declaring your

namespaces. Be consistent about how you declare your namespaces.• goog.provide('sloth'); sloth.sleep = function() { ... };• Respect namespace ownership• When choosing a child-namespace, make sure that the owners of the parent namespace know what you are doing. If you

start a project that creates hats for sloths, make sure that the Sloth team knows that you're using sloth.hats.

• Namespace your JavaScript if you need to refer to it elsewhere.• Your JavaScript shouldn't be floating off in the global namespace, where it collides with other stuff you've included.• Although JavaScript doesn't have built-in notions of namespaces, its object model is flexible enough that you can emulate

them. Here's an example:• var MyNamespace = MyNamespace || {}; MyNamespace.MyModule = function() { // Your module is now in a namespace! }

• Getter and setter

• 3. Each JS file should have a header comment such as this:• /*------------------------------------------------------------------------- * Gui

framework classes for the Web Client are stored in this file. * * DEPENDENCIES * - Data.js * - Utils.js *-------------------------------------------------------------------------/

• /** * Utility method for getting product. * * @param int a A value. * @param int b Another value. */ function Utils_product(a, b) { return a*b; }

Function inside a function

• handleClick : function(event){ this.showPopUp(event.clientX, event.clientY);};

Backbone Stuff• Use routing• Complex view then create sub views• Use change event to update the or re render the view• Use models and collections for the views• If you rerender, before you call html(), call empty(). It will clean up memory

from the objects you won’t use anymore. Example: $(this.el).empty().html(mymodel.toJSON());

• Maintain the folder structure in all projects• Default file name as project_name.js• Main.js file name• Template name in _template same as templatename.js• Create a separate class for calling the services such as service controller.js

along with the comments

• Questions ?

IOMEDIA

• Thanks