15 alapvető JavaScript-eszköz, amelyet használnia kell

Javascript 2019-ben

A JavaScript létfontosságú eszköz minden webfejlesztő számára. Annak érdekében, hogy a lehető legtöbbet hozza ki ebből a hatékony programozási nyelvből, néhány dedikált eszköz segítségét szeretné igénybe venni (és webtárhely jobb). A jó hír az, hogy itt nincs hiány a lehetőségekből: rengeteg JavaScript eszköz közül lehet választani. A nehéz feladat az, hogy kiválasszuk az Önnek és a munkafolyamatnak megfelelőt.

Ebben a cikkben összefoglaltuk a véleményünk szerint a legjobb JavaScript-eszközöket. Ha Ön nem fejlesztő, vagy csak gyorsan és kód nélkül szeretne webhelyet létrehozni, fontolja meg az a használatát weboldal készítő .

01. Web-alkatrészek

Webkomponensek kezdőlap



Az összetevő fogalmát nagymértékben használják a JavaScript keretrendszerekben. Arra használják, hogy egy projektet több újrafelhasználható darabra bontsanak, amelyek egymástól függetlenül mozgathatóak. De mi történik, amikor ideje megváltoztatni a keretet? A korábban írt alkatrészek már nem fognak működni. Vagy hozzáadódik a munkaterhelés az összetevők átalakításához, vagy a projekt továbbra is ehhez a keretrendszerhez kötődik.

Web-összetevők megoldást jelentenek arra a kérdésre. Natív webes technológiák segítségével íródtak, önállóak, és az értékeket és viselkedést az attribútumokon keresztül mutatják be, mint bármely más HTML elemet.

Három külön specifikációból állnak: HTML sablonok, shadow DOM és egyéni elemek.

HTML sablonok
Ezek meghatározzák az alkatrész vizuális megjelenését. Tartalmazzák a tartalom felépítését, amelyet aztán másolni és újból felhasználni lehet az oldal minden egyes összetevőjéhez.

Árnyék DOM
Az összetevő belső jelölésének távol tartása a dokumentum többi részétől. Ez megakadályozza, hogy a stílusok és az egyéb logikák kitörjenek és ne befolyásolják más összetevőket.

Egyedi elemek
Ezek a ragasztók, amelyek mindent összetartanak. Ők felelősek az összetevő életciklusáért, amely extra logikát tartalmazhat arra az esetre, amikor egy összetevőt hozzáadnak vagy eltávolítanak az oldalról.

A webkomponensek a kerettársaikkal együtt használhatók. Mivel állítólag natív elemként viselkednek, a legtöbb keretrendszer probléma nélkül együtt fog működni velük. Előfordulhat, hogy egyes kereteknek, például az Angularnak, idő előtt el kell mondani a létezésüket a megfelelő működés érdekében.

Mivel könnyen összeállíthatók, az alkatrészek számos forrásból importálhatók. Weboldalak, mint webcomponents.org biztosítson több kész elemet, amelyek azonnal bedobhatók és felhasználhatók.

Míg a webkomponens fogalma 2011 óta létezik, a specifikációk folyamatosan változnak. 2018-ban rendeződtek a dolgok, a Firefox októberben implementálta az árnyék DOM és az egyedi elemek specifikációinak legújabb verzióit. Az Edge 2019-es bevezetésének köszönhetően az összes fő böngésző natív módon támogatja őket.

02. Webszerelés

Az egyik panasz a böngésző használatával alkalmazások tárolására az, hogy a JavaScript túl lassan fut, ha processzorigényes feladatokról van szó, például játékmotorokról vagy videoszerkesztésről.

WebAssembly - vagy a „WASM” - más nyelveken írt kód fordítási célpontja, amely alkalmasabb a nehéz emelésre. Ez lehetővé teszi, hogy a létező programok, amelyek olyan nyelveken íródnak, mint a C ++, a Rust vagy a Go, az internetre kerüljenek. Azáltal, hogy ezeket bináris formátumba állítja össze, lehetővé teszi, hogy darabokra oszthassa őket és hatékonyan letölthesse őket.

Ezeket a bináris fájlokat ezután a memóriába fordítják, és az új WebAssembly objektum segítségével példányosítják. Van egy erőfeszítés, hogy ezeket importálhatóvá tegyük, mint bármely más JavaScript modult, de a munka ezen a területen még mindig tart.

