Populiariausios „JavaScript“ sistemos, skirtos „Front-end“ plėtrai 2020 m

„Front-end“ kūrėjai galbūt jau žino šį žaidimą: įvedate „Google“ „geriausius„ JavaScript “rėmus“ ir gausite tiek daug „JavaScript“ rėmelių, iš kurių galėsite pasirinkti.

„JavaScript“ sistemoms visada yra daugiau pasirinkimų. Visada sunku pasirinkti „JavaScript“ sistemą, skirtą front-end kūrimui.

Taigi, ko ieško „front-end“ kūrėjai savo technologijų paketuose? Kaip visą darbo dieną dirbantis kūrėjas, žinau, kad tai susiję su greita plėtra ir lengvai daromomis vartotojo sąsajomis.

Užuot bandę būti ryžtingi, mes, daugiau nei 450 „ValueCoders“ programinės įrangos kūrimo kompanijos kūrėjų, balsavome ir įtraukėme kelis geriausius „JavaScript“ pagrindus.

Mūsų balsas reaguoja

Nenuostabu tai pamačiusi. Daugelis mūsų kūrėjų balsavo už tai, kad „React“ būtų viena geriausių „JavaScript“ sistemų. Mūsų front-end kūrėjai tvarkė daugybę projektų, kurie išryškino JS sistemos stipriąsias puses. „React“ pateikia šių veiksmų derinį:

  • Daugkartiniai komponentai
  • Būsenos ir vaizdo sinchronizavimas
  • Maršrutavimo ir šablonų sistema

Mūsų kūrėjai įgyvendina „front-end“ logiką, labai pasikliaudami „React“. Tuo pat metu mane nustebino, kaip paprasta buvo sukurti programas naudojant „React“.

Čia yra mūsų programos apžvalga

Paraiška yra paprasta. Tai muzikos mokytojams skirta studijos valdymo programa, padedanti labiau susikoncentruoti į savo mokymą, o ne į muzikos studijos valdymą.

Pagrindinis iššūkis buvo sukurti vieną „Veiklos informacijos suvestinę“ mokytojams, kur jie galėtų valdyti visą savo mokinių veiklą ir stebėti jų pažangą. Įveikėme šį iššūkį naudodami „Redux“ bibliotekas platformai kurti. Mes pastatėme mokytojų studiją, kurioje jie galėjo valdyti savo mokinių pažangą, pristatyti naujas muzikos pamokas, pabendrauti su jais, palyginti studentų muziką, grojančią gyvą muziką, ir pateikti jiems atsiliepimus.

Taigi, tai yra mano patirtis su „React JS“. Tačiau daugelis tvirtina, kad „Vue“ yra viena iš geriausių „JavaScript“ sąsajų su daugybe naudingų įrankių.

„Front-end“ kūrėjai sprendžia, kuri „JavaScript“ sistema atliks šį darbą. Tai darydami jie susiduria su daugybe iššūkių, nes turi nuspręsti, ko jiems visada prireikė. Dažnai „JavaScript“ sistemą turime pasirinkti dabar, o ne po savaitės tyrimų. Tokiu atveju dauguma kūrėjų naudojasi tuo, ką žino. Bet galbūt jums pažįstami kaminai nebepakerta jo našumo.

Naujiems kūrėjams sunku net pasirinkti „Angular“, „React“, „Vue“. Užuot padariusi jį išsamesniu, pateikiame geriausių „JavaScript“ sistemų, skirtų „front-end“ kūrėjams, sąrašą.

„The Big 5 JavaScript Framework“

Penki „JavaScript“ pagrindai, kurie šiuo metu dominuoja rinkoje pagal populiarumą ir naudojimą, yra šie:

  • Reaguoti
  • Vue
  • Kampinis
  • Žmogus
  • Backbone.js.

