Přejít k navigační liště

Zdroják » JavaScript » Co je IMA.js? Podívejme se na framework od Seznam.cz

Co je IMA.js? Podívejme se na framework od Seznam.cz

Články JavaScript

Dnes začneme nový seriál věnovaný frameworku IMA.js. Framework vyvíjí český Seznam.cz a na seriálu pracují přímo tvůrci frameworku. V prvním dílu si framework představíme a spustíme si HelloWorld.

„Isomorphic Application in JavaScript“, zkráceně tedy IMA.js, je framework pro vývoj plně izomorfních aplikací. Co to znamená a jaké z toho plynou výhody si vysvětlíme později. Je vyvíjen pod hlavičkou Seznam.cz, a.s. jako open-source projekt pod licencí MIT. Repozitář projektu můžete nalézt na GitHubu. Pod skupinou seznam najdete další open-source projekty, především nás budou v dalších dílech zajímat projekty související s IMA.js, třeba UI atomy a další užitečné pluginy.

Historie tohoto projektu sahá až do roku 2014, kdy byla v Seznamu poptávka po frameworku, ve kterém bychom mohli vyvíjet nové projekty. V té době žádný z opensource projektů nesplňoval naše požadavky (React, SSR, jednotné routování na serveru a klientu atd.), rozhodli jsme se jít cestou vlastního řešení. Pilotním webem používajícím IMA.js se měly stát Horoskopy.cz, ale nakonec se první službou postavenou na této platformě staly HRY.cz.

Od té doby se IMA.js v Seznamu rozšířila a v dnešní době jej používáme pro naše vlastní služby, některé z nich možná navštěvujete každý den, mimo jiné

a další budou přibývat. I z toho důvodu má IMA.js integrovány spousty unit testů a do jejího vývoje neustále investujeme.

Izomorfní aplikace?

Izomorfní aplikace kombinuje výhody single-page (SPA) a multi-page aplikací (MPA). To konkrétně znamená, že jsme schopni spouštět stejný kód na serveru i na klientu. Aby byl takový přístup možný, musíme poskytnout na obou stranách abstraktní API, které na dané části chybí. Například na serveru nebude dostupný Window objekt prohlížeče.

Sdílené jsou i další komponenty, třeba Router nebo SEO manažer. IMA.js obsahuje také injektor závislostí, centralizovanou konfiguraci, REST API localhost proxy a cache. Konkrétní komponenty včetně příkladů použití si popíšeme v dalších dílech.

Takový přístup má spoustu výhod. Například je možné se podle zátěže serveru rozhodnout, zda budeme obsah do DOMu vykreslovat už na serveru nebo půjdeme cestou SPA (bez server-side renderingu).

Izomorfní aplikace má také všechny výhody SPA, tzn. veškeré interakce s uživatelem probíhají asynchronně bez dalšího načítání nové stránky. Aplikace je tudíž velmi rychlá a stahuje pouze nezbytně velké množství dat.

Narozdíl od SPA však umožňuje rychlejší první vykreslení. Běžné SPA se při prvním načtení musí kompletně nahrát do prohlížeče a spustit. Toto prvotní načtení je ale většinou velmi náročné na zdroje i výpočetní výkon. Server poskytuje jen čisté HTML. Naproti tomu isomorfní aplikace vrátí na první načtení již vykreslenou úvodní stránku, definice externích zdrojů jsou zastoupeny v mnohem menší míře.

Pro roboty vyhledávačů nebo starší prohlížeče pak můžeme servírovat MPA verzi, což mimo jiné znamená dobrou indexovatelnost pro vyhledávače. A také nám aplikace v jisté míře funguje i bez JS.

A v neposlední řadě vývojáři mohou spravovat jeden hlavní projekt (codebase) jak pro server, tak pro klienta, a také využívat stejné knihovny.

Porovnání s konkurencí

Frameworků pro izomorfní aplikace je dnes již celá řada. V rychlém přehledu se pokusím porovnat alespoň dva z nich, a to NEXT.js a Meteor.js

IMA.js

+ all-in-one řešení
+ podpora ubalení a deploymentu do cloudu jako docker kontejner nebo jako stand-alone aplikace
+ možnost horizontálního škálování i jako nekontejnerová aplikace
+ automatický přechod na výdej SPA při vysoké zátěži serveru
+ cachování na serveru
+ jednotné routování na serveru i klientu
+ built-in podpora AMP
+ build aplikace pro starší (<ES5) a novější prohlížeče (>ES6)
+ podpora na českém trhu, podporováno a aktivně používáno v Seznam.cz
+/- používá MVC pattern, aplikace ale může využívat i jiná uspořádání kódu
– složitější nastavení aplikace
– menší ekosystém
– malé rozšíření mimo ČR

Next.js

