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:
“Breakpoint Wilson” auf entwickler.de
https://denniswilson.de/
@snnd auf Twitter
Analyse und Bewertung
bestehender Anwendungen
Fomulierung Software getriebener
Unternehmens-Lösungen
Wirtschaftlichkeits bezogene
IT Beratungen
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 Software
herstellen
• offen sein und von einander lernen
• Plattformen und Gegebenheiten kennen
• Architekturelle Ansätze verstehen
• Qualität durch Werkzeuge sicherstellen
• Software-Bausteine als Arbeitsmittel nutzen
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 Bundles werden sehr schnell sehr gross
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 Frameworks ermöglichen erhöte
Testbarkeit
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 Regression Testing als Erleichterung
Explorativer Tests
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
Manipulation
Auswahl häufier Pattern
In JavaScript
Closure
Promises
Generators
Asynchronizität
Facade
Strategy
FRP
Decoupling
Monkey Patching
Property Accessors
Proxies
Manipulation
Auswahl häufier Pattern
In JavaScript
Closure
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;
}
}
Property Accessors
Object.defineProperty(
manipulateObject, // → object
targetProperty, // → string
configuration // → object
);
“Data” Descriptors
value → any
writable → boolean
“Accessor” Descriptors
get → function
set → function
“Shared” Descriptors
configurable → boolean
enumerable → boolean
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;
}
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 Stolpersteine
• Ausgefeilte Möglichkeiten für Teststing
• Häufig anzutreffende Pattern
+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!
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!

JavaScript und trotzdem Softwerker