Friday, January 17, 2014

JS: the right way

A post by William Oliveira@http://jstherightway.org/ 


CHOOSE YOUR PATH

GETTING STARTED

ABOUT

Created by Netscape in 1995 as an extension of HTML for Netscape Navigator 2.0, JavaScript had as its main function the manipulation of HTML documents and form validation. Before winning this name so famous nowadays, JavaScript was called Mocha, after LiveScript and finally, when it was released by Sun Microsystems, was baptized with the name by which he is known today. Because of the similar names, people confuses JavaScript with Java. Although both have the lexical structure of programming, they are not the same language. Different from C, C# and Java, JavaScript is an interpreted language. It means that it needs an "interpreter". In case of JavaScript, the interpreter is the browser.

CURRENT VERSION

The JavaScript standard is ECMAScript. As of 2012, all modern browsers fully support ECMAScript 5.1. Older browsers support at least ECMAScript 3. A 6th major revision of the standard is being worked on.
A good reference to versions, references and news about JavaScript, you can find at Mozilla Developer Network.

THE DOM

The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript. See more at Mozilla Developer Network - DOM.

JS CODE STYLE

CONVENTIONS

As every language, JavaScript has many code style guides. Maybe the most used and recommended is the Google Code Style Guide for JavaScript, but we recommend you to read the Idiomatic.js.

LINTING

Nowadays the best tool to linting your JS code is the JSHint. We recommend you whenever possible to verify you code style and patterns with a Lint tool.

THE GOOD PARTS

OBJECT ORIENTED

JavaScript has strong object-oriented programming capabilities, even though some debates have taken place due to the differences in object-oriented JavaScript compared to other languages.

ANONYMOUS FUNCTIONS

Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions.

FUNCTIONS AS FIRST-CLASS OBJECTS

Functions in javascript are first class objects. This means that javascript functions are just a special type of object that can do all the things that regular objects can do.

LOOSE TYPING

For many front end developers, JavaScript was their first taste of a scripting and/or interpretive language. To these developers, the concept and implications of loosely typed variables may be second nature. However, the explosive growth in the demand for Web 2.0-ish applications has resulted in a growing number of back end developers that have had to dip their feet into pool of client side technologies. Many of these developers are coming from a background in strongly typed languages, such as C# and Java, and are unfamiliar with both the freedom and the potential pitfalls involved in working with loosely typed variables.

PATTERNS

DESCRIPTION

Too many of the classical design patterns are implemented and have uses in JavaScript and there are some JS Patterns that are exclusive.
A good way to learn about these is Addy Osmani’s open source book Learning JavaScript Design Patterns, and the links below are (in the majority) based on it.

DESIGN PATTERNS

Creational Design Patterns
Structural Design Patterns
Behavioral Design Patterns

MV* PATTERNS

There are some implementations of the traditional MVC Pattern and its variations in JS

TESTING TOOLS

DESCRIPTION

Various libraries and frameworks to do tests in JavaScript.

LINKS

Created by TJ Holowaychuk
Created by jQuery
Created by Pivotal Labs
Created by John Resig
Created by Choan Gálvez
Created by the team behing AngularJS. Mostly by Vojta Jina
Created by Sitepen

FRAMEWORKS

CLIENT-SIDE

  • jQuery
  • jQuery is a fast, small, and feature-rich JavaScript library. Built by John Resig.
  • Backbone.js
  • Very popular JS client-site framework, built by @jashkenas.
  • Ember.js
  • Built by @wycats, jQuery and Ruby on Rails core developer.
  • Knockout.js
  • Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM).
  • Angular.js
  • Built by Google, Angular.js is like a polyfill for the future of HTML
  • Cappuccino
  • Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.
  • JavaScript MVC
  • JavaScriptMVC is an open-source framework containing the best ideas in jQuery development.
  • YUI
  • Built by Yahoo!, YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.
  • ZeptoJS
  • Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
  • Dojo Toolkit
  • Dojo is a free, open source JavaScript toolkit for building high performance web applications. Project sponsors include IBM and SitePen.

    READING

    ARTICLES

  • Understanding JavaScript OOP
  • Understanding “Prototypes” in JavaScript
  • Understanding JavaScript Function Invocation and “this”
  • Partial Application in JavaScript
  • BOOKS

  • JavaScript: The Definitive Guide
  • JavaScript: The Good Parts
  • Test-Driven JavaScript Development
  • JavaScript Patterns
  • High Performance JavaScript
  • Eloquent JavaScript
  • FREE E-BOOKS

    PORTALS