1. Write Better Javascript
Event #4
Aymeric Gaurat Apelli
Senior Developer

2. 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)

3. “Classes”
Yes you can… kind of.
Want inheritance?
http://ejohn.org/blog/simple-javascript-inheritance/

4. Coding
principles
They apply to Javascript too!
DRY
Don’t repeat yourself
KISS
Simplicity (and avoiding complexity)
should always be a key goal.
YAGNI
You aren’t going to need it.

5. Coding
principles
LAW OF DEMETER
Code components should only
communicate with their direct relations
SRP
A component of code (e.g. class or function)
should perform a single well defined task.
DEPENDENCY INJECTION
Depend upon Abstractions.
Do not depend upon Concretions.

6. How would you rewrite this code?
Suggestion:
http://jsfiddle.net/XejEY/1/

7. Javascript
Frameworks
More structure for your code
Check out
http://todomvc.com/

8. Templating
engines
Allow you to reuse snippets of
HTML and to bind it to your data
http://jsfiddle.net/aPv9H/1/
Choose a template engine
Fast templating engine.

9. Scope
There is no block level scope.
A bit different from C#
http://madebyknight.com/javascript-scope/
http://jsfiddle.net/Ukv2R/1/

10. Modules
The solution to spaghetti code

11. Sample home grown module

12. AMD, the standard.
Popular AMD module loader: requirejs

13. Dependencies versus events

14. Dependencies versus events
After refactoring
Router.js module

15. Unit testing
http://qunitjs.com/intro/
http://pivotal.github.io/jasmine/

16. 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

17. Resources
to learn
http://microjs.com/
Fantastic micro libraries
to use and learn from
http://dailyjs.com
Blog about new stuff
in the Javascript world
http://terrariumjs.wiselabs.net
http://github.com
Search for javascript projects

18. Thank you