Diese Präsentation wurde erfolgreich gemeldet.

Enterprise JS

0

Teilen

Wird geladen in …3
×
1 von 93
1 von 93

Enterprise JS

0

Teilen

Beschreibung

Um Bilder und Grafiken "bereinigte" Version des Vortrags bei der JUG Ostfalen.

Nahezu jede große Website – egal ob das Backend in Java, PHP, Ruby oder Python programmiert wurde – verwendet im Browser JavaScript als Sprache. Software-Artefakte, die in JavaScript erstellt wurden, werde zunehmend wichtiger, da Logik in letzter Zeit tendenziell wieder vom Server zurück in den Browser wandert. JavaScript-Entwicklung ist im Alltag des Enterprise-Entwicklers angekommen. Teils muss er als Backend-Entwickler JavaScript-Code überarbeiten, der z.B. von einer Webagentur erstellt wurde, teils muss er auch selbst JavaScript-Artefakte erzeugen oder ein ganzes Framework oder eine Library in JavaScript schreiben oder pflegen.Der erste Teil des Vortrags richtet sich an Enterprise-Enwickler (meist mit einem Java-EE-Hintergrund), die sich für JavaScript interessieren, sich schnell darin einarbeiten wollen und Tipps suchen, dieses Ziel zu erreichen. Dabei werden einige Grundlagen der Sprache vorgestellt. Dieser Teil des Vortrags soll eher Lust auf Mehr machen als fundamentales Wissen in aller Tiefe zu vermitteln.Enterprise-Entwicklung ist in der Regel Teamarbeit. Eine große Codebasis mus wartbar bleiben. Im zweiten Teil des Vortrags werden Techniken und Tools vorgestellt, die dabei helfen können, eine geeignete Codequalität zu erreichen und zu wahren

