Vývoj webových nebo mobilních aplikací je časově náročný proces náchylný na mnohé chyby. Existují však frontend frameworky, jejichž praktické využití vám může ušetřit mnohdy až dvě třetiny vývojářské práce a předejít mnoha chybám. V dalším podcastu jsme se zaměřili hlavně na framework React. Příjemný poslech nebo čtení.
Buďte vždy o krok před konkurencí, získejte přístup k celé sérii podcastů. Přihlaste se k odběru našeho newsletteru.
Tentokrát si v novém technologickém okénku povídal CEO Pixape Radek Semančík a programátor Vojtěch Seidler o tom, jaké výhody přináší využití určitého frontend frameworku. Nejvíc se pak věnovali frameworku React.
Nejzásadnější javascriptové frameworky jsou tři: Vue.js, Angluar od společnosti Google a React od společnosti Meta. Poslední zmiňovaný je však nejrozšířenější. Stojí za ním silná vývojářská komunita, díky čemuž se neustále vyvíjí.
React skýtá výhodu zejména pro firmy, které potřebují vyvíjet aplikaci zároveň pro několik platforem. Je zde totiž React Native, pomocí něhož lze vytvářet nativní aplikace zároveň pro Android, iOS a UWP (Windows). Proto ho ostatně využíváme i v Pixape. Již dříve jsme o výhodách tohoto hybridního vývoje aplikací psali. Díky čemu to React Native zvládá?
React vyvíjí za pomoci komponent, které vytváříte a které následně používáte v různých částech aplikace. React Nativ pak tyto komponenty dokáže kompilovat do nativního jazyka různých zařízení (Androind, Apple, Windows).
Každá z těchto komponent má samozřejmě stejné závislosti, stejné property a stejný vnitřní state, ale jejich funkcionalitu React Native převádí přes tzv. bridge do nativních jazyků daného zařízení (Swift od Apple, Java od Androidu, C# u UWP). Díky tomu máme v jednom kódu napsanou aplikaci pro všechna ta zařízení.
Pokud programujete pouze jeden kód pro tři různé zařízení, přináší to mnoho výhod. Jaké jsou?
Pokud však nevyužijete psaní jednoho kódu pro tři platformy, je tu ještě další výhoda? Ano! React je dost často využíván pro zrychlení single page webových aplikací. Když totiž normálně překlikáváte mezi různými podstránkami jedné stránky, vždy se znovu načítá celá stránka (javascripty, css soubory, styly apod.). React však umí zařídit, aby se nerenderovala znovu celá stránka, ale vždy jen její určitý blok, který má být pozměněný oproti předcházející stránce.
React k tomu používá komponenty, které jsou virtuální objekty, tzn. virtual dom. Tyto virtual dom pak umí udržovat stav určitého bloku, určité části aplikace. Co to znamená? Když máte třeba nějaký side bar, kde je banner s reklamou, dřív se pro změnu jeho obsahu musela znovu vykreslit celá stránka. Pomocí virtual dom však dokážete velice rychle a dynamicky překreslit jen ten konkrétní prvek na té dané stránce. Webová stránka je tedy mnohem rychlejší.
V Reactu píšete v programovacím jazyce JSX, což má další velkou výhodu. Díky tomu můžete psát javascriptový a html kód v jednom souboru. Je to přehledné, rychlé a pružné pro vývoj a pro zorientování se, co má konkrétní část toho kódu dělat.
Jak už pak bylo zmíněno, kód se zde dělí na komponenty, z nichž každá má nějakou funkci. Můžete si např. vytvořit komponentu na formulář, kterou pak můžete užít v různých částech aplikace. Šetříte tím nejen čas, ale také zamezíte skrytým chybám, které mohou nastat při duplicitě kódu na různých místech aplikace.
Práci usnadňuje i rozsáhlá komunita kolem Reactu. Díky ní je totiž připraveno spoustu balíčků třetích stran, které usnadňují práci. Mnoho funkcí díky tomu nemusíte psát od začátku. Jednoduše si je stáhnete a zanoříte do vyvíjené aplikace, popř. je částečně poupravíte. Sem patří třeba i React router, který zpracovává již zmíněné přepínání stránek mezi sebou při využití single page aplikace.
Poslední věc, která ve spojitosti s Reactem přináší velké výhody, je TypeScript. Ale od začátku. Pokud něco v aplikaci stahujete z nějakého serveru, backendu, apíčka, tak se vám vrátí odpověď v nějakém formátu a v nějaké struktuře. V různých částech aplikace tuto odpověď pak využíváte. Problém však nastává, když užíváte JSX a rozhodnete se, že chcete nějakou proměnou v tom zdroji přejmenovat. Tehdy musíte vědět nebo složitě vyhledávat, kde všude tu konkrétní proměnou máte. Jde to však i jednodušeji. K tomu slouží TypeScript.
TypeScript je nástavba JSX, která využívá datové typy. Za jejich pomocí řeknete, v jaké struktuře počítáte s daným zdrojovým objektem, jakou má mít strukturu a jaké má mít uvnitř datové typy. Pokud pak změníte datový typ nebo název té proměnné a použili jste ho ještě někde jinde, kde to není změněno, budete na to ihned upozorněni. Odhalí se tedy spoustu chyb, které mohou nastat během refactoringu nebo vývoji mobilních aplikací.
TypeScript má i další využití. Vývoj jde neustále kupředu, vše se zrychluje a jsou neustále nové aktualizace. Když poté použijete k vývoji knihovny od třetích stran a užíváte pouze JSX, nemusíte při sestavování aplikace vůbec zjistit, že třetí strany danou knihovnu aktualizovaly a že jsou zde najednou jiné parametry. To by se projevilo až u klienta. Aplikace by se stala nefunkční. TypeScript tohle ale rozpozná a ihned to nahlásí.
Jak jste si tedy mohli přečíst, námi preferovaný framework React vám umožní programovat pro několik platforem najednou a dovolí vám využít již naprogramované funkce nebo knihovny. S pomocí TypeScriptu se pak React postará také o menší chybovost vašich aplikací.
Chcete vědět více o Reactu nebo máte jakékoliv další otázky? Ozvěte se nám.
Odebírejte naše podcasty a objevte, proč nejčastěji aplikace neuspějí a jak tomu zabránit. Naservírujeme vám nejnovější přístupy i technologie, díky kterým budou vaše aplikace oblíbenější, ziskovější a budete s nimi mít méně starostí. Sledujte nás a uspějte na poli aplikací.
V reakci na novou legislativu v energetice, která klade významné požadavky na pravidelné informování o spotřebě tepla a teplé vody, přinášíme klientský portál navržený speciálně pro energetické společnosti.
Chci vědět vícPoznejte náš portál pro leasingové společnosti a půjčovny strojů a aut, který zvyšuje efektivitu, zlepšuje zákaznickou spokojenost a otevírá nové obchodní příležitosti.
Chci vědět vícSpráva objednávek a komunikace s dealery mohou být náročné, pokud nemáte správné nástroje. Náš klientský portál pro dealery je navržen tak, aby zjednodušil a zefektivnil tyto procesy.
Chci vědět vícObjevte, jak náš B2B portál pro výrobní firmy může zefektivnit vaše obchodní procesy a posílit vztahy se zákazníky. Nabízíme vynikající poprodejní servis, automatizované notifikace, rychlé řešení reklamací a personalizované služby.
Chci vědět vícV reakci na novou legislativu v energetice, která klade významné požadavky na pravidelné informování o spotřebě tepla a teplé vody, přinášíme klientský portál navržený speciálně pro energetické společnosti.
Chci vědět víc