Leichtgewichtige Webwenwendungen mit dem MEAN-Stack

1,312 views
1,070 views

Published on

Gerade bei Web-Anwendungen ist es wichtig Anforderungen schnell umsetzen zu können. Dazu sollte der Stack den Entwickler unterstützten und nicht durch unnötige Abstraktionen weitere Hürden aufbauen. Zurück zur Einfachheit ist hier die Devise!
MEAN steht für MongoDB, ExpressJS, AngularJS und Node.js. Server und Frontend werden dank Node.JS in einer gmeinsamen Programmiersprache entwickelt: JavaScript. JSON-Datenstrukturen können ohne größere Umwege mittels ExpressJS aus der Datenbank an AngularJS übergeben werden; ein aufwändiges OR-Mapping entfällt. AngularJS erlaubt es mittels Direktiven das HTML-Subset um anwendungsspezifisches Verhalten zu erweitern.
Dieser Vortrag gibt einen Einblick in die Entwicklung von Web-Anwendungen mit dem MEAN-Stack und zeigt das Zusammenspiel der einzelnen Komponenten.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,312
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ca. 1 min.
  • Kein Produkt oder Standard!
    Sammlung von Technologien für den Entwicklung von Webanwendungen
    Anlehnung an LAMP-Stack.
    Begriff wurde erstmals von Valeri Karpov im April 2013 in einem Blogpost erwähnt.
  • MongoDB: 2007 / 2010 (prod ready)
    Express: (932 SLC + 1143 SLOC)
    AngularJs: 2009
    Node.js: 2009
  • Single-Page Applikation
    UI-Logik wird vom Client berechnet
    Server ist zustandslos und liefert nur Daten
    HTML Templates, JS, CSS usw. können separat von einem WebServer geliefert werden.
  • Welche Gründe sprechen für den MEAN-Stack?
  • JavaScript „Die Sprache des Webs“
    Alle Entwickler sprechen die gleiche Sprache
    „Don't repeat yourself“. Zahlreiche JavaScript Bibliotheken können sowohl auf dem Client als auch auf dem Server verwendet werden
  • Einheitliches Datenformat
    Client/Server und Datenbank sprechen JSON.
  • Yeoman: Workflow tool / Scarfolding für WebApps.
    Grunt: Build-System für JavaScript
    Bower: PackageManager für clientseitige JavaScript Bibliotheken.
    Mocha: Testframework für JavaScript
  • Leichtgewichtige Webwenwendungen mit dem MEAN-Stack

    1. 1. Marco Rico Gomez | Weigle Wilczek GmbH Leichtgewichtige Webanwendungen mit dem MEAN Stack
    2. 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. 3. Was ist der MEAN Stack? ● ● Technologiestack für die Entwicklung von Webanwendung Valeri Karpov, April 2013
    4. 4. M E A N
    5. 5. Architektur
    6. 6. Warum?
    7. 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. 8. Ein Datenformat (JSON) { "title": "Foo Bar", "type": 12 } { "title": "Foo Bar", "type": 12 } { "title": "Foo Bar", "type": 12 }
    9. 9. Keine Schemamigrationen ALTER TABLE foo ADD COLUMN bar VARCHAR(200) NOT NULL; Schema wird in der Anwendung definiert.
    10. 10. Geringer Resourcenverbrauch ● kein (wenig) UI-Rendering auf dem Server ● ereignisgesteuerte Architektur / Non-blocking I/O
    11. 11. Wie?
    12. 12. 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')); });
    13. 13. 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) { … }
    14. 14. Routen sind einfache Funktionen app.get('/api/foo', function (req, res) { res.send({ foo: 'bar' }); });
    15. 15. Routen filtern (Wildcards) app.all("/app/*", function (req, res, next) { if (isUserLoggedIn) next(); else res.redirect('/login'); });
    16. 16. Routen (Variablen) app.put("/api/task/:id", function(req, res, next) { res.send("Your request id: " + req.params.id); });
    17. 17. 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
    18. 18. 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 !
    19. 19. 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);
    20. 20. Mongoose var mongoose = require('mongoose'); var Task = mongoose.model('Task', { name: { type: String, required: true }, done: { type: Boolean, default: false }, dueBy: Date, priority: Number });
    21. 21. Validierung Task.schema.path('priority') .validate(function (value) { return (value >= 0 && value <= 2) }, 'Invalid priority');
    22. 22. 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
    23. 23. 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); }); };
    24. 24. AngularJS ● clienseitiges JavaScript Framework für WebApps. – Templates – Model-View-Controller – Dependency Injection – Data-Binding – Direktiven – Views und Routen
    25. 25. 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>
    26. 26. 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>
    27. 27. Templates & Databinding
    28. 28. Direktiven ● ● ● ● ● ● ● ● ng-include ng-click ng-hide/ ng-show ng-class ng-cloak ng-repeat ng-model …
    29. 29. Scopes & Controllers angular.controller();
    30. 30. 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() {});
    31. 31. Dependency Injection function DemoCtrl ($scope, $resource) { ... }
    32. 32. RESTful APIs konsumieren ● ngResource Modul – Support für Zugriff auf RESTful APIs – $resource-Service ● ● ● ● query() get() save() delete()
    33. 33. HTML erweitern (Direktiven) ● eigene Komponentenen definieren – ● DOM-Transformation vorhandene Elemente um neues Verhalten erweitern angular.directive();
    34. 34. Direktiven (2) ● eigene Komponenten erstellen (don't repeat your self)
    35. 35. Direktiven (3) ● angular-ui Projekt – ui-bootstrap (Accordion/ Tabs/ Alerts/ Carousel) – ng-grid – ui-router – select2 – codeMirror – ... http://angular-ui.github.io/
    36. 36. Tooling http://yeoman.io
    37. 37. Q&A rico@weiglewilczek.com @mricog

    ×