Přeskočit na hlavní obsah

Příspěvky

Zobrazují se příspěvky z 2017

Funkcionální paradigma: React a Redux

V poslední době se stalo funkcionální programování tématem, o kterém se hodně mluví. Z akademické sféry přešlo do praxe a jak se ukazuje, tak je to způsob, který je v určitých oblastech zajímavou alternativou, nahrazující imperativní přístup.

Dnešní článek bude zaměřen na to, co to vlastně je ten funkcionální přístup. I když na toto téma existuje spousty článků, tak často je vše popisováno příliš abstraktně, což zapříčinilo, že ne každý chápe, o co vlastně jde.

Abych byl schopen demonstrovat tuto problematiku, zvolil jsem si k tomu dvě knihovny, které jsou navrženy podle funkcionálního paradigmatu (alespoň z části).

Funkcionální programování Přesná definice říká, že se jedná o deklarativní programovací paradigma, které chápe výpočet jako vyhodnocení matematických funkcí.

Samotný program si poté můžete představit tak, že je složen z funkcí, které volají další a další funkce a tím se postupně zjednodušují. Pokud bychom hledali jazyk, který je jednou z vlajkových lodí tohoto přístupu, ne…

Next.js, SSR a Typescript

Existuje jeden hlavní důvod, proč většina lidí s javascriptem skončí dříve, než vůbec začne. Tím důvodem je: "Kde mám sakra začít?".

Gulp, Grunt, Webpack, NPM, Yarn, ES5, ES6, ES2015, Babel, Typescript, Flow, React, Angular, Node.js, Next.js, Redux, Express, Koa, Hapi, .... uff. Nemá cenu si nic nalhávat, svět kolem javascriptu je rozsáhlý a plný slepých uliček. Viz Angular.

V dnešním článku bych se chtěl podívat na knihovnu Next.js, která je úzce spjata s Reactem. A je právě určena k tomu, aby vás odstínila od velkého množství konfigurace, kterou byste sami museli jinak udělat.

Co je Next.js? Jednou větou: "Next.js je knihovna pro React, která za vás řeší server side rendering a konfiguraci." Server side rendering nebo-li SSR je věc, kterou byste měli sami chtít. Pojďme si nejdříve popsat několik důvodů, proč bychom SSR měli použít.

SEO Pokud používáte javascriptové knihovny jako je React či Angular a stavíte veřejný web, tak narazíte na to, že Vám ho vyhledávače n…

Desktop aplikace v javascriptu

Od doby, kdy Brendan Eich vytvořil svou první verzi javascriptu, uběhlo již více než 21 let. Přesněji řečeno, na podzim bude slavit dvaadvacáté narozeniny. V té době se jednalo o jazyk, který měl být "lehčí" variantou Javy a proto i zvolený název se nese v duchu snahy, se svést na popularitě Javy.


V roce 1995 byl svět naprosto rozdílný. Alespoň co se IT technologií týče. V té době neexistovaly sociální sítě a o mobilních telefonech jste si mohli nechat leda tak zdát. Byli jste rádi, že jste sehnali Dooma na disketách a pomocí ladění konvenční paměti, ho nakonec rozeběhli. Bavíme se o době, kdy počítače hrály naprostou jinou roli a byly spíše výsadou několika nadšenců.

Asi nikdo by tenkrát nevsadil na to, že se javascript dostane do fáze, ve které ho známe dnes. Z nechtěného dítěte v podobě věcí jako jQuery, po pubertu v podobě Node.js až k dospělosti v podobě cloud lambda functions a serverless architektury.

Dnešní článek bude pojednávat o tom, jak lze javascript využít pro …

React a Typescript podruhé - proklaté this

V předchozím článku jsem ukázal jak používat Typescript v Reactu. Dneska se pojďme podívat na zbylou část, která se bude motat kolem klíčového slova this.

Javascript a this Spoléhání na this v javascriptu, je stejné, jako hrát ruskou ruletu. Do funkce lze totiž ono this podstrčit a tím změnit kontext. Do toho se ještě zamíchá function.bind, use strict a arrow functions a už z toho máme slušný guláš.

Dnešní článek se bude snažit vám odhalit, jak to s tím samotným this vlastně je a proč je v JSX bind(this) tou nejhorší možnou volbou.
Funkce a this Lepší, než tisíc slov, je vždy malá ukázka. Pokud máme následující kód, zkuste uhádnout, co bude jeho výsledkem:
functiontest() { returnthis; } console.log(test());
Pokud tento příklad spustíte ve webu, bude dané this obsahovat globální objekt window. Pokud daný kód spustíte v node.js, bude obsahovat globální objekt global. O tom, co je globální objekt, se můžete dočíst zde.

