Building Web Apps with Express             By Aaron Stannard      Startup Developer Evangelist, Microsoft Corporation
What is Express?• Sinatra-inspired MVC  framework for  Node.JS• Built on Connect  Middleware• Minimalist
What Express Does• Parses arguments and headers• Routing• Views  – Partials  – Layouts• Configuration• Sessions
Simple Express Appvar express = require(express);                   Loads Express modulevar app = module.exports = express...
Getting Started with Express• Installing Express   [local install] C:> npm install express   [global install] C:> npm inst...
Express Project Structure/projectroot/        package.json            Tells Node and NPM what packages are required       ...
Express Configuration (app.js)app.configure(function(){                    Global configuration setter app.set(views, __di...
Routing//Catch-allapp.all(/app(/*)?, requiresLogin);             Catch-all – works for all HTTP verbs// Routesapp.get(/, r...
Creating Route Modules (Style 1)server.jsvar express = require(express)  , routes = require(./routes);…app.get(/, routes.i...
Creating Route Modules (Style 2)server.js // Routes require(./routes/site)(app);routes/site.js/* * Module dependencies */ ...
Request Object• Req.Param    – Req.Query    – Req.Body•   Req.Session•   Req.Flash•   Req.Headers•   Can bind usable JSON ...
Response Object•   Res.Redirect•   Res.Write•   Res.End•   Res.Download•   Local variables and object binding
Route Pre-Conditionsapp.param(‘app’, function(req, res, next, id){        appProvider.getAppById(req.session.userName, id,...
Route Filters//Catch-allapp.all(/app(/*)?, function(req, res, next) {  if(req.session && req.session.userName) {    next()...
Views•   Support for multiple view engines•   Layout support•   Partials•   Dynamic Helpers
Jade• Basic Syntax  ul       li            a(href=/) Home• Variables  title= title• Conditionals  if flash.info          s...
View Helpersapp.dynamicHelpers({    session: function (req, res) {        return req.session;    },    flash: function(req...
Session Management• Session State Providers  – Cookie + Back-end Session Store• Session Cookies  – cookie-sessions NPM pac...
Model Structure (OOP)
Model Structure (Common)
Express on Windows Azure• Rename app.js to server.js• (Youre done)• Caveats  – Only a limited number of session state prov...
Further Reference•   ExpressJS.com - Official Express Homepage•   Github.com/visionmedia/jade - Jade•   Github.com/senchal...
About Me• Aaron Stannard  – Twitter: @Aaronontheweb  – Github: @Aaronontheweb  – Blog: http://www.aaronstannard.com/
Upcoming SlideShare
Loading in...5
×

Building Web Apps with Express

17,679
-1

Published on

An introduction to Express, the Sinatra-inspired MVC framework for Node.JS. You'll learn how Express manages and processes routes, how to use the Jade template engine, and how to design data models aimed to play nice with Express.

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
17,679
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
254
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide
  • Req.Param is an abstraction layer for picking up information about a request – it automatically searches:Query stringsPosted form valuesRoute valuesAnd will let you pick from what’s available
  • Building Web Apps with Express

    1. 1. Building Web Apps with Express By Aaron Stannard Startup Developer Evangelist, Microsoft Corporation
    2. 2. What is Express?• Sinatra-inspired MVC framework for Node.JS• Built on Connect Middleware• Minimalist
    3. 3. What Express Does• Parses arguments and headers• Routing• Views – Partials – Layouts• Configuration• Sessions
    4. 4. Simple Express Appvar express = require(express); Loads Express modulevar app = module.exports = express.createServer(); Instantiates Express serverapp.configure(function(){ app.set(views, __dirname + /views); app.set(view engine, jade); Global Configuration app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + /public));}); Loads and binds routes// Routes (defined in separaterequire(./routes/site)(app); module)app.listen(process.env.PORT);console.log("Express server listening on port %d in %s mode",app.address().port, app.settings.env);
    5. 5. Getting Started with Express• Installing Express [local install] C:> npm install express [global install] C:> npm install express -g• Creating Express Applications C:> express [new project name] C:> cd [new project name] C:[new project name]> npm install -d C:[new project name]> node app.js Express server listening on port 3000 in development mode
    6. 6. Express Project Structure/projectroot/ package.json Tells Node and NPM what packages are required readme.txt web/ Root of your actual application app.js views/ The main entry point for the Express application layout.jade index.jade models/ post.js Data model public/ /images /stylesheets Static content /scripts test/ Directory for unit tests route-test.js post-test.js node_modules/ Output directory for all NPM installationsC:[projectroot]> node web/app.jsNode server listenening on port 3000 in development mode
    7. 7. Express Configuration (app.js)app.configure(function(){ Global configuration setter app.set(views, __dirname + /views); View Engine and Views directory app.set(view engine, jade); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.cookieParser()); app.use(sessions({secret: adfasdf34efsdfs34sefsdf})); Session Key app.use(app.router); app.use(express.static(__dirname + /public)); Router and Static Content});app.configure(development, function(){ Development-environment configurations app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});app.configure(production, function(){ Production-environment configurations app.use(express.errorHandler());});
    8. 8. Routing//Catch-allapp.all(/app(/*)?, requiresLogin); Catch-all – works for all HTTP verbs// Routesapp.get(/, routes.index); HTTP GET requestapp.get(/about, routes.about);app.get(/contact, routes.contact);app.get(/app/list, routes.listapps);app.get(/app/new, routes.newapp);app.post(/app/new, routes.saveapp); HTTP POST requestapp.get(/app/:app, routes.getapp); Accepts :app route argumentapp.get(/app/:app/edit, routes.editapp); Syntax follows the pattern: App.[verb](path, function(req,res), [function(req,res)]);
    9. 9. Creating Route Modules (Style 1)server.jsvar express = require(express) , routes = require(./routes);…app.get(/, routes.index);route.js// GET the homepageexports.index = function(req, res){ res.render(index, { title: Home });};
    10. 10. Creating Route Modules (Style 2)server.js // Routes require(./routes/site)(app);routes/site.js/* * Module dependencies */ module.exports = function(app){ // GET home page app.get(/, function(req, res){ res.render(index, { title: ‘Home }) }); }
    11. 11. Request Object• Req.Param – Req.Query – Req.Body• Req.Session• Req.Flash• Req.Headers• Can bind usable JSON payloads
    12. 12. Response Object• Res.Redirect• Res.Write• Res.End• Res.Download• Local variables and object binding
    13. 13. Route Pre-Conditionsapp.param(‘app’, function(req, res, next, id){ appProvider.getAppById(req.session.userName, id, function(error, app){ if(error) return next(error); if(!app) return next(new Error(Failed to find app with id + id)); req.app = app; next(); });});
    14. 14. Route Filters//Catch-allapp.all(/app(/*)?, function(req, res, next) { if(req.session && req.session.userName) { next(); } else { res.redirect(/login?redir= + req.url); }});
    15. 15. Views• Support for multiple view engines• Layout support• Partials• Dynamic Helpers
    16. 16. Jade• Basic Syntax ul li a(href=/) Home• Variables title= title• Conditionals if flash.info span.info= flash.info• Iterations each user in users div.user_id= user.username
    17. 17. View Helpersapp.dynamicHelpers({ session: function (req, res) { return req.session; }, flash: function(req, res){ if(typeof(req.session) == undefined){ return undefined; } else{ return req.flash(); } }});
    18. 18. Session Management• Session State Providers – Cookie + Back-end Session Store• Session Cookies – cookie-sessions NPM package //Assign username of logged in user to session req.session.userName = username;
    19. 19. Model Structure (OOP)
    20. 20. Model Structure (Common)
    21. 21. Express on Windows Azure• Rename app.js to server.js• (Youre done)• Caveats – Only a limited number of session state providers – Many popular data stores not available
    22. 22. Further Reference• ExpressJS.com - Official Express Homepage• Github.com/visionmedia/jade - Jade• Github.com/senchalabs/connect - Connect• Github.com/WindowsAzure – Azure bits
    23. 23. About Me• Aaron Stannard – Twitter: @Aaronontheweb – Github: @Aaronontheweb – Blog: http://www.aaronstannard.com/
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×