Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript und trotzdem Softwerker
Dinge, die Softwerker wissen sollten
Warum ausgerechnet dieses Thema?
Wie viele JavaScript Entwickler
ihre Arbeit sehen.
Was andere Entwickler
oftmals davon halten.
Wie auch JavaScript Entwicklung
tatsächlich aussehen kann.
Software IT Berater
15 Jahre Software-Entwicklung
4 Jahre IT Beratung
Täglich aufs neue begeistert.
Was sonst noch bleibt:...
Analyse und Bewertung
bestehender Anwendungen
Fomulierung Software getriebener
Unternehmens-Lösungen
Wirtschaftlichkeits b...
First Things First:
Please, be excellent to each other!
Also, kann’s losgehen? J
Was bedeutet es eigentlich
ein “Softwerker” zu sein?
• Kunden/Nutzen orientierte Arbeitseinstellung
• Hohe Ergebnis-Qualität (intern/extern)
• flexible und gut Änderbare Softw...
• Plattformen und Gegebenheiten kennen
• Architekturelle Ansätze verstehen
• Qualität durch Werkzeuge sicherstellen
• Soft...
Plattformen
Visual
Abstract
Server Mobile
Browser
Non-Visual Runtimes
Mobile App Container
Desktop Anwendung Container
Plattformen für JavaScript Anwendungen
Architekturelles
Kombiniere zwei gute Dinge und
raffiniere etwas altbekanntes
zum Besseren.
“Chilli-Ei Prinzip”
In unserem Fall:
Serverseitiges JavaScript!
Warum das?
Client Code:
Sprache A
Server Code:
Sprache B
JS Client
JS Server
JS Client
JS Server
Hoppla!
Für die Einen ist es DupCode.
Doch für die Anderen …
Idealvorstellung
Was soll da schon
schiefgehen?
Schmerzhafte
Erfahrungen.
• Komplexität kann schnell überhand nehmen
• Update Management
• NPM Mirror für Production dringend empfohlen
• Browser Bu...
Verwandtes Stichwort zum Thema Shared Code:
Isomorphic JavaScript
Single Page Application
Frameworks
Single Page
Application
Progressive
Enhancement
User
Interface
Data
Provider
Server Client
ROCA
SPA
Progressive
Enhancement
REST-API
Logik Verteilung
ArtderAnwendung
• Nicht jede Website eignet sich für SPA
• klassische Progressive Webanwendung und
oftmals weniger pflegeintensiv
• SPA Fr...
Testwerkzeug
Komponenten
Integration
UI Test
https://www.xkcd.com/303/
Komponenten
Integration
UI Test
Tests run!
https://www.xkcd.com/303/
Units
Integration
Component
API / System
UI Tests
Testing Pyramide
UI
Unit
Runner Framework
Gattung
TestEbene
Integration
Runtime
Framework
Unit-Test & Integration Stack
(Backend)
Runner
Runtime
Framework
Unit-Test & Integration Stack
(Frontend)
Runner
Runtime
Framework
E2E Stack
(Frontend)
Visual Regression
(Frontend)
• Wirklich viele gute Testmöglichkeiten
• Behaviour Style Testframeworks
• Testrunner oftmals als Middleware
• Visual Regr...
Arbeitsmittel
CODE!
Meinst Gefragt:
Schliessen sich OOP und FP aus?
Let’s Talk about Code:
Welche Software Pattern kommen in
JavaScript besonders oft vor?
Closure
Promises
Generators
Asynchronizität
Facade
Strategy
FRP
Decoupling
Monkey Patching
Property Accessors
Proxies
Mani...
Closure
Promises
Generators
Asynchronizität
Facade
Strategy
FRP
Decoupling
Monkey Patching
Property Accessors
Proxies
Mani...
Closure
let fivePlus = partialSum(5);
console.log('5 + 3', fivePlus(3)); // 8
console.log('5 + 5', fivePlus(5)); // 10
function pa...
Property Accessors
Object.defineProperty(
manipulateObject, // → object
targetProperty, // → string
configuration // → object
);
“Data” Descriptors
value → any
writable → boolean
“Accessor” Descriptors
get → function
set → function
“Shared” Descriptor...
function createUser(name, email, password) {
let user;
let_password;
Object.defineProperty(user, 'password', {
set: functi...
user.password =	'geheim';
console.log(user.password);	//	'a3f4a...ff'
Strategy Pattern
Strategy Pattern
https://en.wikipedia.org/wiki/Strategy_pattern
Strategy Pattern
Zusammenfassung
• Softwerker gerechte Entwicklung möglich!
• Plattformen gleichzeitig Herausforderung und Seegen
• Besonderheiten und Stol...
+49 (0)176 6226 3882
mail@denniswilson.de
Dennis	Wilson
IT	Berater &	Entwickler
c/o	Büro23/25
Stolzestraße 23–25
44139	Dor...
http://www.cartoonmovement.com/depot/cartoons/2012/12/24/beyond_any_religion__miguel_villalba_snchez__elchicotriste_.jpeg
...
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
Upcoming SlideShare
Loading in …5
×

JavaScript und trotzdem Softwerker

263 views

Published on

Dinge die Softwerker wissen sollten, um getreu Software Craftmanship Prinzipien, auch in JavaScript Projekten erfolgreich zu entwickeln.

Published in: Software
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

JavaScript und trotzdem Softwerker

  1. 1. JavaScript und trotzdem Softwerker Dinge, die Softwerker wissen sollten
  2. 2. Warum ausgerechnet dieses Thema?
  3. 3. Wie viele JavaScript Entwickler ihre Arbeit sehen.
  4. 4. Was andere Entwickler oftmals davon halten.
  5. 5. Wie auch JavaScript Entwicklung tatsächlich aussehen kann.
  6. 6. Software IT Berater 15 Jahre Software-Entwicklung 4 Jahre IT Beratung Täglich aufs neue begeistert. Was sonst noch bleibt: “Breakpoint Wilson” auf entwickler.de https://denniswilson.de/ @snnd auf Twitter
  7. 7. Analyse und Bewertung bestehender Anwendungen Fomulierung Software getriebener Unternehmens-Lösungen Wirtschaftlichkeits bezogene IT Beratungen
  8. 8. First Things First: Please, be excellent to each other!
  9. 9. Also, kann’s losgehen? J
  10. 10. Was bedeutet es eigentlich ein “Softwerker” zu sein?
  11. 11. • Kunden/Nutzen orientierte Arbeitseinstellung • Hohe Ergebnis-Qualität (intern/extern) • flexible und gut Änderbare Software herstellen • offen sein und von einander lernen
  12. 12. • Plattformen und Gegebenheiten kennen • Architekturelle Ansätze verstehen • Qualität durch Werkzeuge sicherstellen • Software-Bausteine als Arbeitsmittel nutzen
  13. 13. Plattformen
  14. 14. Visual Abstract Server Mobile
  15. 15. Browser Non-Visual Runtimes Mobile App Container Desktop Anwendung Container Plattformen für JavaScript Anwendungen
  16. 16. Architekturelles
  17. 17. Kombiniere zwei gute Dinge und raffiniere etwas altbekanntes zum Besseren. “Chilli-Ei Prinzip”
  18. 18. In unserem Fall: Serverseitiges JavaScript!
  19. 19. Warum das?
  20. 20. Client Code: Sprache A
  21. 21. Server Code: Sprache B
  22. 22. JS Client JS Server
  23. 23. JS Client JS Server Hoppla!
  24. 24. Für die Einen ist es DupCode. Doch für die Anderen …
  25. 25. Idealvorstellung
  26. 26. Was soll da schon schiefgehen?
  27. 27. Schmerzhafte Erfahrungen.
  28. 28. • Komplexität kann schnell überhand nehmen • Update Management • NPM Mirror für Production dringend empfohlen • Browser Bundles werden sehr schnell sehr gross
  29. 29. Verwandtes Stichwort zum Thema Shared Code: Isomorphic JavaScript
  30. 30. Single Page Application Frameworks
  31. 31. Single Page Application Progressive Enhancement
  32. 32. User Interface Data Provider Server Client ROCA SPA Progressive Enhancement REST-API Logik Verteilung ArtderAnwendung
  33. 33. • Nicht jede Website eignet sich für SPA • klassische Progressive Webanwendung und oftmals weniger pflegeintensiv • SPA Frameworks ermöglichen erhöte Testbarkeit
  34. 34. Testwerkzeug
  35. 35. Komponenten Integration UI Test https://www.xkcd.com/303/
  36. 36. Komponenten Integration UI Test Tests run! https://www.xkcd.com/303/
  37. 37. Units Integration Component API / System UI Tests Testing Pyramide
  38. 38. UI Unit Runner Framework Gattung TestEbene Integration
  39. 39. Runtime Framework Unit-Test & Integration Stack (Backend)
  40. 40. Runner Runtime Framework Unit-Test & Integration Stack (Frontend)
  41. 41. Runner Runtime Framework E2E Stack (Frontend)
  42. 42. Visual Regression (Frontend)
  43. 43. • Wirklich viele gute Testmöglichkeiten • Behaviour Style Testframeworks • Testrunner oftmals als Middleware • Visual Regression Testing als Erleichterung Explorativer Tests
  44. 44. Arbeitsmittel
  45. 45. CODE!
  46. 46. Meinst Gefragt: Schliessen sich OOP und FP aus?
  47. 47. Let’s Talk about Code: Welche Software Pattern kommen in JavaScript besonders oft vor?
  48. 48. Closure Promises Generators Asynchronizität Facade Strategy FRP Decoupling Monkey Patching Property Accessors Proxies Manipulation Auswahl häufier Pattern In JavaScript
  49. 49. Closure Promises Generators Asynchronizität Facade Strategy FRP Decoupling Monkey Patching Property Accessors Proxies Manipulation Auswahl häufier Pattern In JavaScript
  50. 50. Closure
  51. 51. let fivePlus = partialSum(5); console.log('5 + 3', fivePlus(3)); // 8 console.log('5 + 5', fivePlus(5)); // 10 function partialSum(a) { return function(b) { return a + b; } }
  52. 52. Property Accessors
  53. 53. Object.defineProperty( manipulateObject, // → object targetProperty, // → string configuration // → object );
  54. 54. “Data” Descriptors value → any writable → boolean “Accessor” Descriptors get → function set → function “Shared” Descriptors configurable → boolean enumerable → boolean
  55. 55. function createUser(name, email, password) { let user; let_password; Object.defineProperty(user, 'password', { set: function setPassword(password) { _password = hash(password); }, get: function getPassword() { return _password; } }); return user; }
  56. 56. user.password = 'geheim'; console.log(user.password); // 'a3f4a...ff'
  57. 57. Strategy Pattern
  58. 58. Strategy Pattern https://en.wikipedia.org/wiki/Strategy_pattern
  59. 59. Strategy Pattern
  60. 60. Zusammenfassung
  61. 61. • Softwerker gerechte Entwicklung möglich! • Plattformen gleichzeitig Herausforderung und Seegen • Besonderheiten und Stolpersteine • Ausgefeilte Möglichkeiten für Teststing • Häufig anzutreffende Pattern
  62. 62. +49 (0)176 6226 3882 mail@denniswilson.de Dennis Wilson IT Berater & Entwickler c/o Büro23/25 Stolzestraße 23–25 44139 Dortmund May the source be with you!
  63. 63. http://www.cartoonmovement.com/depot/cartoons/2012/12/24/beyond_any_religion__miguel_villalba_snchez__elchicotriste_.jpeg https://gnusocial.no/file/johan-20150209-church_emacs-dq7r.png https://www.flickr.com/photos/kjgarbutt/5496295615/in/photostream/ https://www.flickr.com/photos/dhdesign/3843848623/ https://www.flickr.com/photos/theresasthompson/7163227255/ https://www.flickr.com/photos/drzuco/10711635635 http://www-tc.pbs.org/wnet/americanmasters/files/2001/12/BuckminsterFuller16x9.jpg https://www.flickr.com/photos/vialbost/17797990034 https://www.flickr.com/photos/armydre2008/4336507150 https://www.flickr.com/photos/dhdesign/3843848623 https://www.flickr.com/photos/craigleontowicz/6218613822 https://www.flickr.com/photos/icrontic/3696364959/ http://1.bp.blogspot.com/-ubpDJspaQco/UT0bUjmImkI/AAAAAAAALns/UjKTDWHCggo/s1600/math.jpg https://bunkstrutts.files.wordpress.com/2014/04/safety-in-the-workplace.jpg https://www.industryleadersmagazine.com/japans-construction-index-surges-on-reconstruction-demand-prospects/ Thanks to all picture suppliers!

×