Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Perfect Match - NodeJs & Typescript

Marco Talento
September 25, 2016

Perfect Match - NodeJs & Typescript

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

Marco Talento

September 25, 2016
Tweet

More Decks by Marco Talento

Other Decks in Programming

Transcript

  1. 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/
  2. Agenda • Introduction • TypeScript • Tools & IDE’s •

    Debugging • Demo • Conclusion & Thoughts
  3. 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…)
  4. 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...)
  5. 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
  6. JavaScript Problems • Lack of type safety • Easy to

    create “spaghetti” code • Hard to scale
  7. 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/
  8. 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
  9. 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
  10. 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
  11. Typescript (GOOD) • Easy to learn • Full OOP (interfaces,

    abstract classes, etc...) • TYPES prevents bugs • Code Scalability • Open Source • Supported by Microsoft
  12. 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
  13. Compiler Configuration Use tsconfig.json to specify the compiler options. Options:

    https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
  14. 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
  15. Using TypeScript 1. Install nodejs typings 2. Create a tsconfig.json

    and add module “commonjs” 3. Reference definitions 4. Ready to code your application
  16. 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
  17. 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)
  18. 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 }
  19. 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
  20. 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