Lehet, hogy nem kell átültetnie a JavaScript-et

Az olyan népszerű útmutatók, mint a YouMightNotNeedJQuery.com és a You Do not Need Lodash / Aláhúzás, megkérdőjelezték az általános ipari gyakorlatokat.

Ez a bejegyzés nem olyan vad, mint mondjuk a YouMightNotNeedJS.com, de részletesen tárgyalja a transzpilációt, és megmagyarázza, miért nem lehet annyira szükséges a közeljövőben.

A StatCounter havonta mintegy 15 millió milliárd oldalmegtekintést gyűjt a világ minden tájáról érkező 2,5 millió webhelyről. 2017 májusától ez a status quo:

A diagram érdekesvé teszi, hogy a három legfontosabb böngésző (Chrome, Safari és FireFox) örökzöld,ami azt jelenti, hogy a felhasználók 74% -a automatikusan megkapja böngészője legújabb verzióját.

Nézzük meg, hogy ez a feltételezés helyes-e.

Itt vannak a legnépszerűbb böngészőverziók a piacon:

A Chrome 58 kevesebb mint egy hónapja jelent meg, és asztali verziója a böngésző globális piaci részesedésének 12,77% -át képviseli. A Chrome 57 csak 42 nappal azelőtt jelent meg, és asztali verziója a globális böngészőpiac 9,96% -át birtokolja. Sajnos a StatCounter nem tesz különbséget a króm verziók között a mobil platformokon, de ugyanazt az arányt feltételezve, mint az asztali számítógép, végül:

Mit jelent a kódom számára?

Az ES kompatibilitási táblázat szerint az összes fő böngésző legújabb verziója nagyon jó támogatást nyújt az ES6 funkcióihoz:

Más szóval, ha a JavaScriptet ES5-re transzponálja, akkor a kódját szükségtelenül nagyra és lassan teszi, hogy támogassa a felhasználók egy részét, akik valószínűleg frissítik a rendszerüket, mire sikerül beállítaniuk a Webpack-t és a Babel-t! ?

Miért is transzponálnád?

Előfordulhat, hogy továbbra is szeretné átültetni a kódot, de remélhetőleg az ellenérvek és az előnyök, vagy a lehetséges alternatívák mérlegelése után:

  • A React JSX-et használja (amely jelenleg meglehetősen népszerű, ezért feltételezem, hogy sok fejlesztő illik ebbe a kategóriába). A JSX lényege az XHTML átalakítása JS kóddá, és nem szükséges teljes transzpiler, mint a Bábel. Ezenkívül, ha csak a VirtualDomra van szüksége, használja ezt inkább.
  • Ki szeretné próbálni a nyelv legújabb funkcióit. Hacsak nem tagja a TC39-nek, vagy égető vágya van arra, hogy instabil nyelvi funkciókat juttasson a gyártási kódjába, valószínűleg jól áll az ES6-tal. Manapság tisztességes nyelvünk van, a böngészők többsége, és az átültetés szükségessége elenyészik.
  • Ön a TypeScript-t használja, és remélhetőleg mérlegelte a hátrányait és előnyeit. A TypeScript fordító az ES6 modern verziójának megcélzása esetén a szintaxis átalakítása helyett többnyire kitörli a típusinformációkat.
  • Csökkenteni akarja a kód méretét a fa rázásával (itt olvashatja el, hogyan teheti meg webpack-ban és összesítve). A kódot el akarja zavarni, vagy kicsinyítéssel csökkenteni akarja a méretét. Feltételesen ki akarja zárni a kód egy részét. Ehhez statikus kódelemzésre van szükség. Használhat intelligens csomagot olyan méretérzékeny termelési szolgáltatásokhoz, mint a mobileszközök, de az ilyen alternatív telepítések létrehozásakor gondosabb költségértékeléseket fogunk látni. Az ilyen típusú statikus kódelemzések továbbra is hasznosak lesznek „fejlett optimalizálási technikákként” a gyártási kódokhoz.Nem kell kicsinyítenie a fájljait. Az UglifyJS egyelőre nem tudja csökkenteni az ES6-ot (bár létezik harmoney ág), de Babili képes kezelni. A tömörítési algoritmusok meglehetősen tisztességes munkát végeznek (nem akkor, ha a fájlok túl kevesek), és hacsak nem operációs rendszert szállítunk minden oldal betöltésekor, a tömörítés nélkül is jól kell működniük. Manapság a képek és a multimédiás tartalom sokkal nagyobb sávszélességet igényel, mint a kód.
  • Az elefántot a szobába akarja:

Az NPM a világ legnagyobb csomagkezelője. A legtöbb nem triviális webalkalmazás használ néhány kódot az NPM-től, és ez magában foglalja a modulcsomagoló használatát. Ez hamarosan megváltozik! A Chrome már támogatja az ES6 modulokat Kanári-szigeteken (a Chrome 60 hivatalosan augusztusban fogja szállítani ezt a funkciót), és a Safari is közel áll a szállításhoz, miközben a Firefox és az Edge dolgozik rajta.

