Frontendisti - Špekulování (o TypeScriptu)

Ukázky použití některých technik najdete v projektu https://github.com/topmonks/hlidac-shopu

https://github.com/cognitect/transit-format
https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
https://github.com/dustinspecker/awesome-eslint
https://www.tabnine.com/
https://codescene.io/

Transcript

1. Špekulování
   @alesroubicek
   
   
   #frontendisti
   

   View Slide

2. View Slide

3. View Slide

4. Kontext
   • Vývoj webů a webových aplikací
   
   
   • Malé týmy (do pěti členů)
   
   
   • Ukázky použití některých technik najdete v
   projektu https://github.com/topmonks/
   hlidac-shopu
   

   View Slide

5. View Slide

6. TypeScript
   • Unsound Statically checked Gradually typed Dynamic language
   
   
   • Explicitní typové anotace v kódu = moderní šum
   
   
   • Neschopnost unwrapovat generika (await Promise
   =>
   any)
   
   
   • Tragická “podpora” pro typovaná pole (arrays, tuples)
   
   
   • Typová gymnastika v kódu, jen abych zkompiloval
   
   
   • Neskutečně pomalá kompilace (více jak 8 let vývoje!)
   
   
   • Špatně otypované knihovny jsou standart
   Typový system v TypeScriptu je sice Turingově kompletní,
   
   
   ale nezvládá úplně základní věci.
   
   
   (nejspíše jen OOTB, jak jsem byl následně informován)
   

   View Slide

7. View Slide

8. Mýty a legendy
   • Typová bezpečnost
   
   
   • Zachytí chyby už při kompilaci
   
   
   • Snažší Refactoring
   
   
   • Snazší vývoj a údržba komplikovaných systémů
   
   
   • Snazší vývoj ve velkých teamech
   
   
   • Ochrání vás před křehkostí na klientech
   

   View Slide

9. Poznámky k mýtům
   a legendám
   Kompilace zachytává pouze kompilační chyby, nijak
   nereflektuje, co se děje v runtime.
   
   
   Refactoring usnadní:
   
   
   Monorepo
   
   
   Kontinuální integrace (a unit testy)
   
   
   Automatizované nástroje
   
   
   Nedělejte komplikované systémy. Stavte komplexní systémy
   kompozicí jednoduchých částí.
   
   
   Jednoduché části se lépe vytváří a udržují v malých
   focusovaných teamech.
   

   View Slide

10. Bojíme se nejistoty!
    • Víra vede k náboženství
    
    
    • Komplexní otázky vedou k
    zjednodušujícím odpovědím
    
    
    • Interpretace se stává dogmatem
    
    
    • Raději budeme žít v omylu než v nejistotě
    Dan North - Embracing uncertainty
    

    View Slide

11. Komplexita domény
    
    
    Nepochopení/Nedorozumění
    
    
    10x
    
    
    PLOP - place oriented programming
    
    
    Slabá podpora pro informace
    
    
    Křehkost/úzké vazby
    
    
    Komplexita jazykového modelu
    
    
    Chybějící nadhled/kontext
    
    
    Slabá podpora pro názvy
    
    
    Distribuce
    
    
    Utilizace zdrojů
    
    
    Knihovny
    
    
    Konkurence
    
    
    10x
    
    
    Nekonzistence
    
    
    Překlepy
    Rich Hickey - Effective programs
    Cena chyby
    

    View Slide

12. –Urza
    TypeScript je
    
    
    špatný sluha,
    
    
    ale zlý pán.
    

    View Slide

13. Poznámka k TypeScriptu
    Já (i mí milí kolegové) TypeScript
    většinou používáme tam, kde je dobrý -
    jako zdroj informací pro našeptávání
    v editoru.
    
    
    Ostatně kvůli tomu TypeScript vznikl.
    
    
    TypeScript je nekvalitní type checker a
    proto ho k tomu nepoužíváme. Doplňujeme
    ho jinými nástroji, viz dále.
    

    View Slide

14. Schémata
    • JSON Schema/OpenAPI
    
    
    • Ověřování za běhu
    
    
    • schema.org
    
    
    • Společný slovník a struktury nejen pro
    HTML5 microdata (Linked Data, RDF…)
    

    View Slide

15. Transit
    • Přenosový protokol/encoding
    
    
    • Typovaná data bez ztráty informace
    
    
    • Vyjednávání podle MIME typu
    
    
    • Accept: application/transit+json
    
    
    https://github.com/cognitect/transit-format
    

    View Slide

16. JSDoc
    • Typy jsou (součástí) dokumentace
    
    
    • Široká kompatibilita (TypeScript, Google Closure, ClojureScript…)
    
    
    • Oddělení zodpovědností
    
    
    • Pokud mě zajímají typy nemusím je lovit v kódu
    
    
    • Na popis typů můžu použít DSL - TypeScript v *.d.ts
    
    
    https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
    
    
    Našeptávání je obohaceno jak dokumentačními komentáři, tak
    informacemi z TypeScript LSP, který JSDoc rozumí. JSDoc je jen
    způsob, jak plně využít TypeScript bez nutnosti psát *.ts soubory
    a transpilovat je do *.js
    

    View Slide

17. Tipy pro autory knihoven
    • JS ekosytém je mnohem věší než zastaralý
    Webpack/Babel/React (mediálně to tak nemusí
    vypadat)
    
    
    • Do npm emitujte moderní ECMAScript (2018+)
    
    
    • Zapomeňte na ES3 nebo ESM+ES5 bordel
    
    
    • Google Closure zvládne ESM+ES6 i bez JSDoc
    

    View Slide

18. Další užitečné nástroje
    * ESLint
    
    
    * Balíčky s best practices (async/await, Promises, Performance,
    Security… https://github.com/dustinspecker/awesome-eslint)
    
    
    * tabnine (https://www.tabnine.com/)
    
    
    * AI driven IntelliSense
    
    
    * CodeScene (https://codescene.io/)
    
    
    * Odhalování skrytých rizik a sociálních vzorů
    

    View Slide