Tartalom
- 01. Szögletes
- 02. Reakció
- 03. Vue
- Hogyan viszonyul a keretek szintaxisa?
- Népszerűség és piac
- Mobilalkalmazás-fejlesztés
- Egyéb keretek, amelyekre figyelni kell 2020-ban
- Következtetés
2020-ban számos keretrendszer és könyvtár megáldott minket, amelyek segítenek minket a webfejlesztésben. De nem volt mindig olyan sokféle változatosság. Még 2005-ben egy Mocha nevű új szkriptnyelvet hozott létre egy Brendan Eich nevű srác. Hónapokkal azután, hogy átnevezték LiveScript-re, a név ismét JavaScript-re változott. Azóta a JavaScript hosszú utat tett meg.
2010-ben a Backbone és az Angular bevezetését láttuk az első JavaScript keretrendszerként, és 2016-ra az összes webhely 92 százaléka használta a JavaScript-et. Ebben a cikkben három fő JavaScript keretet (Angular, React és Vue) és azok állapotát vesszük szemügyre a következő évtizedben. Saját webhelyet szeretne létrehozni? Próbálja ki ezt a webhelykészítők listáját.
Ragyogó forrásokért tekintse meg a legnépszerűbb webtervezési eszközök listáját, a webtárhely-szolgáltatásokat és a kiváló felhasználói tesztelő szoftverek listáját is.
01. Szögletes
Az AngularJS 2010-ben jelent meg, de 2016-ra teljesen átíródott és Angular 2 néven jelent meg. Az Angular egy teljes körű webes keretrendszer, amelyet a Google fejlesztett ki, és amelyet a Wix, az Upwork, a The Guardian, az HBO és még sok más használ.
Előnyök:
- Kivételes támogatás a TypeScript számára
- Az MVVM lehetővé teszi a fejlesztők számára, hogy ugyanazon alkalmazásszakaszon ugyanazon adatkészlet segítségével különítsék el a munkát
- Kiváló dokumentáció
Hátrányok:
- Van egy kis tanulási görbéje
- A régi verzióról való áttérés nehéz lehet.
- A frissítéseket meglehetősen rendszeresen vezetik be, vagyis a fejlesztőknek alkalmazkodniuk kell hozzájuk
Mi a következő lépés?
Az Angular 9-ben az Ivy az alapértelmezett fordító. Azért hozták létre, hogy megoldja a teljesítmény és a fájlméret sok kérdését. Kisebbé, gyorsabbá és egyszerűbbé kell tennie az alkalmazásokat.
Ha összehasonlítja az Angular korábbi verzióit a React és a Vue-val, a
a végleges csomagméretek sokkal nagyobbak voltak az Angular használatakor. Az Ivy lehetővé teszi a progresszív hidratálást is, amit az Angular csapat bemutatott a 2019-es I / O-n. A Progresszív hidratálás az Ivy segítségével fokozatosan tölti be a szervert és az ügyfelet. Például, ha a felhasználó elkezd interakciót folytatni egy oldallal, a komponensek kódja, bármely futásidővel darabonként lekérésre kerül.
Úgy tűnik, hogy az Ivy az Angular számára a legnagyobb hangsúlyt fekteti, és azt remélik, hogy elérhetővé teszi az összes alkalmazást. A 9. verzióban lesz egy opt-out opció, egészen a 10-es szögig.
02. Reakció
A React-et eredetileg 2013-ban adta ki a Facebook, és interaktív webes felületek építésére használják. A Netflix, a Dropbox, a PayPal és az Uber néhányat említ.
Előnyök:
- A React a virtuális DOM-ot használja, amely pozitív hatással van a teljesítményre
- A JSX könnyen írható
- A frissítések nem veszélyeztetik a stabilitást
Hátrányok:
- Az egyik fő kudarc, hogy bonyolultabb alkalmazások létrehozásához külső könyvtárakra van szükség
- A fejlesztők a sötétségben maradnak a fejlődés legjobb módjával
Mi a következő lépés?
A React Conf 2019 rendezvényen a React csapata számos olyan dolgot érintett, amelyen dolgoztak. Az első a szelektív hidratálás, ahol a React szünetelteti mindazt, amin dolgozik, annak érdekében, hogy rangsorolja azokat az összetevőket, amelyekkel a felhasználó interakcióba lép. Amint a felhasználó interakcióba lép egy adott szakaszsal, az a terület hidratálódik. A csapat a Suspense-n is dolgozott, amely a React rendszere a kódok, adatok és képek betöltésének összehangolására. Ez lehetővé teszi, hogy az alkatrészek megvárjanak valamit, mielőtt megjelenítenek.
A szelektív hidratálást és a feszültséget egyaránt a Párhuzamos mód teszi lehetővé, amely lehetővé teszi az alkalmazások számára, hogy jobban reagáljanak azáltal, hogy a React-nek lehetőséget ad az alacsonyabb prioritású munka nagy blokkjaiba annak érdekében, hogy valamire jobban összpontosíthasson, például válaszoljon a felhasználói bevitelre. A csapat az akadálymentességet megemlítette egy másik területként is, amelyet két külön témára összpontosítottak - a fókusz és az input interfészek kezelésére.
03. Vue
A Vue-t 2014-ben Evan You, a Google volt alkalmazottja fejlesztette ki. A Xiaomi, az Alibaba és a GitLab használja. A Vue-nak rövid idő alatt és egy jelentős márka támogatása nélkül sikerült népszerűségre és támogatást szereznie a fejlesztőktől.
Előnyök:
- Nagyon könnyű méretű
- Kezdő barátságos - könnyen megtanulható
- Remek közösség
Hátrányok:
- Nem támogat olyan hatalmas cég, mint például a React a Facebook-tal és az Angular a Google-lal
- Nincs valódi szerkezet
Mi a következő lépés?
A Vue azt a célt tűzte ki maga elé, hogy gyorsabb, kisebb, karbantarthatóbb legyen, és megkönnyítse a fejlesztők számára a natív célzást (ha gondjai vannak a fenntartással, fontolja meg a webtárhely-szolgáltatást). A következő kiadás (3.0) 2020 első negyedévében jelenik meg, amely a jobb teljesítmény érdekében egy virtuális DOM átírást és a továbbfejlesztett TypeScript támogatást tartalmaz. Emellett hozzáadódik a Composition API is, amely a fejlesztők számára új módszert kínál a komponensek létrehozására és működés helyett funkciók szerinti rendezésre.
A Vue fejlesztői szintén elfoglaltak voltak a Suspense munkájával, amely felfüggeszti a komponensek megjelenítését és tartalék komponenst nyújt, amíg egy feltétel nem teljesül.
A Vue frissítéseinek egyik legnagyobb tulajdonsága, hogy fenntartják a visszamenőleges kompatibilitást. Nem akarják, hogy megtörd a régi Vue-projektjeidet. Ezt láttuk az 1.0-ról 2.0-ra való áttérésben, ahol az API 90 százaléka megegyezett.
Hogyan viszonyul a keretek szintaxisa?
Megjelenésük óta mindhárom keretrendszer megváltozott, de a megértés szempontjából kritikus fontosságú a szintaxis és a különbség. Vizsgáljuk meg, hogyan hasonlít a szintaxis az egyszerű eseménykötéshez:
Vue: A v-on az irányelv olyan eseményhallgatók csatolására szolgál, amelyek módszereket hívnak elő a Vue-példányokon. Az irányelvek előtagja v- annak jelzése érdekében, hogy ezek a Vue által biztosított speciális attribútumok, és különleges reaktív viselkedést alkalmaznak a renderelt DOM-on. Az eseménykezelők megadhatók inline vagy a módszer neveként.
template> button v-on: click = ”clickHandler”> Kattintson rám / gombra> / template> script> export default {name: “HelloWorld”, módszerek: {clickHandler: function () {console.log (“Rákattintottak! ”); }}}; / script>
Reagál: A React jelölést és logikát tesz a JS-be és a JSX-be, a JavaScript szintaxis kiterjesztésébe. A JSX esetén a funkciót eseménykezelőként adják át. Az események kezelése a React elemekkel nagyon hasonló az események kezeléséhez a DOM elemeken. De vannak szintaktikai különbségek; például a React eseményeket a kisbetűk helyett a camelCase használatával nevezik meg.
function Button () {function clickHandler (e) {console.log (“rám kattintottak”); } visszatérés gomb onClick = {clickHandler}> Kattintson rám! / gomb>; }
Szögletes: Az eseménykötési szintaxis egy zárójelben lévő célesemény nevéből áll az egyenlőségjel bal oldalán és egy idézett sablon utasításból a jobb oldalon. Alternatív megoldásként használhatja a tovább- előtag, néven kanonikus forma.
@Component ({selector: "app-click-me", template: `button (click) =" onClickMe () "> Click me! / Button>`}}) exportálási osztály ClickMeComponent {onClickMe () {console.log (" Rákattintottál! ”); }}
Népszerűség és piac
Kezdjük azzal, hogy a W3Tech statisztikáinak vizsgálatával áttekintjük a három keret átfogó képét az internet többi részével kapcsolatban. Az Angulart jelenleg az összes weboldal 0,4 százaléka használja, a JavaScript könyvtár piaci részesedése 0,5 százalék. A React-et az összes webhely 0,3 százaléka és 0,4 százalékos JavaScript könyvtár piaci részesedése használja, a Vue pedig 0,3 százalékkal rendelkezik. Ez elég egyenletesnek tűnik, és számíthat arra, hogy a számok emelkednek.
Google trendek: Az elmúlt 12 hónapban a React a legnépszerűbb keresési kifejezésekben, amelyet szorosan követ az Angular. A Vue.js eléggé lemaradt; egy dologra azonban emlékezni kell, hogy Vue a másik kettőhöz képest még mindig fiatal.
Álláskeresések: Az írás idején a React és az Angular nagyon közel van egymáshoz az Indeed with Vue munkaköri listája tekintetében, nagyon messze lemaradva. A LinkedIn-en azonban úgy tűnik, nagyobb az igény a Vue fejlesztők iránt.
Verem túlcsordulás: Ha megnézzük a Stack Overflow Developer Survey 2019-es eredményeit, a React és a Vue.js egyaránt a legkedveltebb és legkeresettebb webkeretek. A szögletes a kilencedik helyzetben ül a legkedveltebb, de a harmadik legkeresettebbnél.
GitHub: A Vue rendelkezik a legtöbb csillaggal, 153 ezer, de a legkevesebb közreműködővel (283). A React viszont 140 ezer csillaggal és 1341 közreműködővel rendelkezik. Az Angular csak 59,6 ezer csillaggal rendelkezik, de a három közül a legtöbb közreműködő van, 1579-gyel.
NPM trendek: A fenti képen az elmúlt 12 hónap statisztikája látható, ahol láthatja, hogy a React havonta több letöltéssel rendelkezik, mint az Angular és a Vue.
Mobilalkalmazás-fejlesztés
Az első három fő cél a mobil telepítés. A React rendelkezik a React Native programmal, amely népszerű választássá vált az iOS és Android alkalmazások építésében nemcsak a React felhasználók számára, hanem a tágabb alkalmazásfejlesztő közösség számára is. A szögletes fejlesztők használhatják a NativeScript-et natív alkalmazásokhoz, vagy az Ionic-t hibrid mobilalkalmazásokhoz, míg a Vue fejlesztői választhatnak a NativeScript vagy a Vue Native közül. A mobilalkalmazások népszerűsége miatt ez továbbra is a beruházások kulcsfontosságú területe.
Egyéb keretek, amelyekre figyelni kell 2020-ban
Ha valami újat szeretne kipróbálni 2020-ban, nézze meg ezeket a JavaScript-kereteket.
Parázs: Nyílt forráskódú keretrendszer webalkalmazások építéséhez, amely az MVVM minta alapján működik. Számos nagyvállalat használja, például a Microsoft, a Netflix és a LinkedIn.
Meteor: Teljes verem JavaScript platform a modern webes és mobil alkalmazások fejlesztéséhez. Könnyen megtanulható, és nagyon támogató közösséggel rendelkezik.
Következtetés
Mindhárom keret folyamatosan javul, ami biztató jel. Mindenkinek megvan a maga perspektívája és előnyben részesített megoldása arról, hogy melyiket kell használnia, de ez valóban a projekt méretéhez igazodik, és ami kényelmesebbé teszi Önt.
A legfontosabb szempont a közösségük folyamatos támogatása, ezért ha új projekt elindítását tervezi, és még soha nem használta a három közül egyet, akkor úgy gondolom, hogy mindannyian biztos kezekben vagytok. Ha még nem volt alkalma megtanulni a három keret egyikét sem, akkor azt javaslom, hogy újévi fogadalmává tegye a tanulás megkezdését. A jövő e három körül fog forogni.
Ez a tartalom eredetileg a net magazinban jelent meg.
