The document provides a comprehensive overview of the MEAN stack for developing modern web applications, detailing its architecture and components including MongoDB, Express.js, AngularJS, and Node.js. It discusses data modeling, server-side configurations, RESTful APIs, and client-side JavaScript frameworks, emphasizing features like schema-less data storage and event-driven architecture. Additionally, it includes examples of code snippets for various functionalities within the stack and highlights tools for building and enhancing web applications.

1. Marco Rico Gomez | Weigle Wilczek GmbH
Leichtgewichtige Webanwendungen mit
dem MEAN Stack

2. Agenda
●
Überblick MEAN-Stack
–
●
Warum?
–
●
Architektur einer modernen Webanwendung
Was spricht für diesen Technologiestack
Wie?
–
–
Datenmodell und -speicherung
–
●
Der Server
Frontend
Tooling

3. Was ist der MEAN Stack?
●
●
Technologiestack für die Entwicklung von
Webanwendung
Valeri Karpov, April 2013

4. M
E
A
N

5. Architektur

6. Warum?

7. Eine Programmiersprache
MongoDB
db.foo.find({ foo: 'bar' });
Node.JS/ Express.JS
app.get('/api/foo/:bar', function (req, res, next) {
res.send({ foo: 'bar' });
});
AngularJS:
angular.controller('FooCtrl', function ($scope, $resource) {
var Foo = $resource('/api/foo/:bar', { bar: '@id'});
$scope.bar = Foo.get({bar: 'bar'});
});

8. Ein Datenformat (JSON)
{
"title": "Foo Bar",
"type": 12
}
{
"title": "Foo Bar",
"type": 12
}
{
"title": "Foo Bar",
"type": 12
}

9. Keine Schemamigrationen
ALTER TABLE foo ADD COLUMN bar
VARCHAR(200) NOT NULL;
Schema wird in der Anwendung definiert.

10. Geringer Resourcenverbrauch
●
kein (wenig) UI-Rendering auf dem Server
●
ereignisgesteuerte Architektur / Non-blocking I/O

11. Wie?

13. app.js
// declare module dependencies ...
var express = require('express');
// more ...
var app = express();
// configure express ...
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(app.router);
// more ...
// define routes ...
app.get('/', routes.index);
app.get('/users', user.list);
// ... and go!!
http.createServer(app).listen(app.get('port'), function() {
console.log('Express server listening on port ' +
app.get('port'));
});

14. Express API (HTTP Verben)
●
app.get(path, [callback...], callback)
●
app.post(path, [callback...],callback)
●
app.put(path, [callback...], callback)
●
app.delete(path, [callback...],callback)
●
...
callback = function (req, res, next) {
…
}

15. Routen sind einfache Funktionen
app.get('/api/foo', function (req, res) {
res.send({ foo: 'bar' });
});

16. Routen filtern (Wildcards)
app.all("/app/*", function (req, res, next) {
if (isUserLoggedIn) next();
else res.redirect('/login');
});

17. Routen (Variablen)
app.put("/api/task/:id", function(req, res, next) {
res.send("Your request id: " + req.params.id);
});

19. MongoDB
{
}
"name": "Create something beautiful",
"dueBy": Date(2013, 10, 1),
"priority": 2,
"done": false,
"subTasks": [
{
"name": "blabla",
"done": true,
},
{
"name": "blabla",
"done": false
}
]
dokumentenorientiert
schemafrei

20. Join-less
{
"name": "Create something beautiful",
"dueBy": Date(2013, 10, 1),
"priority": 2,
"done": false,
"subTasks": [
{
"name": "blabla",
"done": true,
},
{
"name": "blabla",
"done": false
}
]
}
verschachtelte Datenstrukturen
16 MB Limit beachten !

21. Adhoc-Abfragen
db.tasks.find({
done: false,
dueBy: {
$gte: new Date(2013, 10, 1),
$lt: new Date(2013, 11, 1)
},
priotity: { $in: [0, 2] },
subTasks: { $exists: true }
}).sort({dueBy: -1}).limit(10);

23. Mongoose
var mongoose = require('mongoose');
var Task = mongoose.model('Task', {
name: { type: String, required: true },
done: { type: Boolean, default: false },
dueBy: Date,
priority: Number
});

24. Validierung
Task.schema.path('priority')
.validate(function (value) {
return (value >= 0 && value <= 2)
}, 'Invalid priority');

25. Validierung
{
"message": "Validation failed",
"name": "ValidationError",
"errors": {
"priority": {
"message": "Validator failed for ...",
"name": "ValidatorError",
"path": "priority",
"type": "Invalid priority",
"value": 4
}
}
Detaillierte Fehlerinformationen
Einfach, diese generisch im Client anzuzeigen

26. RESTful APIs erstellen
app.post('/api/tasks', function(req, res) {
var newTask = new model.Task(req.body);
newTask.save(function (err) {
if (err) return res.send(422, err);
res.send(201);
});
};

28. AngularJS
●
clienseitiges JavaScript Framework für WebApps.
–
Templates
–
Model-View-Controller
–
Dependency Injection
–
Data-Binding
–
Direktiven
–
Views und Routen

29. Bootstrapping Angular
<!doctype html>
<html lang="en" ng-app="demo">
<head>
...
</head>
<body ng-init="hello='Hello World'">
{{ hello }}
<script src="assets/angular.js"></script>
<script>
// separate file(s) (!)
angular.module("demo", []);
</script>
</body>
</html>

30. Bootstrapping Angular (2)
<!doctype html>
<html lang="en" ng-app="demo">
<head>
...
</head>
<body ng-init="hello='Hello World'">
Hello World
<script src="assets/angular.js"></script>
<script>
// separate file(s) (!)
angular.module("demo", []);
</script>
</body>
</html>

31. Templates & Databinding

32. Direktiven
●
●
●
●
●
●
●
●
ng-include
ng-click
ng-hide/ ng-show
ng-class
ng-cloak
ng-repeat
ng-model
…

33. Scopes & Controllers
angular.controller();

34. Client-side Services
●
Services sind Singletons
–
–
●
kapseln Funktionalität
können mittels Angular DI injiziert werden.
Built-in
–
$http, $window, $document, $filter, ...
angular.factory(„myService“, function() {});

35. Dependency Injection
function DemoCtrl ($scope, $resource) {
...
}

36. RESTful APIs konsumieren
●
ngResource Modul
–
Support für Zugriff auf RESTful APIs
–
$resource-Service
●
●
●
●
query()
get()
save()
delete()

37. HTML erweitern (Direktiven)
●
eigene Komponentenen definieren
–
●
DOM-Transformation
vorhandene Elemente um neues Verhalten
erweitern
angular.directive();

38. Direktiven (2)
●
eigene Komponenten erstellen (don't repeat your
self)

39. Direktiven (3)
●
angular-ui Projekt
–
ui-bootstrap (Accordion/ Tabs/ Alerts/ Carousel)
–
ng-grid
–
ui-router
–
select2
–
codeMirror
–
...
http://angular-ui.github.io/

40. Tooling
http://yeoman.io

41. Q&A
rico@weiglewilczek.com
@mricog