Transkript

  1. 1. Enterprise JavaScript. Abendvortrag „JavaScript für Java Enterprise-Entwickler“
  2. 2. Holisticon AG "Die Holisticon AG ist eine Management- und IT-Beratung mit Sitz in Hamburg. Mit einem ganzheitlichen Beratungsansatz unterstützen wir unsere Kunden in ihren Entwicklungsprojekten auf technischer, taktischer wie auch strategischer Ebene." 2
  3. 3. Roadmap Grundlagen von JavaScript Wartbarer Code KISS-Architekturen 3
  4. 4. JS Grundlagen von JS Core 4
  5. 5. Primordial Soup 1995 Mocha Netscape Navigator LiveScript Netscape Navigator 1996 JavaScript 1.0 Sun|Netscape Alliance JScript Internet Explorer 3.0 ECMAScript ECMA 5
  6. 6. Brendan Eich Scheme im Web-Browser HTML scripting language make it look like Java made it look like C and AWK Mistakes (some recapitulating LISP) were frozen early Inhalt: http://de.slideshare.net/BrendanEich/splash-9915475 Bild: Mozilla Digital Memory Bank, Object #135, 19 May 2006, http://mozillamemory.org/detailview.php?id=135 6
  7. 7. Design goals Copy/paste snippets of code into HTML Tolerate “minor” errors (e.g., missing semicolons) Simplified event handling onlick, onmouseover inspired by HyperCard Pick a few hard-working, powerful primitives First class functions for procedural abstraction (AWK more than Scheme) Objects everywhere, prototype-based (Self, but only one parent per object) Leave all else out! 7 Bild: Some rights reserved by superfluity, http://www.flickr.com/photos/equanimity/
  8. 8. 1980er Jahre: Xerox PARC & Sun Microsystems Ziel: mehr Freiheit als bei OO-Sprachen wie Smalltalk Wenige Konstrukte: • Slots • Traits • Prototypen • keine Typen und Klassen 8 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  9. 9. Self: The Power of Simplicity Keine Unterscheidung zwischen • dem Verhalten eines Objekts (Methoden einer Klasse) • dem Zustand des Objekts (Eigenschaften einer Klasse) Ein Objekt besteht aus Slots. • Slots haben einen Namen. • Slots können Methoden oder Attribute aufnehmen. 9 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  10. 10. Self: The Power of Simplicity Objekterzeugung ohne Klassen. Neue Objekte erzeugen durch das Klonen existierender Objekte. Objekten können zur Laufzeit Slots hinzugefügt werden. 10 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  11. 11. Self: The Power of Simplicity Einzelne Slots können an einen „Parent“ delegieren, indem sie den Slot nicht überschreiben. Trait-Objekte sind abgespeckte Implementierungen (Mixins). 11 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  12. 12. Scheme: minimalistic LISP Comic: XKCD, http://xkcd.com/224/ Bild: NASA Goddard Photo and Video, http://commons.wikimedia.org/wiki/File:Hubble%27s_Wide_View_of_%27Mystic_Mountain%27_in_Infrared.jpg Das Grundprinzip von Scheme ist es, eine Sprache nicht dadurch mächtig werden zu lassen, indem man immer mehr Features hinzufügt, sondern indem man Einschränkungen entfernt. Es gab Scheme-Implementierungen von JavaScript. 12
  13. 13. Java vs. JavaScript „Why two programming languages?“ Answer: division of labor, specialization Java for high-priced components/widgets (applet/plugin model) JavaScript for mass market web designers (glue code between components, scripting of Java Applets, form validation, image rollovers,) In the last decade Java has almost disappeared on the client side of the Web Inhalt: http://de.slideshare.net/BrendanEich/splash-9915475 13 Bild: Martin Kliehm from Frankfurt am Main, Germany, http://commons.wikimedia.org/wiki/File:Brendan-Eich-20080310.jpg
  14. 14. Война и миръ ES3 (2000) Netscape Navigator 6, Firefox 1.0, Internet Explorer 5.5-8 (functions expressions, RegExp, try-catch-finally, switch, do-while) ES4 (2008) ActionScript 2-3 in Adobe Flash Project Harmony wird gestartet ES5 (2010) Firefox 4 Internet Explorer 9/10 WebKit (strict mode, neues Objektmodell, bessere Arrays, API-Verbesserungen) ES6 aka ES.Next aka Harmony (Block Scopes, Modules, optional Arguments, Classes) Bild: Deutsches Bundesarchiv (German Federal Archive), Bild 183-14059-0018 14 http://commons.wikimedia.org/wiki/File:Bundesarchiv_Bild_183-14059-0018,_Berlin,_Oberbefehlshaber_der_vier_Verb%C3%BCndeten.jpg
  15. 15. Versionen Java-Script ECMA-Script Firefox Internet Opera Safari Chrome Explorer 1.5 3 1.0 5.5 - 8 6.0 - 10.0 3.0 - 4.0 1 1.6 E4X 1.5 1.7 2.0 1.8 3.0 1.9 5 4 9 11 5.0 5 5.1 latest 10 11.60 5.1 13 15
  16. 16. These Nur in einer statisch typisierten Sprache lässt sich zuverlässiger Code schreiben. JS kennt keine Typisierung 17
  17. 17. Dynamische Typisierung 18
  18. 18. Typen 19
  19. 19. Basistypen Basistypen sind • Zahlen (number) • Strings (string) • Boolean (boolean) • null • undefined Diese sind unveränderlich. 20
  20. 20. These JS ist eine Script-Sprache Eine strukturierte / objektorientierte Programmierung ist nicht möglich 22
  21. 21. Objekte Alle Datentypen außer Basistypen sind Objekte: • Arrays, • Funktionen, • Reguläre Ausdrücke (Funktionen) und • Objekte selbst 23
  22. 22. Object // Objects map keys (string) to values (properties): var obj = new Object(); // there is an Object literal var myCar = { ‘brand’: ‘Ferrari’, ‘color’: ‘red’, ‘drive’: function() {....} }; 24
  23. 23. Method Invocation var myObject = { val: 0, increment: function (inc) { this.val += inc; } }; myObject.increment(1); myObject.val; // 1 25
  24. 24. JSON json = { ‘Array : [1, ‘zwei’,Math.PI], ‘Date" : ‘Thu Apr 26 2012 22:45:19 GMT+0200 (CEST) ’, ‘String" : ‘Hello World’, ‘Boolean’ : true, ‘Number’ : 42, ‘RegExp’ : /^(a-ZA-Z)*$/, ‘Binary’ : ‘data:image/png;base64,iVBORw0KGgoAAAAN==’, ‘Reference’ : ‘http://www.holisticon.de/about.rdf’, ‘Object’ : {[...]} // no functions! } 26
  25. 25. These Objektorientierte Programmierung ist nur klassenbasiert möglich JS bietet keine Klassen JS bietet kein eigenes Typsystem 28
  26. 26. Prototypen Objekte werden über das new-Keyword und eine Konstruktor-Funktion gebildet. Konstruktor-Funktionen beginnen per Konvention mit einem Großbuchstaben (im Ggs. zu „normalen“ Funktionen). 29
  27. 27. Constructor /** * @Constructor */ function Rectangle(width, height) { this.width = width; this.height = height; } // Benutzung var myRectangle = new Rectangle(5, 5); myRectangle.width; // 5 30
  28. 28. Das new-Keyword Wird die new-Anweisung vergessen, dann wird die Funktion nicht als Konstruktor-Funktion aufgerufen. Es steht dann kein neues Objekt als this-Objekt zur Verfügung. Das this-Objekt ist dann beispielsweise das globale Objekt. Das heißt, die Funktion wird die übergebenen Parameter dem globalen Objekt zuweisen. 31
  29. 29. Prototype erweitern // zwei Rechtecke erzeugen var firstRectangle = new Rectangle(5, 5); var secondRectangle = new Rectangle(10,10); // den Prototypen _aller_ Rechtecke erweitern Rectangle.prototype.color = "blue"; firstRectangle.color; // blue 32
  30. 30. Reflection Rectangle.prototype.color = "blue"; firstRectangle.color; // blue firstRectangle.hasOwnProperty("color"); // false 33
  31. 31. Eigenschaften löschen Rectangle.prototype.color = "blue‚; firstRectangle.color = "red‚; firstRectangle.color; // red delete firstRectangle.color; // true firstRectangle.color; // blue 34
  32. 32. Konstruktor- & Protoype-Referenz /** * Patterns für Vererbung sind über Konstruktor- und * Prototype-Referenz möglich */ // Konstruktor-Referenz var firstRectangle = new Rectangle(4, 4); firstRectangle.constructor.name; // Rectangle var secondRectangle = new firstRectangle.constructor(5, 5); // Prototype-Referenz firstRectangle.__proto__ == Rectangle.prototype // Chrome way firstRectangle.constructor.prototype == Rectangle.prototype // ES3 35
  33. 33. Mixins function mixin() { child = {}; for (var arg = 0; arg < arguments.length; arg ++) { for (var prop in arguments[arg]) { if (arguments[arg].hasOwnProperty(prop)) { child[prop] = arguments[arg][prop]; } } } return child; } 36
  34. 34. Mixins var wolpertinger = mixin( {fly : function() {print("fly");}}, {swim: function() {print("swim");}}, {bark: function() {print("bark");}} ) wolpertinger.bark(); // bark 37
  35. 35. jQuery.extend // http://api.jquery.com/jQuery.extend/ // Merge the contents of two or more objects together // into the first object var wolpertinger = $.extend({}, duck, dog); 38
  36. 36. Duck Typing Wenn ein Objekt aussieht wie eine Ente und sich verhält wie eine Ente, dann ist es auch eine Ente. (Und wenn es nicht aussieht wie eine Ente, dann lässt es sich zur Laufzeit so erweitern, dass es aussieht wie eine Ente.) 39
  37. 37. ES5, ES6 und TypeScript Mit ES5 wurde eine neue Objekt-Erzeugung (mit Vererbung von Objekten) eingeführt. ES6 wird voraussichtlich Klassen bringen. Auch in ES3 lässt sich Vererbung (über Patterns) implementieren. Wem diese Patterns zu unbequem sind, kann eine Meta- Sprache wie TypeScript verwenden, die voraussichtlich evtl. kompatibel zu ES6 sein wird, aber zu ES3 kompiliert. 40
  38. 38. Funktionen Funktionen sind gleichwertig zu Objekten. Funktionen können als Parameter eine andere Funktion übergeben und auch als Rückgabewert zurückgegeben werden. 42
  39. 39. Funktionsliteral function plus(x, y) { return x + y; // ansonsten undefined } plus(1,2); // 3 43
  40. 40. Funktionen als Parameter // http://jsfiddle.net/oochs/EAHTU/ // Sortiere ein Array mit einer anonymen Funktion als Sortiervorschrift var numbers = [27, 2, 10, 4]; var lexicalySortedNumbers = [10,2,27,4]; var sortedNumbers = [2,4,10,27]; numbers.sort(); console.log(String(numbers) !== String(sortedNumbers)); // ouch! console.log(String(numbers) === String(lexicalySortedNumbers)); // übergebe der sort-funktion eine Funktion als Parameter numbers.sort(function(a, b) { return a-b; }); console.log(String(numbers) === String(sortedNumbers)); 44
  41. 41. Funktionen als Parameter http://jsfiddle.net/oochs/EAHTU/ 45
  42. 42. Scoping (this) Auf den aktuellen Kontext greift man über „this“ zu • globaler Namensraum bei Funktionsaufruf • Objekt-Namensraum bei Konstruktor-Funktion • Objekt-Namensraum bei Methodenaufruf • Aufrufer-Objekt bei Events (im Browser) // http://jsfiddle.net/u9GCa/ • definierbarer Namensraum durch call und apply 46
  43. 43. Function x = 23; function plus(a, b) { return this.x + a + b; } console.log(plus(1, 1)); // 25 console.log(plus.call({x : "Hello"}, 1, 1));​ // Hello11 console.log(plus.apply({x: 42}, [1, 1])); // 44 // -- http://jsfiddle.net/oochs/VD5UU/​​ 47
  44. 44. Closures = Code + Scope Eine Funktion wird stets in einem Funktionsgeltungsbereich ausgeführt. Der Funktionsgeltungsbereich gilt auch, wenn in einer Funktion eine weitere, innere Funktion definiert wird. Diese Funktion hat dann Zugriff auf die Variablen der äußeren Funktion. Ausnahmen sind hier this und der Bonusparameter arguments, da diese Parameter von jeder Funktion selbst überschrieben werden. 48
  45. 45. Closures function outherFunction() { var x = "Hello"; function innerFunction() { return x; } return innerFunction(); } outherFunction(); // Hello outherFunction.x; // undefined 49
  46. 46. Scope Chain 50
  47. 47. These JS kennt keine Packages Code lässt sich in JS nur schwer organisieren 52
  48. 48. Namespaces // http://jsfiddle.net/oochs/AA7TV/ var com = {}; com.holisticon = {}; com.holisticon.Person = function(name) { this.name = name; } x = new com.holisticon.Person("Oliver"); console.log(x.name); // Oliver 53
  49. 49. Namespaces // http://jsfiddle.net/oochs/pECUe/ var com = { holisticon : { Person : function(name) { this.name = name; } } }; x = new com.holisticon.Person("Oliver"); console.log(x.name); 54
  50. 50. These Über Packages hinaus muss Code in Libraries und Moduln gepflegt werden In Java existieren dafür JARs, OSGI-Module und demnächst das standardisierte Java Module System Die Unterstützung von JS dafür ist mangelhaft 56
  51. 51. Common JS 57
  52. 52. Define durch AMD (require.js) // @see http://freshbrewedcode.com/derekgreer/2011/11/28/getting-started-with-requirejs/ // customerModule define(function() { return { getCustomers: function() { /* do something */ } } }); // oderModule define(function() { return { getOrders: function() { /* do something */ } } }); 58
  53. 53. Require durch AMD (require.js) // @see http://freshbrewedcode.com/derekgreer/2011/11/28/getting-started-with-requirejs/ require(["customerModule", "orderModule"], function(c, o) { var customers = c.getCustomers(); // do something with customers ... var orders = o.getOrders(); // do something with orders ... }); 59
  54. 54. Fazit JS wurde als Script-Sprache für den Browser entwickelt Wurzeln sind nicht Java (sondern exotische Sprachen, deren Konzepte niemand kennt) JS ist dynamisch typisiert JS ist objektorientiert JS ist funktional Packages lassen sich über Objekte nachbilden Für Module existieren etablierte Ansätze 60
  55. 55. JS Wartbarer Code Core 61
  56. 56. These JS-Code ist nicht wartbar Es fehlen Konzepte wie Coding Conventions Build-Server und automatisierte QS wird in JS selten verwendet 62
  57. 57. Build-Prozess Wiederkehrende Aufgaben automatisieren Build Script, z.B. bash Bild: CC MakerBot Industries 63
  58. 58. Java Enterprise-Umfeld Plugin-Konzept wro4j jsdoctk-plugin jasmine-maven-plugin 64
  59. 59. Grunt Grunt is a task-based command line build tool for JavaScript projects. -- https://github.com/cowboy/grunt 65
  60. 60. JS Building Steps Packaging Linting Testing Doc 66
  61. 61. Documentation JSDocToolkit - JsDoc Toolkit is an application, written in JavaScript, for automatically generating template- formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code. 67
  62. 62. Generated documentation 68
  63. 63. Packaging 69
  64. 64. JSLint JSLint - ... Will hurt your feelings. It takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. -- http:/www.jslint.com/lint.html -- http:/code.google.com/p/jslint4java/ 70
  65. 65. JSHint JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions. -- http://www.jshint.com/ 71
  66. 66. Testing mit Jasmine Based on RSpec and JSpec No dependencies to any browser http://pivotal.github.com/jasmine/ 72
  67. 67. BDD Bridge between programmers (code writers) and domain experts (spec writers) Test Case Borders 73
  68. 68. BDD Test method names should be sentences Sentence template keeps test methods focused 74
  69. 69. BDD „It should do something“ 75
  70. 70. Story A Barkeeper should mix drinks. 76
  71. 71. Acceptance criteria Given an order with a list of drink names. A Barkeeper should mix drinks. Which are on the list. 77
  72. 72. Scenario Given an order with a wodka lemon. When a barkeeper receives this order. Then he should mix and return a wodka lemon drink. 78
  73. 73. Scenario -> Spec Given(„an order of a wodka lemon“) It („the barkeeper“) Should(return [„wodka lemon“]); 79
  74. 74. Spec describe(„Barkeeper“) { var order; beforeEach(function() { order = new Order([„Wodka Lemon“]); }; it(„should return a wodka lemon“, function() { barkeeper.receive(order); var drinks = barkeeper.mix(); expect(drinks).toEqual([new WodkaLemon ()]); }; }; 80
  75. 75. Spec result is readable, too Barkeeper should return a wodka lemon OK 81
  76. 76. Jasmine Webrunner Ruby Node.js JSTestDriver Java / Maven ... 82
  77. 77. Jasmine im Webdriver im Einsatz 83
  78. 78. KISS-Architekturen 85 http://www.sxc.hu/photo/1342145
  79. 79. Pyramide UI Business Logic Database Idee: Oliver Zeigermann 86
  80. 80. UI: UI-Bindings View Model 87
  81. 81. UI: MVC-Frameworks Controller View Model 88
  82. 82. UI: View – ViewModel – Model 89
  83. 83. MVC im Browser 90
  84. 84. MVC im Browser 91
  85. 85. TodoMVC http://addyosmani.github.com/todomvc/ 92
  86. 86. 93

Beschreibung

Um Bilder und Grafiken "bereinigte" Version des Vortrags bei der JUG Ostfalen.

Nahezu jede große Website – egal ob das Backend in Java, PHP, Ruby oder Python programmiert wurde – verwendet im Browser JavaScript als Sprache. Software-Artefakte, die in JavaScript erstellt wurden, werde zunehmend wichtiger, da Logik in letzter Zeit tendenziell wieder vom Server zurück in den Browser wandert. JavaScript-Entwicklung ist im Alltag des Enterprise-Entwicklers angekommen. Teils muss er als Backend-Entwickler JavaScript-Code überarbeiten, der z.B. von einer Webagentur erstellt wurde, teils muss er auch selbst JavaScript-Artefakte erzeugen oder ein ganzes Framework oder eine Library in JavaScript schreiben oder pflegen.Der erste Teil des Vortrags richtet sich an Enterprise-Enwickler (meist mit einem Java-EE-Hintergrund), die sich für JavaScript interessieren, sich schnell darin einarbeiten wollen und Tipps suchen, dieses Ziel zu erreichen. Dabei werden einige Grundlagen der Sprache vorgestellt. Dieser Teil des Vortrags soll eher Lust auf Mehr machen als fundamentales Wissen in aller Tiefe zu vermitteln.Enterprise-Entwicklung ist in der Regel Teamarbeit. Eine große Codebasis mus wartbar bleiben. Im zweiten Teil des Vortrags werden Techniken und Tools vorgestellt, die dabei helfen können, eine geeignete Codequalität zu erreichen und zu wahren

Transkript

  1. 1. Enterprise JavaScript. Abendvortrag „JavaScript für Java Enterprise-Entwickler“
  2. 2. Holisticon AG "Die Holisticon AG ist eine Management- und IT-Beratung mit Sitz in Hamburg. Mit einem ganzheitlichen Beratungsansatz unterstützen wir unsere Kunden in ihren Entwicklungsprojekten auf technischer, taktischer wie auch strategischer Ebene." 2
  3. 3. Roadmap Grundlagen von JavaScript Wartbarer Code KISS-Architekturen 3
  4. 4. JS Grundlagen von JS Core 4
  5. 5. Primordial Soup 1995 Mocha Netscape Navigator LiveScript Netscape Navigator 1996 JavaScript 1.0 Sun|Netscape Alliance JScript Internet Explorer 3.0 ECMAScript ECMA 5
  6. 6. Brendan Eich Scheme im Web-Browser HTML scripting language make it look like Java made it look like C and AWK Mistakes (some recapitulating LISP) were frozen early Inhalt: http://de.slideshare.net/BrendanEich/splash-9915475 Bild: Mozilla Digital Memory Bank, Object #135, 19 May 2006, http://mozillamemory.org/detailview.php?id=135 6
  7. 7. Design goals Copy/paste snippets of code into HTML Tolerate “minor” errors (e.g., missing semicolons) Simplified event handling onlick, onmouseover inspired by HyperCard Pick a few hard-working, powerful primitives First class functions for procedural abstraction (AWK more than Scheme) Objects everywhere, prototype-based (Self, but only one parent per object) Leave all else out! 7 Bild: Some rights reserved by superfluity, http://www.flickr.com/photos/equanimity/
  8. 8. 1980er Jahre: Xerox PARC & Sun Microsystems Ziel: mehr Freiheit als bei OO-Sprachen wie Smalltalk Wenige Konstrukte: • Slots • Traits • Prototypen • keine Typen und Klassen 8 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  9. 9. Self: The Power of Simplicity Keine Unterscheidung zwischen • dem Verhalten eines Objekts (Methoden einer Klasse) • dem Zustand des Objekts (Eigenschaften einer Klasse) Ein Objekt besteht aus Slots. • Slots haben einen Namen. • Slots können Methoden oder Attribute aufnehmen. 9 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  10. 10. Self: The Power of Simplicity Objekterzeugung ohne Klassen. Neue Objekte erzeugen durch das Klonen existierender Objekte. Objekten können zur Laufzeit Slots hinzugefügt werden. 10 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  11. 11. Self: The Power of Simplicity Einzelne Slots können an einen „Parent“ delegieren, indem sie den Slot nicht überschreiben. Trait-Objekte sind abgespeckte Implementierungen (Mixins). 11 Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
  12. 12. Scheme: minimalistic LISP Comic: XKCD, http://xkcd.com/224/ Bild: NASA Goddard Photo and Video, http://commons.wikimedia.org/wiki/File:Hubble%27s_Wide_View_of_%27Mystic_Mountain%27_in_Infrared.jpg Das Grundprinzip von Scheme ist es, eine Sprache nicht dadurch mächtig werden zu lassen, indem man immer mehr Features hinzufügt, sondern indem man Einschränkungen entfernt. Es gab Scheme-Implementierungen von JavaScript. 12
  13. 13. Java vs. JavaScript „Why two programming languages?“ Answer: division of labor, specialization Java for high-priced components/widgets (applet/plugin model) JavaScript for mass market web designers (glue code between components, scripting of Java Applets, form validation, image rollovers,) In the last decade Java has almost disappeared on the client side of the Web Inhalt: http://de.slideshare.net/BrendanEich/splash-9915475 13 Bild: Martin Kliehm from Frankfurt am Main, Germany, http://commons.wikimedia.org/wiki/File:Brendan-Eich-20080310.jpg
  14. 14. Война и миръ ES3 (2000) Netscape Navigator 6, Firefox 1.0, Internet Explorer 5.5-8 (functions expressions, RegExp, try-catch-finally, switch, do-while) ES4 (2008) ActionScript 2-3 in Adobe Flash Project Harmony wird gestartet ES5 (2010) Firefox 4 Internet Explorer 9/10 WebKit (strict mode, neues Objektmodell, bessere Arrays, API-Verbesserungen) ES6 aka ES.Next aka Harmony (Block Scopes, Modules, optional Arguments, Classes) Bild: Deutsches Bundesarchiv (German Federal Archive), Bild 183-14059-0018 14 http://commons.wikimedia.org/wiki/File:Bundesarchiv_Bild_183-14059-0018,_Berlin,_Oberbefehlshaber_der_vier_Verb%C3%BCndeten.jpg
  15. 15. Versionen Java-Script ECMA-Script Firefox Internet Opera Safari Chrome Explorer 1.5 3 1.0 5.5 - 8 6.0 - 10.0 3.0 - 4.0 1 1.6 E4X 1.5 1.7 2.0 1.8 3.0 1.9 5 4 9 11 5.0 5 5.1 latest 10 11.60 5.1 13 15
  16. 16. These Nur in einer statisch typisierten Sprache lässt sich zuverlässiger Code schreiben. JS kennt keine Typisierung 17
  17. 17. Dynamische Typisierung 18
  18. 18. Typen 19
  19. 19. Basistypen Basistypen sind • Zahlen (number) • Strings (string) • Boolean (boolean) • null • undefined Diese sind unveränderlich. 20
  20. 20. These JS ist eine Script-Sprache Eine strukturierte / objektorientierte Programmierung ist nicht möglich 22
  21. 21. Objekte Alle Datentypen außer Basistypen sind Objekte: • Arrays, • Funktionen, • Reguläre Ausdrücke (Funktionen) und • Objekte selbst 23
  22. 22. Object // Objects map keys (string) to values (properties): var obj = new Object(); // there is an Object literal var myCar = { ‘brand’: ‘Ferrari’, ‘color’: ‘red’, ‘drive’: function() {....} }; 24
  23. 23. Method Invocation var myObject = { val: 0, increment: function (inc) { this.val += inc; } }; myObject.increment(1); myObject.val; // 1 25
  24. 24. JSON json = { ‘Array : [1, ‘zwei’,Math.PI], ‘Date" : ‘Thu Apr 26 2012 22:45:19 GMT+0200 (CEST) ’, ‘String" : ‘Hello World’, ‘Boolean’ : true, ‘Number’ : 42, ‘RegExp’ : /^(a-ZA-Z)*$/, ‘Binary’ : ‘data:image/png;base64,iVBORw0KGgoAAAAN==’, ‘Reference’ : ‘http://www.holisticon.de/about.rdf’, ‘Object’ : {[...]} // no functions! } 26
  25. 25. These Objektorientierte Programmierung ist nur klassenbasiert möglich JS bietet keine Klassen JS bietet kein eigenes Typsystem 28
  26. 26. Prototypen Objekte werden über das new-Keyword und eine Konstruktor-Funktion gebildet. Konstruktor-Funktionen beginnen per Konvention mit einem Großbuchstaben (im Ggs. zu „normalen“ Funktionen). 29
  27. 27. Constructor /** * @Constructor */ function Rectangle(width, height) { this.width = width; this.height = height; } // Benutzung var myRectangle = new Rectangle(5, 5); myRectangle.width; // 5 30
  28. 28. Das new-Keyword Wird die new-Anweisung vergessen, dann wird die Funktion nicht als Konstruktor-Funktion aufgerufen. Es steht dann kein neues Objekt als this-Objekt zur Verfügung. Das this-Objekt ist dann beispielsweise das globale Objekt. Das heißt, die Funktion wird die übergebenen Parameter dem globalen Objekt zuweisen. 31
  29. 29. Prototype erweitern // zwei Rechtecke erzeugen var firstRectangle = new Rectangle(5, 5); var secondRectangle = new Rectangle(10,10); // den Prototypen _aller_ Rechtecke erweitern Rectangle.prototype.color = "blue"; firstRectangle.color; // blue 32
  30. 30. Reflection Rectangle.prototype.color = "blue"; firstRectangle.color; // blue firstRectangle.hasOwnProperty("color"); // false 33
  31. 31. Eigenschaften löschen Rectangle.prototype.color = "blue‚; firstRectangle.color = "red‚; firstRectangle.color; // red delete firstRectangle.color; // true firstRectangle.color; // blue 34
  32. 32. Konstruktor- & Protoype-Referenz /** * Patterns für Vererbung sind über Konstruktor- und * Prototype-Referenz möglich */ // Konstruktor-Referenz var firstRectangle = new Rectangle(4, 4); firstRectangle.constructor.name; // Rectangle var secondRectangle = new firstRectangle.constructor(5, 5); // Prototype-Referenz firstRectangle.__proto__ == Rectangle.prototype // Chrome way firstRectangle.constructor.prototype == Rectangle.prototype // ES3 35
  33. 33. Mixins function mixin() { child = {}; for (var arg = 0; arg < arguments.length; arg ++) { for (var prop in arguments[arg]) { if (arguments[arg].hasOwnProperty(prop)) { child[prop] = arguments[arg][prop]; } } } return child; } 36
  34. 34. Mixins var wolpertinger = mixin( {fly : function() {print("fly");}}, {swim: function() {print("swim");}}, {bark: function() {print("bark");}} ) wolpertinger.bark(); // bark 37
  35. 35. jQuery.extend // http://api.jquery.com/jQuery.extend/ // Merge the contents of two or more objects together // into the first object var wolpertinger = $.extend({}, duck, dog); 38
  36. 36. Duck Typing Wenn ein Objekt aussieht wie eine Ente und sich verhält wie eine Ente, dann ist es auch eine Ente. (Und wenn es nicht aussieht wie eine Ente, dann lässt es sich zur Laufzeit so erweitern, dass es aussieht wie eine Ente.) 39
  37. 37. ES5, ES6 und TypeScript Mit ES5 wurde eine neue Objekt-Erzeugung (mit Vererbung von Objekten) eingeführt. ES6 wird voraussichtlich Klassen bringen. Auch in ES3 lässt sich Vererbung (über Patterns) implementieren. Wem diese Patterns zu unbequem sind, kann eine Meta- Sprache wie TypeScript verwenden, die voraussichtlich evtl. kompatibel zu ES6 sein wird, aber zu ES3 kompiliert. 40
  38. 38. Funktionen Funktionen sind gleichwertig zu Objekten. Funktionen können als Parameter eine andere Funktion übergeben und auch als Rückgabewert zurückgegeben werden. 42
  39. 39. Funktionsliteral function plus(x, y) { return x + y; // ansonsten undefined } plus(1,2); // 3 43
  40. 40. Funktionen als Parameter // http://jsfiddle.net/oochs/EAHTU/ // Sortiere ein Array mit einer anonymen Funktion als Sortiervorschrift var numbers = [27, 2, 10, 4]; var lexicalySortedNumbers = [10,2,27,4]; var sortedNumbers = [2,4,10,27]; numbers.sort(); console.log(String(numbers) !== String(sortedNumbers)); // ouch! console.log(String(numbers) === String(lexicalySortedNumbers)); // übergebe der sort-funktion eine Funktion als Parameter numbers.sort(function(a, b) { return a-b; }); console.log(String(numbers) === String(sortedNumbers)); 44
  41. 41. Funktionen als Parameter http://jsfiddle.net/oochs/EAHTU/ 45
  42. 42. Scoping (this) Auf den aktuellen Kontext greift man über „this“ zu • globaler Namensraum bei Funktionsaufruf • Objekt-Namensraum bei Konstruktor-Funktion • Objekt-Namensraum bei Methodenaufruf • Aufrufer-Objekt bei Events (im Browser) // http://jsfiddle.net/u9GCa/ • definierbarer Namensraum durch call und apply 46
  43. 43. Function x = 23; function plus(a, b) { return this.x + a + b; } console.log(plus(1, 1)); // 25 console.log(plus.call({x : "Hello"}, 1, 1));​ // Hello11 console.log(plus.apply({x: 42}, [1, 1])); // 44 // -- http://jsfiddle.net/oochs/VD5UU/​​ 47
  44. 44. Closures = Code + Scope Eine Funktion wird stets in einem Funktionsgeltungsbereich ausgeführt. Der Funktionsgeltungsbereich gilt auch, wenn in einer Funktion eine weitere, innere Funktion definiert wird. Diese Funktion hat dann Zugriff auf die Variablen der äußeren Funktion. Ausnahmen sind hier this und der Bonusparameter arguments, da diese Parameter von jeder Funktion selbst überschrieben werden. 48
  45. 45. Closures function outherFunction() { var x = "Hello"; function innerFunction() { return x; } return innerFunction(); } outherFunction(); // Hello outherFunction.x; // undefined 49
  46. 46. Scope Chain 50
  47. 47. These JS kennt keine Packages Code lässt sich in JS nur schwer organisieren 52
  48. 48. Namespaces // http://jsfiddle.net/oochs/AA7TV/ var com = {}; com.holisticon = {}; com.holisticon.Person = function(name) { this.name = name; } x = new com.holisticon.Person("Oliver"); console.log(x.name); // Oliver 53
  49. 49. Namespaces // http://jsfiddle.net/oochs/pECUe/ var com = { holisticon : { Person : function(name) { this.name = name; } } }; x = new com.holisticon.Person("Oliver"); console.log(x.name); 54
  50. 50. These Über Packages hinaus muss Code in Libraries und Moduln gepflegt werden In Java existieren dafür JARs, OSGI-Module und demnächst das standardisierte Java Module System Die Unterstützung von JS dafür ist mangelhaft 56
  51. 51. Common JS 57
  52. 52. Define durch AMD (require.js) // @see http://freshbrewedcode.com/derekgreer/2011/11/28/getting-started-with-requirejs/ // customerModule define(function() { return { getCustomers: function() { /* do something */ } } }); // oderModule define(function() { return { getOrders: function() { /* do something */ } } }); 58
  53. 53. Require durch AMD (require.js) // @see http://freshbrewedcode.com/derekgreer/2011/11/28/getting-started-with-requirejs/ require(["customerModule", "orderModule"], function(c, o) { var customers = c.getCustomers(); // do something with customers ... var orders = o.getOrders(); // do something with orders ... }); 59
  54. 54. Fazit JS wurde als Script-Sprache für den Browser entwickelt Wurzeln sind nicht Java (sondern exotische Sprachen, deren Konzepte niemand kennt) JS ist dynamisch typisiert JS ist objektorientiert JS ist funktional Packages lassen sich über Objekte nachbilden Für Module existieren etablierte Ansätze 60
  55. 55. JS Wartbarer Code Core 61
  56. 56. These JS-Code ist nicht wartbar Es fehlen Konzepte wie Coding Conventions Build-Server und automatisierte QS wird in JS selten verwendet 62
  57. 57. Build-Prozess Wiederkehrende Aufgaben automatisieren Build Script, z.B. bash Bild: CC MakerBot Industries 63
  58. 58. Java Enterprise-Umfeld Plugin-Konzept wro4j jsdoctk-plugin jasmine-maven-plugin 64
  59. 59. Grunt Grunt is a task-based command line build tool for JavaScript projects. -- https://github.com/cowboy/grunt 65
  60. 60. JS Building Steps Packaging Linting Testing Doc 66
  61. 61. Documentation JSDocToolkit - JsDoc Toolkit is an application, written in JavaScript, for automatically generating template- formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code. 67
  62. 62. Generated documentation 68
  63. 63. Packaging 69
  64. 64. JSLint JSLint - ... Will hurt your feelings. It takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. -- http:/www.jslint.com/lint.html -- http:/code.google.com/p/jslint4java/ 70
  65. 65. JSHint JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions. -- http://www.jshint.com/ 71
  66. 66. Testing mit Jasmine Based on RSpec and JSpec No dependencies to any browser http://pivotal.github.com/jasmine/ 72
  67. 67. BDD Bridge between programmers (code writers) and domain experts (spec writers) Test Case Borders 73
  68. 68. BDD Test method names should be sentences Sentence template keeps test methods focused 74
  69. 69. BDD „It should do something“ 75
  70. 70. Story A Barkeeper should mix drinks. 76
  71. 71. Acceptance criteria Given an order with a list of drink names. A Barkeeper should mix drinks. Which are on the list. 77
  72. 72. Scenario Given an order with a wodka lemon. When a barkeeper receives this order. Then he should mix and return a wodka lemon drink. 78
  73. 73. Scenario -> Spec Given(„an order of a wodka lemon“) It („the barkeeper“) Should(return [„wodka lemon“]); 79
  74. 74. Spec describe(„Barkeeper“) { var order; beforeEach(function() { order = new Order([„Wodka Lemon“]); }; it(„should return a wodka lemon“, function() { barkeeper.receive(order); var drinks = barkeeper.mix(); expect(drinks).toEqual([new WodkaLemon ()]); }; }; 80
  75. 75. Spec result is readable, too Barkeeper should return a wodka lemon OK 81
  76. 76. Jasmine Webrunner Ruby Node.js JSTestDriver Java / Maven ... 82
  77. 77. Jasmine im Webdriver im Einsatz 83
  78. 78. KISS-Architekturen 85 http://www.sxc.hu/photo/1342145
  79. 79. Pyramide UI Business Logic Database Idee: Oliver Zeigermann 86
  80. 80. UI: UI-Bindings View Model 87
  81. 81. UI: MVC-Frameworks Controller View Model 88
  82. 82. UI: View – ViewModel – Model 89
  83. 83. MVC im Browser 90
  84. 84. MVC im Browser 91
  85. 85. TodoMVC http://addyosmani.github.com/todomvc/ 92
  86. 86. 93

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

×