Event4 better javascript
Download as PPTX, PDF0 likes251 views
This document summarizes a presentation on writing better JavaScript. It introduces the presenter and their background. It then covers object-oriented concepts in JavaScript, common coding principles like DRY and KISS, how to structure code using modules and dependencies versus events, unit testing, code organization tips, and resources for learning JavaScript like libraries, blogs, and open source projects.
Event4 better javascript
- 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
- 14. Dependencies versus events After refactoring Router.js module
- 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