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 KomponentenRainer 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.

MVWModel View Whatever

Model-View-Patterns

Separation von Datenhaltung und Anzeigelogik in verschiedenen Ausprägungen.

Es gibt Frameworks, die diese Pattern unterstützen.

MVC

MVCModel 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

EventsDaten

MVVM

MVVMModel 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.jsController 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.

AngularJSVon 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

RequireJSModule 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