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.

TypeScript 101 - Beer City Code

231 views

Published on

Presented Saturday - June 23rd, 2018

I presented a 45-minute version of my "TypeScript 101" talk that serves as a short introduction to TypeScript and the benefits it provides to large-scale projects.

Published in: Technology
  • Be the first to comment

TypeScript 101 - Beer City Code

  1. 1. A brief class that introduces the benefits TypeScript provides to large scale projects. TypeScript 101
  2. 2. The Syllabus 📝 @fvcproductions
  3. 3. Prerequisites (1) “JavaScript 202” & lil bitty math (2) Some open-mindedness (3) The TypeScript compiler @fvcproductions
  4. 4. Grading @fvcproductions Pass/Fail
  5. 5. Course Overview • Meeting Days & Times • Saturday - June 23rd, 2018 • 10:00 am to 10:50 am • Calvin College, Bizstream Auditorium @fvcproductions
  6. 6. 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
  7. 7. Instructor @fvcproductions Frances Coronel Present Future (?)Past
  8. 8. @fvcproductions fvcproductions in/fvcproductions
  9. 9. TAs (1) Google (2) Stack Overflow (3) GitHub (4) Quora (5) Medium (6) Reddit @fvcproductions
  10. 10. Outline (1) TypeScript vs JavaScript 🎭 (2) The Rise of TypeScript’s Popularity 📈 (3) Homework Assignments 📚 @fvcproductions
  11. 11. I’ve never heard of TypeScript?! 😱 @fvcproductions
  12. 12. @fvcproductions
  13. 13. @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. 60 million6 million @fvcproductions
  25. 25. • 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…
  26. 26. • 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
  27. 27. (1) TypeScript vs JavaScript 🎭 .ts .js @fvcproductions
  28. 28. @fvcproductions
  29. 29. @fvcproductions
  30. 30. @fvcproductions@fvcproductions
  31. 31. The Nitty Gritty/Getting Started 💻 npm i -g typescript Installing TypeScript npm i -g tslint Installing TSLint @fvcproductions@fvcproductions
  32. 32. @fvcproductions The Nitty Gritty Continued 💻
  33. 33. Compiling our file to JS tsc multiplication.ts @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
  34. 34. Configuring options touch tsconfig.json @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
  35. 35. Abstract Syntax Trees (AST) @fvcproductions
  36. 36. @fvcproductions
  37. 37. @fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions
  40. 40. JavaScript is TypeScript but TypeScript is not JavaScript. Superset vs Subset 🔘 @fvcproductions
  41. 41. @fvcproductions
  42. 42. @fvcproductions
  43. 43. 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
  44. 44. 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
  45. 45. To Be is To Type @fvcproductions@fvcproductions
  46. 46. My somewhat morbid dog analogy 🐾 > @fvcproductions
  47. 47. THE TODAY @fvcproductions
  48. 48. @fvcproductions
  49. 49. (2) The Rise of TypeScript’s Popularity 📈 @fvcproductions
  50. 50. @fvcproductions
  51. 51. @fvcproductions
  52. 52. @fvcproductions
  53. 53. @fvcproductions
  54. 54. @fvcproductions
  55. 55. @fvcproductions
  56. 56. Companies ❤ TypeScript @fvcproductions
  57. 57. Developers ❤ TypeScript @fvcproductions
  58. 58. @fvcproductions
  59. 59. What other metrics can I use? 🤔 @fvcproductions
  60. 60. @fvcproductions
  61. 61. 9 1 @fvcproductions
  62. 62. 11 3 @fvcproductions
  63. 63. "The platform no developer should live without" - me @fvcproductions
  64. 64. @fvcproductions
  65. 65. @fvcproductions
  66. 66. @fvcproductions
  67. 67. 15 Most Popular Languages On GitHub by Opened Pull Requests With Percentage Change from Previous Year @fvcproductions
  68. 68. @fvcproductions
  69. 69. @fvcproductions
  70. 70. @fvcproductions@fvcproductions
  71. 71. @fvcproductions
  72. 72. @fvcproductions
  73. 73. (3) Homework Assignments 📚 @fvcproductions
  74. 74. ./0 @fvcproductions
  75. 75. Option 1. 🎓 Finish the Google Codelab @fvcproductions
  76. 76. I’ve never heard of these… 😒 • Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. • Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. • They cover a wide range of topics such as Android Wear, Google Compute Engine, Project Tango, and Google APIs on iOS. @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

×