Noha a WASM egy új nyelv, amellyel a böngészőben működhet, mégsem teszi versenytársa a JavaScript-nek. Mindkét nyelvnek megvannak a maga előnyei, a JavaScript még mindig jobban alkalmazza a böngészőben végzett napi műveleteket. Együttműködhetnek és autonómiával rendelkeznek az alkalmazás külön részei felett.

A WASM több böngészőt támogat, most már a mobil is. Ez megnyitja a kaput számos olyan lehetőség előtt, amelyek korábban csak a natív alkalmazásokra korlátozódtak. A következő évben láthatjuk, hogy több játék és alkalmazásfejlesztő alkalmazza ezt a technológiát.

03. Nézet

Green Vue logó

2019-ben megjelenik a Vue 3.0

Kilátás az elmúlt évben folyamatosan növekedett. A legújabb frissítések inkább a fejlesztői tapasztalatokra és a minőségi fejlesztésekre összpontosítottak. A Vue 2.5 még 2017-ben jelent meg, és tartalmazta a hibakezelés, a kiszolgáló-megjelenítés és a TypeScript-definíciók frissítéseit. Az egyes funkcionális komponenseket - a Vue egyik legnépszerűbb funkcióját - frissítették, hogy támogassák a hatókörű CSS-t és javítsák a sablon-összeállítást is.

hogyan lehet egy album privát a facebook-on

Azóta a Vue alapvető élményének frissítései elsősorban a hibajavításokra és a teljesítmény javítására összpontosítottak. A hangsúly most a kiegészítő fejlesztő termékekre helyeződött át.

A Vue CLI eszközének 3. verziója konfigurálhatóbb megközelítésre vált. Az inicializálás során olyan szolgáltatásokat választanak, mint az útválasztás, a szöszökés és az adatkezelés. Ezeket a szolgáltatásokat szükség szerint hozzáadhatja és eltávolíthatja anélkül, hogy szétválasztaná a készítési folyamatot.

A CLI-vel együtt rendelkezésre áll egy webes felület, amely az alkalmazás különböző részeit jeleníti meg. Ez irányítópultként segíti a betöltés idejének, méretének és fájdalompontjainak elemzését az összeállításon futás közben.

A jövőre nézve a Vue 3.0 megjelenik 2019-ben. Noha a változások minimálisak lesznek, ez a verzió az ES2015 osztályalapú összetevők használatára összpontosít. Támogatja a töredékeket és a portálokat is, hasonlóan a React funkcióihoz.

  • Tudj meg többet: Gyorsítsa fel a teljesítményt a Vue.js segítségével

04. TypeScript

TypeScript kezdőlap

Tegye a biztonságot a JavaScript-be a Gépelt . Ez az eszköz lehetővé teszi a változók várható típusainak definiálását, valamint a buildeszközök és az IDE-k figyelmeztetését minden problémára. A 3. verzió jobb támogatást nyújt az újabb koncepciókhoz, például a pihenő- és terjesztési operátorokhoz.

05. Reakció

Reagál A 16.6 hozta az „suspense” funkciót, amely megkönnyítette a dinamikus tartalom használatát. Társítva valamivel React.lazy () , létrehoz egy pontot, ahol a kódot kisebb darabokra lehet osztani. A felfüggesztés tartalék alkatrészt, például rakodó fonót képes megjeleníteni, miközben az alkatrész betöltődik. 2019-ben a feszültség rugalmasabb eszközzé válik. Az adatletöltés beindításával a folyamat részeként a felhasználók zökkenőmentes, natív jellegű élményt kapnak.

A React használatának egyik legegyszerűbb módja, ha a „React App létrehozása” eszközzel lebélyegez egy projektet. Egy friss frissítés frissítette a függőségeket és továbbfejlesztette a funkcióit. A Create React App 2.0 a Babel 7-et és a Webpack 4-et használja projektek készítéséhez, ami gyorsabbá teszi az építést, és megnyitja az ajtót az olyan újabb funkciók felé, mint a gyorsírás-töredék szintaxisa.

Az előző verzióval készült projektek frissíthetők a „reakció-szkriptek” függőségének frissítésével. A kidobott alkalmazások frissítése manuálisabb folyamat, de ezek darabonként frissíthetők.

A React nem mutatja a lassulás jeleit ebben az évben. A horgok lehetővé teszik a funkcionális komponensek állapotának és életciklusának viselkedését. Az egyidejű mód javítja a lassan megjelenített alkatrészek teljesítményét. Mindkét funkció megjelenése 2019 első felében várható.

  • Tudj meg többet: Fejlesszen ki újrafelhasználható React komponenseket

