SlideShare ist ein Scribd-Unternehmen logo
1 von 64
Downloaden Sie, um offline zu lesen
JavaScript Architektur
Erich Westendarp / pixelio.de
WER BIN ICH?
• Sebastian Springer	

• https://github.com/sspringer82	

• @basti_springer	

• Consultant,Trainer,Autor
JavaScript
Applikationen?
Codeverteilung
Client/Server: 50/50
LOC: >1 Mio.
Budget:
> 1 Mio.
Businesskritische
Applikationen
Entwicklerteam:
> 20 Personen
Nicht
branchenspezifisch
Architektur in
JavaScript?
Architektur
Strukturierte oder hierarchische Anordnung der
Systemkomponenten sowie Beschreibung
ihrer Beziehungen. (Helmut Balzert)
Wozu Architektur?
birgitH / pixelio.de
Wartbarkeit
Finde den Fehler
Karl-Heinz Laube / pixelio.de
Erweiterbarkeit
Kosten/Zeit neuer
Features
Stefan / pixelio.de
Testbarkeit
Aufwand für Tests
uygar sanli / pixelio.de
Parallele Arbeit
Unabhängige Komponenten
Rainer Sturm / pixelio.de
Nerven der Entwickler
Paul-Georg Meister / pixelio.de
Also: Architektur FTW
Lutz Smolka / pixelio.de
Aber wie?
Multi-Page
vs.
Single-Page
Multi-Page
Multi-Page
Mehrere getrennte Seiten. JavaScript eher als
Unterstützung und nicht zwingend für die
Applikation erforderlich. Einfacher barrierefrei zu
gestalten. Oft für öffentliche Seiten und
Shops.
Single-Page
Single-Page
Nur eine/wenige Seiten. JavaScript zwingend
für die Applikation erforderlich. Navigation
und Abbildung der Business Logik über
JavaScript. Wird für Applikationen eingesetzt.
Global Scope
Thorben Wengert / pixelio.de
Global Scope
Namenskonflikte im globalen Namensraum.
Wiederverwendbarkeit wird durch
Unberechenbarkeit eingeschränkt. Ungewollte
Seiteneffekte durch gleiche Variablennamen.
Eingeschränkte Nachvollziehbarkeit des
Quellcodes.
Global Scope
• Funktionsparameter
• Dependency Injection
• Nur konstante globale Werte
• Singletons
Client vs. Server
Client vs. Server
Client Source Code wird statisch vom Server
ausgeliefert. Nutzdaten werden per Ajax-
Request im JSON-Format nachgeladen.
Separation der
Sprachen
H.D.Volz / pixelio.de
Separation der Sprachen
HTML für die Struktur, CSS für das Layout
und JavaScript für die Logik.
!
Pro Datei nur eine Sprache.
Modularisierung
Initiative Echte Soziale Marktwirtschaft IESM / pixelio.de
Modularisierung
Unterteilung der Applikation in den Kern und einzelne
Komponenten oder Module.
Der Kern stellt die Infrastruktur und die
Integrationsplattform für die Module dar.
Die Module beinhalten die einzelnen Features
der Applikation.
MVW
Model View Whatever
Model-View-Patterns
Separation von Datenhaltung und
Anzeigelogik in verschiedenen Ausprägungen.
Es gibt Frameworks, die diese Pattern
unterstützen.
MVC
MVC
Model View Controller
!
Seit 1979 in Smalltalk.
Models halten die Daten und die
Businesslogik.
Views visualisieren die Daten.
Controller verbinden die Models und die
Views miteinander.
MVC
Controller
Model
View
Benachrichtigt
Holt Daten Ändert
Events
MVP
MVP
Model View Presenter
!
Seit den frühen 1990ern.
Weiterentwicklung von MVC.
Konzentration auf die Präsentationslogik.
Presenter enthält die Anzeigelogik.
MVP
Presenter
Model
View
Daten
Events
Daten
MVVM
MVVM
Model View ViewModel
!
Seit 2005 von Microsoft.
Weiterentwicklung von MVC und MVP.
Model enthält Daten und Businesslogik.
Die View übernimmt die Anzeige.
ViewModel sorgt für die automatische
Datenbindung zwischen Model und View.
MVVM
ViewModel
Model
View
Daten
Databinding
Unterschiede
• Abhängigkeiten zwischen den Schichten
• MVC: View sitzt auf der Struktur parallel
zum Controller
• MVP: Controller wird durch Presenter
ersetzt (Events von Models und Views)
• MVVM: Es wird nur ein Teil des Models
der View bekannt gegeben
Frameworks
w.r.wagner / pixelio.de
Frameworks
Lösung für häufig auftretende
Problemstellungen. Hilfestellungen auch für
zukünftige Probleme, von denen man noch
nicht einmal weiß, dass man sie haben wird.
Bieten häufig Strukturierungselemente.
Basieren häufig auf jQuery.
Backbone.js
Einfaches Framework mit vorgegebenen
Model- und View-Strukturen.
Hash- und PushState-Navigation über einen
Router.
Sammlung von Models in Collections.!
Models sind REST-fähig.
Ember.js
Controller halten den Zustand der Applikation.
Models als Datencontainer, die über XHRs
mit dem Server kommunizieren können.
Handlebars als Template Engine.
Komponenten zur Erweiterung von HTML.
Models und Templates werden automatisch
synchronisiert. Router zur Navigation
innerhalb der Applikation.
AngularJS
Von Google seit 2009. Deskriptive
Programmierung. HTML als Templatesprache
wird durch Direktiven erweitert. Dependency
Injektion Mechanismus zur Auflösung von
Abhängigkeiten. Models als einfache
Datencontainer und Services für
wiederverwendbare Logik. Two-Way Data
Bindung über das ViewModel zwischen Model
und View. Unterstützt testbaren Code.
Module Loader
Peter Kamp / pixelio.de
Module Loader
Laden von JavaScript-Dateien ohne Script-Tag.
Auflösung von Abhängigkeiten. Potenzial
zur Optimierung einer Applikation.
RequireJS
RequireJS
Module Loader des Dojo Frameworks.
AMD Standard.
Im Wesentlichen zwei Funktionen: require &
define.
shim-Konfiguration für Bibliotheken ohne AMD.
r.js Optimizer zum Konkatenieren und
Minifizieren.
CommonJS Modules
CommonJS Modules
Serverseitige Standardisierung. Wird vor allem in
Node.js eingesetzt, aber auch clientseitige
Implementierung.
Definition über module.exports.
Einbindung über require.
Standardmäßig kein Optimizier.
ES6 Module
ES6 Module
Der neue JavaScript-Sprachstandard sieht ein
eigenes Modulsystem vor. Ein separater
Loader übernimmt das Laden der Module.
Aktuell noch keine Browserunterstützung.
Definition über module Keyword.
Zusätzlich gibt es noch import und export.
Fragen
Angela Parszyk / pixelio.de
KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
!
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
!
@basti_springer
!
https://github.com/sspringer82