A HTTP / 2 mellett lehetővé teszi az erőforrások önkéntes továbbítását a böngészőbe. Ez azt jelenti, hogy ha az a.js b.js és c.js fájlokat importál , akkor a kiszolgáló minden alkalommal meghúzhatja a b.js és c.js fájlokat, amikor az a.js letöltésre kerül, ami minimalizálja a kérések közötti időt. Ez természetesen leegyszerűsített nézet, mert a gyakorlatban a böngészőnek már lehet, hogy a b.js és a c.js a gyorsítótárában. A HTTP / 2 a böngészők többségében támogatott.

A jövő transziláció nélkül

A fenti statisztikákat figyelembe véve ez azt jelenti, hogy 2018 lesz az az év, amikor a webalkalmazások többsége megszabadulhat a modulcsomagolóktól vagy a transzpilerektől.

A transzpiláció egy megoldás. Lehet, hogy túl sokáig csináltuk, hogy megszoktuk, de gondold át. „Értelmezett” nyelvet „tolmácsolt” nyelvre „állítunk össze”! Kívül:

  • A Webpack / Browserify konfigurálása sok esetben felesleges adó
  • Hibakeresés a sourcemaps használatával mindig nehezebb, mint a tényleges futtatott szkript hibakeresése (bárki jól érezte magát, amikor hibakeresést thisvagy változókat próbált végrehajtani, amikor a sourcemaps nem működik megfelelően?)
  • Megöli a DX-et, amikor minden szerkesztés után néhány másodpercet (néha fél percet) kell várnia a legújabb kód megtekintéséhez. A Hot Module Reloading (HMR) válasz erre, de nem mindig gördülékeny és gyorsan konfigurálható. Átültetés nélkül mindössze annyit kell tennie, hogy frissíti az oldalt, és kevesebb, mint egy másodperc alatt megvan a legújabb oldala!

Idén augusztusban, amikor az ES6 modulokat kiszállítják, bizonyos típusú alkalmazások egyáltalán nem fogják használni a transzpilációt:

  • Chrome-kiterjesztések
  • Elektron asztali alkalmazások
  • B2B webalkalmazások, amelyeket olyan üzleti felhasználók működtetnek, akik már rendelkeznek a vállalat által biztosított jó sebességváltókkal

Amikor a transzpiláció a múlté válik, a Hyperscript szintaxissal rendelkező könyvtárak elhozzák a React to POJS (Plain Old JavaScripttel, amely nem átültethető és a konzolon egyszerűen hibakereshető) ötleteit.

Ne fordítson át, hanem fordítson valódira!

A WASM az új gyerek a városban, és ez a hivatalos összeállítási cél, amely gyorsabb végrehajtási sebességet és kisebb kódméretet ígér. Jelenleg a Chrome és a Firefox támogatja a WASM-et, de a nagy böngésző-gyártók között jó egyetértés van abban, hogy a WASM lesz a jövő közös futási ideje. Ha megvan a Chrome, kipróbálhatja.

Ha olyan fejlesztő vagy, aki viszket valamiért, akkor nézd meg Rust. WASM-re áll össze, de nem korlátozódik a webre. Az emberek valóban operációs rendszer vagy böngészőmotor írására használják. A régi idők mellett a C / C ++ fejlesztők jóváhagyják és kedvelik, és nagyon barátságos közösséggel rendelkezik.

Néhány megjegyzés

  • A korábbi Mozilla CTO szerint a Chrome nyert, és nem valószínű, hogy újabb böngészőháború lesz. Érdekesség, hogy a Chrome meritokráciával nyerte el . Nyílt forráskódú, és a Google világosan meghatározta, hogy milyen információkat gyűjt a felhasználóktól. A Chrome még azokat az üzleti felhasználókat is megnyeri, akik hagyományosan a Windows rendszert használják. Mindazonáltal, míg a végfelhasználók gyorsasága, biztonsága és egyszerűsége miatt választják a Chrome-ot, a programozók imádják a fejlesztői eszközöket. A Google aktív szerepet játszik a TC39-ben, amely a JavaScript jövőjét vezérli, és általában a legerősebb híve a webes platformnak, annak ellenére, hogy versenyezhet saját mobil operációs rendszerével. Nem csak ez, de a Google is segíti versenytársait. A Google a Mozilla egyik legnagyobb pénzügyi támogatója volt, és annak renderelő motorját az Opera használja.
  • Körülbelül 17 hónappal ezelőtt a Microsoft hivatalosan elvetette az IE támogatását. Az IE 11 továbbra is kap biztonsági frissítéseket 2025-ig, de Önön múlik, hogy jelentős erőforrásokat fordít-e egy olyan böngésző támogatására, amelyet csak a piac 3,24% -a használ. Ne feledje azt is, hogy az Edge az alapértelmezett böngésző a Windows 10 rendszerben. Ha valaki nem akarja frissíteni Windows-ját a legújabb verzióra, a legutóbbi WannaCrypt támadás valószínűleg okot ad arra, hogy átgondolja! Személyesen érdekel minden olyan piackutatás, amely az adott ügyfélszegmensből származó jövedelmet eredményezi.
  • Az Apple tisztességtelen korlátozásokat tett annak érdekében, hogy távol tartsa a többi böngészőgyártót az iOS platformjától. Tehát például az iOS rendszerű Chrome technikailag a Safari motor egyes részeire korlátozódik! A Safari korábban az új IE volt, egészen 2016-ig jó munkát végeztek, és a legjobb ES6 támogatással rendelkező böngészővé váltak:

