Srovnání frameworků
Pokud čtete tuto stránku, pravděpodobně už máte zkušenosti s jinými frameworky pro tvorbu aplikací a zajímá vás, zda vám Mithril.js může efektivněji pomoci řešit vaše problémy.
Proč ne [váš oblíbený framework]?
Faktem je, že většina moderních frameworků je rychlá, dobře se hodí pro vytváření komplexních aplikací a jsou udržovatelné, pokud víte, jak je efektivně používat. Existují příklady velmi komplexních aplikací, které používají téměř každý populární framework: Udemy používá Angular, AirBnB používá React, Gitlab používá Vue, Guild Wars 2 používá Mithril.js (ano, uvnitř hry!). Je zřejmé, že se jedná o frameworky vhodné pro produkční nasazení.
Obecně platí, že pokud je váš tým již silně vázán na jiný framework/knihovnu/stack, má větší smysl se ho držet, pokud se tým neshodne na velmi pádném důvodu, který by ospravedlnil nákladné přepsání.
Pokud ale začínáte něco nového, zvažte vyzkoušení Mithril.js, alespoň abyste viděli, jakou hodnotu uživatelé Mithril.js získávají z méně než 10 kB (gzipovaných) kódu. Mithril.js používá mnoho známých společností (např. Vimeo, Nike, Fitbit) a pohání také velké platformy s otevřeným zdrojovým kódem (např. Lichess, Flarum).
Proč používat Mithril.js?
Jednou větou: protože Mithril.js je praktický. Tento 10minutový průvodce je toho dobrým příkladem: za takovou dobu se naučíte komponenty, XHR a routing – a to je zhruba množství znalostí potřebných k vytváření užitečných aplikací.
Mithril.js se zaměřuje na efektivní vykonávání smysluplné práce. Chcete nahrávat soubory? Dokumentace vám ukáže, jak na to. Autentizace? Také zdokumentováno. Ukončovací animace? Máte je. Žádné další knihovny, žádná magie.
Srovnání
React
React je knihovna pro zobrazení spravovaná společností Facebook.
React a Mithril.js sdílejí mnoho podobností. Pokud jste se již naučili React, už znáte téměř vše, co potřebujete k vytváření aplikací s Mithril.
- Oba používají virtuální DOM, metody životního cyklu a porovnávání na základě klíčů (rekonsolidace).
- Oba organizují zobrazení pomocí komponent.
- Oba používají JavaScript jako řídicí mechanismus v rámci zobrazení.
Nejviditelnější rozdíl mezi React a Mithril.js je v jejich rozsahu. React je knihovna pro zobrazení, takže typická aplikace založená na React využívá knihovny třetích stran pro routing, XHR a řízení stavu. Použití přístupu orientovaného na knihovny umožňuje vývojářům přizpůsobit svůj stack tak, aby přesně odpovídal jejich potřebám. Jinými slovy, architektury založené na React se mohou výrazně lišit projekt od projektu, a proto je pravděpodobnější, že tyto projekty překročí hranici 1 MB.
Mithril.js obsahuje vestavěné moduly pro běžné potřeby, jako je routing a XHR, a průvodce ukazuje idiomatické použití. Tento přístup je vhodnější pro týmy, které si cení konzistence a snadného onboardingu.
Výkon
React i Mithril.js se silně zajímají o výkon vykreslování, ale přistupují k němu různými způsoby. V minulosti měl React dvě implementace vykreslování DOM (jedna pomocí DOM API a druhá pomocí innerHTML). Jeho nadcházející architektura fiber zavádí plánování a prioritizaci jednotek práce. React má také sofistikovaný build systém, který zakazuje různé kontroly a chybové zprávy pro produkční nasazení a různé optimalizace specifické pro prohlížeč. Kromě toho existuje také několik knihoven orientovaných na výkon, které využívají React hook shouldComponentUpdate a vlastnosti rychlé kontroly rovnosti objektů knihoven neměnných datových struktur ke zkrácení doby porovnávání virtuálního DOM. Obecně řečeno, přístup React k výkonu spočívá v navrhování relativně složitých řešení.
Mithril.js se řídí myšlenkou méně je více. Má podstatně menší, agresivně optimalizovanou kódovou základnu. Důvodem je, že malá kódová základna se snadněji audituje a optimalizuje a v konečném důsledku vede ke spuštění menšího množství kódu.
Zde je srovnání doby načítání knihovny, tedy doby potřebné k analýze a spuštění kódu JavaScript pro každý framework. Měření se provádí přidáním volání console.time() na první řádek a volání console.timeEnd() na poslední řádek skriptu, který se skládá pouze z kódu frameworku. Pro vaše pohodlí jsou zde nejlepší výsledky z 20 pokusů s ručně přidaným kódem pro protokolování do balíčků skriptů, spuštěných ze systému souborů, v Chromu na skromném stolním počítači z roku 2010:
| React | Mithril.js |
|---|---|
| 55.8 ms | 4.5 ms |
Doba načítání knihovny je důležitá v aplikacích, které nezůstávají otevřené dlouho (například na mobilních zařízeních) a nelze ji zlepšit pomocí ukládání do mezipaměti nebo jiných optimalizačních technik.
Zde je o něco smysluplnější benchmark: měření doby skriptování pro vytvoření 10 000 divů a 10 000 textových uzlů. Opět, zde je kód benchmarku pro React a Mithril.js. Jejich nejlepší výsledky jsou uvedeny níže:
| React | Mithril.js |
|---|---|
| 99.7 ms | 42.8 ms |
Tato čísla ukazují, že Mithril.js se nejen inicializuje výrazně rychleji, ale dokáže zpracovat až 20 000 uzlů virtuálního DOM, než je React připraven k použití.
Výkon aktualizace
Výkon aktualizace může být ještě důležitější než výkon prvního vykreslení, protože aktualizace se mohou opakovat mnohokrát, když je spuštěna Single Page Application.
Užitečným nástrojem pro testování výkonu aktualizací je nástroj vyvinutý týmem Ember s názvem DbMonster. Aktualizuje tabulku tak rychle, jak jen může, a měří snímky za sekundu (FPS) a časy JavaScript (min, max a průměr). Počet FPS se obtížně vyhodnocuje, protože zahrnuje také časy překreslování prohlížeče a zpoždění upínání setTimeout, takže nejsmysluplnější číslo, na které se lze podívat, je průměrná doba vykreslování. Můžete porovnat implementaci React a implementaci Mithril.js. Ukázkové výsledky jsou uvedeny níže:
| React | Mithril.js |
|---|---|
| 12.1 ms | 6.4 ms |
Výkon vývoje
Další věc, kterou je třeba mít na paměti, je, že React přidává další kontroly a užitečné chybové zprávy v režimu vývoje, což způsobuje, že je ve vývoji pomalejší než produkční verze použitá pro výše uvedené benchmarky. Pro ilustraci, zde je benchmark s 10 000 uzly z výše uvedeného pomocí vývojové verze React.
Drop-in náhrady
Existuje několik projektů které tvrdí, že mají paritu API s React (některé prostřednictvím knihoven kompatibilních vrstev), ale nejsou plně kompatibilní (např. podpora PropType je obvykle omezena, syntetické události někdy nejsou podporovány a některé API mají odlišnou sémantiku). Všimněte si, že tyto knihovny obvykle také zahrnují funkce, které nejsou součástí oficiálního API React, což se může stát problematickým, pokud se někdo rozhodne přepnout zpět na React Fiber.
Tvrzení o malé velikosti stahování (ve srovnání s React) jsou přesná, ale většina z těchto knihoven je o něco větší než renderer modul Mithril.js. Preact je jedinou výjimkou.
Buďte opatrní ohledně agresivních tvrzení o výkonu, protože benchmarky používané některými z těchto projektů jsou známé jako zastaralé a chybné (v tom smyslu, že je lze – a jsou – zneužívány). Boris Kaul (autor některých benchmarků) podrobně napsal o tom, jak se benchmarky hrají. Další věc, kterou je třeba mít na paměti, je, že některé benchmarky agresivně používají pokročilé funkce optimalizace, a proto demonstrují potenciální výkon, tj. výkon, který je možný za určitých podmínek, ale realisticky nepravděpodobný, pokud aktivně nevěnujete čas procházení celé kódové základny, identifikaci kandidátů na optimalizaci a vyhodnocování rizik regrese způsobených optimalizačními podmínkami.
V duchu demonstrace typických charakteristik výkonu jsou benchmarky uvedené na této srovnávací stránce implementovány naivním, idiomatickým způsobem (tj. způsobem, jakým byste normálně napsali 99 % svého kódu) a nepoužívají triky nebo pokročilé optimalizace, aby jeden nebo druhý framework nevypadal uměle lépe. Doporučujeme vám přispět PR, pokud máte pocit, že kterákoli implementace DbMonster zde by mohla být napsána idiomaticky.
Složitost
React i Mithril.js mají relativně malé API ve srovnání s jinými frameworky, což usnadňuje učení. Nicméně, zatímco idiomatický Mithril.js lze psát bez ztráty čitelnosti pomocí prostého ES5 a žádných dalších závislostí, idiomatický React se silně spoléhá na složité nástroje (např. Babel, JSX plugin atd.) a tato úroveň složitosti se často rozšiřuje na populární části jeho ekosystému, ať už ve formě rozšíření syntaxe (např. nestandardní syntaxe spread objektů v Redux), architektur (např. ty, které používají knihovny neměnných dat), nebo různých vylepšení.
Zatímco složité toolchainy jsou možné i s Mithril.js a dalšími frameworky, důrazně se doporučuje, abyste se při používání Mithril.js řídili principy KISS a YAGNI.
Křivka učení
React i Mithril.js mají relativně mírnou křivku učení. Křivka učení React zahrnuje především pochopení komponent a jejich životního cyklu. Křivka učení pro komponenty Mithril.js je téměř identická. V Mithril.js je samozřejmě více API, které se musíte naučit, protože Mithril.js zahrnuje také routing a XHR, ale křivka učení by byla poměrně podobná učení se React, React Router a knihovny XHR, jako je superagent nebo axios.
Idiomatický React vyžaduje pracovní znalosti JSX a jeho úskalí, a proto existuje také malá křivka učení související s Babel.
Dokumentace
Dokumentace React je jasná a dobře napsaná a zahrnuje dobrou referenci API, tutoriály pro začátek a také stránky pokrývající různé pokročilé koncepty. Bohužel, protože se React omezuje pouze na knihovnu pro zobrazení, jeho dokumentace nezkoumá, jak používat React idiomaticky v kontextu reálné aplikace. Výsledkem je, že existuje mnoho populárních knihoven pro řízení stavu, a proto se architektury používající React mohou drasticky lišit od společnosti ke společnosti (nebo dokonce mezi projekty).
Dokumentace Mithril.js také zahrnuje úvodní tutoriály, stránky o pokročilých konceptech a rozsáhlou sekci referencí API, která zahrnuje informace o typech vstupu/výstupu, příklady pro různé běžné případy použití a rady proti zneužití a anti-vzory. Zahrnuje také tahák pro rychlou orientaci.
Dokumentace Mithril.js také demonstruje jednoduchá, nízkoúrovňová řešení pro běžné případy použití v reálných aplikacích, kde je vhodné informovat vývojáře, že webové standardy mohou být nyní na stejné úrovni jako větší zavedené knihovny.
Angular
Angular je webový aplikační framework spravovaný společností Google.
Angular a Mithril.js jsou poměrně odlišné, ale sdílejí několik podobností:
- Oba podporují komponentizaci.
- Oba mají řadu nástrojů pro různé aspekty webových aplikací (např. routing, XHR).
Nejviditelnější rozdíl mezi Angular a Mithril.js je v jejich složitosti. To lze nejsnadněji vidět v tom, jak jsou implementována zobrazení. Zobrazení Mithril.js jsou prostý JavaScript a řízení toku se provádí pomocí vestavěných mechanismů JavaScript, jako jsou ternární operátory nebo Array.prototype.map. Angular na druhé straně implementuje systém direktiv pro rozšíření zobrazení HTML, aby bylo možné vyhodnocovat výrazy podobné JavaScriptu v rámci atributů HTML a interpolací. Angular ve skutečnosti dodává parser a kompilátor napsaný v JavaScriptu, aby toho dosáhl. Pokud se to nezdá dostatečně složité, existují ve skutečnosti dva režimy kompilace (výchozí režim, který dynamicky generuje funkce JavaScript pro výkon, a pomalejší režim pro řešení omezení Content Security Policy).
Výkon
Angular udělal v průběhu let velký pokrok, pokud jde o výkon. Angular 1 používal mechanismus známý jako kontrola změn, který měl tendenci zpomalovat kvůli potřebě neustále porovnávat velké struktury $scope. Angular 2 používá mechanismus detekce změn šablon, který je mnohem výkonnější. Nicméně, i přes vylepšení Angular, je Mithril.js často rychlejší než Angular, a to díky snadnosti auditování, kterou si malá velikost kódové základny Mithril.js dovoluje.
Je obtížné provést srovnání doby načítání mezi Angular a Mithril.js z několika důvodů. Prvním je, že Angular 1 a 2 jsou ve skutečnosti zcela odlišné kódové základny a obě verze jsou oficiálně podporovány a udržovány (a drtivá většina kódových základen Angular v reálném světě v současné době stále používá verzi 1). Druhým důvodem je, že Angular i Mithril.js jsou modulární. V obou případech je možné odstranit významnou část frameworku, která se v dané aplikaci nepoužívá.
Nicméně, nejmenší známý balíček Angular 2 je 29kb hello world komprimovaný algoritmem Brotli (35kb pomocí standardního gzip) a s většinou užitečných funkcí Angular odstraněných. Pro srovnání, Mithril.js hello world – včetně celého jádra Mithril.js se vším všudy – by měl asi 10kb gzipovaných.
Také si pamatujte, že frameworky jako Angular a Mithril.js jsou navrženy pro netriviální aplikace, takže aplikace, které se podařilo použít celé API Angular, by musela stáhnout několik stovek kb kódu frameworku, spíše než pouhých 29kb.
Výkon aktualizace
Užitečným nástrojem pro testování výkonu aktualizací je nástroj vyvinutý týmem Ember s názvem DbMonster. Aktualizuje tabulku tak rychle, jak jen může, a měří snímky za sekundu (FPS) a časy JavaScript (min, max a průměr). Počet FPS se obtížně vyhodnocuje, protože zahrnuje také časy překreslování prohlížeče a zpoždění upínání setTimeout, takže nejsmysluplnější číslo, na které se lze podívat, je průměrná doba vykreslování. Můžete porovnat implementaci Angular a implementaci Mithril.js. Obě implementace jsou naivní (tj. bez optimalizací). Ukázkové výsledky jsou uvedeny níže:
| Angular | Mithril.js |
|---|---|
| 11.5 ms | 6.4 ms |
Složitost
Angular je lepší než Mithril.js v množství nástrojů, které nabízí (ve formě různých direktiv a služeb), ale je také mnohem složitější. Porovnejte API Angular s API Mithril.js. Můžete si sami udělat úsudek o tom, které API je více popisné a relevantnější pro vaše potřeby.
Angular 2 má mnohem více konceptů k pochopení: na jazykové úrovni je doporučeným jazykem Typescript a kromě toho existuje také syntaxe šablon specifická pro Angular, jako jsou vazby, pipes, "safe navigator operator". Musíte se také naučit o architektonických konceptech, jako jsou moduly, komponenty, služby, direktivy atd., a kde je vhodné co použít.
Křivka učení
Pokud porovnáme srovnatelné věci, Angular 2 a Mithril.js mají podobné křivky učení: v obou jsou komponenty ústředním aspektem architektury a oba mají rozumné nástroje pro routing a XHR.
Nicméně, Angular má mnohem více konceptů k naučení než Mithril.js. Nabízí API specifická pro Angular pro mnoho věcí, které lze často triviálně implementovat (např. pluralizace je v podstatě příkaz switch, "required" validace je jednoduše kontrola rovnosti atd.). Šablony Angular mají také několik vrstev abstrakcí, které emulují to, co JavaScript dělá nativně v Mithril.js – ng-if/ngIf Angular je direktiva, která používá vlastní parser a kompilátor k vyhodnocení řetězce výrazu a emulaci lexikálního rozsahu... a tak dále. Mithril.js má tendenci být mnohem transparentnější, a proto se o něm snadněji uvažuje.
Dokumentace
Dokumentace Angular 2 poskytuje rozsáhlý úvodní tutoriál a další tutoriál, který implementuje aplikaci. Má také různé průvodce pro pokročilé koncepty, tahák a průvodce stylem. Bohužel, v současné době reference API nechává mnoho přání. Několik API je buď nedokumentovaných, nebo neposkytuje žádný kontext pro to, k čemu by se API mohlo použít.
Dokumentace Mithril.js zahrnuje úvodní tutoriály, stránky o pokročilých konceptech a rozsáhlou sekci referencí API, která zahrnuje informace o typech vstupu/výstupu, příklady pro různé běžné případy použití a rady proti zneužití a anti-vzory. Zahrnuje také tahák pro rychlou orientaci.
Dokumentace Mithril.js také demonstruje jednoduchá, nízkoúrovňová řešení pro běžné případy použití v reálných aplikacích, kde je vhodné informovat vývojáře, že webové standardy mohou být nyní na stejné úrovni jako větší zavedené knihovny.
Vue
Vue je knihovna pro zobrazení podobná Angular.
Vue a Mithril.js mají mnoho rozdílů, ale také sdílejí některé podobnosti:
- Oba používají virtuální DOM a metody životního cyklu.
- Oba organizují zobrazení pomocí komponent.
Vue 2 používá fork Snabbdom jako svůj systém virtuálního DOM. Kromě toho Vue také poskytuje nástroje pro routing a řízení stavu jako samostatné moduly. Vue vypadá velmi podobně jako Angular a poskytuje podobný systém direktiv, šablony založené na HTML a direktivy pro řízení logiky. Liší se od Angular tím, že implementuje reaktivní systém monkeypatching, který přepisuje nativní metody v datovém stromu komponenty (zatímco Angular 1 používá kontrolu změn a cykly zpracování změn k dosažení podobných výsledků). Podobně jako Angular 2, Vue kompiluje šablony HTML do funkcí, ale kompilované funkce vypadají spíše jako zobrazení Mithril.js nebo React, než jako kompilované funkce vykreslování Angular.
Vue je výrazně menší než Angular, když porovnáváme srovnatelné věci, ale není tak malý jako Mithril.js (jádro Vue má kolem 23kb gzipovaných, zatímco ekvivalentní modul vykreslování v Mithril.js má kolem 4kb gzipovaných). Oba mají podobné charakteristiky výkonu, ale benchmarky obvykle naznačují, že Mithril.js je o něco rychlejší.
Výkon
Zde je srovnání doby načítání knihovny, tedy doby potřebné k analýze a spuštění kódu JavaScript pro každý framework. Měření se provádí přidáním volání console.time() na první řádek a volání console.timeEnd() na poslední řádek skriptu, který se skládá pouze z kódu frameworku. Pro vaše pohodlí jsou zde nejlepší výsledky z 20 pokusů s ručně přidaným kódem pro protokolování do balíčků skriptů, spuštěných ze systému souborů, v Chromu na skromném stolním počítači z roku 2010:
| Vue | Mithril.js |
|---|---|
| 21.8 ms | 4.5 ms |
Doba načítání knihovny je důležitá v aplikacích, které nezůstávají otevřené dlouho (například na mobilních zařízeních) a nelze ji zlepšit pomocí ukládání do mezipaměti nebo jiných optimalizačních technik.
Výkon aktualizace
Užitečným nástrojem pro testování výkonu aktualizací je nástroj vyvinutý týmem Ember s názvem DbMonster. Aktualizuje tabulku tak rychle, jak jen může, a měří snímky za sekundu (FPS) a časy JavaScript (min, max a průměr). Počet FPS se obtížně vyhodnocuje, protože zahrnuje také časy překreslování prohlížeče a zpoždění upínání setTimeout, takže nejsmysluplnější číslo, na které se lze podívat, je průměrná doba vykreslování. Můžete porovnat implementaci Vue a implementaci Mithril.js. Obě implementace jsou naivní (tj. bez optimalizací). Ukázkové výsledky jsou uvedeny níže:
| Vue | Mithril.js |
|---|---|
| 9.8 ms | 6.4 ms |
Složitost
Vue je silně inspirován Angular a má mnoho věcí, které Angular dělá (např. direktivy, filtry, obousměrné vazby, v-cloak), ale má také věci inspirované React (např. komponenty). Od Vue 2.0 je také možné psát šablony pomocí syntaxe hyperscript/JSX (kromě komponent s jedním souborem a různých pluginů pro transpilaci jazyků založených na webpack). Vue poskytuje obousměrné datové vazby a volitelnou knihovnu pro řízení stavu podobnou Redux, ale na rozdíl od Angular neposkytuje žádný průvodce stylem. Flexibilita v řešení jednoho problému může vést k architektonické fragmentaci v dlouhodobých projektech.
Mithril.js má mnohem méně konceptů a obvykle organizuje aplikace z hlediska komponent a datové vrstvy. Všechny styly vytváření komponent v Mithril.js vypisují stejnou strukturu vnode pouze pomocí nativních funkcí JavaScript. Přímým důsledkem opírání se o jazyk je méně nástrojů a jednodušší nastavení projektu.
Dokumentace
Vue i Mithril.js mají dobrou dokumentaci. Oba zahrnují dobrou referenci API s příklady, tutoriály pro začátek a také stránky pokrývající různé pokročilé koncepty.
Nicméně, kvůli přístupu Vue mnoha způsoby, jak udělat jednu věc, nemusí být některé věci adekvátně zdokumentovány. Například jejich hyperscript je silně přehlížen.
Dokumentace Mithril.js se obvykle mýlí v tom, že je příliš důkladná, pokud téma zahrnuje věci mimo rozsah Mithril. Například, když téma zahrnuje knihovnu třetí strany, dokumentace Mithril.js prochází procesem instalace knihovny třetí strany. Dokumentace Mithril.js také často demonstruje jednoduchá, nízkoúrovňová řešení pro běžné případy použití v reálných aplikacích, kde je vhodné informovat vývojáře, že webové standardy mohou být nyní na stejné úrovni jako větší zavedené knihovny.
Tutoriály Mithril.js také pokrývají mnohem více než tutoriály Vue: tutoriál Vue končí jednoduchým místním seznamem úkolů poté, co projde několik stránek, aby pokryl své velké základní API. 10minutový průvodce Mithril.js pokrývá většinu svého API a dokonce se zabývá klíčovými aspekty reálných aplikací, jako je načítání dat ze serveru a routing. Pokud to nestačí, existuje také delší a důkladnější tutoriál.