Perfect Match - NodeJs & Typescript

Perfect Match - NodeJs & Typescript

Presentation about how to use TypeScript and Node.js to build scalable applications.

1bbe893cbb494c230fe608b3783ac7bd?s=128

Marco Talento

September 25, 2016
Tweet

Transcript

  1. Perfect Match NodeJs & Typescript 63º Meeting @ LISBON 24/09/16

    Marco Talento @Talento90
  2. Sponsors “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal

  3. Sponsors “Silver”

  4. Sponsors “Bronze”

  5. Presentation Rating http://bit.ly/netponto-aval-63

  6. Me, Myself & I • Software Engineer at NOS Inovação

    (BoldInt Consultant) • Sharednode Founder • Open Source Contributor Github: https://github.com/Talento90 Twitter: https://twitter.com/Talento90 LinkedIn: https://www.linkedin.com/in/marcotalento Blog: http://sharednode.org/author/mtalento90/
  7. Agenda • Introduction • TypeScript • Tools & IDE’s •

    Debugging • Demo • Conclusion & Thoughts
  8. Introduction

  9. JavaScript • Dynamic and interpreted • Simple and easy to

    learn • Cross Platform • Runs Everywhere (Browser, Server Side) • Big Community (Most popular language on Github) • Continuous Evolution (ES5, ES6, ES7…)
  10. Node.js • Node.js was originally written in 2009 by Ryan

    Dahl. • Community Driven • Used in many different applications (Web Dev, IOT, Real Time Apps) • Adopted by big companies (Netflix, Microsoft, Uber, etc...)
  11. What is Node.js? • "Node.js is a JavaScript runtime built

    on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient." - Node.Js Site • "Node.js is an open-source, cross-platform runtime environment for developing server-side web applications." - Wikipedia • "Node.js is a platform that runs on top of V8 Google Engine and gives the possibility to build scalable server side applications using JavaScript." - Marco Talento
  12. How it works? http://www.codingeek.com/tutorials/nodejs/is-nodejs-single-threaded/

  13. Http Server (JavaScript)

  14. JavaScript Problems • Lack of type safety • Easy to

    create “spaghetti” code • Hard to scale
  15. Solution?

  16. TypeScript • TypeScript is a typed superset of JavaScript that

    compiles to plain JavaScript. • Includes all features of ES6 and much more: types, interfaces, generics, etc... https://johnpapa.net/es5-es2015-typescript/
  17. Types Prevent Bugs

  18. Definitions • Definitions give intellisense and module typification. • TypeScript

    definitions are suffixed by “.d.ts” • Maintainable by community • To reference the modules it’s necessary to include the following line on the top of each TS file: /// <reference path="../../../typings.d.ts" /> ◦ Typings it’s a tool to manage definitions
  19. Typings Typings is a tool to manage and install TypeScript

    definitions. It uses typings.json to handle dependencies. Github: https://github.com/typings/typings • Install typings: npm install typings --global • Search for typings: typings search hapi • Install Typings: typings install dt~hapi --global --save
  20. Example

  21. Definition doesn’t exist? LAZY: Ignore the TS errors, the generated

    code will work! Perfect: Create and contribute to the community ◦ http://definitelytyped.org/guides/contributing.html
  22. Typescript (BAD) • Lack of definitions • Additional steps (compilation,

    typings, etc...)
  23. Typescript (GOOD) • Easy to learn • Full OOP (interfaces,

    abstract classes, etc...) • TYPES prevents bugs • Code Scalability • Open Source • Supported by Microsoft
  24. How to “TypeScript”? 1. Install: npm install -g typescript 2.

    Create file app.ts 3. Compile using the command line: tsc app.ts 4. Run the result: node app.js
  25. Compilation Result

  26. Compiler Configuration Use tsconfig.json to specify the compiler options. Options:

    https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
  27. Example (tsconfig.json)

  28. TypeScript 2.0 • Improve Control Flow Analyzed Types • The

    readonly properties • Simplified declaration file (npm install --save @types/lodash) • Tsconfig supports glob patterns (Include) • More: https://github.com/Microsoft/TypeScript/wiki/Roadmap#20
  29. Node.js & TypeScript

  30. Using TypeScript 1. Install nodejs typings 2. Create a tsconfig.json

    and add module “commonjs” 3. Reference definitions 4. Ready to code your application
  31. Http Server (TypeScript)

  32. Project Structure • Build - Compilation Result (JavaScript Files) •

    Src - Application source code • Test - Application Tests • Typings - Contains all the definitions • Gulpfile.js - Gulp Tasks (compile, clean, tests, etc…) • Tsconfig.json - compiler options • Tslint.json - TypeScript linter rules
  33. Tools & IDE’s

  34. IDE & Tools TSLint - A Linter for the TypeScript

    language. Typings - The TypeScript Definition Manager. IDE’s • VS Code (https://code.visualstudio.com/) • Sublime (https://github.com/Microsoft/TypeScript-Sublime-Plugin) • Atom (https://atom.io/packages/atom-typescript)
  35. Debugging

  36. Debugging • Source Maps ◦ Files that contains the mapping

    between the TS and JS ◦ Debuggers know how to interpret this files ◦ Suffixed by filename.map.js { "version" : 3, "file" : "database.js", "sourceRoot" : "", "sources" : ["../../src/database.ts"], "mappings" : ";AAAA,MAAY,QAAQ,WAAM,UAAU,CAAC, ..." - BASE64 VLQ }
  37. Node Inspector • Node Inspector is a debugger interface for

    Node.js applications that uses the Blink Developer Tools (formerly WebKit Web Inspector). • The project maintenance and support is sponsored by StrongLoop. Install: npm install -g node-inspector Run: node-debug app.js
  38. Node Inspector Interface

  39. DEMO Let’s put everything together!

  40. Conclusion & Thoughts

  41. Conclusions & Thoughts • Easier to write scalable & reliable

    code • JavaScript tools also works with TypeScript • Improve developers productivity • Can be used everywhere (browser, node.js) • TypeScript it’s growing fast and adopted by big companies
  42. References • https://nodesource.com/blog/needtonode-recap-best-practices-using-type script-with-node-js/ • http://jiajizhou.com/2015/04/15/nodejs-profiling-tools.html • http://www.typescriptlang.org/ • https://www.gitbook.com/book/basarat/typescript/details

    • http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
  43. Questions?

  44. Thank you :)