Kiekvienas iš jų turi dideles bendruomenes. Jei esate „front-end“ kūrėjas arba ketinate pradėti naują „front-end“ technologijų projektą, šie penki yra geriausi statymai. Čia apžvelgiamos pastarojo pusmečio npm tendencijos.

1. Reaguokite

React yra neabejotinas lyderis JS pasaulyje. Šioje „JavaScript“ sistemoje naudojamas reaktyvus metodas, taip pat pateikiama daugybė savo sąvokų, skirtų internetinio tinklalapio kūrimui.

Norėdami naudoti „React“, turėsite išmokti naudoti daugybę papildomų įrankių, kad pasiektumėte didelę lankstumą kuriant priekinį galą. Pavyzdžiui, pateikiamas ne toks išsamus bibliotekų, kurias galite naudoti su „React“, sąrašas: „Redux“, „MobX“, „Fluxy“, „Fluxible“ arba „RefluxJS“. „React“ taip pat galima naudoti su „jQuery AJAX“, „fetch API“, „Superagent“ ir „Axios“.

Vienalaikis režimas

Šiandien džiaugiamės galėdami pasidalinti pirmąja ankstyvąja bendruomenės peržiūra „Vienalaikis režimas“. Jis siūlo naujus komponuojamus primityvius dalykus, padėsiančius jums sukurti puikias vartotojo patirtis. //t.co/mMrCmv4D5U

- Reaguok (@reactjs) 2019 m. Spalio 24 d

„React“ nuolat stengiasi tobulinti vienu metu veikiantį režimą. Siekdami šio tikslo, „React Conf 2019“ praeitą mėnesį užbaigė „React“ komandos kalbą apie „Vienalaikio režimo“ ir „Suspense“ modelio tobulinimą. Abi funkcijos daro „React“ programas labiau reaguojančias pateikdami medžius neužblokuodami gijų. Tai leidžia „React“ sutelkti dėmesį į svarbiausias užduotis, pvz., Atsakymą į vartotojo įvestį.

Įtampa

„React“ taip pat pristatė „Suspense“, kad pagerintų kūrėjo patirtį, kai „React“ programose tvarkomi asinchroniniai duomenys. Trumpai tariant, naujasis „Suspense“ atnaujinimas leidžia komponentui palaukti, kol bus įvykdyta sąlyga.

Kabliai yra dar vienas svarbus „React 16.8“ atnaujinimas. „React“ kabliai leidžia naudoti visas svarbias „React“ savybes - atvaizdavimą serverio pusėje, pritaikymą neįgaliesiems, gretutinį režimą ir įtampą - nerašant klasės.

„React“ programos yra suskirstytos į kelis komponentus, kuriuose yra ir verslo logikos, ir HTML žymėjimo funkcijos. Norėdami pagerinti bendravimą tarp komponentų, kūrėjai gali naudoti „Flux“ arba panašią „JavaScript“ biblioteką.

„React“ taip pat pristatė objektus, tokius kaip būsena ir rekvizitai. Naudodami „state“ ir „props“ objektus, galite tiesiog perduoti duomenis iš komponento į išdėstymą arba iš pirminio komponento į antrinį komponentą.

Įvadas į „React“ ekosistemą:

  • „React library“ ir „React“ maršrutizatorius maršrutams įgyvendinti.
  • „React-DOM“ manipuliavimui DOM.
  • Reaguokite į „Firefox“ ir „Chrome“ naršyklių kūrėjų įrankius.
  • Reaguokite į JSX, žymėjimo kalbą, įmaišančią HTML į „JavaScript“.
  • „React Create App“ komandinės eilutės sąsaja, kad nustatytumėte „React“ projektą.
  • „Redux“ ir „Axios“ bibliotekos, norėdamos organizuoti bendravimą su antrine komanda.

Be abejo, „React“ yra vienas populiariausių „JavaScript“ sistemų. Manau, kad „React“ gali būti jūsų pirmasis pasirinkimas kuriant pažangaus lygio programas.

2. Kampinis 2 - kampinis 9

