event4 better javascript
DESCRIPTION
TRANSCRIPT
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