2013-06-15 - Software Craftsmanship mit JavaScript
0 likes633 views
The document discusses principles and tools of software craftsmanship, focusing on JavaScript practices like avoiding global variables, using the revealing module pattern, and implementing test-driven development (TDD). It also provides examples of code to demonstrate key concepts, highlights best practices in error handling, and mentions tools like Jasmine for testing. Ultimately, it emphasizes continuous learning and improvement in coding through self-reflection and peer feedback.
![Associative arrays
they don't exist
var x = [];
x['foo'] = "bar";](https://image.slidesharecdn.com/2013-06-15-johanneshoppe-softwarecraftsmanshipmitjavascript-130615051744-phpapp01/85/2013-06-15-Software-Craftsmanship-mit-JavaScript-9-320.jpg)
![Globals
the mother of all antipatterns
function foo() {
return "bar";
}
console.log(this['foo']());](https://image.slidesharecdn.com/2013-06-15-johanneshoppe-softwarecraftsmanshipmitjavascript-130615051744-phpapp01/85/2013-06-15-Software-Craftsmanship-mit-JavaScript-14-320.jpg)
![Lookup tables
avoid the switch-case syndrome
var methods = {
1: doFirst,
2: doSecond,
3: doThird
};
if (methods[something]) {
methods[something]();
}](https://image.slidesharecdn.com/2013-06-15-johanneshoppe-softwarecraftsmanshipmitjavascript-130615051744-phpapp01/85/2013-06-15-Software-Craftsmanship-mit-JavaScript-19-320.jpg)
![Modul loaders
use AMD (require.js)
define('test', ['jquery'], function() {
return {
saySomething : function() { alert("hello!"); }
}
});
require(['test'], function(t) {
t.saySomething();
});](https://image.slidesharecdn.com/2013-06-15-johanneshoppe-softwarecraftsmanshipmitjavascript-130615051744-phpapp01/85/2013-06-15-Software-Craftsmanship-mit-JavaScript-21-320.jpg)
2013-06-15 - Software Craftsmanship mit JavaScript
- 1. Software Craftsmanship bit.ly/jsCraftsmanship Interaktive Version der Präsentation! Created by Johannes Hoppe
- 2. JohannesHoppe.de bit.ly/jsCraftsmanship Interaktive Version der Präsentation!
- 5. Implied globals Forgetting var var foo = function() { bar = 1; };
- 6. Boolean type conversion To Truthy or to Falsy. That is the only question! var el = document.getElementById('does_not_exist'); if(el == false) { alert("shouldn't we see this message?!"); }
- 7. Trailing comma works on my machine! var foo = { bar: "bar", baz: "baz", };
- 8. Return undefined señor developers wear mustaches { var foo = function() { return { x : "looks like C# now!" }; }
- 9. Associative arrays they don't exist var x = []; x['foo'] = "bar";
- 10. try .. catch .. finally who cares about the reason? var foo = function() { try { doCrazyStuff; } catch (e) { return false; } return true; };
- 11. Hoisting declare upfront all variables var foo = "global"; var bar = function() { alert(foo); var foo = "local"; alert(foo); };
- 12. Eval ... and the job is done function poorMansJsonParser(text) { return eval("(" + text + ")"); } var text = ' { "hello" : "world" } '; var json = poorMansJsonParser(text);
- 13. Eval is evil! Never ever! var text = ' function() { alert("hacked!"); })( ';
- 14. Globals the mother of all antipatterns function foo() { return "bar"; } console.log(this['foo']());
- 15. Every time you clutter the global namespace, somewhere in the world a helpless kitten dies!
- 17. Globals reduce, minimize, delete or kill them (function() { "wtf?" })();
- 18. The switch-case syndrome a functional language wants functions! switch (something) { case 1: doFirst(); break; case 2: doSecond(); break; case 3: doThird(); break; }
- 19. Lookup tables avoid the switch-case syndrome var methods = { 1: doFirst, 2: doSecond, 3: doThird }; if (methods[something]) { methods[something](); }
- 20. Revealing Module Pattern var myRevealingModule = function () { var _name = "Johannes"; function greetings() { console.log("Hello " + _name); } function setName(name) { _name = name; } return { setName: setName, greetings: greetings }; }(); » Documentation
- 21. Modul loaders use AMD (require.js) define('test', ['jquery'], function() { return { saySomething : function() { alert("hello!"); } } }); require(['test'], function(t) { t.saySomething(); });
- 22. Events Publish/Subscribe Pattern var $events = $({}); $events.bind('somethingHappens', function() { alert("Something happened!"); }); $events.trigger('somethingHappens');
- 23. Werkzeuge
- 24. Visual Studio 2010/2012 / F12 JScript Editor Extensions Resharper 7.1 JSHint Chutzpah Firebug
- 25. TDD with Jasmine
- 26. Why Jasmine? BDD-style similar to JSpec or RSpec, created by authors of jsUnit and Screw.Unit independent from any browser, DOM, framework or host language integrates into continuous build systems
- 28. Output finished in 0.009s ••••• No try/catch Jasmine 1.3.1 revision 1354556913 Passing5specs Player should be able to play a Song when song has been paused should indicate that the song is currently paused should be possible to resume tells the current song if the user has made it a favorite #resume should throw an exception if song is already playing
- 29. Hello World hint: press F12 and paste this code! var helloWorld = function() { return "Hello World!"; }; describe('helloWorld', function() { it('says hello', function() { expect(helloWorld()).toEqual("Hello World!"); }); }); jasmine.getEnv().execute();
- 31. If I would have had time... “ ”
- 32. You will never have time!
- 33. Learn TDD Improve by self reflection Improve by feedback of others Help others to improve Teach TDD Learn a new language
- 34. Test-Driven Development 1. Write your tests 2. Watch them fail 3. Make them pass 4. Refactor 5. Repeat see , page 6 see , page 62 or many other Growing Object-Oriented Software, Guided by Tests Working Effectively with Legacy Code
- 35. 1. Write your test describe("saveFormat", function () { var original = '{0} - {1} - {2}'; it("should replace placeholders", function () { var expected = 'A - B - C'; var formated = saveFormat(original, 'A', 'B', 'C'); expect(formated).toEqual(expected); }); it("should encode injected content", function () { var expected = 'A - <b>TEST</b> - C'; var formated = saveFormat(original, 'A', '<b>TEST</b>', 'C'); expect(formated).toEqual(expected); }); });
- 36. 2. Watch them fail var saveFormat = function() { return "boo!"; }; jasmine.getEnv().execute(); Demo
- 37. 3. Make them pass var saveFormat = function(txt) { $(arguments).each(function (i, item) { if (i > 0) { item = ($('<div/>').text(item).html()); txt = txt.replace("{" + (i - 1) + "}", item); } }); return txt; }; jasmine.getEnv().execute(); Demo
- 38. 4. Refactor function htmlEncode(input) { return ($('<div/>').text(input).html()); } var saveFormat = function(txt) { $.each(arguments, function (i, item) { if (i > 0) { item = htmlEncode(item); txt = txt.replace("{" + (i - 1) + "}", item); } }); return txt; }; jasmine.getEnv().execute(); Demo
- 39. 5. Repeat function htmlEncode(input) { return ($('<div/>').text(input).html()); } var saveFormat = function() { var args = Array.prototype.slice.call(arguments); var txt = args.shift(); $.each(args, function (i, item) { item = htmlEncode(item); txt = txt.replace("{" + i + "}", item); }); return txt; }; jasmine.getEnv().execute(); Demo