Webassembly vs. JavaScript:Jak se porovnávají

JavaScript je obrovský!

Je všude, pohání webové prohlížeče a běží na telefonech, tabletech, stolních počítačích, serverech – seznam pokračuje, ale vy rozumíte.

JavaScript (zkráceně JS) vydaný v roce 1995 je objektově orientovaný, jednovláknový skriptovací jazyk, který běží nativně v prohlížeči. Podle Statista je to nejoblíbenější programovací jazyk na webu, který používá více než 60 % vývojářů.

Dynamická povaha JS je jeho nejvýznamnějším prodejním argumentem, ale byl to dvousečný meč, takže je neohrabané provozovat složité projekty na vysoce výkonné úrovni.

V posledních letech se objevil nový nativně podporovaný programovací jazyk; WebAssembly (zkráceně WASM). Ale jak je srovnání WebAssembly a JavaScript?

Může se WASM stát the další dominantní jazyk ve vývoji webu a sesadit z trůnu JavaScript jako nejvyšší webový jazyk?

Ne nutně, ale to neznamená, že WebAssembly nestojí za pozornost – a pravděpodobně ještě víc.

V tomto článku se podrobně podíváme na WebAssembly, jak funguje, čím se liší od JavaScriptu a poslední palčivou otázkou:je lepší než JavaScript, nebo byste se měli jednoduše naučit obojí?

Rychlý úvod do JavaScriptu

V roce 1995 Brendan Eich, tvůrce JavaScriptu, pracoval pro Netscape, tvůrce pravděpodobně nejlepšího prohlížeče té doby – vzpomínám si, že jsem Netscape používal v roce 1997, kdy se internet dostal do mého sousedství ve Venezuele. Mému šestiletému já se to líbilo, ale neberte jeho slovo jako samozřejmost.

Eich se zaměřuje na vývoj skriptovacího jazyka, který by usnadnil konstrukci komponent a automatizaci interakcí. Tím by se z prohlížeče stala plnohodnotná aplikační platforma. Tato snaha o jednoduchost pohání jednoduchou syntaxi a strukturu Javascriptu, díky čemuž je jedním z nejsnáze se učit.

JS je od přírody dynamický. Ačkoli se používá hlavně pro vytváření webových stránek, – 97,6 % webů používá JavaScript jako programovací jazyk na straně klienta – vývojáři jej mohou použít i pro prostředí bez prohlížeče, jako jsou vestavěné systémy a databáze. Je zajímavé, že většina vývojářů objevuje JavaScript prostřednictvím frameworků a knihoven jako React, VueJS nebo Angular, což usnadňuje vytváření interaktivních webových stránek. V JavaScriptu prohlížeč spouští kód pomocí enginu JavaScript, který obsahuje zásobník paměti, který přiděluje paměť, a zásobník volání, který sleduje program. Tento engine je oblíbeným typem enginu Google v8, který používá Chrome a framework na straně serveru Node.js.

Kromě enginu JS jsou k dispozici další funkce prohlížeče, jako jsou webová rozhraní API a smyčka událostí. Vývojáři mohou s těmito funkcemi pracovat za běhu pomocí funkcí JS, které se řídí standardem ECMAScript.

Koncepty JavaScriptu

• Proměnné: Umožňuje přiřazovat a ukládat hodnoty. V současnosti existují tři způsoby deklarace proměnné:Var, Let a Const . ES6 představil poslední dva.

var x = 10;
let country = ‘Argentina;
const pi = 3.14;

• Objekty: Uložit vlastnosti a hodnoty.

let orange = {
  type: “fruit”;
  price: “$10”;
  availability: false
}

• Pole: Umožňují přiřadit proměnné více prvků.

var frameworks = [“React”, “Vue”, “Angular”];

Máme také Funkce, smyčky a podmíněné příkazy. Podívejme se na příklad využívající některé z těchto konceptů:

function myComparison(x, y) {
   if (x > y) {
       return -1;
   } else if (x < y) {
       return 1;
   }
   return 0;
}

Znalost těchto základních bloků umožňuje vývojářům budovat dnešní web, web, který všichni známe a milujeme.

Co je WebAssembly?

WASM je nízkoúrovňový, bajtový kód a jazyk podobný assembleru navržený pro nativní běh na webu. Počáteční verze WebAssembly byla spuštěna v roce 2017 jako otevřený standard vytvořený a spravovaný organizacemi W3C, Mozilla, Microsoft, Google a Apple. Je také široce podporován hlavními prohlížeči, jako je Chrome, Edge, Firefox, Safari a Opera.