06. Szögletes

Szögletes pajzs logó

Az Angular 7. verziója javítja a keretrendszer minden részét

Szögletes egy keretrendszer, amely részt vesz az alkalmazás minden részében, ideértve az adatkezelést és az interfészfrissítéseket is. Növelheti a csomagméreteket, de az alkalmazás minden része zökkenőmentesen működik együtt.

Az Angular 7. verziója javítja a keretrendszer minden részét. Bár a fejlesztőknek kevés változtatással kell játszaniuk, a kulisszák mögött a sebesség és a megbízhatóság érdekében sok változás van. Most lehetőség van teljesítménycsomagok hozzáadására a csomagméretekhez. Ez biztosítja, hogy egy építmény soha ne legyen túl nagy anélkül, hogy tudomást szereznének róla.

Az Anyagtervezés átfogó frissítésének részeként a megfelelő Angular CDK-összetevőket is frissítették. Például a görgetési modul lehetővé teszi a virtuális görgetés támogatását, ami segít a hosszú listák gördülékeny gördülésében.

A 7-es verzióra történő frissítés a legtöbb számára egy sor futtatását jelenti a CLI használatával.

ng update @angular/cli @angular/core

A jövőbeli frissítések az új Ivy renderelő motorra összpontosítanak. Ez javítani fogja a fel nem használt kód eltávolítását a csomagból, ami drámai módon csökkenti a fájlméretet. Az Angular alkalmazások felépítése miatt a renderelő motor cserélhető anélkül, hogy a belső logikában bármilyen változtatást igényelne.

az iphone 11 azonos méretű, mint a 8 plus

07. Polimer

Első iterációjában a Polimer A könyvtár az átjáró volt az egyedi elemek jövőjében. Az akkor megjelenő webkomponensek specifikációinak átvételével a fejlesztők elkészített építőkockákból tudták összeilleszteni a weboldalakat.

Az idők során ezek a specifikációk fejlődtek, és az egyik építőelem - a HTML importálás - már nem volt a terv része. A Polymer 3.0 friss kiadása foglalkozik ezzel a kérdéssel, és inkább a megközelíthetőbb ES modulok használatára összpontosít hasonló cél elérése érdekében.

A Polymer könyvtár eredeti célja az volt, hogy könnyebbé váljon, ahogy az említett specifikációk támogatottsága nőtt, de végül inkább növekedett. Erre a célra összpontosítva a 3.0 a könyvtár utolsó kiadott verziója. Előre haladva ajánlott alkatrészekkel készülni LitElement és lit-html .

class MyElement extends LitElement { render(){ return html` This is a LitElement `; } }

LitElement egy könnyű borító a web-alkatrészek köré, hogy megkönnyítse velük a munkát. A html tagged sablon szó szerinti lit-html , amely egy sablonkönyvtár DOM-diffival, hogy az oldalfrissítések a lehető legkisebbek legyenek.

Mindkét LitElement és lit-html Jelenleg kiadás előtti állapotban vannak, de a Polymer csapat célja, hogy valamikor az év elején kiadják őket.

08. szebb

Szebb honlap

Ez a JavaScript eszköz célja annak biztosítása, hogy a kód formázása konzisztens maradjon egy projektben. Van Szebb fésülje át a fájlokat, és frissítse automatikusan a formázást. Néhány szerkesztő támogatja a formázást is minden mentéskor.

Ha csapatprojekten dolgozik, győződjön meg róla, hogy folyamata teljesen összhangban áll a tökéletesel felhőtároló választási lehetőség.

09. Szolgáltató dolgozók

Szolgáltató dolgozók lehetővé teszi egy alkalmazás számára az alacsonyabb szintű szolgáltatásokat kezelő háttérfolyamat futtatását. Ez magában foglalhatja a leküldéses értesítéseket, az adatok szinkronizálását a háttérben és akár élmény nyújtását is, amikor az eszköz offline állapotban van. Az irányítás szintjét a fejlesztő dönti el.

A szolgáltató dolgozók már egy ideje használják az Androidot, de nemrégiben az iOS-re is átjutottak. Míg a hangsúly a mobil eszközökön van, az asztali számítógépeken is működnek. Most, hogy a látogatók többsége hozzáférhet a funkcionalitáshoz, nincs jobb idő elkezdeni a felhasználói élmény javítását.

