write better javascript code

Write Better JavascriptEvent #4

Aymeric Gaurat Apelli Senior Developer

Who am I? Why a “Who am I?”

• Aymeric Gaurat-Apelli• .NET developer/consultant since first beta• Worked in France, Australia (Readify) and Thailand• Web entrepreneur • Facebook games (1M users/day)• http://taskarmy.com• http://weekplan.net (knockout.js SPA)

• Principal developer at Jetabroad (Thailand)

“Classes”Yes you can… kind of.

Want inheritance? http://ejohn.org/blog/simple-javascript-inheritance/

Coding principles

DRYDon’t repeat yourself

KISSSimplicity (and avoiding complexity) should always be a key goal.

YAGNIYou aren’t going to need it.

They apply to Javascript too!

Coding principles

LAW OF DEMETERCode components should only communicate with their direct relations

SRPA component of code (e.g. class or function) should perform a single well defined task.

DEPENDENCY INJECTIONDepend upon Abstractions. Do not depend upon Concretions.

Suggestion:http://jsfiddle.net/XejEY/1/

How would you rewrite this code?

JavascriptFrameworksMore structure for your code

Check outhttp://todomvc.com/

Templatingengines

Choose a template engine

http://jsfiddle.net/aPv9H/1/

Allow you to reuse snippets of HTML and to bind it to your data

Fast templating engine.

ScopeA bit different from C# http://madebyknight.com/javascript-scope/

http://jsfiddle.net/Ukv2R/1/

There is no block level scope.

ModulesThe solution to spaghetti code

Sample home grown module

AMD, the standard.

Popular AMD module loader: requirejs

Dependencies versus events

Dependencies versus eventsAfter refactoring

Router.js module

Unit testinghttp://qunitjs.com/intro/

http://pivotal.github.io/jasmine/

Random tips

1. Link to your javascript code at the end of your HTML document

2. Bundle and minify

3. Work with css classes instead of working with styling/animations

Example

Resourcesto learn

http://microjs.com/Fantastic micro libraries to use and learn from

http://dailyjs.comBlog about new stuff in the Javascript world

http://github.comSearch for javascript projects

http://terrariumjs.wiselabs.net

Thank you