<!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 …</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>