+ filesystem routování
+ větší flexibilita
+ velký ekosystém a komunita, mnoho ukázek integrace různých knihoven a řešení
+ podpora u balení a deploymentu do cloudu jako lambda nebo jako docker kontejner
+ cachování na serveru
+ automatický codesplitting
+ CSS-in-JS
+ podporováno a používáno společnosti Zeit.co
– v základu je pouze podpora reactu, balení a routing
– žádný pattern uspořádání kódu v základu

Meteor.js

+ fullstack framework
+ jednoduchá instalace a nastavení
+ integrace databáze, built-in podpora MongoDB
+ real-time propagace dat
+ built-in podpora uživatelů a přihlášení
+/- vlastní balíčkovací systém
– omezení pouze na MongoDB
– verze Node.js zavislá na verzi Meteor.js
– použití vlatního šablonovacího jazyka

Technologie a platformy

Ve výčtu použitých technologií nepřekvapí Node.jsexpress.js a React. K testování používáme enzyme a Jest, CSS styly píšeme v Less, k balení zase Babel a k dodržování code-style ESLint. Práci nám zjednodušuje Gulp a spousta procesů je dostupná jako plugin. Používáme balíčkovací systém NPM, kde publikujeme všechny naše balíčky, které budeme v průběhu seriálu potřebovat. Veškeré závislosti můžete nalézt v souboru ‚package.json‘ v repozitáři projektu.

Izomorfismus frameworku se odráží i v podporovaných platformách. Podporujeme všechny hlavní prohlížeče, u starších a nepodporovaných prohlížečů vydáváme MPA verzi webu a podporujeme je tedy také, byť funkčnost může být omezená. Apache Cordova a Adobe PhoneGap podporujeme v SPA režimu.

Po krátkém úvodu k tomuto frameworku přejdeme k ukázce toho, jak vytvořit první aplikaci. Jak je tomu v programovacích a frameworcích zvykem, nebude to nic jiného než HelloWorld. Ale nebojte, v dalších dílech seriálu máme pro vás připraven návod, jak vyvinout aplikaci mnohem užitečnější.

HelloWorld

Budeme potřebovat poslední LTS verzi Node.js a NPM. Díky nástroji create-ima-app, který je k dispozici od verze IMA.js 17, je vytvoření nového projektu velice jednoduché.

Pomocí příkazu npx (jenž je součástí npm od verze 5.2) spustíme nástroj create-ima-app a zvolíme empty template:

npx create-ima-app hello-ima-world

create-ima-app za nás vytvoří potřebnou adresářovou strukturu, nachystá vývojové prostředí a nainstaluje veškeré závislosti. Nakonec se stačí přepnout do adresáře projektu a spustit vývojový server, který přeloží naši aplikaci:

cd hello-ima-world
npm run dev

Teď už se můžeme podívat na náš HelloWorld v prohlížeči na portu 3001 – http://localhost:3001/. Vývojový server běží na pozadí a hlídá změny v souborech. Pokud zaznamená modifikaci nějakého souboru, přeloží znovu aplikaci.

Pokračování příště.

Komentáře

Subscribe
Upozornit na
guest
12 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
shemale01

**Obsah komentáře byl odstraněn**

Martin Hassman

Prosím, ventiluj si své problémy k firmě Seznam.cz někde jinde. Tuhle diskusi necháme k frameworku v článku.

Tahle zevšeobecnění navíc moc nefungují. Měl jsem možnost potkal pár programátorů ze Seznamu a někteří byly špatní, jiní dobří. Podobně jako v jiných firmách. Bez kontextu je příliš snadné soudit.

shemale01

přesně, řešení je centura :-) Ale na druhou stranu je mi to jedno. Seznam znám (ikdyž jsem tam nedělal) a osobně jsem měl tu „čest“ poktat jen jejich špatné programátory, vydávané na super seniory… ;-(

Samotný framework je paskvil, což jsem tam také psal. Chápu, že si autoři v seznamu potřebují něco dokazovat, ale pokud by byl fw tak skvělý, ví se o něm. Ně se stačilo podívat na kód – MVC v JS :-D, styly v Lessu, Gulp :-D, hooky nejsou, apod.

Jo, a netikáme si a klidně mi příspěvek opět cenzurujte, je mi to šumák :-) Bohužel poslední dobou celý zdroják upadá

Martin Hassman

To není cenzura. A o frameworku nebylo v tom prvním komentáři nic.

Tonda Banderas

