Upload
sebastian-springer
View
298
Download
0
Embed Size (px)
Citation preview
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 [email protected]
Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland
@basti_springer
https://github.com/sspringer82
Kontakt
Tuesday 29 October 13