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í.

Digitální transformace s NodeJS DevOps stackem

PayPal, Netflix a Wallmart představují způsob jak rychle transformovat legacy software.
node-js-devops-stack-transformation

HTTP server

Pokud píšete nějaký ten frontend, nebo jen jednoduchou HTML stránku, kterou musíte servírovat přes HTTP protokol a nestačí vám jen její otevření přes file://, pak se vám určitě bude líbit npm balíčk http-server, který dělá přesně to, co jeho název napovídá: servíruje obsah adresáře ve kterém byl spuštěn jako každý webový server (Apache, Nginx…).

Výhodou je, že neni potřeba nic konfigurovat, nastavovat. Stačí jen skrze NPM globálně nainstalovat a pak už jen spustit v adresáři, kde máte svůj frontendový projekt. Hotovo 🙂

Samozřejmostí je logováni do konzoly, a docela bohaté možnosti konfigurace samotného serveru:

Instalace

Spuštění serveru

A pěkné je, že…

Server umí i

  • HTTPS
  • listing adresáře
  • servírování gzipem
  • CORS

Python alternativa

Podobnou funkcionalitu samozřejmě nabízí i Python:

TypeScript: Cannot find name ‚module‘.

Pokud si v nějakém typescriptovém modulu s vašim zdrojákem dovolíte tohle:

Okamžitě na vás začně kompilér upozorňpvat, že nemůže najít název modelu.


Chyba je jasná: TypeScript neví nic o CommonJS modulu, na kterém staví NodeJS a na který se ve zdrojáku odvoláváte.

Řešení

Korektním řešením je doinstalování balíčků s NodeJS typy:

TypeScript: dynamická modifikace objektu

Pokud přicházíte z JavaScriptu, určitě budete znát tento způsob práce s typem Object:

Kód je jednoduchý a zcela jasný:
– deklarujete a zároveň definujete proměnnou osoba jako objekt s jediným klíčem jmeno.
– potom k vytvořenému objektu přidáváte další klíč povolani
– a nakonec celý objket vytisknete na standartní výstup, do konzole.

V JavaScriptu OK.

Tohle vám ale v TypeScriptu neprojde


Důvod je jasný: TypeScript je nadmnožina JavaScriptu, která do něj zavádí statické typování. Z příkladu vyplývá, že objekt jste deklarovali joko objekt s jediným klíčem, a proto jej dál úž nikde nemůžete modifikovat, co se klíčů týče. Nově vzniklý objekt už je typově jiný.

Ale i s tímto si TypeScript docela elegantně vypořádá. V deklaraci proměnné stačí místo konkrétního jednoho klíče deklarovat obecné pole s typem string, který může nabývat jakékoliv hodnoty a máte po problému:

V TypeScriptu OK 🙂

Celý fígl je v jediném řádku

Kterým říkáte: hele Object nebude obsahovat jeden, přesně pojmenovaný klíč, ale bude obsahovat celé pole hodnot klíčů stringů, které budou odkazy na proměnné, samotné klíče, jakéhokoliv typu (any)

Praktické využití?

To se samo nabízí: pokud se snažíte složitější datové struktůry udržet na uzdě pomocí interface, pak statický typovost vám nedovolí uhnout. Někdy dobré, ale někdy ne. Může se hodit mít definovaný intarface jako nějaké datové minimum, který konkrétní objekt má splňovat, ale krom povinných klíčů byste chtěli čas od času někde něco k něčemu přidat. Pak se vám tento fígl bude hodit.

Je jasné, že

můžete pouřít přímo v deklaraci samotného interface.

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 🙂

For loop v TS, JS (performance)

V ES6 je nově for of loop, který iteruje nad čímkoliv, co umí iterovat, jako je např. pole a objekt.
A to mě vedlo ke krátkému a opravdu jednoduchému testu, ve kterém jsem si ověřil výkonost jedotlivých for loop konstrukcí.

Výsledky

Env NodeJS Safari Chrome Firefox
Create time 497 209 507 2793
For in 1421 7606 1534 6575
For of 11 36 31 10643
For 11 46 34 8724

Všechny časy jsou v ms.

Několik rychlých závěrů

  • Firefox už dlouho nepoužívám a do testu jsem jej vložil jen pro úplnost. Pozitivní zjištění: o nic jsem nepřišel…
  • Je super, jak je NodeJS opravdu dobře zoptimalizovaný a na prováděný kód téměř nemá žádný vliv prostředí.
  • Chrome: V8 společná s NodeJS je znát. Výkonový rozdíl vyplývá z prostředí ve kterém kód běží a dá se pochopit.
  • Safari má vlastní JS engine SquirrelFish, který je opravdu dobrý…

Poznámka na závěr

Ze zvědavosti jsem chtěl takto otestovat i PHP.

Při pokusu vytvořit pole s 10.000.000 čísly (tak jak jsem to dělal v JS) jsem se dočkal chybové hlášky Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 134217736 bytes) in /Users/pepa/test/looptest/test.php on line 7 a tím jsem testování v PHP odpískal.

Pravdou je, že jsem ještě zkusil zmenšít velikost vytvářeného pole na 10.000, tedy tisíckrát meněí. Jo! Pole se vytvořit podařilo. Pak jsem se zarazil. Tohle chceš vážně testovat?

© 2018 pepa.holla.cz

Theme by Anders NorénUp ↑