Bohuzel musim souhlasit. Pri pohledu na tento framework musim rict, ze se jedna o typicky priklad neceho, cemu se v anglictine rika „overengineering“. Svou koncepci se snazi rovnat velkym jmenum, jako je Angular (ackoliv je videt, ze se Angularem nijak neinspiruje), tedy umi vsechno a jeste vic a vubec nemysli na potreby vyvojare. Pokud se podivate na github, commituje do nej vyhradne z velke casti jeden clovek (pravdepodobne autor) a to vzdycky smrdi. Nema to temer zadnou komunitu, ackoliv to existuje jiz nekolik let – prvni zminka je snad jiz z roku 2015, 2016. V dnesni dobe se prave od velkych frameworku a „uber“ reseni ustupuje a jde se cestou mensich knihoven (ala React – i kdyz pravda React zrovna maly neni), ktere umi jednu vec, za to poradne. Sry bojs, ale tohle saks!

Lawondyss

Máte dost chabé argumenty.
Porovnávate IMA s Angularem ignorujíc, že Angular je primárně zaměřen na SPA. IMA je stejně tak dobrý i pro MPA. Zkuste se stejnou grácií nějakou MPA v Angularu vytvořit a zjistíte, že udělat tunel jenom bagrem není úplně nejlepší nápad.
Právě díky malosti komunity je velké množství commitů od jednoho člověka. Že to smrdí je blbost. Třeba u Nette tomu taky tak a stěží se dá říct, že to bylo na škodu. Ostatně český JS rybníček je ještě menší, než ten PHPkovský, takže vyčítat českému JS frameworku malou komunitu je jako nadávat na vesnické zábavě, že tam nehrají pořádné „pecky“.
Malá knihovna je jako berle, řeší konkrétní problém, ale přes ostatní se musíte belhat. Ti rozumnější na ně použijí jiné malé knihovny (a těch je v JS hromada i na blbosti), takže si ve finále skládáte puzzle, které k sobě tak úplně nesedí. Ucelený framework nabízí vše pod jednou střechou a se zárukou kompatibility. Že je moderní rozbijet monorepa, je věc jiná.
Máte svůj žebříček hodnot, OK, ale buďte opatrný s tím obecným posuzování podle něj. Někdo jiný se vám o něj opře a zlomí se pod ním 😉

shemale01

nebojte, ačkolik se Vám zdá, že máme děravé argumenty, není tomu tak :-) Jen mě přestalo bavit tu psát o tom, co je to zač. Když člověk napíše názor, smažou ;-) A rozhodně se mi neláme.

BTW, IMA není ucelený FW. Jako FW bych možná bral NG, ale ne tento paskvil. Jak jsem psal, netajím se antipatií vůči seznamu.

Ve světe IT jsem přes 30 let, takže si dovolím posoudit sám co je z mého pohledu dobré a co ne.

Velikost komunity je docela dost důležitá. Jak IMA, tak Nette je to je otázka ČR. Nette ale dělá opravdu komunita (ikdyž slovo dělá se nedá říci…) Kdežto IMA, je dílem jednoho zaměstnance seznamu, jakmile tam onen člověk skončí nebo seznam krachne, tak je další vývoj v ohrožení… Malou komunitu jsem nevyčítal, jen zmiňuji, že jeden člověk je na prd. I sám Grudl řekl, že v Nette je pár antipatterů ;-)

Za dobu své praxe jsem dospěl k názoru, že pokud to jde, raději se vyhnu FW a plno věcí si napíši sám. Ano, FW jsou fajn, zrychlý práci, ale dost často nevíte co se děje na pozadí.

Nikomu nebráním v používání, píšu svůj názor.

Martin Hassman

Tvrdím, že je to lež. Za názor opravdu nemažeme.

Aleš Adámek

Miluju názory typu, nikdy jsem to nezkoušel a vím že to je na prd už předem. Spolupracovat s Vámi v týmu musí být asi potěšení.

Tonda Banderas

Pobavilo. Vase argumenty jsou stejne tak chabe jako moje. Zrejme na rozdil od vas (prominte, ale tohle vazne jen tipuju) mam hodne zkusenosti s velkymi uber frameworky, ktere resi kazde uprdnuti v prohlizeci a je to proste jako chodit s kanonem na vrabce. Prohlizec nam nabizi rich api (davno jsou doby nekompatibilit diky IE6-8 pryc) a NodeJS je cim dal vic robustnejsi platforma rovnez a da se kod psat tak, abychom nemuseli pouzivat zadne uber reseni.

IMA je v tomto jeste horsi, protoze misto toho, abychom pouzivali nativni kod, musime to delat pres IMATadySiDomysleteCokoliv sracku. Zdravim napriklad Object Container (https://imajs.io/docs/object-container) :)

Celkove bych to prirovnal k tomu, jako kdyz si od Thora pujcite kladivo a jdete jim pribit maly hrebicek :)

BoneFlute

Díky za zase programátorský článek :-) Doufám, že vydržíte pár dílů!

Martin Hassman

Už tu máme druhý díl https://www.zdrojak.cz/clanky/ima-js-setup-aplikace-a-vytvoreni-modelu/

Další se připravují. Komentáře k obsahu vítáme.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.