10. OffscreenVászon

Van, amikor a vászonelem a legjobb eszköz a munkához. Például az online játékok felhasználhatják őket sprite előállítására, vagy a videók feldolgozási effektusokat alkalmazhatnak rájuk.

A probléma az, hogy az elemekkel való bármilyen interakció mindig a fő szálon fog működni, ami lelassítja a felhasználó dolgát. Ismételt animációk vagy nehéz feldolgozás esetén ez problémává válhat.

OffscreenVászon leválasztja a vászon logikáját az elemről. A DOM-ra mutató link nélkül a munkavállalóban fel lehet használni a fő szál felszabadítására. Jelenleg csak a Chrome támogatja ezt a funkciót, a Firefox pedig egy zászló mögé helyezi.

11. Elektron

Elektron honlap

HTML, CSS és JavaScript használatával natív alkalmazásokat készíthet Windows, MacOS és Linux rendszerekhez. Elektron számos népszerű alkalmazást biztosít, például a Visual Studio Code, a Slack és a Skype for desktop.

12. Svelte

Míg Karcsú egy viszonylag ismeretlen keret, a pár évvel ezelőtti megjelenése óta folyamatosan tapad. A közelmúltbeli State of JavaScript felmérés tavaly népszerűbbnek minősítette, mint a Backbone és a jQuery történelmi titánjai.

nyomásérzékeny toll az androidos tablettákhoz

A Svelte célja a fájlméret csökkentése azzal, hogy egyáltalán nem szállít keretet. A gyártási folyamat részeként elemzi és optimalizálja az összetevőket, mielőtt a vanília JavaScript-re fordítaná. Az eredmény a lehető legkisebb méretű alkalmazás.

A 2. verzióval a szintaxis fejlesztései vannak, hogy az alkatrészek a lehető legolvashatóbbá és kiszámíthatóbbá váljanak. Az életciklus-horgok és a számított értékek frissítései megkönnyítik a fordító számára, hogy hol tudja optimalizálni.

A funkciók szándékosan könnyűek ahhoz, hogy minden alkalmazás gyors legyen. A 2. verzió óta számos frissítés arra összpontosított, hogy elkerülje a fordított kimenet gyenge teljesítményét eredményező helyzeteket.

Vita folyik a Svelte komponenslogika átírásáról, hogy összhangba kerüljön más keretrendszerekkel. Fordítóként képes saját módosításokat végrehajtani a jobb működés érdekében, miközben tiszta környezet marad a fejlesztők számára.

13. A megfigyelő átméretezése

A webfejlesztés valóban komponens alapú megközelítése szorosabb, mint valaha. Míg a CSS és a JavaScript egy csomagba csomagolható, nehéz ezt az összetevőt megbízhatóan felhasználni az oldalakon.

Amikor elemeket ad hozzá a átméretezni megfigyelő , értesítést kap, ha az elem határai megváltoznak. Ezután a látvány frissíthető a rendelkezésre álló hely alapján. Például ugyanaz a kártyakomponens másképp nézhet ki az oldalsávban vagy a törzsben.

Ez a megfigyelő jelenleg csak a Chrome-ban érhető el, míg a Firefox fejlesztés alatt áll. Más böngészők visszatérhetnek a böngésző átméretezésének figyelemmel kísérésére, de ez elérni fogja a teljesítményt.

14. Cordova

Cordova honlapja

Készítsen több különböző mobil és asztali alkalmazást webes technológiák és egy kódbázis használatával Cordova . A PhoneGap - az Adobe Cordova-terjesztése - további eszközöket kínál, például az iOS fejlesztését a Windows rendszeren.

15. Mesekönyv

Mesekönyv lehetővé teszi a felhasználói felület elemeinek galéria létrehozását testreszabható környezetben, minden alkalmazástól elkülönítve. Olyan népszerű keretrendszerekkel működik, mint a React és a Vue, a HTML-kódrészletek támogatásával együtt.

Készítsen 2019-et

A Generate, a webdesignerek számára díjnyertes konferencia április 24-25-én visszatér az NYC-be! Foglaljon jegyeket itt: www.generateconf.com

Ez a cikk eredetileg a kreatív webdesign magazinban jelent meg Web designer . Vásárolja meg a 283. számot vagy iratkozzon fel ide .

Olvass tovább: