Enterprise JS

1.595 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.595
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Enterprise JS

  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. Miteinem ganzheitlichen Beratungsansatzunterstützen wir unsere Kunden in ihrenEntwicklungsprojekten auf technischer,taktischer wie auch strategischer Ebene." 2
  3. 3. RoadmapGrundlagen von JavaScriptWartbarer CodeKISS-Architekturen 3
  4. 4. JS Grundlagen von JS Core 4
  5. 5. Primordial Soup1995 Mocha Netscape Navigator LiveScript Netscape Navigator1996 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 earlyInhalt: http://de.slideshare.net/BrendanEich/splash-9915475Bild: Mozilla Digital Memory Bank, Object #135, 19 May 2006, http://mozillamemory.org/detailview.php?id=135 6
  7. 7. Design goalsCopy/paste snippets of code into HTML Tolerate “minor” errors (e.g., missing semicolons)Simplified event handling onlick, onmouseover inspired by HyperCardPick 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! 7Bild: Some rights reserved by superfluity, http://www.flickr.com/photos/equanimity/
  8. 8. 1980er Jahre: Xerox PARC & Sun MicrosystemsZiel: mehr Freiheit als bei OO-Sprachen wie SmalltalkWenige Konstrukte:• Slots• Traits• Prototypen• keine Typen und Klassen 8Bild: 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 SimplicityKeine 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. 9Bild: 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 SimplicityObjekterzeugung ohne Klassen.Neue Objekte erzeugen durch das Klonen existierenderObjekte.Objekten können zur Laufzeit Slots hinzugefügt werden. 10Bild: 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 SimplicityEinzelne Slots können an einen „Parent“ delegieren,indem sie den Slot nicht überschreiben.Trait-Objekte sind abgespeckte Implementierungen(Mixins). 11Bild: 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 LISPComic: 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.jpgDas Grundprinzip von Scheme ist es, eine Sprache nichtdadurch mächtig werden zu lassen, indem man immermehr Features hinzufügt, sondern indem manEinschrä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 theclient 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. VersionenJava-Script ECMA-Script Firefox Internet Opera Safari Chrome Explorer1.5 3 1.0 5.5 - 8 6.0 - 10.0 3.0 - 4.0 11.6 E4X 1.51.7 2.01.8 3.01.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. BasistypenBasistypen sind• Zahlen (number)• Strings (string)• Boolean (boolean)• null• undefinedDiese sind unveränderlich. 20
  20. 20. These JS ist eine Script-Sprache Eine strukturierte / objektorientierte Programmierung ist nicht möglich 22
  21. 21. ObjekteAlle 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 literalvar myCar = { ‘brand’: ‘Ferrari’, ‘color’: ‘red’, ‘drive’: function() {....}}; 24
  23. 23. Method Invocationvar myObject = { val: 0, increment: function (inc) { this.val += inc; }};myObject.increment(1);myObject.val; // 1 25
  24. 24. JSONjson = { ‘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. PrototypenObjekte werden über das new-Keyword und eineKonstruktor-Funktion gebildet.Konstruktor-Funktionen beginnen per Konvention miteinem Großbuchstaben (im Ggs. zu „normalen“Funktionen). 29
  27. 27. Constructor/*** @Constructor*/function Rectangle(width, height) { this.width = width; this.height = height;}// Benutzungvar myRectangle = new Rectangle(5, 5);myRectangle.width; // 5 30
  28. 28. Das new-KeywordWird die new-Anweisung vergessen, dann wird dieFunktion nicht als Konstruktor-Funktion aufgerufen.Es steht dann kein neues Objekt als this-Objekt zurVerfügung.Das this-Objekt ist dann beispielsweise das globaleObjekt.Das heißt, die Funktion wird die übergebenen Parameterdem globalen Objekt zuweisen. 31
  29. 29. Prototype erweitern// zwei Rechtecke erzeugenvar firstRectangle = new Rectangle(5, 5);var secondRectangle = new Rectangle(10,10);// den Prototypen _aller_ Rechtecke erweiternRectangle.prototype.color = "blue";firstRectangle.color; // blue 32
  30. 30. ReflectionRectangle.prototype.color = "blue";firstRectangle.color; // bluefirstRectangle.hasOwnProperty("color"); // false 33
  31. 31. Eigenschaften löschenRectangle.prototype.color = "blue‚;firstRectangle.color = "red‚;firstRectangle.color; // reddelete firstRectangle.color; // truefirstRectangle.color; // blue 34
  32. 32. Konstruktor- & Protoype-Referenz/*** Patterns für Vererbung sind über Konstruktor- und* Prototype-Referenz möglich*/// Konstruktor-Referenzvar firstRectangle = new Rectangle(4, 4);firstRectangle.constructor.name; // Rectanglevar secondRectangle = new firstRectangle.constructor(5, 5);// Prototype-ReferenzfirstRectangle.__proto__ == Rectangle.prototype // Chrome wayfirstRectangle.constructor.prototype == Rectangle.prototype // ES3 35
  33. 33. Mixinsfunction 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. Mixinsvar 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 objectvar 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 TypeScriptMit ES5 wurde eine neue Objekt-Erzeugung (mitVererbung 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 voraussichtlichevtl. kompatibel zu ES6 sein wird, aber zu ES3 kompiliert. 40
  38. 38. FunktionenFunktionen sind gleichwertig zu Objekten.Funktionen können als Parameter eine andere Funktionübergeben und auch als Rückgabewert zurückgegebenwerden. 42
  39. 39. Funktionsliteralfunction 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 Sortiervorschriftvar 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 Parameternumbers.sort(function(a, b) { return a-b;});console.log(String(numbers) === String(sortedNumbers)); 44
  41. 41. Funktionen als Parameterhttp://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. Functionx = 23;function plus(a, b) { return this.x + a + b;}console.log(plus(1, 1)); // 25console.log(plus.call({x : "Hello"}, 1, 1));​ // Hello11console.log(plus.apply({x: 42}, [1, 1])); // 44// -- http://jsfiddle.net/oochs/VD5UU/​​ 47
  44. 44. Closures = Code + ScopeEine Funktion wird stets in einemFunktionsgeltungsbereich ausgeführt.Der Funktionsgeltungsbereich gilt auch, wenn in einerFunktion eine weitere, innere Funktion definiert wird.Diese Funktion hat dann Zugriff auf die Variablen deräußeren Funktion.Ausnahmen sind hier this und der Bonusparameterarguments, da diese Parameter von jeder Funktion selbstüberschrieben werden. 48
  45. 45. Closuresfunction outherFunction() { var x = "Hello"; function innerFunction() { return x; } return innerFunction();}outherFunction(); // HellooutherFunction.x; // undefined 49
  46. 46. Scope Chain 50
  47. 47. TheseJS kennt keine PackagesCode 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 Modulngepflegt werdenIn Java existieren dafür JARs, OSGI-Module unddemnächst das standardisierte Java Module SystemDie 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/// customerModuledefine(function() { return { getCustomers: function() { /* do something */ } }});// oderModuledefine(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. FazitJS wurde als Script-Sprache für den Browser entwickeltWurzeln sind nicht Java (sondern exotischeSprachen, deren Konzepte niemand kennt)JS ist dynamisch typisiertJS ist objektorientiertJS ist funktionalPackages lassen sich über Objekte nachbildenFür Module existieren etablierte Ansätze 60
  55. 55. JS Wartbarer Code Core 61
  56. 56. TheseJS-Code ist nicht wartbarEs fehlen Konzepte wie Coding ConventionsBuild-Server und automatisierte QS wird in JS seltenverwendet 62
  57. 57. Build-Prozess Wiederkehrende Aufgaben automatisieren Build Script, z.B. bashBild:CC MakerBot Industries 63
  58. 58. Java Enterprise-UmfeldPlugin-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 teams coding conventions. -- http://www.jshint.com/ 71
  66. 66. Testing mit JasmineBased on RSpec and JSpecNo dependencies to any browserhttp://pivotal.github.com/jasmine/ 72
  67. 67. BDD Bridge between programmers (code writers) and domain experts (spec writers) Test Case Borders 73
  68. 68. BDDTest method names should be sentencesSentence templatekeeps test methods focused 74
  69. 69. BDD „It should do something“ 75
  70. 70. StoryA Barkeeper should mix drinks. 76
  71. 71. Acceptance criteriaGiven an order with a list of drink names.A Barkeeper should mix drinks.Which are on the list. 77
  72. 72. ScenarioGiven 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 -> SpecGiven(„an order of a wodka lemon“)It („the barkeeper“)Should(return [„wodka lemon“]); 79
  74. 74. Specdescribe(„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, tooBarkeeper should return a wodka lemon OK 81
  76. 76. JasmineWebrunner RubyNode.js JSTestDriverJava / 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. TodoMVChttp://addyosmani.github.com/todomvc/ 92
  86. 86. 93

×