NodeCamp/Presentation/BuildingTheBackend/BuildingTheBackend.html at master · Microsoft-Web/NodeCamp · GitHub

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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Building the Backend</title>

		<meta name="description" content="This session introduces the use of the Socket.IO module that allows for real-time bidirectional communication. Here we see how to connect, broadcast and receive messages in a chat app. It also shows how to use Azure DocumentDB, a NoSQL database, to save and retrieve messages.">
		<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">

        <!-- Custom styles -->
        <link rel="stylesheet" href="../../_layouts/custom.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 data-state="title">
					<h1>Building the Backend</h1>
				</section>

				<section data-state="agenda">
					<h2>Agenda</h2>
					<ol>
						<li>What are Web Sockets?</li>
						<li>Using Socket.IO to connect users, broadcast and receive messages</li>
						<li>Using a NoSQL Database</li>
					</ol>
				</section>

				<section>
					<section data-state="head">
						<h2>What are Web Sockets?</h2>
					</section>
					<section>
						<h2>What are Web Sockets??</h2>
						<ul>
							<li>A Websocket is a protocol designed to allow web applications to create a full-duplex channel over TCP (i.e. to have bi-directional communication) between the web browser and a web server</li>
							<li>It is fully compatible with HTTP and uses TCP port number 80</li>
							<li>WebSockets allowed web applications to become real-time and support advanced interactions between the client and the server</li>
							<li>It is supposed by several browsers including Microsoft Edge, Internet Explorer, Google Chrome, Firefox, Safari and Opera</li>
						</ul>
					</section>
					<section>
						<h2>What is Socket.IO?</h2>
						<ul>
							<li>Socket.IO is a simple JavaScript library and node.js module that allows you to create real-time bidirectional event-based communication apps simply and quickly</li>
							<li>It simplifies the process of using WebSockets significantly. We will be using Socket.IO v1.0 to make our chatroom app</li>
						</ul>
					</section>
				</section>

				<section>
					<section data-state="head">
						<h2>Using Socket.IO to connect users, broadcast and receive messages</h2>
					</section>
					<section>
						<h2>Implementing Socket.IO</h2>
						<ul>
							<li>Add it to the package.json</li>
							<li>In Visual Studio > right click NPM to add module
								<img data-src="images/add-npm-module-in-visual-studio.png" alt="Down arrow">
							</li>
							<li>Or from the command prompt
								<pre><code class="cmd" data-trim contenteditable>
npm install --save socket.io
								</code></pre>
							</li>
						</ul>
					</section>
					<section data-state="demo">
						<h2>Demo</h2>
						<h3>Using Socket I.O to connect users, send and receive messages</h3>
					</section>
				</section>

				<section>
					<section data-state="head">
						<h2>Using a NoSQL Database</h2>
					</section>
					<section>
						<h2>About NoSQL databases</h2>
						<ul>
							<li>Not only SQL</li>
							<li>Different types: document based, graph databases, key-value stores, etc.</li>
							<li>DocumentDB, MongoDB, Couchbase, HBase, Cassandra</li>
							<li>Object oriented APIs</li>
							<li>Good for large amounts of data, can be scaled</li>
						</ul>
					</section>
					<section>
						<h2>DocumentDB</h2>
						<ul>
							<li>Particularly suited for web and mobile applications</li>
							<li>Schema-less, NoSQL document database</li>
							<li>Fully managed, with provisioned capacity</li>
							<li>Stored entities are JSON documents</li>
							<li>Tunable consistency</li>
							<li>Designed to scale</li>
						</ul>
						<img data-src="images/azure-documentdb-cloud.png" alt="Down arrow">
					</section>
					<section>
						<h2>DocumentDB</h2>
						<ul>
							<li>NoSQL document database-as-a-service</li>
							<li>First of its kind database service to offer native support for JavaScript, SQL query and transactions over JSON documents</li>
						</ul>
						<table style="font-size:64%;margin-top:2%">
							<thead>
								<tr>
									<th>Rich Query and Transactions over JSON Data</th>
									<th>Reliable &amp; Predictable Performance</th>
									<th>Rapid Development</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Query JSON data with no secondary indices</td>
									<td>Fast, predictable performance</td>
									<td>Build with familiar tools – REST, JSON, JavaScript</td>
								</tr>
								<tr>
									<td>Native JavaScript transactional processing</td>
									<td>Tunable consistency</td>
									<td>Easy to start and fully-managed</td>
								</tr>
								<tr>
									<td>Familiar SQL-based query language</td>
									<td>Elastic scale</td>
									<td>Enterprise-grade Azure platform</td>
								</tr>
							</tbody>
						</table>
					</section>
					<section>
						<h2>DocumentDB: A Document Store</h2>
						<img data-src="images/azure-documentdb-a-document-store.png" alt="Down arrow">
					</section>
					<section>
						<h2>DocumentDB: The Basics</h2>
						<img data-src="images/azure-documentdb-the-basics.png" alt="Down arrow">
					</section>
					<section data-state="demo">
						<h2>Demo</h2>
						<h3>Saving messages to Azure DocumentDB</h3>
					</section>
					<section data-state="demo">
						<h2>Demo</h2>
						<h3>Setting environment variables</h3>
					</section>
					<section>
						<h2>Using MongoDB</h2>
						<ol>
							<li>Many developers build Node apps with MongoDB</li>
							<li>DocumentDB databases can now be used as the data store for apps written for MongoDB using the existing drivers by simply changing a connection string</li>
							<li>Alternatively, you can connect to 3rd party services like MongoHQ or MongoLab or run MongoDB in a VM</li>
						</ol>
					</section>
					<section>
						<h2>Add Support for MongoDB</h2>
						<ul>
							<li>Add it to the package.json</li>
							<li>In Visual Studio > right click NPM to add module
								<img data-src="images/add-npm-module-in-visual-studio.png" alt="Down arrow">
							</li>
							<li>Or from the command prompt
								<pre><code class="cmd" data-trim contenteditable>
npm install --save mongodb
								</code></pre>
							</li>
						</ul>
					</section>
				</section>

				<section style="text-align: left;"  data-state="the-end">
                    <img data-src="../../_layouts/MicrosoftLogo.png" />
					<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>