AuthorPepa

Návod, jak se stát frontendovým vývojářem :)

VueJS VS React VS Angular

Existuje spousta porovnání těchto frameworku, nicméně tahle tabulka je výstižná a hlavně hodně přehledná. Byť verze Angularu není aktuální, nicméně jeho paramtery srovnávané v tabluce se až tak moc nezměnily.

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.

TypeScript: unit testy s Jest

Jest je, jak píše Facebook co by jeho tvůrce, skvělý JavaScriptový testovací framework. Jedná se o přímou náhradu, či konkurenci jinému, v současné době asi rozšířenějšímu, testovacímu frameworku, kterým je Mocha.

Proč Jest?

  • méně nutné konfigurace pro okamžité použití
  • velice jednoduché vše rozjet a okamžitě začít pokrývat zdroják testmi
  • na rozdíl od Mocha obsahuje i assert knihovnu (Chai) a mock knihovnu (SinonJS)
  • performance

Nicméně žádný z těchto důvodů nebrání použítí Mocha frameworku pro váš kokrétní projekt, či tým.

Jak na to?

Instalace

Předpokádám, že už máte nějaký NodeJS projekt a v něm package.json. Pak stačí jen doinstalovat pár balíčků nasledujícím způsobem:

Hotovo 🙂

Konfigurace

Do pakcage.json vložit konfiguraci pro Jest a následně upravit sekci script:test pro spuštění testů:

Samotná konfigurace Jestu může být alternativně uložena mimo package.json přímo do jest.config.js:

Vytvořte adresář __tests__ v root adresáři vašeho projektu. Adresář s testy se může samozřejmě pojmenovat jakkoliv jinak, stačí korektně přenastavit v konfiguraci.

Hotovo 🙂

Kódování, develop, vývoj…

Založte si src adresář a v něm vytvořte svůj nějaký soubor, který bude obsahovat váš TypeScript kód. Řekněme sum.ts, pro nějaké matematické funkce…

Hotovo. Máme knihovnu, která v tuto chvíli exportuje jednu jedinou funkcionalitu pro sčítání 2 čísel.

Konečně testování

V dříve založeném adresáři __tests__ vytvořte stejně jmenující se typescriptový soubor který bude obsahovat samotné testy, tentokrát s příponou .test.ts:

Hotovo 🙂 Můžeme testovat:

Výstupem je krom informace s výsledky testů i informace o tom, jak máte svůj zdroják testy pokrytý:

TDD

V rámci TDD si pak dokážu představit, že pro každou nově vyvíjenou funkcionalitu si nejdřív napíšete její testovací sekci, ve které pokryjete všechny scénáře, kterou mahou nastat a pak teprve začnete vyvíjet a píšete tak dlouho, dokud všechny zadefinované testy nejsou zelené 🙂

Zdroje

Jest homepage, dokumentace, blog

NodeJS: new Buffer

Už delší dobu se vedou diskuze kolem konstruktoru new Buffer, které, jak to vypadá, skončí uvolněním NodeJs ve verzi 10, kde tato konstrukce bude označena za deprecated. Pokud tedy někde ve svých projektech Buffer používáte, měli byste začít refaktorovat svůj kód a nahrazovat volání konstruktoru za jeho alternativní metody:

Pokud ve svých projektech používáte ESLint, tak stačí, když upravíte jeho konfiguraci a on vám olintuje a vyhodí všechny výskyty deprecated volání konstruktoru a můžete docela jednoduše a rychle refaktorovat.

Výlet s Jirkou na 2 rozhledny

vzdálenost: 42.2 km
čas: 12:32
počasí: slunečno, 25C, skoro léto
společnost a průvodce na cestě: skvělý 🙂

Obrázek jako proklik na seznamácke turisktické mapy.

NVM, NPM problém

Pro běh NodeJS runtime používám NVM, který mi dovoluje do produkce dostat novější verzi NodeJS, než je v oficiálních balíčcích použité linuxové distribuce. A je v podstatě jedno, jestli běžíte na Centosu, Fedoře nebo Debianu, protože situace je v tomto ohledu všude stejná…

