<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>TypeScript for Node.js</title>

	<link rel="stylesheet" href="css/reveal.css">
	<link rel="stylesheet" href="css/theme/black.css">

	<!-- Theme used for syntax highlighting of code -->
	<link rel="stylesheet" href="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) ? 'css/print/pdf.css' : 'css/print/paper.css';
		document.getElementsByTagName('head')[0].appendChild(link);
	</script>

	<style>
		.left { text-align: left; }
	</style>
</head>

<body>
	<div class="reveal">
		<div class="slides">

			<section>
				<h1>TypeScript for Node.Js</h1>
				"Tame your JavaScript"
			</section>

			<section>
				<img src="./images/profile1_sm.jpg" style="float: right; width: 120px; height: 120px; border-radius: 120px;" />
				<h2>Jeremy Likness</h2>
				<blockquote>Cloud Developer Advocate for Microsoft</blockquote>
				<ul>
					<li>20 Years Professional Developer</li>
					<li>Author of books and articles, both online and print</li>
					<li>Prolific speaker</li>
					<li>100% plant-based diet and CrossFit</li>
				</ul>
			</section>

			<section>
				<h2>Wat?!</h2>
				<code>
							<pre id="wat-text"></pre>
						</code>
				<button id="wat-button">Wat?</button>
				<code>
							<pre id="wat-result">...</pre>
						</code>
			</section>

			<section>
				<h2>Evolution</h2>
				<img style="border: none;" src="./images/evolution.png" />
			</section>

			<section>
				<h2>Harmony? ECMAScript 2015? Babel?</h2>
				<p class="left">Popular options.</p>
				<p class="left">Includes: classes, lexical scope, lambda...</p>
				<p class="left">Lacks &hellip;</p>
				<ul>
					<li>Interfaces</li>
					<li>Dynamic module affinity (System.js, Require.js, etc.)</li>
					<li>External library definitions</li>
					<li>Generics</li>
				</ul>
			</section>

			<section>
				<section>
					<h2>Real World</h2>
					<h3 style="color: red">Discovery</h3>
					<p>Intent is clearer with types and interfaces.</p>
				</section>
				<section>
					<h2>Real World</h2>
					<h3 style="color: orange">Documentation</h3>
					<p>Libraries make it easier to discover and learn how to use APIs.</p>
				</section>
				<section>
					<h2>Real World</h2>
					<h3 style="color: green">Development Time Security</h3>
					<p>Less "fat-finger", catch bugs earlier in the cycle.</p>
				</section>
				<section>
					<h2>Real World</h2>
					<h3 style="color: blue">Scope Safety</h3>
					<p>Modules, Classes, and Lambdas take care of this.</p>
				</section>
				<section>
					<h2>Real World</h2>
					<h3 style="color: indigo">Team Scale</h3>
					<p>Easier for multiple teams and members to work in parallel.</p>
				</section>
				<section>
					<h2>Real World</h2>
					<h3 style="color: violet">Increased Velocity</h3>
					<p>Team had 4x velocity with TypeScript vs. just JavaScript. Oh, and <strong>the Angular team uses it, for goodness' sake!</strong></p>
				</section>
			</section>

			<section>
				<h2>Demo Time!</h2>
				<img style="border: none;" src="./images/demo.png"/>
			</section>

			<section>
				<section>
					<h2>TypeScript and Node.js</h2>
					<ul>
						<li>First class support</li>
						<li>IDE integration</li>
						<li>Libraries (and automatic generation)</li>
						<li>Configurable options</li>
					</ul>
				</section>
				<section>
					<h2>Getting Started</h2>
					<ul>
						<li><code>npm init -y</code></li>
						<li><code>npm i typescript --save-dev</code></li>
						<li><code>npm i @types/node --save-dev</code></li>
						<li><code>node tsc --init</code></li>
					</ul>
				</section>
				<section>
					<h2>Demo</h2>
					<p>Examining <code>tsconfig.json</code>.</p>
					<img src="./images/demo.png" style="border: none;"/>
				</section>
				<section>
					<h2>The App</h2>
					<ul>
						<li>Edit <code>tsconfig.json</code></li>
						<li>Add <code>"main": "lib/main"</code> and <code>"types": "lib/main"</code> to <code>package.json</code>
						<li>Create <code>src</code> directory</li>
						<li>Add code</li>
						<li>Build and run!</li>
					</ul>
				</section>
				<section>
						<h2>Demo</h2>
						<p>First app.</p>
						<img src="./images/demo.png" style="border: none;"/>
					</section>
				</section>
				<section>
						<h2>Demo</h2>
						<p>Full enchilada.</p>
						<strong><a href="https://github.com/JeremyLikness/micro-locator/" target="_blank">https://github.com/JeremyLikness/micro-locator</a></strong>
						<img src="./images/demo.png" style="border: none;"/>
					</section>
				</section>
				<section>
					<h2>Questions?</h2>
					<p><strong><a href="https://www.twitter.com/JeremyLikness" target="_blank">@JeremyLikness</a></strong></p>
					<p><strong><a href="https://blog.jeremylikness.com/">https://blog.jeremylikness.com/</a></strong></p>
					<p><strong><a href="https://github.com/JeremyLikness/typescript-for-node" target="_blank">https://github.com/JeremyLikness/typescript-for-node</a></strong></p>
				</section>


		</div>
	</div>

	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.js"></script>
	<script src="js/wat.js"></script>

	<script>
		// More info about config & dependencies:
		// - https://github.com/hakimel/reveal.js#configuration
		// - https://github.com/hakimel/reveal.js#dependencies
		Reveal.initialize({

			controls: true,
			progress: true,
			history: true,
			center: true,

			transition: 'slide',

			dependencies: [
				{ src: 'plugin/markdown/marked.js' },
				{ src: 'plugin/markdown/markdown.js' },
				{ src: 'plugin/notes/notes.js', async: true },
				{ src: 'plugin/zoom-js/zoom.js', async: true },
				{ src: 'plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } }
			]
		});
	</script>
</body>

</html>