20
ExpressJS Web development with ExpressJS Learning & Development http://academy.telerik.com Telerik School Academy

Web development with ExpressJS Learning & Development Telerik School Academy

  • View
    221

  • Download
    0

Embed Size (px)

Citation preview

Kendo UI Overview

ExpressJSWeb development with ExpressJSLearning & Developmenthttp://academy.telerik.com Telerik School Academy

1Table of ContentsConnect for NodeJSExpressJSViews and layoutWorking with DataCommon and Advanced Scenarios2

*(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*2##node.jsEvent-Driven, Asynchronous IO, Server-Side JavaScript library in COpen SourceAvailable onWindowsServiceUnder IIS (iisnode)*nix systemsAs a serviceAzureHeroku3

NodeJS Web ServerBasic server implementation

var http = require('http');

http.createServer(function(req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); //return success header

res.write('My server is running! ^_^'); //response res.end(); //finish processing current request}).listen(1234);4Connect for NodeJSConnect is a middleware framework for nodeBuilt on top of nodes Http Serverhttp://www.senchalabs.org/connect/5var connect = require('connect');

var app = connect() .use(connect.logger('dev')) .use(connect.static('public')) .use(function(req, res){ res.end('hello world\n'); })

http.createServer(app).listen(3000);$ npm install connectConnect MiddlewareRequest Processing Pipeline6ResponseRequestMiddleware (logging, authentication, etc.)Connect for NodeJS ExampleCustom middleware function for connect

7var connect = require('connect'), util = require('util');

var interceptorFunction = function(request, response, next) { console.log(util.format('Request for %s with method %s', request.url, request.method)); next();};

var app = connect() // .use('/log', interceptorFunction) .use(interceptorFunction) .use(function onRequest(request, response) { response.end('Hello from Connect!'); }).listen(3001);Express.jsBuilt on top of Connect MiddlewareAdds functionality to ConnectRequest / Response enhancementsRoutingView SupportHTML HelpersContent Negotiation

Exposes Connect Middleware8

Basic ArchitectureRequestViewFileXMLJSONetc.FunctionRouting9First Express App10var express = require('express');

var app = express();

app.get('/', function (request, response) { response.send('Welcome to Express!');});

app.get('/customer/:id', function (req, res) { res.send('Customer requested is ' + req.params['id']);});

app.listen(3000);Demo: Creating Express Applications

Simple ExpressJS application and "nodemon"Create routes and require() themPass parametersConfigure and middlewareViews in ExpressJSUser InterfaceBased on TemplatesSupport for multiple View EnginesJade, EJS, JSHtml, . . .Default is Jadehttp://jade-lang.com12app.get('/', function (req, res) { res.render('index');});Views in ExpressJS Examplevar express = require('express'), path = require('path');var app = express();app.configure(function () { app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.static(path.join(__dirname, 'public')));});app.get('/', function (req, res) { res.render('empty');});app.listen(3000);doctypehtml(lang="en") head title Welcome to this emtpy page body13Demo: Views in ExpressJSShow simple views in ExpressJSJade syntax examplesLayouts and blocksStylus

Working with DataPass data to the views

Read data from the views (bodyParser)

Read and send files

Data for all views15res.render('index', { title: 'Customer List' });res.render('index', { title: 'Customer List' });var filePath = req.files.picture.path;// ...res.download(filePath);res.sendfile(filePath);app.locals.clock = { datetime: new Date().toUTCString()};15Demo: Working with dataPass data to views (customer.index)Submit data from views (customer.create)Content negotiation (customer.details)Upload files (customer.create)Helpers (app.locals)

Demo: Advanced ScenariosCookiesSessionsCustom middlewareAuthentication and authorization17

Next StepsExpress.js Sampleshttps://github.com/visionmedia/expressDatabase SupportMS SQLCouchDBPostgreSQLRedisSocket.ioReal-time support18Next Steps (2)Search on npm.org before you re-invent the wheelExpress is Lightweight Framework and Fast to work withTesting is not optionalMochaJavaScript can get messy19ExpressJShttp://academy.telerik.com , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , ??????????????????Questions??