Perfect Match - NodeJs & Typescript

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

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 :)