Na této stránce můžete získat seznam aktuálních funkcí WASM, které každý prohlížeč nativně podporuje.

WebAssembly (WASM) byl navržen s jediným cílem:spouštět efektivní moderní aplikace založené na prohlížeči na vysoce výkonných úrovních. A co víc, ve WebAssembly by toho mělo být dosaženo bez ohrožení kompatibility nebo zabezpečení.

Fantastickou vlastností WASM je, že umožňuje kompilovat a spouštět zdrojový kód napsaný v jiných programovacích jazycích, jako je C/C++, C# a Rust. Navzdory svým výhodám se WASM netěšil širokému přijetí mezi vývojáři, přičemž pouze 10 % vývojářů uvedlo, že jej v nedávném průzkumu použili.

Anatomie WebAssembly

Stejně jako všechny ostatní programovací jazyky je WebAssembly postaveno na několika základních konceptech. Pojďme se podívat na některé z těchto konceptů:

• Hodnoty: Toto jsou typy hodnot poskytované WebAssembly. V současné době jsou uvedeny čtyři typy, včetně celých čísel a sofistikovanějších čísel s plovoucí desetinnou čárkou. Tato čísla mohou představovat booleovské hodnoty a místa v paměti.

• Modul: Je to kus spustitelného strojového kódu zkompilovaný prohlížečem z binárního souboru WebAssembly. Má .wasm příponu souboru a může být importován a exportován hostitelským prostředím, do kterého byl vložen.

• Tabulka :Je to pole obsahující hodnoty jednotlivých položek. Obsahuje ukazatele na umístění paměti funkcí.

• Funkce: Organizované bloky kódu, které přijímají a vracejí sady hodnot jako parametry a výstupy.

Všechny tyto koncepty tvoří strukturu kódu WebAssembly. Tento kód může být v textovém a binárním formátu. Při kompilaci kódu WASM prochází virtuální stroj prohlížeče třemi procesy:

1. Dekódování modulů

2. Kompilace, optimalizace a ověření kódu podle předem definovaných kritérií

3. Spuštění zkompilovaného kódu

Zde je přibližný odhad toho, jak by hypotetická aplikace WebAssembly trávila svůj čas, s laskavým svolením Lin Clark z Code Cartoons.

Tento diagram ukazuje, kde WASM engine tráví čas pro hypotetickou aplikaci, ale mějte na paměti, že toto číslo se může lišit. Čas, který WASM engine stráví prováděním některého z těchto úkolů, závisí na druhu práce, kterou WebAssembly na stránce vykonává. Ale můžeme tento diagram použít k vytvoření mentálního modelu.

Podívejme se na ukázkový modul WebAssembly ve formátu WASM Text Format (WAT).