Összességében az iOS / Safari globális részesedése kisebb, mint az Android / Chrome. Ez országonként változik, például a gazdagabb országokban az iOS valamivel nagyobb penetrációval rendelkezik, míg a fejlődő világban az Android az abszolút nyertes, de globálisan itt vannak a statisztikák:

Felhívás cselekvésre!

Ha elég idős vagy, valószínűleg emlékszel azokra a bosszantó napokra, amikor egyes weboldalak kényszerítették (vagy udvariasan javasolták) a választott böngészőt (főleg IE):

Nem akarjuk ezt megtenni! Nem számít, mennyire izgatottak vagyunk a Chrome miatt, nem akarjuk figyelmen kívül hagyni a webes forgalom 46% -át, amelyet nem a Chrome nyújt.

Csak azért, mert hamarosan támogatást kaphatunk az ES6 modulokhoz a böngészőkben, ez nem azt jelenti, hogy megszabadulhatunk egy összeépítési folyamattól és egy megfelelő „csomagstratégiától”. - Stefan Judis

Mindig akadnak olyan emberek, akik egy régi böngészővel vannak beragadva a tévé firmware-jében vagy az autó szórakoztató rendszerében. Mindig lesz olyan makacs nagypapánk, aki nem látja szükségét, hogy befektessen gépének fejlesztésébe, csak hogy hagyja örökségként. A gyerekek továbbra is használják szüleik régi iPhone-ját vagy táblagépét, és gyermekenként 1 laptop nem növeli az éjszakai feldolgozási teljesítményt. Nem akarunk senkit bezárni.

Ez azonban nem új probléma. Annak ellenére, hogy az ES6 az egyik legnagyobb változás az interneten, a kecses leépülés még mindig biztosíthat némi felhasználást a kisebbség számára, miközben a fejlesztési költségeket a többség ellenőrzése alatt tartja.

Egy későbbi bejegyzésemben megvitatom a modern kód kézbesítésének gyakorlati oldalát, miközben készítenünk egy biztonsági tervet a kecses lebontáshoz. Kövess engem a Twitteren vagy a Mediumon, hogy maradj velünk.

BÓNUSZ: Vessen egy pillantást a JS Codeshiftre. Ez egy CLI a régi javascript kód új javascript kódra konvertálásához, amely a régi javascript könyvtár hívásokat is frissíti a legújabb API-ra. Igyekszik minél többet megőrizni az eredeti stílusban. Munkafolyamat: miután elvégezte a verziókezelés módosítását, futtassa ezt, és végezzen alapos összehasonlítást, és futtassa az automatizált és manuális teszteket. Kész!

1. frissítés (2017–09–8): A Chrome 61 néhány napja landolt teljes ES6 modul támogatással. A globális böngészőpiac 54% -ával rendelkezik. A Safari (a globális piac 14% -a) egy ideje támogatja az ES6 modulokat.

2. frissítés (2017–09–10): ennek a trükknek köszönhetően továbbra is támogathatja azokat a böngészőket, amelyek nem támogatják az ES6 modulokat pt nomodule src = ”compiled.js”> < ; / scri pt>. A nomodule attribútum azt mondja a böngészőknek az ES6 modul támogatásával, hogy ne töltsék be a szkriptet. A Safariban vannak olyan figyelmeztetések, amelyeket elolvashat a trükkről szóló oldalon. Olvassa el a specifikációt.

3. frissítés (2017–09–12): Az ES6 modulok támogatják a böngészők földjeit: ideje újragondolni a csomagolást?

Update 4 (2017/09/12): modulban defer piros alapértelmezés szerint. Ha ezt meg akarja kerülni, adjon hozzá egy aszinkron attribútumot a szkriptcímkéhez az SPOF (Single Point Of Of Failure) megakadályozása érdekében.

5. frissítés (2017–09–13): Az LTS 8.5 csomópont az ES6 modulokat (úgynevezett ESM) támogatja a zászló mögött, ha a fájl * .msj kiterjesztéssel rendelkezik. Itt van egy szép bevezető arról, hogyan használják őket.

6. frissítés (2017-09–22): íme néhány praktikus tanács az új és a régi böngészők támogatásához. A sávszélesség-megtakarítás nagyszerű!

7. frissítés (2018–01–15): A Lebab (a Bábel fordított része) CLI-vel rendelkezik a régi stílusú Javascript modernizálásához. Ez kissé hasonlít a Facebook CodeShiftjére, mert mindkettő korszerűsíti a régi kódot.

A számítástechnika történetében a legszélesebb körben telepített hiba nagyszerű lehetőséget nyitott meg előttünk! Olvassa el, Miért kellene meggyőznünk a felhasználókat böngészőik frissítéséről?