Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

2013-06-24 - Software Craftsmanship with JavaScript

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
PHP 5 Magic Methods
PHP 5 Magic Methods
Wird geladen in …3
×

Hier ansehen

1 von 41 Anzeige

2013-06-24 - Software Craftsmanship with JavaScript

Herunterladen, um offline zu lesen

Entwickeln Sie Clean Code mit JavaScript. Den “Software Craftsman” zeichnen dabei Wissen, Werkzeuge und Wiederholung aus. Diese drei Grundfeste werden speziell für JavaScript beleuchtet. Lernen Sie die wichtigsten Patterns für eine stabile und wartbare Website kennen. Überprüfen Sie Ihre persönliche Werkzeugkiste für Entwicklung, Testing und Deployment. Schließen Sie Bekanntschaft mit Code Katas für JavaScript.

Entwickeln Sie Clean Code mit JavaScript. Den “Software Craftsman” zeichnen dabei Wissen, Werkzeuge und Wiederholung aus. Diese drei Grundfeste werden speziell für JavaScript beleuchtet. Lernen Sie die wichtigsten Patterns für eine stabile und wartbare Website kennen. Überprüfen Sie Ihre persönliche Werkzeugkiste für Entwicklung, Testing und Deployment. Schließen Sie Bekanntschaft mit Code Katas für JavaScript.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Anzeige

Ähnlich wie 2013-06-24 - Software Craftsmanship with JavaScript (20)

Weitere von Johannes Hoppe (20)

Anzeige

Aktuellste (20)

2013-06-24 - Software Craftsmanship with JavaScript

  1. 1. Software Craftsmanship bit.ly/jsCraftsmanship Interaktive Version der Präsentation! Created by Johannes Hoppe
  2. 2. JohannesHoppe.de bit.ly/jsCraftsmanship Interaktive Version der Präsentation!
  3. 3. PrinzipienWissen Werkzeuge Wiederholung
  4. 4. WissenKnow the pitfalls
  5. 5. Implied globals Forgetting var var foo = function() { bar = 1; };
  6. 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. 7. Trailing comma works on my machine! var foo = { bar: "bar", baz: "baz", };
  8. 8. Return undefined señor developers wear mustaches { var foo = function() { return { x : "looks like C# now!" }; }
  9. 9. Associative arrays they don't exist var x = []; x['foo'] = "bar";
  10. 10. try .. catch .. finally who cares about the reason? var foo = function() { try { doCrazyStuff; } catch (e) { return false; } return true; };
  11. 11. Hoisting declare upfront all variables var foo = "global"; var bar = function() { alert(foo); var foo = "local"; alert(foo); };
  12. 12. Eval ... and the job is done function poorMansJsonParser(text) { return eval("(" + text + ")"); } var text = ' { "hello" : "world" } '; var json = poorMansJsonParser(text);
  13. 13. Eval is evil! Never ever! var text = ' function() { alert("hacked!"); })( ';
  14. 14. Globals the mother of all antipatterns function foo() { return "bar"; } console.log(this['foo']());
  15. 15. Every time you clutter the global namespace, somewhere in the world a helpless kitten dies!
  16. 16. WissenPretty Code
  17. 17. Globals reduce, minimize, delete or kill them (function() { "wtf?" })();
  18. 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. 19. Lookup tables avoid the switch-case syndrome var methods = { 1: doFirst, 2: doSecond, 3: doThird }; if (methods[something]) { methods[something](); }
  20. 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. 21. Modul loaders use AMD (require.js) define('test', ['jquery'], function() { return { saySomething : function() { alert("hello!"); } } }); require(['test'], function(t) { t.saySomething(); });
  22. 22. Events Publish/Subscribe Pattern var $events = $({}); $events.bind('somethingHappens', function() { alert("Something happened!"); }); $events.trigger('somethingHappens');
  23. 23. Werkzeuge
  24. 24. Visual Studio 2010/2012 / F12 JScript Editor Extensions Resharper 7.1 JSHint Chutzpah Firebug
  25. 25. TDD with Jasmine
  26. 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
  27. 27. Jasmine Bootstrap <!DOCTYPEhtml> <html> <head> <title>JasmineSpecRunner</title> <linkrel="stylesheet"href="lib/jasmine-1.3.1/jasmine.css"/> <scriptsrc="lib/jasmine-1.3.1/jasmine.js"></script> <scriptsrc="lib/jasmine-1.3.1/jasmine-html.js"></script> <!--includesourcefileshere...--> <scriptsrc="src/Player.js"></script> <scriptsrc="src/Song.js"></script> <!--includespecfileshere...--> <scriptsrc="spec/SpecHelper.js"></script> <scriptsrc="spec/PlayerSpec.js"></script> <script> (function(){ varhtmlReporter=newjasmine.HtmlReporter(); varjasmineEnv=jasmine.getEnv(); jasmineEnv.addReporter(htmlReporter); jasmineEnv.specFilter=function(spec){ returnhtmlReporter.specFilter(spec); }; varcurrentWindowOnload=window.onload; window.onload=function(){
  28. 28. Output finished in 0.05s ••••• 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. 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();
  30. 30. Wiederholung 形 形 形形
  31. 31. If I would have had time... “ ”
  32. 32. You will never have time!
  33. 33. Learn TDD Improve by self reflection Improve by feedback of others Help others to improve Teach TDD Learn a new language
  34. 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. 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 - &lt;b&gt;TEST&lt;/b&gt; - C'; var formated = saveFormat(original, 'A', '<b>TEST</b>', 'C'); expect(formated).toEqual(expected); }); });
  36. 36. 2. Watch them fail var saveFormat = function() { return "boo!"; }; jasmine.getEnv().execute(); Demo
  37. 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. 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. 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
  40. 40. Deep practice codekata.pragprog.com katas.softwarecraftsmanship.org
  41. 41. Danke! blog.johanneshoppe.de

×