Post on 12-Apr-2017
transcript
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!