The road to Node... (and other things)

My process of learning NodeJS, GraphQL, NestJS and TypeScript

Transcript

1. www.galvao.eti.br CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 1 / 63 The Road to Node All images used in this presentation is a property of their entities. v. 0.1.0 The Road to Node… and other things.
2. Software Engineer at Edvisor First Brazilian to become Postman Supernova President, ABRAPHP - Brazilian Association of PHP Professionals Director, ConFLOSS and PHP Conference Brasil Evangelist and Contributor for PHP, Laminas Project Fedora Ambassador, LATAM Guest Post-Grad Professor (PR and SC) 25+ years developing web-interfaced systems 20+ with PHP and JavaScript ≃ 15 with Zend Framework / Laminas Project Speaker at national and international events Who?! www.galvao.eti.br www.galvao.eti.br CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 2 / 63
3. Goal www.galvao.eti.br CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 3 / 63
4. Learning www.galvao.eti.br How do I learn?!?! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 4 / 63
5. Learning www.galvao.eti.br Fight FUD (Fear, Uncertainty and Doubt) CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 5 / 63
6. Learning www.galvao.eti.br Fight FUD (Fear, Uncertainty and Doubt) Build associations between what you know and what you don’t (Even if these associations are wrong) CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 6 / 63
7. Learning www.galvao.eti.br Fight FUD (Fear, Uncertainty and Doubt) Build associations between what you know and what you don’t (Even if these associations are wrong) Study AND practice CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 7 / 63
8. Beginning www.galvao.eti.br What is Node? CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 8 / 63
9. Beginning www.galvao.eti.br What is Node? (officially) Node.js is an open-source, cross-platform JavaScript runtime environment. CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 9 / 63
10. Beginning www.galvao.eti.br What is Node? (in my own words) Node is a runtime environment that allows JavaScript to operate in a backend/fullstack context. CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 10 / 63
11. Beginning www.galvao.eti.br What is Node? (in my own words) Node is a runtime environment that allows JavaScript to operate in a backend/fullstack context. This means Node enables us to use JS to: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 11 / 63
12. Beginning www.galvao.eti.br What is Node? (in my own words) Node is a runtime environment that allows JavaScript to operate in a backend/fullstack context. This means Node enables us to use JS to: Read/Write files CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 12 / 63
13. Beginning www.galvao.eti.br What is Node? (in my own words) Node is a runtime environment that allows JavaScript to operate in a backend/fullstack context. This means Node enables us to use JS to: Read/Write files Connect to Databases CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 13 / 63
14. Beginning www.galvao.eti.br What is Node? (in my own words) Node is a runtime environment that allows JavaScript to operate in a backend/fullstack context. This means Node enables us to use JS to: Read/Write files Connect to Databases Send e-mails CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 14 / 63
15. Beginning www.galvao.eti.br What is Node? (in my own words) Node is a runtime environment that allows JavaScript to operate in a backend/fullstack context. This means Node enables us to use JS to: Read/Write files Connect to Databases Send e-mails etc... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 15 / 63
16. On we go www.galvao.eti.br First step is… CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 16 / 63
17. On we go www.galvao.eti.br First step is… JavaScript! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 17 / 63
18. On we go www.galvao.eti.br First step is… JavaScript! General Programming CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 18 / 63
19. On we go www.galvao.eti.br First step is… JavaScript! General Programming JS Quirks CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 19 / 63
20. On we go www.galvao.eti.br First step is… JavaScript! General Programming JS Quirks OOP CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 20 / 63
21. On we go www.galvao.eti.br First step is… JavaScript! General Programming JS Quirks OOP Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 21 / 63
22. On we go www.galvao.eti.br First step is… JavaScript! General Programming JS Quirks OOP Docs are at https://developer.mozilla.org/en-US/docs/Web/JavaScript Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 22 / 63
23. On we go www.galvao.eti.br First step is… JavaScript! General Programming JS Quirks OOP Docs are at https://developer.mozilla.org/en-US/docs/Web/JavaScript A nice starting point: https://www.youtube.com/watch?v=RLtyhwFtXQA Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 23 / 63
24. On we go www.galvao.eti.br First step is… JavaScript! General Programming JS Quirks OOP Docs are at https://developer.mozilla.org/en-US/docs/Web/JavaScript A nice starting point: https://www.youtube.com/watch?v=RLtyhwFtXQA You’ll eventually use: https://www.npmjs.com/package/ Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 24 / 63
25. On we go www.galvao.eti.br Second step is… CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 25 / 63
26. On we go www.galvao.eti.br Second step is… Events! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 26 / 63
27. On we go www.galvao.eti.br Second step is… Events! “on”, just like in Frontend CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 27 / 63
28. On we go www.galvao.eti.br Second step is… Events! “on”, just like in Frontend We can EMIT! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 28 / 63
29. On we go www.galvao.eti.br Second step is… Events! “on”, just like in Frontend We can EMIT! Custom Events CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 29 / 63
30. On we go www.galvao.eti.br Second step is… Events! “on”, just like in Frontend We can EMIT! Custom Events Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 30 / 63
31. On we go www.galvao.eti.br Second step is… Events! “on”, just like in Frontend We can EMIT! Custom Events Events are SYNCHRONOUS, and therefore... Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 31 / 63
32. On we go www.galvao.eti.br Second step is… Events! “on”, just like in Frontend We can EMIT! Custom Events Events are SYNCHRONOUS, and therefore... They keep the app “in check” Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 32 / 63
33. On we go www.galvao.eti.br Third step is… CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 33 / 63
34. On we go www.galvao.eti.br Third step is… Asynchronicity! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 34 / 63
35. On we go www.galvao.eti.br Third step is… Asynchronicity! Things happening! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 35 / 63
36. On we go www.galvao.eti.br Third step is… Asynchronicity! Things happening! At the same time! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 36 / 63
37. On we go www.galvao.eti.br Third step is… Asynchronicity! Things happening! At the same time! Promises, Promises... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 37 / 63
38. On we go www.galvao.eti.br Third step is… Asynchronicity! Things happening! At the same time! Promises, Promises... Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 38 / 63
39. On we go www.galvao.eti.br Third step is… Asynchronicity! Things happening! At the same time! Promises, Promises... Watch out for those pesky race conditions Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 39 / 63
40. On we go www.galvao.eti.br Third step is… Asynchronicity! Things happening! At the same time! Promises, Promises... Watch out for those pesky race conditions Asynchronicity is NOT a silver bullet (nothing is) Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 40 / 63
41. On we go www.galvao.eti.br Third step is… Asynchronicity! Things happening! At the same time! Promises, Promises... Watch out for those pesky race conditions Asynchronicity is NOT a silver bullet (nothing is) Use it wisely Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 41 / 63
42. On we go www.galvao.eti.br Fourth step is… CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 42 / 63
43. On we go www.galvao.eti.br Fourth step is… Backend! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 43 / 63
44. On we go www.galvao.eti.br Fourth step is… Backend! VERY different context CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 44 / 63
45. On we go www.galvao.eti.br Fourth step is… Backend! VERY different context With great power... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 45 / 63
46. On we go www.galvao.eti.br Fourth step is… Backend! VERY different context With great power... Quality is king CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 46 / 63
47. On we go www.galvao.eti.br Fourth step is… Backend! VERY different context With great power... Quality is king Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 47 / 63
48. On we go www.galvao.eti.br Fourth step is… Backend! VERY different context With great power... Quality is king Docs are at https://nodejs.org/en/docs/ Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 48 / 63
49. On we go www.galvao.eti.br Fourth step is… Backend! VERY different context With great power... Quality is king Docs are at https://nodejs.org/en/docs/ Test, test and when in doubt… test AGAIN Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 49 / 63
50. On we go www.galvao.eti.br Fourth step is… Backend! VERY different context With great power... Quality is king Docs are at https://nodejs.org/en/docs/ Test, test and when in doubt… test AGAIN Log ALL THE THINGS Things to keep in mind: CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 50 / 63
51. So... www.galvao.eti.br What is Node? CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 51 / 63
52. So... www.galvao.eti.br What is Node? JavaScript * (Events + Async) Backend CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 52 / 63 Node =
53. Now what? www.galvao.eti.br Congrats! CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 53 / 63
54. Now what? www.galvao.eti.br Congrats! Now... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 54 / 63
55. Now what? www.galvao.eti.br Congrats! Now... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 55 / 63
56. Now what? www.galvao.eti.br Congrats! Now... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 56 / 63
57. Now what? www.galvao.eti.br Congrats! Now... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 57 / 63
58. Now what? www.galvao.eti.br Congrats! Now... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 58 / 63 GraphQL is a JSON-esque language for querying data
59. Now what? www.galvao.eti.br Congrats! Now... GraphQL is a JSON-esque language for querying data NestJS is like a MVC Framework CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 59 / 63
60. Now what? www.galvao.eti.br Congrats! Now... GraphQL is a JSON-esque language for querying data NestJS is like a MVC Framework TypeScript is JavaScript + Types CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 60 / 63
61. Now what? www.galvao.eti.br Congrats! Now... CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 61 / 63 * Remember: Associations, even wrong ones. GraphQL is a JSON-esque language for querying data NestJS is like a MVC Framework TypeScript is JavaScript + Types
62. The Result www.galvao.eti.br https://github.com/galvao/cush CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 62 / 63
63. Thank you! www.galvao.eti.br Questions? Critiques? Compliments?! ? CC Attribution-ShareAlike 4.0 International License by Er Galvão Abbott - 10/14/22 - 63 / 63