-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathIntroToExpress.html
186 lines (160 loc) · 7.2 KB
/
IntroToExpress.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Introduction to Express Framework</title>
<meta name="description" content="This session shows the Express folder structure and how routes and views are separated into their own files">
<meta name="author" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="../../_layouts/reveal.js/css/reveal.css">
<link rel="stylesheet" href="../../_layouts/reveal.js/css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="../../_layouts/reveal.js/lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../../_layouts/reveal.js/css/print/pdf.css' : '../../_layouts/reveal.js/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="../../_layouts/reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Introduction to Express Framework</h1>
</section>
<section>
<h2>Agenda</h2>
<ol>
<li>What is Express</li>
<li>Installing & Using Express</li>
<li>Creating a simple REST API</li>
</ol>
</section>
<section>
<section>
<h2>What is Express</h2>
</section>
<section>
<h2>What is Express?</h2>
<p>
Express is a minimal, open source and flexible Node.js web app framework designed to make developing websites, web apps and APIs much easier.
</p>
</section>
<section>
<h2>Why use Express?</h2>
<ul>
<li>Express helps you respond to requests with route support so that you may write responses to specific URLs</li>
<li>Supports multiple templating engines to simplify generating HTML</li>
</ul>
</section>
</section>
<section>
<section>
<h2>Installing and Using Express</h2>
</section>
<section>
<h2>Installing and Using Express</h2>
<pre><code class="cmd" data-trim contenteditable>
npm install express
npm install jade
</code></pre>
</section>
<section>
<h2>Installing Node.js Tools for Visual Studio</h2>
<ul>
<li>NTVS is a free, open source plugin that turns Visual Studio into a Node.js IDE</li>
<li>NTVS comes with templates for creating Express applications</li>
<li><a href="https://github.com/Microsoft/nodejstools">https://github.com/Microsoft/nodejstools</a></li>
</ul>
</section>
</section>
<section>
<section>
<h2>Creating a Simple REST API</h2>
</section>
<section>
<h2>Demo</h2>
<h3>Creating an Express application using the Express Generator</h3>
<pre><code class="cmd" data-trim contenteditable>
npm install -g express-generator
</code></pre>
</section>
<section>
<h2>Explanation of Routes</h2>
<ul>
<li>A router maps HTTP requests to a callback</li>
<li>HTTP requests can be sent as GET/POST/PUT/DELETE, etc.</li>
<li>URLs describe the location targeted</li>
<li>Node helps you map a HTTP GET request like: <a href="http://localhost:8888/index">http://localhost:8888/index</a </li>
<li>To a request handler (callback)
<pre><code class="javascript" data-trim contenteditable>
app.get('/index', function (req, res) {});
</code></pre>
</li>
</ul>
</section>
<section>
<h2>Creating a Simple Express Application</h2>
<pre><code class="javascript" data-trim contenteditable>
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.json({message:'hooray! welcome to our api!'});
});
app.listen(process.env.PORT || 8080);
</code></pre>
</section>
<section>
<h2>Demo</h2>
<h3>Adding a new route</h3>
</section>
</section>
<section>
<h2>Resources</h2>
<ul>
<li>Express Framework: <a href="http://expressjs.com/">http://expressjs.com</a></li>
<li>Intro to Express: <a href="http://code.tutsplus.com/tutorials/introduction-to-express--net-33367">http://code.tutsplus.com/tutorials/introduction-to-express--net-33367</a></li>
<li>Jade Templates: <a href="http://jade-lang.com/tutorial/">http://jade-lang.com/tutorial</a></li>
<li>JavaScript and Jade Templating: <a href="http://www.slideshare.net/wearefractal/jade-javascript-templating">http://www.slideshare.net/wearefractal/jade-javascript-templating</a></li>
</ul>
</section>
<section style="text-align: left;">
<h2>Microsoft</h2>
<p><small style="font-size:0.4em;">© 2016 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
</small></p>
</section>
</div>
<script src="../../_layouts/reveal.js/lib/js/head.min.js"></script>
<script src="../../_layouts/reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: '../../_layouts/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '../../_layouts/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../../_layouts/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../../_layouts/reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '../../_layouts/reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: '../../_layouts/reveal.js/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>