Javascript - How to avoid the bad parts

  • 4,570 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,570
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
29
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Javascript - Avoiding the bad parts Mikko Ohtamaa mikko@opensourcehacker.com http://opensourcehacker.com http://twitter.com/moo9000Saturday, November 5, 2011
  • 2. Lighting talk of 5 min Turn Python gurus to JS gurus Plone Conference 2011Saturday, November 5, 2011
  • 3. Javascript has become better Don’t write Javascript like it was 1996Saturday, November 5, 2011
  • 4. What your every JS file should look likeSaturday, November 5, 2011
  • 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. /*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. 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. Use ECMAScript5 • Goodies: this.function.bind(), Array.forEach() • Backwards compatibility (Internet Explorer): http://bit.ly/es5shimSaturday, November 5, 2011
  • 9. “use strict”; Enforces no global variables by default and fixes some other bad language featuresSaturday, November 5, 2011
  • 10. Enforce background JSLint checking in your text editor ... or JSLint modern fork, JSHintSaturday, November 5, 2011
  • 11. Saturday, November 5, 2011
  • 12. // Some JSLint hinting /*global window,console*/Saturday, November 5, 2011
  • 13. Never use Javascript inline in HTMLSaturday, November 5, 2011
  • 14. <a href=”#” onclick=”aargh()”> NoSaturday, November 5, 2011
  • 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. Passing a bound method to an event handler using function.bind()Saturday, November 5, 2011
  • 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. Finding Javascript info • Use Mozilla Developer Network: “MDN Javascript bind” • Put w3school.com on ban-list - only bad information thereSaturday, November 5, 2011
  • 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