„Angular 9“ bus posūkio taškas, kurį „Angular“ komanda atskleidė neseniai vykusiame „AngularConnect 2019“. Pagal atnaujinimą komanda planuoja „Angular Ivy“ kompiliatorių padaryti prieinamą visoms programoms. Pagrindinis „Angular Ivy“ privalumas yra tas, kad jis sugeba sumažinti programų dydį.

Kampinis šiandien tapo labai pažangus ir modulinis, skirtas naudoti front-end plėtrai. Anksčiau pagrindiniame HTML faile galite įterpti nuorodą į „AngularJS“ biblioteką, tačiau dabar tą patį galite padaryti įdiegdami atskirus modulius.

„Angular“ lankstumas yra pagirtinas. Štai kodėl „Angular“ 1.x versijos vis dar yra paklausios. Tačiau daugelis kūrėjų šiuo metu pasikliauja „Angular 2+“ dėl savo MVC architektūros, kuri iš esmės pasikeitė į komponentais pagrįstą architektūrą.  

Kampinis turi dar porą papildomų iššūkių. Jūs beveik privalote naudoti „TypeScript“, kad užtikrintumėte tipo saugumą kampinėse programose. „TypeScript“ daro „Angular 2+“ sistemą ne taip malonią darbą.

„Angular“ ekosistemą sudaro:

  • Norėdami greitai nustatyti projektą, naudinga „Angular“ komandinės eilutės sąsaja.
  • Kūrėjai gaus „Angular“ projektams skirtų modulių rinkinį: @ kampinis / bendras, @ kampinis / kompiliatorius, @ kampinis / šerdis, @ kampinis / formos, @ kampinis / http, @ kampinis / platformos naršyklė, @ kampinis / platformos naršyklė- dinaminis, @ kampinis / maršrutizatorius ir @ kampinis / atnaujinimas.
  • „Angular“ naudoja „Zone.js“ „JavaScript“ biblioteką, kad įgyvendintų zonas „Angular“ programose.
  • „TypeScript“ ir „CoffeeScript“ galima naudoti su „Angular“.
  • Bendravimui su serverio programomis „Angular“ naudoja „RxJS“ ir „Observable“ šabloną.
  • „Angular Augury“, skirtas derinti „ Angular“ programas.
  • „Angular Universal“, skirtas kurti serverio programas su „Angular“.

„Angular2“ yra išsami „JavaScript“ sistema su visais įrankiais, kurių reikia šiuolaikiškam „front-end“ kūrėjui. Galite pasirinkti „Angular“, jei nemėgstate dirbti su papildomomis bibliotekomis, kaip su „React“.

3. Vue

Parengta „Snyk JavaScript“ 2019 m. Ataskaita. Ataskaitoje daugiausia dėmesio buvo skiriama tiek „React“, tiek „Angular“ saugumo rizikai.

? * NAUJIENOS *?

? Parengta „Snyk JavaScript Frameworkworks“ 2019 m. Saugos ataskaita!

„Angular“, „React“, „Vue.js“, „jQuery“ ir „Bootstrap“ gauna saugos būklės apžvalgą! // t.co/FIpSob2IHk

- Snyk (@snyksec) 2019 m. Spalio 30 d

„Vue“ koncepcija buvo perimta iš „Angular and React“, tačiau „Vue“ yra geresnė daugeliu atžvilgių. Aš pakalbėsiu apie jo ypatybes, bet pirmiausia patikrinkite, ką „Synk“ ataskaita sako apie „Vue“ priekinės dalies saugumą. Šiais metais „Vue“ buvo atsisiųsta 40 milijonų kartų ir jame užfiksuoti tik keturi tiesioginiai pažeidžiamumai. Visi jie buvo pataisyti.

Bet kuriam „front-end“ kūrėjui, kuris nėra susipažinęs su „Vue“, paaiškinkime kelis dalykus.

