JavaScript Architektur

Enterprise JavaScript Architekturen

Tuesday 29 October 13

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer

Tuesday 29 October 13

Eine Softwarearchitektur ist einer der Architekturtypen in der Informatik und beschreibt die grundlegenden Komponenten und deren Zusammenspiel

innerhalb eines Softwaresystems.

Tuesday 29 October 13

Wie strukturiere ich meine JavaScript-Applikation?

Tuesday 29 October 13

Wartbarkeit und Erweiterbarkeit

Tuesday 29 October 13

Tuesday 29 October 13

Server

Tuesday 29 October 13

Server

Client

Tuesday 29 October 13

Server

Client

Tuesday 29 October 13

Server

Client

Request

Tuesday 29 October 13

Server

Client

Request

Tuesday 29 October 13

Server

Client

RequestResponse

Tuesday 29 October 13

Server

Client

RequestResponseHTTP

Tuesday 29 October 13

Response?

Header

Body

Tuesday 29 October 13

Response?

Header

Body

Statuscode

Tuesday 29 October 13

Response?

Header

Body

Content-Type

Statuscode

Tuesday 29 October 13

Response?

Header

Body

Content-Type

Statuscode

HTML

Tuesday 29 October 13

Response?

Header

Body

Content-Type

Statuscode

HTML CSS

Tuesday 29 October 13

Response?

Header

Body

Content-Type

Statuscode

HTML CSS

JavaScript

Tuesday 29 October 13

Pro Datei, maximal zwei Sprachen

Tuesday 29 October 13

.└── public ├── css ├── js │   ├── news │   │   ├── models │   │   └── views │   └── user │   ├── models │   └── views └── test ├── news │   ├── models │   └── views └── user ├── models └── views

Tuesday 29 October 13

Multi Page vs. Single Page

Tuesday 29 October 13

Einstiegsseite

Multi Page App

Tuesday 29 October 13

Einstiegsseite Modul 1

Multi Page App

Tuesday 29 October 13

Einstiegsseite Modul 1

Multi Page App

Tuesday 29 October 13

Einstiegsseite Modul 1 Modul 2

Multi Page App

Tuesday 29 October 13

Einstiegsseite Modul 1 Modul 2

Multi Page App

Tuesday 29 October 13

Einstiegsseite

Tuesday 29 October 13

Einstiegsseite

JSON

Tuesday 29 October 13

Einstiegsseite

JSON

Tuesday 29 October 13

Einstiegsseite

JSON

Modul 1

Tuesday 29 October 13

Einstiegsseite JSON

JSON

Modul 1

Tuesday 29 October 13

Einstiegsseite JSON

JSON

Modul 1

Tuesday 29 October 13

Einstiegsseite JSON

JSON

Modul 1

Modul 2

Tuesday 29 October 13

Einstiegsseite JSON

JSON

JSON

Modul 1

Modul 2

Tuesday 29 October 13

Einstiegsseite JSON

JSON

JSON

Modul 1

Modul 2

Tuesday 29 October 13

Einstiegsseite JSON

JSON

JSON

Modul 1

Modul 2

Modul 3

Tuesday 29 October 13

MV*?!

Tuesday 29 October 13

MVC

Tuesday 29 October 13

Model

Tuesday 29 October 13

Model View

Tuesday 29 October 13

Model View

Controller

Tuesday 29 October 13

Tuesday 29 October 13

MVVM

Tuesday 29 October 13

Model

Tuesday 29 October 13

Model Businesslogik

Tuesday 29 October 13

Model

ViewModel

Businesslogik

Tuesday 29 October 13

Model

ViewModel UI-Logik

Businesslogik

Tuesday 29 October 13

Model

ViewModel UI-Logik

Businesslogik

Tuesday 29 October 13

Model

ViewModel UI-Logik

Businesslogik

Tuesday 29 October 13

Model

ViewModel

View

UI-Logik

Businesslogik

Tuesday 29 October 13

Model

ViewModel

DarstellungView

UI-Logik

Businesslogik

Tuesday 29 October 13

Model

ViewModel

DarstellungView

UI-Logik

Businesslogik

Tuesday 29 October 13