Vedle toho jsem v současné době začal vytvářet a distribuovat privátní NPM balíčky s funkcionalitami, které chci opakované používat ve více projektech. NPM je super. Vyvíjím v TypeScriptu, builduji balíček do čistého JavaScriptu, přidávám definice types (respektive se při vhodné konfiguraci generují sami), aby ostatní konzumenti mého balíčku věděli jak je použít.

Konfigurace produkce

Ale v podstatě i jakéhokoliv develop stroje, kde chcete mít přístup k privátním NPM balíčkům. Aby vám vše fungovalo jak má, je potřeba jen jemně dokonfigurovat prostředí. Úprava spočívá v úpravě .bashrc a .npmrc. Nic složitého:

1. Konfiguracve NVM

Někde na konci vašeho .bashrc přidejte pro NVM následující

Tím máte NVM funkční a můžete skrze něj instalovat požadované NodeJS runtimy:

A NodeJS vám běží v poslední dostupné stabilní verzí:

2. Konfigurace NPM
Vytvořte ~/.mpmrc a do něj vložte

A do svého .bashrc přidejte následující řádek:

Hotovo 🙂

No a tady přišel problém.

Pokud zmodifikujete své, nebo produkční prostředí, tak jak jsem popsal, přestane vám NodeJS fungovat 🙂
Problém je v nevinně vypadajícím export env proměnné NPM_TOKEN na konci vašeho .basrc. Pokud jej odeberete, nebo zakomentujete, bude vám NVM opět fungovat a tím pádem j node poběží…

Řešení

Stačí přemístit v .bashrc příkaz exportující NPM_TOKEN před příkazy exportující proměnné pro NVM…
Výsledná konfigurace v .bashrc by měla vypadat takto:

Funguje 🙂

VueJS komponenty

Sada hotových knihoven, které se mohou hodit každému kodérovi, nebo frontend programátorovi, který se rozhodl psát ve VueJS.

iView


Opravdu bohatá knihovan nabízející spoustu komponent a widgetů, podporuje VueJS 2 i 1, NuxtJS, SSR, Elektron.
Nepodporuje IE8, ale to už snad dnes nikdo…

Material Design Component Framework


Jak už název napovídá, jedná se o knihovnu komponent stavějící na Material Designu.
Podporuje SSR, PWA, CLI pro práci s vlastními šablonami.

Element

Knihovna vhodná jak pro web, tak i pro vývoj desktopových aplikací. Pokud se rozhodnete psát pltaformě nezávislé aplikace, pak právě tato kkihovna vám nabídne hotové desktopové komponentu pro vaše JavaScriptové/TypeScriptové aplikace.

Quasar


Framework zaměřený na responzivní a mobilní aplikace.

Tímto výšet knihoven nekončí… Další info najdete třeba zde.

Go Lang: intro book

An Introduction to Programming in Go

NodeJS CLI: Lighthouse

Lighthouse je open source nástroj od Googlu, sloužící k měření kvality www stránek (performance, accessibility, progressive web apps a další…). Jeho tvůrci jej popisují jako automatizovaný nástroj pro zlepšování kvality webových stránek.

Standatně můžete Lighthouse použít buď jako rošíření do prohlížeče, nebo přímo v Chrome DevTools.

Oboje funguje, nicméně ani jeden ze způsobů použití tohoto nástroje není vhodné pro automatizované měření kvality, jak jej vývojáři z Goolgu proklamují.

Další nevýhodou nástroje integrovaného do prohlížeče je, že naměřené výsledky může zkreslovat aktuální stav Chrome v momentě, kdy měření provádíte. Komunikace v ostatních záložkách, využití CPU a RAM…

NPM: skuteně automatizovaný Lighthouse

No a pak přichází v potaz skutečně plně automatizovatelné měřění pomocí NPM balíčku Lighthouse

Instalace

Spuštění

Výsledek

Výsledkem je HTML stránka, která obsahuje všechny naměřené informace. Dalším plusem pro automatizované zpracování může být, krom samotného spouštění přímo z příkazové řádky i možnost výstupu naměřených hodnot do JSONU, pro jejich další zpracování.

© 2018 pepa.holla.cz

Theme by Anders NorénUp ↑