JavaScript und trotzdem SoftwerkerDinge, die Softwerker wissen sollten

Warum ausgerechnet dieses Thema?

Wie viele JavaScript Entwicklerihre Arbeit sehen.

Was andere Entwickleroftmals davon halten.

Wie auch JavaScript Entwicklungtatsä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 Bewertungbestehender Anwendungen

Fomulierung Software getriebenerUnternehmens-Lösungen

Wirtschaftlichkeits bezogeneIT Beratungen

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

Also, kann’s losgehen? J

Was bedeutet es eigentlichein “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

BrowserNon-Visual RuntimesMobile App ContainerDesktop Anwendung Container

Plattformen für JavaScript Anwendungen

Architekturelles

Kombiniere zwei gute Dinge undraffiniere etwas altbekannteszum 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 schonschiefgehen?

SchmerzhafteErfahrungen.

• 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 PageApplication

Progressive Enhancement

UserInterface

DataProvider

Server Client

ROCA

SPA

ProgressiveEnhancement

REST-API

Logik Verteilung

Art der Anwendung

• Nicht jede Website eignet sich für SPA

• klassische Progressive Webanwendung und oftmals weniger pflegeintensiv

• SPA Frameworks ermöglichen erhöteTestbarkeit

Testwerkzeug

Komponenten

Integration

UI Test

https://www.xkcd.com/303/

Komponenten

Integration

UI Test

Tests run!

https://www.xkcd.com/303/

Units

IntegrationComponent

API / System

UI Tests

Testing Pyramide

UI

Unit

Runner FrameworkGattung

Test Ebene

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 ErleichterungExplorativer 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?

ClosurePromises

Generators

Asynchronizität

FacadeStrategy

FRP

Decoupling

Monkey PatchingProperty Accessors

Proxies

Manipulation

Auswahl häufier PatternIn JavaScript

ClosurePromises

Generators

Asynchronizität

FacadeStrategy

FRP

Decoupling

Monkey PatchingProperty Accessors

Proxies

Manipulation

Auswahl häufier PatternIn JavaScript

Closure

let fivePlus = partialSum(5);console.log('5 + 3', fivePlus(3)); // 8console.log('5 + 5', fivePlus(5)); // 10

function partialSum(a) {return function(b) {

return a + b;}

}

Property Accessors

Object.defineProperty(manipulateObject, // → objecttargetProperty, // → stringconfiguration // → object

);

“Data” Descriptorsvalue → anywritable → boolean

“Accessor” Descriptorsget → functionset → function

“Shared” Descriptorsconfigurable → booleanenumerable → 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 3882mail@denniswilson.de

DennisWilsonITBerater &Entwicklerc/oBüro23/25Stolzestraße 23–2544139Dortmund

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!