Weitere ähnliche Inhalte

Ähnlich wie JavaScript Architektur

Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursSteven Grzbielok
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt socDaniel Fisher
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft AG
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungNETUserGroupBern
 
ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...
ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...
ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...Aberla
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02Chris Palatinus
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
Modulare Enterprise Systeme - Eine Einführung
Modulare Enterprise Systeme - Eine EinführungModulare Enterprise Systeme - Eine Einführung
Modulare Enterprise Systeme - Eine EinführungAndreas Weidinger
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAsQAware GmbH
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
2012-01-31 NoSQL in .NET
2012-01-31 NoSQL in .NET2012-01-31 NoSQL in .NET
2012-01-31 NoSQL in .NETJohannes Hoppe
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend DeveloperChristoph Hautzinger
 

Ähnlich wie JavaScript Architektur (20)

Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVC
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
 
ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...
ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...
ESEconf2011 - Trost Joachim: "Tool supported technical Code and Design Qualit...
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Modulare Enterprise Systeme - Eine Einführung
Modulare Enterprise Systeme - Eine EinführungModulare Enterprise Systeme - Eine Einführung
Modulare Enterprise Systeme - Eine Einführung
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
2012-01-31 NoSQL in .NET
2012-01-31 NoSQL in .NET2012-01-31 NoSQL in .NET
2012-01-31 NoSQL in .NET
 
AngularJs
AngularJsAngularJs
AngularJs
 
Elsholz stoll js_03_10
Elsholz stoll js_03_10Elsholz stoll js_03_10
Elsholz stoll js_03_10
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 

Mehr von Sebastian Springer

Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsSebastian Springer
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsSebastian Springer
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceSebastian Springer
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebSebastian Springer
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebSebastian Springer
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJSSebastian Springer
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptSebastian Springer
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtSebastian Springer
 

Mehr von Sebastian Springer (20)

Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Angular2
Angular2Angular2
Angular2
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Typescript
TypescriptTypescript
Typescript
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 

JavaScript Architektur