Tagtypescript

Rychlé prototypování JavaScriptu a TypeScriptu v MS VS Code

Znáte to: vyvíjíte aplikace a rádi byste si čas od času něco rychle odzkoušeli. Tím odzkoušeli myslím napsali nějaký kus kódu a hned byste rádi věděli co to dělá. Třeba okamžitě viděli obsah definované proměnné, výsledek volání funkce. A nejlépe bez toho, že byste museli celý svůj kód spouštět, nebo překládat a spuštět. A vůbec nejvíc kůůůůl by bylo, kdyby jste to viděli hned v kódu. Přímo tam, kde ho píšete, protože tam vás to přeci zajímá.

HOLLA!
mám pro vás pěkný plugin do MS Visual Studio Code.
Quokka!

Pěkně si píšete do playbooku nějaký kód, který se vám pod rukama přímo vykonává a do editoru se vém pěkně propisuje jeho výsledek. Super!

Dobré i například pro nějaké vyukové, nebo demonstrativní účely.

Async/await nebo callback? Oboje!

Pokud chcete nabídnout svoji funkcionalitu skutečně širokému obecenstvu, pak byste je asi neměli nutit do vámi vybraného modele použití formou callbacku, nebo promises, ale nabídněte hned obě.

Nic složitého. Stačí nabídnout interface funkce, kde budete detekovat její parametry a podle nich, respektive volání s nimi, zjistíte jak daný konzument vaší funkcionality hodlá použít a podle toho vyberete implementaci samotné funkce:

Samozřejmě lze napsat i kompaktněji:

JavaScript: callback, promises, async/await, naposledy…

Mám pocit, že čím dál víc javascriptových vývojářů používá nové jazykové kostrukce pro práci s asynchronním kódem, ale ne všichni mu rozumí jak by měli a jen slepě používají něco co viděli někde jinde. Proto naposledy tohle velice stručné, ale podle mě snad všeříkající shrnutí všech možných současných variant pro psaní asynchronních operací:

Dodám, že v TypeScriptu se píše asynchronní kód úplně stejně.

TypeScript: Jest a testování asynchronních funkcí

V tomto případě asynchronních funkcí implmementujících svůj návrat skrze callback funkci.

Tohle by mohla být nějaká asynchronní funkce pro výpočet součtu:

V kódu nic nehledejte. Je to opravdu jen princip: funkce s několika parametry, kde posledním je callback funkce, která se provede po získání výsledku. V mém případě ihned, nicméně princip je jasný…

Jest test

A tohle je na Jestu pěkné. Chová se přesně tak, jak byste čekali. Prostě zavoláte svou asynchronní funkci a v jejím callbacku provedete patřičný test. Hotovo.

Připojím snad jen kompaktnější zápis testovací funkce využívající arrow function.

JavaScript: promises a async/await

Jsem si vědom toho, že o promises toho bylo napsáno dost. Určitě už ale o něco méně o async/await. Nicméně z diskuzí s javascriptovými vývojáři, kterých se v poslední době účastním, mám pocit, že většina z nich vidí async a promise jako zcela odlišné techniky, které krom toho, že řeší stejný problém, chápou jako zcela odlišné věci.

Promises


Určitě ne ideální, ale plně funkčnní javascriptový kód, který pomocí promises řeší asynchronní operace, byť se v příkladu jedná o obyčejné matemtické operace. Důkaz že asynchronně se dá psát i non-blocked kód 🙂

Async/Await


Přepsal jsem výše uvedený kód z promises do async/await.

Vlastně nepřepsal 🙂 Použil jsem všechny jednotlivé funkcionality tak jak jsou s primises a jen jsem nahradil chain volání v promisách implementovaný skrze then do jedné jediné funkce, uvozené klíčovým slovem async. Samotné volání může vypadat složitě, ale to jen kvůli IIEF, které jsem v příkladu použil.

Suma sumárum

Async/await přímo staví na promises. Je vnitřně naiplementovaný skrze promises. Jen zavádí novou konstrukci zápisu, která může být programátorům přicházejících ze světa blokujících operací na první pohled bližší, než více méně funkcionální zápis v zřetězeném chainu pomocí holých promisí.

Osobně se dál držím callbacků, ale pokud bych musel šáhnout po něčem z výše popsaném, vyberu si async/await konstrukci.


PS: calback hell není vlastnost jazyka, je to jen špatně navržená kompozice jednotlivých funkcionalit 🙂

NodeJS cross platform REPL

Pokud pracujete s JavaScriptem, nebo jeho nějakým transpilerem jako je CofeeScrip, TypeScrip, nebo LiveScript, pak se vám bude určitě hodit Mancy.
dark-theme

© 2018 pepa.holla.cz

Theme by Anders NorénUp ↑