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

Celý článek

„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 vysvetlimé 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é routovaní 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é

• Novinky.cz
• Proženy.cz
• Garáž.cz
• HRY.cz
• Seznamzpravy.cz
• SAuto.cz
• Pocasi.cz

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.

Porovnani 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
+ cachovaní na serveru
+ jednotné routovaní 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 ubalení a deploymentu do cloudu jako lambda nebo jako docker kontejner
+ cachovaní 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.js, express.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 vyvinou aplikaci mnohem užitečnějsí.

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