Model

ViewModel

DarstellungView

UI-Logik

Businesslogik

Tuesday 29 October 13

Model

ViewModel

DarstellungView

UI-Logik

DataBinding

Businesslogik

Tuesday 29 October 13

Tuesday 29 October 13

Modulloader

Tuesday 29 October 13

require.js

Tuesday 29 October 13

index.html

Tuesday 29 October 13

index.html

config

Tuesday 29 October 13

index.html

require.jsconfig

Tuesday 29 October 13

index.html

require.jsconfig

main

Tuesday 29 October 13

index.html

require.jsconfig

main

App

Tuesday 29 October 13

Requirejs Optimizer

Tuesday 29 October 13

Ember

Tuesday 29 October 13

Router

Tuesday 29 October 13

Router

Controller

Tuesday 29 October 13

Router

Controller

Templates

Tuesday 29 October 13

Router

Controller

Templates Model

Tuesday 29 October 13

Router

Controller

Templates Model

Components

Tuesday 29 October 13

Router

Controller

Templates Model

Components

Tuesday 29 October 13

Router

Controller

Templates Model

Components

Tuesday 29 October 13

JavaScript auf dem Server?

Tuesday 29 October 13

Node.js & Express

Tuesday 29 October 13

Node.js

C-Libs

Tuesday 29 October 13

Node.js

C-Libs

Tuesday 29 October 13

Node.js

C-Libs

Standard LibraryInterne Module

Tuesday 29 October 13

Node.js

C-Libs

Standard LibraryInterne Module

Tuesday 29 October 13

Node.js

C-Libs

Standard LibraryInterne Module

Tuesday 29 October 13

Node.js

C-Libs

Standard LibraryInterne Module NPM

Tuesday 29 October 13

Node.js

C-Libs

Standard LibraryInterne Module NPM

Tuesday 29 October 13

HTTP-Modul Webserver, Request, Response

Connect Middleware

Express Routing

Express

Tuesday 29 October 13

Routing

app.<method>(url, [callback...], callback)

Tuesday 29 October 13

Routing

app.<method>(url, [callback...], callback)

getpostputdelete...

Tuesday 29 October 13

Routing

app.<method>(url, [callback...], callback)

getpostputdelete...

Tuesday 29 October 13

Routing

app.<method>(url, [callback...], callback)

function (req, res, next) { ... next();}

getpostputdelete...

Tuesday 29 October 13

Routing

app.<method>(url, [callback...], callback)

function (req, res, next) { ... next();}

getpostputdelete...

Tuesday 29 October 13

Routing

app.<method>(url, [callback...], callback)

function (req, res, next) { ... next();}

getpostputdelete...

Tuesday 29 October 13

Middleware

app.use([path], function)

Tuesday 29 October 13

Middleware

app.use([path], function)

function (req, res, next) { ... next();}

Tuesday 29 October 13

Middleware

app.use([path], function)

function (req, res, next) { ... next();}

Tuesday 29 October 13

Meteor

Tuesday 29 October 13

Meteor

Pakete

Live Updates

Synchronisierung

Tuesday 29 October 13

Realtime

Tuesday 29 October 13

HTTPServer Client

Request

Response

RealtimeServer Client

Message

Tuesday 29 October 13

ClientServer

Tuesday 29 October 13

ClientServer

Tuesday 29 October 13

ClientServer

Request (http)

Tuesday 29 October 13

ClientServer

Request (http)

Tuesday 29 October 13

ClientServer

Request (http)Response (http)

Tuesday 29 October 13

ClientServer

Request (http)Response (http)

Tuesday 29 October 13

ClientServer

Request (http)Response (http)Switch Protocol

Tuesday 29 October 13

ClientServer

Request (http)Response (http)Switch Protocol

Tuesday 29 October 13

ClientServer

Request (http)Response (http)Switch Protocol

Messages

Tuesday 29 October 13

Ext JS, dojo, etc?

Tuesday 29 October 13

Fragen?

Tuesday 29 October 13

Sebastian Springersebastian.springer@mayflower.de

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer

https://github.com/sspringer82

Kontakt

Tuesday 29 October 13