Naudodami „Vue“, viename faile saugote komponentų logiką ir išdėstymą kartu su stiliaus lapais. „React“ veikia taip pat, be stiliaus lapų. Kad komponentai leistų kalbėtis tarpusavyje, „Vue“ naudoja rekvizitus ir būsenos objektus. Šis požiūris taip pat egzistavo „React“, kol Vue jo nepriėmė.

Panašiai kaip „Angular“, „Vue“ nori, kad jūs sumaišytumėte HTML išdėstymą su „JavaScript“. Norėdami interpoluoti reikšmes iš komponento logikos į šablonus, turite naudoti „Vue“ direktyvas, tokias kaip „v-bind“ arba „v-if“.

Viena iš priežasčių, kodėl verta apsvarstyti „Vue“, o ne „React“, yra „Redux“ biblioteka, kuri dažnai naudojama didelio masto „React“ programose. Kaip paaiškinta skyriuje „Reaguoti“, kai „React + Redux“ programa išaugs, daug laiko praleisite taikydami nedidelius pakeitimus keliems failams, užuot dirbę su funkcijomis. „Vuex“ biblioteka - į „Flux“ panašus būsenos valdymo įrankis, sukurtas „Vue“, atrodo ne toks sunkus nei „Redux“.

Jei pasirenkate „Vue“ ir „Angular“, priežastis, kodėl pasirinkote „Vue over Angular“, galima sumažinti iki šių priežasčių: „Angular“ yra pernelyg sudėtinga, visavertė, ribojančio pobūdžio sistema; „Vue“ yra daug paprastesnė ir mažiau ribojanti nei „Angular“.

Kitas „Vue“ pranašumas prieš „Angular and React“ yra tas, kad nereikia dar kartą išmokti „JavaScript“.

Įvadas į „VueJS“ ekosistemą:

  • „Vuex“ yra skirta biblioteka, skirta programų valdymui.
  • „Vuex“ yra panašus į „Flux“ sąvoką.
  • Jūs gausite „Vue-loader“ komponentams ir „vue.js“ įrankius, skirtus „Chrome“ ir „Firefox“ naršyklėms.
  • „Vue-resource“ ir „Axios“ įrankiai, skirti bendrauti tarp „Vue“ ir vidinio programos šaltinio.
  • „Vue.js“ palaiko „Nuxt.js“ kuriant serverio programas su „Vue“; „Nuxt.js“ iš esmės yra „Angular Universal“ konkurentas.
  • Jūs gausite „Weex JavaScript“ biblioteką su „Vue“ sintakse, kuri naudojama programoms mobiliesiems kurti.

„Vue“ yra puikus darbo srautas į kitas sistemas. Aš galėčiau pasirinkti „Vue“, nes tai yra mažiau sudėtinga nei „React and Angular JS“ ir puikus pasirinkimas kuriant įmonės lygio programas.

4. Žmogus

Šiais metais išleistas „Ember 3.13“ su keletu naujų atnaujinimų ir funkcijų. Emberas yra toks pat kaip „stuburas“ ir „AngularJS“, taip pat yra vienas iš seniausių „JavaScript“ rėmų. Tačiau su naujuoju atnaujinimu „Ember 3.13“ suderinamas su naujais klaidų taisymais, našumo patobulinimais ir nusidėvėjimu. Taip pat buvo pristatyti stebimi nuosavybės atnaujinimai, leidžiantys paprasčiau stebėti „Ember“ programų ergonominės sistemos būsenos pokyčius.

Ember turi gana įmantrią architektūrą, kuri leis greitai sukurti didžiules kliento programas. Jis realizuoja tipišką MVC „JavaScript“ sistemą, o „Ember“ architektūrą sudaro šios dalys: adapteriai, komponentai, valdikliai, pagalbininkai, modeliai, maršrutai, paslaugos, šablonai, įrankiai ir priedai.