Nyní pojďme náš kód trochu upravit:
functiontest() { 'use s…

React a Typescript

V poslední době se mě několik lidí ptalo, jestli píši v čistém javascriptu, nebo používám něco jiného. Odpověď je jednoduchá: "Mým hlavním jazykem je Typescript". Důvody proč právě Typescript, jsem zmiňoval v jednom z předešlých článků.

Dnes bych se chtěl zaměřit na to, jak vlastně využít Typescript s Reactem. Dnešní článek bude více zaměřen na jednotlivé ukázky, než na teoretickou část.

Kde začít?
V první řadě je nutné říci, že díky tomu, že React je Facebook technologie, primárně své ukázky uvádí buď v čistém javascriptu, nebo pomocí Flow. Důvod, proč právě Flow je zřejmý, je to technologie, která je také od Facebooku.

V té chvíli nastává problém, kde přesně zjistit, jak používat Typescript. Nezbývá tedy nic jiného, než že projdete několik blogů a ukázek na githubu.

Abych vám ušetřil čas, který byste museli trávit při hledání "správného řešení", zkusím projít jednotlivé části, na kterých ukážu, jak Typescript v Reactu použít. V případě ukázky v čistém javascriptu…

Co mi vadí na React Relay?

Facebook, jakožto technologická firma, je v současné době na vrcholu. Nejenom proto, že dal světu takové věci jako je React či GraphQL, ale také pro to, že jsou to knihovny, které sám Facebook používá. Díky tomu dostanete věc, která je odladěná pro danou činnost a nemusíte se bát, že jí Facebook přestane podporovat. To je asi jeden z největších rozdílů, kterým se vyznačuje Facebook oproti Googlu. Google se v minulosti dost často ukázal jako vrah svých nenarozených dětí. Každý, kdo se kdy setkal s technologiemi jako je Dart, Angular 1 či třeba GWT by mi jistě dal za pravdu.

Nicméně, bylo by příliš krátozraké, kdyby se člověk automaticky adaptoval na to, co Facebook vypustí. Jednou z věcí, přes kterou jsem se nebyl schopen dostat, je Relay.

Dnešní článek bude opačný. Místo, abych se snažil evangelizovat danou technologii, zkusím vysvětlit, proč není Relay zrovna ideální knihovna.

Začněme hezky od začátku.

Co je Relay?
V případě, že začnete používat React a současně GraphQL, dostanete se …

Jak jsem technologicky postavil startup

Tento příběh pojednává o technologiích, nástrojích a vůbec o všem, co jsem potřeboval k tomu, abych byl schopen, postavit startup na zelené louce.

Každý správný příběh začíná stejně: "Jednou jsem...."

Kapitola první: Nápad
Jednou jsem se setkal s člověkem, který měl nápad na produkt, který se v průmyslu zatím nevyskytuje. I přes prvotní skepsi, kdy jsem si říkal: "Tohle už přeci dávno v průmyslu existuje, ne?", jsem došel ke zjištění, že nikoli.

Tím jsem se dostal ke svému prvnímu poučení. Průmysl je technologicky dost zabržděný. Osobně se domnívám, že těch důvodů, proč tomu tak je, je několik. Za prvé je to fakt, že většina lidí, kteří se pohybují v tomto odvětví jsou často konzervativní a za správné považují pouze léty osvědčené věci. Druhým důvodem je to, že jakákoli změna znamená riziko. Ať už z pohledu finanční ztráty tak i z pohledu stability výroby. No a třetím a nejzásadnějším důvodem je to, že ač zde máme spousty technologických vymožeností, narážíme na to,…

Proč právě Typescript?

Pokud to někdo s vývojem v javascriptu myslí vážně, měl by hledat způsob, jak nejlépe napsat udržitelný kód.
Díky vlastnostem, které přinesly ES5 a ES6, máme již k dispozici jazyk, který se netváří tak nepřátelsky.
Nicméně, stále existuje jedna věc, kterou javascript nenabízí a která je u většího projektu dost zásadní. Tou vlastností je typovost.
Proč bychom měli chtít typy v javascriptu?
Odpověď je vcelku jednoduchá. Z důvodu udržitelnosti kódu.

Představte si situaci, že máte projekt, kde chcete provést refactoring či změnu v modelu aplikace. V případě, že váš projekt nemá typy, budete se muset spolehnout pouze na špičkově napsané testy, které vám prozradí, zda jste v kódu něco nerozbili :)
Pojďme si udělat malou ukázku.

Máme entitu uživatele, kterou zobrazujeme v tabulce. Zjednodušený kód by vypadal asi následovně:
const users = [ {id: 1, firstName:'Ales', lastName:'Dostal', roles: ['admin']}, {id: 2, firstName:'Petr', lastName:'Novotny'…