Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scenic City Summit 2018 - TypeScript 101

159 views

Published on

I presented this at Scenic City Summit in Chattanooga, TN from 9:25 am to 10:15 am on August 17th, 2018.

Published in: Technology
  • Be the first to comment

Scenic City Summit 2018 - TypeScript 101

  1. 1. A brief class that introduces the benefits TypeScript provides to large scale projects. Prerequisites: JavaScript 202 TypeScript 101
  2. 2. Hi, I’m Frances (your professor)! ! Software Engineer @slackhq @fvcproductions 🐳
  3. 3. @fvcproductions
  4. 4. Hi, I’m Frances (your professor)! ! @fvcproductions
  5. 5. Norfolk, VA @fvcproductions
  6. 6. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  7. 7. The Syllabus 📝 @fvcproductions
  8. 8. Prerequisites (1) “JavaScript 202” & lil bitty math (2) Some open-mindedness (3) The TypeScript compiler @fvcproductions
  9. 9. Grading @fvcproductions Pass/Fail
  10. 10. Learning Objectives 1. To identify the key benefits and traits of TypeScript. 🗝 2. To be able to understand the role TypeScript has in the front-end ecosystem. 🌍 3. To be able to form a profession opinion on whether or not TypeScript would be useful for your projects. 🤔 @fvcproductions
  11. 11. TAs (1) Google (2) Stack Overflow (3) GitHub (4) Quora (5) Medium (6) Reddit @fvcproductions
  12. 12. Outline (1) TypeScript vs JavaScript 🎭 (2) The Rise of TypeScript’s Popularity 📈 (3) Homework Assignments 📚 @fvcproductions
  13. 13. I’ve never heard of TypeScript?! 😱 @fvcproductions
  14. 14. @fvcproductions
  15. 15. @fvcproductions
  16. 16. @fvcproductions
  17. 17. @fvcproductions
  18. 18. @fvcproductions
  19. 19. @fvcproductions
  20. 20. @fvcproductions
  21. 21. @fvcproductions
  22. 22. @fvcproductions
  23. 23. @fvcproductions
  24. 24. @fvcproductions
  25. 25. @fvcproductions
  26. 26. 60 million6 million @fvcproductions
  27. 27. • strict syntactical superset of JavaScript • programming language developed & maintained by Microsoft that is completely open-source • eases development of large scale applications written in JS with less boilerplate code & better tooling • extends JS by adding optional typing, static analysis, & interfaces to create code that's easier to maintain 📆 October 2012 @fvcproductions TypeScript is…
  28. 28. • TypeScript is not trying to replace JavaScript • TypeScript is extending JavaScript • TypeScript is not trying to replace JavaScript • TypeScript is extending JavaScript • TypeScript is not trying to replace JavaScript • TypeScript is extending JavaScript TLDR; @fvcproductions
  29. 29. (1) TypeScript vs JavaScript 🎭 .ts .js @fvcproductions
  30. 30. @fvcproductions
  31. 31. @fvcproductions
  32. 32. @fvcproductions@fvcproductions
  33. 33. The Nitty Gritty/Getting Started 💻 npm i -g typescript Installing TypeScript npm i -g tslint Installing TSLint @fvcproductions@fvcproductions
  34. 34. @fvcproductions The Nitty Gritty Continued 💻
  35. 35. Compiling our file to JS tsc multiplication.ts @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
  36. 36. Configuring options touch tsconfig.json @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
  37. 37. Abstract Syntax Trees (AST) @fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions
  40. 40. @fvcproductions
  41. 41. @fvcproductions
  42. 42. JavaScript is TypeScript but TypeScript is not JavaScript. Superset vs Subset 🔘 @fvcproductions
  43. 43. @fvcproductions
  44. 44. @fvcproductions
  45. 45. The Dark Side • Missing types • especially with libraries • Not as flexible or popular as JavaScript • JavaScript is “good enough” • Having to persuade a team • Another layer of complexity @fvcproductions
  46. 46. What Types Provide ✓ modular development ✓ can be learned easily ✓ non-invasive ✓ long-term vision ✓ clean output To Type or Not To Type Pros of JavaScript • EVERYWHERE • awesome libraries • flexible Cons of JavaScript • dynamic typing • lack of modularity • verbose patterns @fvcproductions
  47. 47. To Be is To Type @fvcproductions@fvcproductions
  48. 48. My somewhat morbid dog analogy 🐾 > @fvcproductions
  49. 49. THE TODAY @fvcproductions
  50. 50. (2) The Rise of TypeScript’s Popularity 📈 @fvcproductions
  51. 51. @fvcproductions
  52. 52. @fvcproductions
  53. 53. @fvcproductions
  54. 54. @fvcproductions
  55. 55. @fvcproductions
  56. 56. @fvcproductions
  57. 57. Companies ❤ TypeScript @fvcproductions
  58. 58. Developers ❤ TypeScript @fvcproductions
  59. 59. @fvcproductions
  60. 60. What other metrics can I use? 🤔 @fvcproductions
  61. 61. @fvcproductions
  62. 62. 9 1 @fvcproductions
  63. 63. 11 3 @fvcproductions
  64. 64. "The platform no developer should live without" - me @fvcproductions
  65. 65. @fvcproductions
  66. 66. @fvcproductions
  67. 67. @fvcproductions
  68. 68. 15 Most Popular Languages On GitHub by Opened Pull Requests With Percentage Change from Previous Year @fvcproductions
  69. 69. @fvcproductions
  70. 70. @fvcproductions
  71. 71. @fvcproductions@fvcproductions
  72. 72. @fvcproductions
  73. 73. @fvcproductions
  74. 74. (3) Homework Assignments 📚 @fvcproductions
  75. 75. 📚📚📚 @fvcproductions
  76. 76. Option 1. 🎓 Finish the Google Codelab @fvcproductions
  77. 77. @fvcproductions
  78. 78. @fvcproductions
  79. 79. @fvcproductions
  80. 80. @fvcproductions
  81. 81. Option 2. 🎙 Podcasts 📖 Books @fvcproductions
  82. 82. Option 3. 🎥 Watch the creator of TypeScript talk about TypeScript at the #MSBuild Conference “What’s New In TypeScript 2018” by Anders Hejlsberg @fvcproductions
  83. 83. Bonus Option. 🎮 Screw homework and go play instead! typescriptlang.org/play @fvcproductions
  84. 84. @fvcproductions
  85. 85. @fvcproductions
  86. 86. @fvcproductions
  87. 87. Learning Objectives 1. To identify the key benefits and traits of TypeScript. 🗝 2. To be able to understand the role TypeScript has in the front-end ecosystem. 🌍 3. To be able to form a profession opinion on whether or not TypeScript would be useful for your projects. 🤔 @fvcproductions
  88. 88. So did I pass? 😂 @fvcproductions You pass if you take the time to explore TypeScript out yourself and form your own professional opinion.
  89. 89. Thanks for listening! 🍫🍓 @fvcproductions fvcproductions in/fvcproductions Slides will be uploaded ASAP to slideshare.net/fvcproductions
  90. 90. Readings & References 1. TypeScript Official Website: http://www.typescriptlang.org/ 2. Severus Snape Video: https://www.youtube.com/watch?v=PnOyBLT07R8 3. GitHub Icon: https://www.iconfinder.com/iconsets/ionicons 4. Twitter & LinkedIn Icons: https://www.iconfinder.com/iconsets/free-social- icons 5. Fonts: Segoe UI, SF Pro Text, Input Mono 6. Google Trends: https://g.co/trends/2M11R 7. TypeScript and JavaScript Logos: egghead.io 8. Stack Overflow 2017 Survey: https://insights.stackoverflow.com/survey/ 2017 9. TypeScript GIFs: http://twittervideodownloader.com/ & @typescriptlang 10. EdX Course: https://www.edx.org/course/introduction-typescript-2- microsoft-dev273x-0#! 11. List of Editors: https://www.wikiwand.com/en/TypeScript 12. Olgierd Dziamski: https://www.quora.com/What-are-some-good-reasons- to-switch-from-JavaScript-to-Typescript/answer/Olgierd-Dziamski? share=c21b06e4&srid=nukj 13. Kashif Saeed https://www.quora.com/What-are-some-good-reasons-to- switch-from-JavaScript-to-Typescript/answer/Kashif-Saeed-8? share=88d55481&srid=nukj 14. Maciej Dziardziel,: https://www.quora.com/Does-TypeScript-fix-the- problems-JavaScript-has-Will-it-become-common-to-use-on-top-of- JavaScript/answer/Maciej-Dziardziel?share=54019b5c&srid=nukj 15. Pass/Fail Icon: https://icons8.com/icon/46878/test-zum-teil-absolviert 16. Carbon.sh https://carbon.now.sh 17. TypeScript Deep Dive: https://basarat.gitbooks.io/typescript/content/ docs/getting-started.html 18. SitePen: https://www.sitepen.com/ 19. What’s New in TypeScript: https://www.youtube.com/watch?v=hDACN- BGvI8 20. Quokka: https://quokkajs.com/ @fvcproductions

×