Nilalaman
- 01. Angular
- 02. React
- 03. Vue
- Paano naghahambing ang syntax ng mga balangkas?
- Sikat at pamilihan
- Pag-unlad ng mobile app
- Iba pang mga balangkas na dapat abangan sa 2020
- Konklusyon
Sa 2020, biniyayaan kami ng maraming mga balangkas at aklatan upang matulungan kami sa pagbuo ng web. Ngunit laging walang gaanong pagkakaiba-iba. Bumalik noong 2005, isang bagong wika ng scripting na tinatawag na Mocha ay nilikha ng isang lalaking nagngangalang Brendan Eich. Buwan matapos mapalitan ang pangalan sa LiveScript, ang pangalan ay binago ulit sa JavaScript. Mula noon, malayo na ang narating ng JavaScript.
Noong 2010, nakita namin ang pagpapakilala ng Backbone at Angular bilang unang mga balangkas ng JavaScript at, sa 2016, 92 porsyento ng lahat ng mga website ang gumagamit ng JavaScript. Sa artikulong ito, titingnan namin ang tatlo sa pangunahing mga balangkas ng JavaScript (Angular, React at Vue) at ang kanilang katayuan ay patungo sa susunod na dekada. Nais bang gumawa ng iyong sariling site? Subukan ang listahang ito ng mga tagabuo ng website.
Para sa ilang mga makikinang na mapagkukunan, suriin ang aming listahan ng mga nangungunang mga tool sa disenyo ng web, ang aming pag-ikot ng mga serbisyo sa web hosting, at ang listahang ito ng mahusay na software ng pagsubok ng gumagamit.
01. Angular
Ang AngularJS ay inilabas noong 2010 ngunit sa 2016 ganap itong muling nasulat at inilabas bilang Angular 2. Angular ay isang buong-blown na balangkas ng web na binuo ng Google, na ginagamit ng Wix, Upwork, The Guardian, HBO at marami pa.
Mga kalamangan:
- Natatanging suporta para sa TypeScript
- Pinapayagan ng MVVM ang mga developer na paghiwalayin ang trabaho sa parehong seksyon ng app gamit ang parehong hanay ng data
- Mahusay na dokumentasyon
Kahinaan:
- Mayroong kaunting curve sa pag-aaral
- Ang paglipat mula sa isang lumang bersyon ay maaaring maging mahirap.
- Ang mga pag-update ay ipinakilala nang regular na nangangahulugang kailangang umangkop sa kanila ng mga developer
Anong susunod?
Sa Angular 9, ang Ivy ay ang default compiler. Inilagay ito upang malutas ang maraming mga isyu sa pagganap at laki ng file. Dapat itong gawing mas maliit, mas mabilis at mas simple ang mga application.
Kapag inihambing mo ang dating mga bersyon ng Angular sa React at Vue, ang
ang mga huling sukat ng bundle ay mas malaki kapag gumagamit ng Angular. Ginagawa rin ng Ivy ang Progressive Hydration, na kung saan ay ipinakita ng koponan ng Angular sa I / O 2019. Ginagamit ng Progressive Hydration si Ivy upang mag-load ng progreso sa server at sa kliyente. Halimbawa, sa sandaling ang isang gumagamit ay nagsimulang makipag-ugnay sa isang pahina, ang code ng mga bahagi kasama ang anumang runtime ay nakuha nang paisa-isa.
Ang Ivy ay tila ang malaking pokus na pasulong para sa Angular at ang pag-asa ay gawin itong magagamit para sa lahat ng mga app. Magkakaroon ng pagpipilian sa pag-opt-out sa bersyon 9, hanggang sa Angular 10.
02. React
Ang react ay unang inilabas noong 2013 ng Facebook at ginagamit para sa pagbuo ng mga interactive na web interface. Ginagamit ito ng Netflix, Dropbox, PayPal at Uber upang pangalanan ang ilan.
Mga kalamangan:
- Gumagamit ang react ng virtual DOM, na may positibong epekto sa pagganap
- Madaling isulat ang JSX
- Hindi nakompromiso ng mga pag-update ang katatagan
Kahinaan:
- Ang isa sa mga pangunahing pagkabigo ay nangangailangan ng mga third-party na aklatan upang lumikha ng mas kumplikadong mga app
- Ang mga developer ay naiwan sa dilim sa pinakamahusay na paraan upang bumuo
Anong susunod?
Sa React Conf 2019, ang koponan ng React ay nag-ugnay sa maraming mga bagay na kanilang pinagtatrabahuhan. Ang una ay Selective Hydration, kung saan i-pause ng React ang anumang ginagawa nito upang unahin ang mga sangkap na nakikipag-ugnay ang gumagamit. Tulad ng pagpunta ng gumagamit upang makipag-ugnay sa isang partikular na seksyon, ang lugar na iyon ay hydrated. Ang koponan ay nagtatrabaho rin sa Suspense, na kung saan ay ang sistema ng React para sa orchestrating ng paglo-load ng code, data at mga imahe. Nagbibigay-daan ito sa mga sangkap na maghintay para sa isang bagay bago mag-render.
Ang parehong Selective Hydration at Suspense ay ginawang posible ng Kasabay na Mode, na nagbibigay-daan sa mga app na maging higit na tumutugon sa pamamagitan ng pagbibigay sa React ng kakayahang ipasok ang malalaking bloke ng mas mababang priyoridad na trabaho upang tumuon sa isang bagay na isang mas mataas na priyoridad, tulad ng pagtugon sa input ng gumagamit Nabanggit din ng koponan ang kakayahang mai-access bilang isa pang lugar na tinitingnan nila, sa pamamagitan ng pagtuon sa dalawang partikular na paksa - pamamahala ng pokus at mga interface ng pag-input.
03. Vue
Ang Vue ay binuo noong 2014 ni Evan You, isang dating empleyado ng Google. Ginagamit ito ng Xiaomi, Alibaba at GitLab. Nagawang makamit ng popularidad at suporta ng Vue mula sa mga developer sa isang maikling puwang ng oras at nang walang suporta ng isang pangunahing tatak.
Mga kalamangan:
- Napakagaan ng laki
- Baguhan na magiliw - madaling malaman
- Mahusay na pamayanan
Kahinaan:
- Hindi sinusuportahan ng isang malaking kumpanya, tulad ng React sa Facebook at Angular sa Google
- Walang totoong istraktura
Anong susunod?
Itinakda ng Vue mismo ang target na maging mas mabilis, maliit, mas mapapanatili at ginagawang mas madali para sa mga developer na mag-target ng katutubong (kung nagkakaproblema ka sa pagpapanatili, isaalang-alang ang isang web hosting service). Ang susunod na paglabas (3.0) ay dahil sa Q1 2020, na nagsasama ng isang virtual na muling pagsulat ng DOM para sa mas mahusay na pagganap kasama ang pinahusay na TypeScript Support. Mayroon ding pagdaragdag ng Composition API, na nagbibigay sa mga developer ng isang bagong paraan upang lumikha ng mga bahagi at ayusin ang mga ito ayon sa tampok sa halip na pagpapatakbo.
Ang mga bumubuo ng Vue ay naging abala rin sa pagtatrabaho sa Suspense, na sinuspinde ang iyong pag-render ng sangkap at nag-render ng isang fallback na bahagi hanggang sa matugunan ang isang kundisyon.
Ang isa sa mga magagaling na bagay sa mga pag-update ng Vue ay pinapanatili nila ang pabalik na pagiging tugma. Hindi nila nais na masira mo ang iyong mga dating proyekto ng Vue. Nakita namin ito sa paglipat mula 1.0 hanggang 2.0 kung saan 90 porsiyento ng API ay pareho.
Paano naghahambing ang syntax ng mga balangkas?
Ang lahat ng tatlong mga balangkas ay sumailalim sa mga pagbabago mula nang ilabas ang mga ito ngunit isang bagay na kritikal na maunawaan ay ang syntax at kung paano ito naiiba. Tingnan natin kung paano naghahambing ang syntax pagdating sa simpleng pagbubuklod ng kaganapan:
Vue: Ang v-on ginagamit ang direktiba upang maglakip ng mga tagapakinig ng kaganapan na nagsasagawa ng mga pamamaraan sa mga pagkakataon ng Vue. Ang mga direktiba ay paunang salita v- upang maipahiwatig na sila ay mga espesyal na katangian na ibinigay ng Vue at naglalapat ng espesyal na reaktibong pag-uugali sa naibigay na DOM. Ang mga handler ng kaganapan ay maaaring ibigay alinman sa linya o bilang pangalan ng pamamaraan.
template> button v-on: click = ”clickHandler”> Mag-click sa akin / button> / template> script> export default {name: “HelloWorld”, mga pamamaraan: {clickHandler: function () {console.log (“I was clicked! "); }}}; / script>
Reaksyon: Ang react ay naglalagay ng mark up at lohika sa JS at JSX, isang extension ng syntax sa JavaScript. Sa JSX, ang pagpapaandar ay naipasa bilang handler ng kaganapan. Ang paghawak ng mga kaganapan sa mga elemento ng React ay halos kapareho ng paghawak ng mga kaganapan sa mga elemento ng DOM. Ngunit may ilang mga pagkakaiba sa syntactic; halimbawa, ang mga kaganapan sa React ay pinangalanan gamit ang camelCase kaysa sa maliit.
pindutan ng pag-andar () {function clickHandler (e) {console.log ("I was clicked"); } ibalik ang pindutan saClick = {clickHandler}> Mag-click sa akin! / button>; }
Anggulo: Ang syntax na nagbubuklod ng kaganapan ay binubuo ng isang target na pangalan ng kaganapan sa loob ng panaklong sa kaliwa ng isang pantay na pag-sign at isang naka-quote na pahayag ng template sa kanan. Bilang kahalili, maaari mong gamitin ang sa- unlapi, na kilala bilang canonical form.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) export class ClickMeComponent {onClickMe () {console.log (“ Na-click mo ako! ”); }}
Sikat at pamilihan
Magsimula tayo sa pamamagitan ng pagtingin sa isang pangkalahatang larawan ng tatlong mga balangkas na patungkol sa natitirang web sa pamamagitan ng pagsusuri sa mga istatistika mula sa W3Techs. Angular ay kasalukuyang ginagamit ng 0.4 porsyento ng lahat ng mga website, na may isang bahagi ng merkado sa JavaScript ng 0.5 porsyento. Ang react ay ginagamit ng 0.3 porsyento ng lahat ng mga website at isang 0.4 na porsyento na bahagi ng merkado ng JavaScript sa library at ang Vue ay mayroong 0.3 porsyento para sa pareho. Ito ay tila pantay at asahan mong makita ang pagtaas ng mga numero.
Mga trend sa Google: Sa nakaraang 12 buwan, ang React ay ang pinakatanyag sa mga termino para sa paghahanap, na sinusundan ng Angular. Ang Vue.js ay medyo isang paraan sa likuran; subalit, isang bagay na dapat tandaan ay bata pa si Vue kumpara sa dalawa pa.
Mga paghahanap sa trabaho: Sa oras ng pagsulat, ang React at Angular ay malapit na naitugma sa mga tuntunin ng mga listahan ng trabaho sa katunayan na may Vue na malayo pa sa likuran. Gayunpaman, sa LinkedIn, tila may higit na pangangailangan para sa mga developer ng Vue.
Stack Overflow: Kung titingnan mo ang mga resulta ng Survey ng Developer ng Stack Overflow para sa 2019, ang React at Vue.js ay kapwa ang pinakamamahal at nais na mga balangkas ng web. Angular ay nakaupo sa ikasiyam na posisyon para sa pinakamamahal ngunit pangatlo sa pinaka ginusto.
GitHub: Ang Vue ay may pinakamaraming bilang ng mga bituin na may 153k ngunit mayroon itong pinakamaliit na bilang ng mga nag-aambag (283). Ang reaksyon sa kabilang banda ay may 140k na bituin at 1,341 na nag-ambag. Angular ay mayroon lamang 59.6k na mga bituin ngunit may pinakamataas na bilang ng mga nag-aambag mula sa tatlo na may 1,579.
Mga Trend sa NPM: Ang imahe sa itaas ay nagpapakita ng mga istatistika sa nakaraang 12 buwan, kung saan makikita mong ang React ay may mas mataas na bilang ng mga pag-download bawat buwan kumpara sa Angular at Vue.
Pag-unlad ng mobile app
Ang isang pangunahing pokus para sa malaking tatlo ay ang paglawak ng mobile. Ang React ay may React Native, na naging isang tanyag na pagpipilian para sa pagbuo ng mga iOS at Android app hindi lamang para sa mga gumagamit ng React kundi pati na rin para sa mas malawak na komunidad ng pag-unlad ng app. Angular na mga developer ay maaaring gumamit ng NativeScript para sa mga katutubong app o Ionic para sa mga hybrid na mobile app, samantalang ang mga developer ng Vue ay may pagpipilian ng NativeScript o Vue Native. Dahil sa katanyagan ng mga mobile application, nananatili itong isang pangunahing larangan ng pamumuhunan.
Iba pang mga balangkas na dapat abangan sa 2020
Kung nais mong subukan ang isang bagong bagay sa 2020, tingnan ang mga balangkas na ito ng JavaScript.
Ember: Isang balangkas na bukas na mapagkukunan para sa pagbuo ng mga aplikasyon sa web na gumagana batay sa pattern ng MVVM. Ginagamit ito ng maraming malalaking kumpanya tulad ng Microsoft, Netflix at LinkedIn.
Meteor: Isang full-stack na platform ng JavaScript para sa pagbuo ng mga modernong web at mobile application. Madali itong matutunan at mayroong isang napaka-suporta na pamayanan.
Konklusyon
Ang lahat ng tatlong mga balangkas ay patuloy na nagpapabuti, na kung saan ay isang nakasisiglang tanda. Ang bawat isa ay may kanya-kanyang pananaw at ginustong solusyon tungkol sa alin ang dapat nilang gamitin ngunit ito talaga ang bumababa sa laki ng proyekto at kung saan mas komportable ka.
Ang pinakamahalagang aspeto ay ang patuloy na suporta ng kanilang mga komunidad, kaya kung nagpaplano kang magsimula ng isang bagong proyekto at hindi pa nagamit ang alinman sa tatlo dati, sa tingin ko nasa ligtas kang mga kamay sa kanilang lahat. Kung wala ka pang pagkakataong malaman ang alinman sa tatlong mga balangkas, sa gayon iminumungkahi kong gawin itong resolusyon ng iyong Bagong Taon upang magsimulang matuto. Umiikot ang hinaharap sa tatlong ito.
Ang nilalamang ito ay orihinal na lumitaw sa net magazine.
