Javascript - Avoiding the                        bad parts                                   Mikko Ohtamaa                ...
Lighting talk of 5 min                             Turn Python gurus to JS gurus                                Plone Conf...
Javascript has become                              better                             Don’t write Javascript like it was 1...
What your every JS file                    should look likeSaturday, November 5, 2011
/*global require,define,window,console*/                   // Main                   require(["jquery", "domready!",      ...
/*global require,define,window,console*/   // Submodule   define(["jquery", "myothermodule"], function($, myothermodule) {...
Use require.js                    • AMD (Asynchronous Module Definition)                    • a.k.a. import for Javascript ...
Use ECMAScript5                    • Goodies: this.function.bind(),                             Array.forEach()           ...
“use strict”;                   Enforces no global variables by default and fixes some                               other ...
Enforce background                    JSLint checking in your                          text editor                        ...
Saturday, November 5, 2011
// Some JSLint hinting                /*global window,console*/Saturday, November 5, 2011
Never use Javascript                               inline in HTMLSaturday, November 5, 2011
<a href=”#”                             onclick=”aargh()”>                                     NoSaturday, November 5, 2011
// On page load     $("a#handler").click(function() {         // do stuff     });     // For dynamic content     // (AJAX ...
Passing a bound                             method to an event                                handler using               ...
function FooClass(){  }  FooClass.prototype.myfunc = function(arg1,arg2) {  }  var f = new Foo();  // Bind arguments are t...
Finding Javascript info                    • Use Mozilla Developer Network: “MDN                             Javascript bi...
Conclusion                    • Worst JS farts have been fixed / can be                             worked around with disc...
Upcoming SlideShare
Loading in...5
×

Javascript - How to avoid the bad parts

4,764

Published on

A five minutes lighting talk presentation how to write Javascript by following the modern best practices and not in that crappy way when you where still studying web development circa HTML3.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,764
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Javascript - How to avoid the bad parts

  1. 1. Javascript - Avoiding the bad parts Mikko Ohtamaa mikko@opensourcehacker.com http://opensourcehacker.com http://twitter.com/moo9000Saturday, November 5, 2011
  2. 2. Lighting talk of 5 min Turn Python gurus to JS gurus Plone Conference 2011Saturday, November 5, 2011
  3. 3. Javascript has become better Don’t write Javascript like it was 1996Saturday, November 5, 2011
  4. 4. What your every JS file should look likeSaturday, November 5, 2011
  5. 5. /*global require,define,window,console*/ // Main require(["jquery", "domready!", "submodule"], function($, domready, submodule) { "use strict"; $("a").click(function() { var val = submodule.foobar(); window.alert(val); }); });Saturday, November 5, 2011
  6. 6. /*global require,define,window,console*/ // Submodule define(["jquery", "myothermodule"], function($, myothermodule) { use strict; // Export public module API return { foobar : function() { return 1+1+myothermodule.func(); } }; });Saturday, November 5, 2011
  7. 7. Use require.js • AMD (Asynchronous Module Definition) • a.k.a. import for Javascript • Dependency solving • Automatic compression and merging of needed and only needed JS files using require.js optimizerSaturday, November 5, 2011
  8. 8. Use ECMAScript5 • Goodies: this.function.bind(), Array.forEach() • Backwards compatibility (Internet Explorer): http://bit.ly/es5shimSaturday, November 5, 2011
  9. 9. “use strict”; Enforces no global variables by default and fixes some other bad language featuresSaturday, November 5, 2011
  10. 10. Enforce background JSLint checking in your text editor ... or JSLint modern fork, JSHintSaturday, November 5, 2011
  11. 11. Saturday, November 5, 2011
  12. 12. // Some JSLint hinting /*global window,console*/Saturday, November 5, 2011
  13. 13. Never use Javascript inline in HTMLSaturday, November 5, 2011
  14. 14. <a href=”#” onclick=”aargh()”> NoSaturday, November 5, 2011
  15. 15. // On page load $("a#handler").click(function() { // do stuff }); // For dynamic content // (AJAX loaded) $("#handler").live(function() { // do stuff });Saturday, November 5, 2011
  16. 16. Passing a bound method to an event handler using function.bind()Saturday, November 5, 2011
  17. 17. function FooClass(){ } FooClass.prototype.myfunc = function(arg1,arg2) { } var f = new Foo(); // Bind arguments are this, arg1, arg2 setTimeout(f.myfunc.bind(f, "arg1", "arg2"), 10);Saturday, November 5, 2011
  18. 18. Finding Javascript info • Use Mozilla Developer Network: “MDN Javascript bind” • Put w3school.com on ban-list - only bad information thereSaturday, November 5, 2011
  19. 19. Conclusion • Worst JS farts have been fixed / can be worked around with discipline • Javascript still lacks syntatic sugar, is not wrist friendly (boo!) • Mozilla et. al. are working on to fix that (but Philip didn’t promise do drop curly brackets or semicolons)Saturday, November 5, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×