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

1. JavaScript und trotzdem Softwerker
Dinge, die Softwerker wissen sollten

2. Warum ausgerechnet dieses Thema?

3. Wie viele JavaScript Entwickler
ihre Arbeit sehen.

4. Was andere Entwickler
oftmals davon halten.

5. Wie auch JavaScript Entwicklung
tatsächlich aussehen kann.

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. Analyse und Bewertung
bestehender Anwendungen
Fomulierung Software getriebener
Unternehmens-Lösungen
Wirtschaftlichkeits bezogene
IT Beratungen

8. First Things First:
Please, be excellent to each other!

14. Also, kann’s losgehen? J

15. Was bedeutet es eigentlich
ein “Softwerker” zu sein?

17. • Kunden/Nutzen orientierte Arbeitseinstellung
• Hohe Ergebnis-Qualität (intern/extern)
• flexible und gut Änderbare Software
herstellen
• offen sein und von einander lernen

18. • Plattformen und Gegebenheiten kennen
• Architekturelle Ansätze verstehen
• Qualität durch Werkzeuge sicherstellen
• Software-Bausteine als Arbeitsmittel nutzen

19. Plattformen

26. Visual
Abstract
Server Mobile

27. Browser
Non-Visual Runtimes
Mobile App Container
Desktop Anwendung Container
Plattformen für JavaScript Anwendungen

28. Architekturelles

37. Kombiniere zwei gute Dinge und
raffiniere etwas altbekanntes
zum Besseren.
“Chilli-Ei Prinzip”

38. In unserem Fall:
Serverseitiges JavaScript!

39. Warum das?

42. Client Code:
Sprache A

43. Server Code:
Sprache B

44. JS Client
JS Server

45. JS Client
JS Server
Hoppla!

46. Für die Einen ist es DupCode.
Doch für die Anderen …

48. Idealvorstellung

50. Was soll da schon
schiefgehen?

51. Schmerzhafte
Erfahrungen.

52. • Komplexität kann schnell überhand nehmen
• Update Management
• NPM Mirror für Production dringend empfohlen
• Browser Bundles werden sehr schnell sehr gross

53. Verwandtes Stichwort zum Thema Shared Code:
Isomorphic JavaScript

54. Single Page Application
Frameworks

55. Single Page
Application
Progressive
Enhancement

56. User
Interface
Data
Provider
Server Client
ROCA
SPA
Progressive
Enhancement
REST-API
Logik Verteilung
ArtderAnwendung

57. • Nicht jede Website eignet sich für SPA
• klassische Progressive Webanwendung und
oftmals weniger pflegeintensiv
• SPA Frameworks ermöglichen erhöte
Testbarkeit

58. Testwerkzeug

60. Komponenten
Integration
UI Test
https://www.xkcd.com/303/

61. Komponenten
Integration
UI Test
Tests run!
https://www.xkcd.com/303/

62. Units
Integration
Component
API / System
UI Tests
Testing Pyramide

63. UI
Unit
Runner Framework
Gattung
TestEbene
Integration

64. Runtime
Framework
Unit-Test & Integration Stack
(Backend)

65. Runner
Runtime
Framework
Unit-Test & Integration Stack
(Frontend)

66. Runner
Runtime
Framework
E2E Stack
(Frontend)

67. Visual Regression
(Frontend)

68. • Wirklich viele gute Testmöglichkeiten
• Behaviour Style Testframeworks
• Testrunner oftmals als Middleware
• Visual Regression Testing als Erleichterung
Explorativer Tests

69. Arbeitsmittel

73. CODE!

74. Meinst Gefragt:
Schliessen sich OOP und FP aus?

75. Let’s Talk about Code:
Welche Software Pattern kommen in
JavaScript besonders oft vor?

76. Closure
Promises
Generators
Asynchronizität
Facade
Strategy
FRP
Decoupling
Monkey Patching
Property Accessors
Proxies
Manipulation
Auswahl häufier Pattern
In JavaScript

77. Closure
Promises
Generators
Asynchronizität
Facade
Strategy
FRP
Decoupling
Monkey Patching
Property Accessors
Proxies
Manipulation
Auswahl häufier Pattern
In JavaScript

78. Closure

79. 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;
}
}

80. Property Accessors

81. Object.defineProperty(
manipulateObject, // → object
targetProperty, // → string
configuration // → object
);

82. “Data” Descriptors
value → any
writable → boolean
“Accessor” Descriptors
get → function
set → function
“Shared” Descriptors
configurable → boolean
enumerable → boolean

83. 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;
}

84. user.password = 'geheim';
console.log(user.password); // 'a3f4a...ff'

85. Strategy Pattern

86. Strategy Pattern
https://en.wikipedia.org/wiki/Strategy_pattern

87. Strategy Pattern

88. Zusammenfassung

89. • Softwerker gerechte Entwicklung möglich!
• Plattformen gleichzeitig Herausforderung und Seegen
• Besonderheiten und Stolpersteine
• Ausgefeilte Möglichkeiten für Teststing
• Häufig anzutreffende Pattern

90. +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!

91. 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!