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

Moving SQL Clone Web Client from ES6 to TypeScript

Moving SQL Clone Web Client from ES6 to TypeScript

Internal Lightning Talk @ Redgate, Cambridge, UK

Why and how behind moving SQL Clone Web Client, which is built on React and Redux, from ES6 to TypeScript.

3a53a5136f530c121a196914aecf3936?s=128

Tugberk Ugurlu

May 17, 2016
Tweet

Transcript

  1. https://flic.kr/p/t3H9A Tugberk Ugurlu Software Engineer @ Redgate @tourismgeek http://tugberkugurlu.com

  2. https://flic.kr/p/e6nUW Once upon a time…

  3. SQL Clone Web Client

  4. https://flic.kr/p/faTRHU JavaScript!

  5. https://flic.kr/p/7yqhJt More JavaScript!

  6. https://flic.kr/p/6doME6 Oh, more JavaScript!

  7. https://flic.kr/p/6sZ7Kp Fuck this shit!

  8. https://flic.kr/p/cEJMpW TypeScript…

  9. https://flic.kr/p/UfHzTE TypeScript!

  10. Hold your seats! https://flic.kr/p/HnfDT

  11. https://charlieharvey.org.uk/page/javascript_the_weird_parts JavaScript: The Friend of Your Enemy! x = [0]

    x == x -> true x == !x -> true #wtf true+true===2 -> true true-true===0 -> true true===1 -> false #wtf (!+[]+[]+![]).length -> 9 #wtf []+[] -> "" []+{} -> "[object Object]“ {}+[] -> 0 #wtf 0.1+0.2==0.3 -> false Math.max()>Math.min() -> false #wtf
  12. Primary Motivations Compile-time safety (catch things early) Take advantage of

    TypeScript language features Make the context available on each module
  13. Compile-time Safety

  14. Compile-time Safety

  15. Making the Context Available

  16. Making the Context Available

  17. TypeScript Language Features

  18. Migration Experience https://flic.kr/p/o8WrWD

  19. Moving Gradually...

  20. tsconfig.json

  21. Typings

  22. TypeLite

  23. VS Code

  24. TSLint

  25. TSLint VS Code Integration

  26. https://twitter.com/dan_abramov/status/780475600716857344 :+1:

  27. That’s all! https://flic.kr/p/99iZtS