(module
   (func $addNums (param i32 i32)
      (result i32)
    (i32.add
         (get_local 0)
         (get_local 1))
   (export “addNums” (func $addTwo))

Výše uvedený fragment kódu obsahuje modul, ve kterém je definována funkce. Proces přijímá hodnoty jako parametry a vrací výsledné hodnoty. Funkce je poté exportována a lze ji pak vyvolat v prohlížeči.

Proč takový humbuk kolem WebAssembly?

Spuštění WebAssembly vyvolalo velký rozruch díky rozsáhlým možnostem, které vývojářům otevírá.

Pro začátek mohou vývojáři zpřístupnit množství nativních aplikací prostřednictvím prohlížeče bez vyčerpání, restrukturalizace nebo ohrožení výkonu.

WASM navíc poskytuje bezpečný přístup k rychlému nasazení inovací v běhovém prostředí prohlížeče. Zatímco Javascript byl užitečný jako dynamický jazyk, jeho bezpečnost je již dlouho zdrojem obav.

Vývojáři WASM mohou používat sandboxy jako bezpečnostní opatření pro spouštění bezpečných a vysoce výkonných aplikací. Mnoho prvních uživatelů se domnívá, že to JavaScriptu umožní vrátit se ke svému původnímu cíli jako skriptovacího jazyka, který pohání interaktivitu prohlížeče.

Je však třeba poznamenat, že ačkoli bylo WebAssembly navrženo tak, aby převzalo výpočetně náročné povinnosti JavaScriptu, nikdy nebylo zamýšleno jako soupeř, který by ututlal dominantní postavení JavaScriptu v ekosystému prohlížeče.

Oficiální dokumentace WASM skutečně zdůrazňuje, že WebAssembly byl vytvořen jako doplněk JavaScript. Kromě toho WASM v současné době vyžaduje HTML a JS k úspěšnému zobrazení výsledků generovaného kódu na webu.

JavaScript vs. WebAssembly:Klady a zápory

JavaScript

Mnoho webových stránek, včetně obchodů elektronického obchodu, používá JavaScript jako svůj jazyk. Pojďme se podívat na některé z důvodů, proč tomu tak je:

Výhody

• Flexibilita: Největším důvodem popularity Javascriptu je jeho všestrannost. Vývojáři mohou používat JavaScript pro širokou škálu funkcí. Vezměte si například významné stránky elektronického obchodu, jako je eBay a Walmart. Mohou používat Javascriptové knihovny, jako je React, k vytváření krásných výkladů a zároveň používat Node.js k napájení svých funkcí na straně serveru.

• Jednoduchost :Javascript má lidsky čitelnou syntaxi, která usnadňuje učení. Ve skutečnosti se JS ukázal jako preferovaný programovací jazyk pro začátečníky a tato rozsáhlá přitažlivost vyústila v prosperující ekosystém, který usnadňuje nábor vývojářů.

• Relativně rychlý :Vzhledem k tomu, že Javascript je interpretovaný jazyk, může být poměrně rychlý a produkovat optimální rychlost při použití pro konkrétní webové úlohy. To výrazně zvyšuje produktivitu vývojářů, což také přispělo k jeho širokému používání a přijetí.

Nevýhody

• Zabezpečení na straně klienta: Použití skriptů přidává další procesy, které mohou útočníci se zlými úmysly zneužít. Podle nedávného výzkumu 97 procent hodnocených webových stránek používalo jednu nebo více nezabezpečených funkcí JavaScriptu. Šíření neauditovaných knihoven třetích stran v ekosystému JS zvýšilo frekvenci těchto útoků. Vlastníci kritických systémů, jako jsou platební pokladny, by se neměli při zabezpečení svých online aplikací spoléhat pouze na ověřovací kontroly na straně klienta.

• Nekonzistentní podpora prohlížeče: Navzdory snahám o celoplošnou standardizaci funkcí JS se vývojáři potýkají s problémy s kompatibilitou mezi různými prohlížeči, což ztěžuje vytváření jednotného uživatelského rozhraní aplikací.

• Neefektivní podpora ladění: Vzhledem k tomu, že JavaScript je interpretovaný jazyk, který nevyžaduje kompilátor, je snadné nasadit aplikace, aniž byste si všimli kritických zranitelností. Vzhledem ke své asynchronní povaze může být ladění hlavních příčin chyb složité. Rozsáhlé nástroje jako linters a další IDE pluginy umožňují psát bezchybný JS kód.

Kdy je JavaScript dobrý nápad?

JavaScript byl primárně navržen pro přidání interaktivity do webových stránek a aplikací. To znamená, že vývojáři mohou používat JavaScript pro několik účelů kvůli jeho dynamické povaze, od vestavěných systémů po desktopové aplikace. Vlastníci projektu však mohou zaznamenat významné problémy s výkonem, protože projekt se stává složitějším. Proto je nezbytné používat JavaScript zodpovědně.

Zde jsou některé běžné případy použití JavaScriptu:

Případy použití JavaScriptu

• Mobilní hry

• Vývoj mobilních aplikací

• Vytváření uživatelských rozhraní pro webové aplikace

• Napájení aplikací na straně serveru pomocí Node.js

WebAssembly

Výhody

• Rychlý výkon: WebAssembly bylo navrženo tak, aby provádělo vysoce výkonné výpočty rychlostí téměř nativní. Na rozdíl od Javascriptu je WASM staticky typován, což znamená, že k optimalizaci kódu dochází mnohem dříve v procesu kompilace, než se kód dostane do prohlížeče. Jeho binární soubory jsou podstatně menší než soubory JavaScriptu, což má za následek výrazně rychlejší načítání.

• Podpora napříč platformami: Jak bylo uvedeno dříve, jedním z největších hnacích sil pro přijetí WASM je to, že vývojáři mohou psát kód pro web v jiných jazycích než JavaScript a přenášet existující aplikace přes web. Přenositelnost je prominentní funkcí WebAssembly od samého začátku, a proto se vyplatí mimo prohlížeč pohánět efektivní a výkonné aplikace na různých operačních systémech.

• Špičkové zabezpečení: WebAssembly byl vytvořen s ohledem na bezpečnost. Jeho cílem je chránit uživatele před potenciálními webovými nejistotami a zároveň umožnit vývojářům vytvářet bezpečné aplikace. WebAssembly poskytuje zabezpečenou aplikaci tím, že izoluje spouštění modulů v prostředí sandbox a zároveň prosazuje známé zásady zabezpečení prohlížeče.

Nevýhody

• Počáteční fáze: WASM je stále v rané fázi vývoje a bude nějakou dobu trvat, než vybuduje bohaté prostředí, na jehož vytvoření měl JS 20 let. WebAssembly například v současné době postrádá funkce modelu dokumentu (DOM) a garbage collection a stále se spoléhá na JavaScript pro plný přístup k platformě.

• Jazyková složitost: Jednou z největších hnacích sil zavádění JavaScriptu mezi začátečníky, kteří chtějí mít okamžitý dopad, je jazyk na vysoké úrovni, jako je Python. WASM je nízkoúrovňový jazyk, který se obtížně učí, což může bránit tomu, aby byl tak populární jako JavaScript.

• Nedokonalé zabezpečení: Přestože byl WASM vytvořen s ohledem na bezpečnost, některé funkce jej činí užitečným pro útočníky se zlými úmysly. Výzkumníci již zjistili, že asi 50 % webových stránek, které používají WASM, jej používá k šíření bezpečnostních zranitelností. Vzhledem k tomu, že WASM je kompilovaný kód, může být pro prohlížeče obtížné zjišťovat bezpečnostní problémy v obfuskovaném formátu. Kromě toho, i když byla funkce sandbox navržena tak, aby obsahovala exploity, nedávná zjištění ukázala, že to není zcela přesné. Tyto obavy mohou souviset s počátečními problémy nového jazyka. WebAssembly se může ukázat jako řešení, které konečně minimalizuje útoky založené na prohlížeči, protože jsou vyvíjeny další funkce.

Kdy byste měli používat WebAssembly?

Vzhledem k výhodám WebAssembly by jej vývojáři měli používat při vytváření aplikací náročných na výpočetní techniku. Mohou dokonce používat zavedenější nízkoúrovňové jazyky uznávané pro jejich výkonnostní schopnosti a poté zkompilovat kód na web pomocí WASM. Existují další doporučené případy použití, například:

Případy použití WebAssembly

• Aplikace pro hybridní platformu

• Vývoj her náročných na CPU

• Vysoce výkonné vědecké simulace

• Aplikace pro streamování hudby a ukládání obrázků do mezipaměti

• Vývoj aplikací, které šifrují citlivá data

WebAssembly vs. JavaScript:Srovnání

Který byste se měli naučit?

WASM byl navržen tak, aby doplňoval možnosti JavaScriptu. V důsledku toho by váš cíl měl ovlivnit vaše rozhodnutí studovat jedno nebo druhé.

Jste začátečník, který chce vytvořit krásné uživatelské rozhraní bez větší složitosti? Naučit se Javascript by pak pro vás mělo být lepší volbou. Pokud máte v úmyslu provozovat bezpečné a výpočetně náročné aplikace, aniž byste se museli starat o výkon při škálování, učení WASM by pro vás mohlo být tou nejlepší volbou.

Dalšími faktory, které by měly ovlivnit vaše rozhodnutí, jsou rozsáhlá dokumentace a existence nástrojů zvyšujících produktivitu.

Nakonec si vyberte jazyk, o kterém si myslíte, že vám pomůže dosáhnout vašich cílů, a neučte se něco jen proto, že je to skvělé nebo nové.

Nahradí WebAssembly (WASM) JavaScript? Ve skutečnosti ne

Zatímco JavaScript má určité zásadní chyby, které měl WASM opravit, WebAssembly JavaScript v blízké budoucnosti nenahradí. Kromě toho má WASM před sebou ještě dlouhou cestu, než bude možné jej považovat za důvěryhodnou možnost přerušení.

Přiměřenějším hlediskem by bylo, že oba jazyky spolupracují na vylepšení a rozvoji aplikací založených na prohlížeči. Zatímco vývojáři usilují o rychlý a předvídatelný výkon pro velké projekty, preferován bude WASM, zatímco JavaScript zůstane de facto jazykem pro interaktivní mobilní a webové aplikace.