Viena iš geriausių „Ember“ savybių yra jos komandinės eilutės sąsajos įrankis. „Ember CLI“ padeda išorės kūrėjams būti labai produktyviems ir leidžia jiems laiku užbaigti projektus. Galite ne tik kurti naujus projektus su parengta sąranka, bet taip pat galite sukurti valdiklius, komponentus ir projekto failus naudodami automatinę generavimą.

EmberJS ekosistemą sudaro:

  • „Ember CLI“ įrankis, skirtas greitai sukurti prototipus ir valdyti priklausomybes.
  • „Ember“ serveris įmontuotas programėlių kūrimo sistemoje.
  • Duomenims valdyti gausite Ember.js biblioteką ir „Ember Data“.
  • Vairo šablonų variklis, skirtas žmonėms.
  • QUnit „Ember“ testavimo sistema.
  • „Ember Inspector“ kūrimo įrankis, skirtas „Chrome“ ir „Firefox“ naršyklėms.
  • „Ember Observer“ viešajam saugojimui ir „Ember“ priedai bendrosioms funkcijoms įgyvendinti.

Nors Ember yra nepakankamai įvertintas, jis puikiai tinka kurti sudėtingas kliento programas.

5. stuburas.js

„Stuburas“ yra „JavaScript“ sistema, paremta MVC architektūra. „Backbone.js“ versijoje MVC rodinys padeda įgyvendinti komponentų logiką panašiai kaip valdiklis. Pagrindiniame rodinyje galima naudoti tokius variklius kaip „Ūsai“ ir „Underscore.js“.

„Stuburas“ yra lengvai naudojama „JavaScript“ sistema, leidžianti greitai kurti vieno puslapio programas. Norėdami visapusiškai naudoti „Backbone.js“, turėsite pasirinkti įrankius: „Chaplin“, „Marionette“, „Thorax“, vairą ar ūsus ir pan.

Jei jums reikia sukurti programą, kurioje yra skirtingų tipų naudotojai, modeliams atskirti čia galima naudoti „Backbone“ kolekcijas (masyvus). Stuburas. Renginiai gali būti naudojami su stuburo modeliais, kolekcijomis, maršrutais ir rodiniais.

Pristatome „BackboneJS“ ekosistemą:

  • „Backbone“ biblioteką sudaro įvykiai, modeliai, kolekcijos, rodiniai ir maršrutizatorius.
  • „Underderscore.js“, „JavaScript“ biblioteka su pagalbinėmis funkcijomis, kurią galite naudoti rašydami kelių naršyklių „JavaScript“.
  • Galite naudoti šablonų variklius, tokius kaip „Mustache“ ir „jQuery-tmpl“.
  • „BackPlug“ internetinė saugykla su daug paruoštų sprendimų, skirtų „Backbone“ pagrįstoms programoms.
  • „Backbone generator“ CLI, skirtas kurti „Backbone“ programas.
  • „Marionette“, „Thorax“ ir „Chaplin“ „JavaScript“ bibliotekos, kad būtų sukurta pažangi „Backbone“ programų architektūra.

„Backbone.js“ yra puikus pasirinkimas kuriant „front-end“ ir „back-end“, nes jis palaiko REST API, kurios naudojamos sinchronizuojant „front-end“ ir „back-end“.

Reikia daugiau pagalbos?

Visi ten esantys „front-end“ kūrėjai, jei jums reikia pagalbos dėl „JavaScript“ sistemų, nedvejodami susisiekite. Arba taip pat galite susisiekti su mumis, norėdami samdyti „ReactJS“ kūrėjus, „Vue“ kūrėjus ar „Angular“ kūrėjus.

Arba palikite man užrašą ar „Twitter“.

Atminkite, kad šiame straipsnyje pateikiamas bendras „JavaScript“ karkasų planas. Pasakyk man, ar aš ką nors praleidau, ir mes galime tai aptarti. Tikiuosi, kad tai taip pat padės pasiekti jūsų išankstinio vystymosi tikslus.