JavaScript Architektur

Enterprise JavaScript Architekturen

Tuesday 29 October 13

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer


https://github.com/sspringer82


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

innerhalb eines Softwaresystems.


Wie strukturiere ich meine JavaScript-Applikation?


Wartbarkeit und Erweiterbarkeit



Server


Server

Client


Server

Client


Server

Client

Request


Server

Client

Request


Server

Client

RequestResponse


Server

Client

RequestResponseHTTP


Response?

Header

Body


Response?

Header

Body

Statuscode


Response?

Header

Body

Content-Type

Statuscode


Response?

Header

Body

Content-Type

Statuscode

HTML


Response?

Header

Body

Content-Type

Statuscode

HTML CSS


Response?

Header

Body

Content-Type

Statuscode

HTML CSS

JavaScript


Pro Datei, maximal zwei Sprachen


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


Multi Page vs. Single Page


Einstiegsseite

Multi Page App


Einstiegsseite Modul 1

Multi Page App


Einstiegsseite Modul 1

Multi Page App


Einstiegsseite Modul 1 Modul 2

Multi Page App


Einstiegsseite Modul 1 Modul 2

Multi Page App


Einstiegsseite


Einstiegsseite

JSON


Einstiegsseite

JSON


Einstiegsseite

JSON

Modul 1


Einstiegsseite JSON

JSON

Modul 1


Einstiegsseite JSON

JSON

Modul 1


Einstiegsseite JSON

JSON

Modul 1

Modul 2


Einstiegsseite JSON

JSON

JSON

Modul 1

Modul 2


Einstiegsseite JSON

JSON

JSON

Modul 1

Modul 2


Einstiegsseite JSON

JSON

JSON

Modul 1

Modul 2

Modul 3


MV*?!


MVC


Model


Model View


Model View

Controller



MVVM


Model


Model Businesslogik


Model

ViewModel

Businesslogik


Model

ViewModel UI-Logik

Businesslogik


Model

ViewModel UI-Logik

Businesslogik


Model

ViewModel UI-Logik

Businesslogik


Model

ViewModel

View

UI-Logik

Businesslogik


Model

ViewModel

DarstellungView

UI-Logik

Businesslogik


Model

ViewModel

DarstellungView

UI-Logik

Businesslogik


Model

ViewModel

DarstellungView

UI-Logik

Businesslogik


Model

ViewModel

DarstellungView

UI-Logik

DataBinding

Businesslogik



Modulloader


require.js


index.html


index.html

config


index.html

require.jsconfig


index.html

require.jsconfig

main


index.html

require.jsconfig

main

App


Requirejs Optimizer


Ember


Router


Router

Controller


Router

Controller

Templates


Router

Controller

Templates Model


Router

Controller

Templates Model

Components


Router

Controller

Templates Model

Components


Router

Controller

Templates Model

Components


JavaScript auf dem Server?


Node.js & Express


Node.js

C-Libs


Node.js

C-Libs


Node.js

C-Libs

Standard LibraryInterne Module


Node.js

C-Libs



Node.js

C-Libs



Node.js

C-Libs

Standard LibraryInterne Module NPM


Node.js

C-Libs

Standard LibraryInterne Module NPM


HTTP-Modul Webserver, Request, Response

Connect Middleware

Express Routing

Express


Routing

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


Routing


getpostputdelete...


Routing


getpostputdelete...


Routing


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

getpostputdelete...


Routing



getpostputdelete...


Routing



getpostputdelete...


Middleware

app.use([path], function)


Middleware




Middleware




Meteor


Meteor

Pakete

Live Updates

Synchronisierung


Realtime


HTTPServer Client

Request

Response

RealtimeServer Client

Message


ClientServer


ClientServer


ClientServer

Request (http)


ClientServer

Request (http)


ClientServer

Request (http)Response (http)


ClientServer

Request (http)Response (http)


ClientServer

Request (http)Response (http)Switch Protocol


ClientServer



ClientServer


Messages


Ext JS, dojo, etc?


Fragen?


Sebastian [email protected]

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer


Kontakt


mailto:[email protected]

mailto:[email protected]



Technology

JavaScript Architektur