Parhaat käytännöt: Frontend Frameworks for your web product

Mikä taatusti sammuttaa käyttäjät? Hidas käyttöliittymä, epäjohdonmukaiset kirjasintyypit tai väärin sijoitetut painikkeet. On vaikea valita ”voittajaa”, mutta et halua, että työstämässäsi verkkosovelluksessa on mitään näistä.

Onneksi voit välttää huonon käyttöliittymän luomisen käyttämällä oikeaa frontend-kehystä. Lue lisää ja ota selvää, mikä on suosikkini.

Mikä on frontend-kehys?

Frontend viittaa tyypillisesti käyttöliittymään, jonka kanssa käyttäjät ovat vuorovaikutuksessa selatessaan verkkoa. Yleensä frontend viittaa selaimeen, mutta se voi tarkoittaa myös sovelluksen käyttöliittymää. Ennen kehittäjät kirjoittivat kaikki koodit manuaalisesti luodakseen elementit, käyttäytymismallit ja vaihtaakseen tietoja backendin kanssa.

Frontend-kehys yksinkertaistaa tehtävää, koska siinä on valmiiksi kirjoitettua koodia, jonka pohjalta voit rakentaa. Se toimii perustana, joka sisältää yleisesti käytettyjä elementtejä, kuten ruudukon, ennalta määritellyn typografian ja verkkosivuston komponentteja, kuten painikkeita, vierityspalkkeja ja sivupaneeleita.

Se säästää sinut keksimästä pyörää uudelleen jokaista projektia varten.

UI-kehysten markkinaosuus

UI-kehyksiä on saatavilla yli kourallinen, mutta kolme niistä on erittäin suosittuja kehittäjäyhteisön keskuudessa.

Kärjessä on React, jota ladataan viikoittain keskimäärin 7 miljoonaa kertaa. Se ohittaa Vue.js:n ja Angularin huomattavalla erolla, sillä kakkoset keräsivät keskimäärin 1,5 miljoonaa ja 500 tuhatta viikoittaista latausta.

React

Reactin kehitti Facebook yrittäessään luoda suorituskykyisen ja tehokkaan käyttöliittymän. Se perustuu JavaScriptiin, ja sen avulla käyttäjät voivat luoda web-käyttöliittymiä dynaamisilla HTML-komponenteilla. Kun komponentit on suunniteltu, React renderöi ne sen mukaisesti viimeisimpien tietojen perusteella.

Reactissa komponentit rakennetaan kapseloimaan tila, jossa ne ovat. Tämä mahdollistaa sen, että komponentit voivat välittää runsaasti dataa, eivätkä ne tarvitse DOM-mallia (Document Object Model) käsittelemään tilaa.

Facebook julkaisi ensimmäisen version Reactista vuonna 2013. Pari vuotta myöhemmin esiteltiin React Native mobiilisovelluksia varten.

Reactissa renderointilogiikka on tiukasti kytketty muuhun käyttöliittymälogiikkaan. Se mahdollistaa saumattoman suorituksen tapahtumien käsittelyssä, tilasiirtymissä ja näyttötietojen valmistelussa. Tämä poikkeaa tavanomaisesta käytännöstä, jossa merkintä ja logiikka pidetään erillisissä tiedostoissa.

Vaikka käytäntöä, jossa sekä merkintä että Javascript ovat samassa tiedostossa, paheksutaan, niin Reactin kanssa toimimalla saadaan selkeyttä näkymään.

Reactin yksinkertaisuuden ansiosta kehystä ovat käyttäneet suurimmat yritykset, kuten Twitter, Pinterest, Netflix ja Udemy.

Reactin edut

• React käyttää virtuaalista DOM:ia, joka on otos todellisesta DOM:sta käyttöliittymän renderöintiä varten. Se on tehokkaampi, sillä komponenttien näkyminen näytöllä vie vähemmän aikaa.
• Koska Reactsin komponentit ovat kapseloituja, niitä voidaan käyttää itsenäisesti ilman rajoituksia.
• Reactin mallina on funktionaalinen ohjelmointi, jota määrittävät muuttumattomat tiedot, puhtaat funktiot ja deklaratiivinen tyyli. Siksi Reactilla luotuja koodeja on helppo testata, pää- ja uudelleenkäyttää.
• Suosituimpana kehyksenä Reactilla on suuri maailmanlaajuinen yhteisö. Se tarkoittaa myös sitä, että sinulla on suuri valikoima avoimen lähdekoodin paketteja, joiden kanssa voit työskennellä.
• React päivittää ja julkaisee proaktiivisesti uusia versioita kehyksestä. Saat ajoissa bugikorjauksia ja parannuksia.
• Reactilla voit toteuttaa erilaisia renderöintitekniikoita, kuten asiakaspuolen renderöintiä(CSR), palvelinpuolen renderöintiä(SSR) tai jopa staattisten tiedostojen tuottamista

Reactin haittapuolia

• Jos olet uusi Reactin parissa, käsite templatingin sekoittaminen logiikkaan (JSX:ään) voi olla aluksi hämmentävä.
• Keskitytään liikaa ydinkirjastoon. Reitityksen ja globaalin tilanhallinnan kaltaiset huolenaiheet on delegoitu liitännäiskirjastoille. Vastuu siitä, miten eri kirjastojen kanssa kehitetään, lankeaa pitkälti kehittäjille.
• Projektin kasvaessa ”virtaus- ja datakomponentit” saattavat kadota. Asiaa pahentaa entisestään se, että Reactin dokumentaatio on usein puutteellista, ei kiitos sen nopean kasvun.

Milloin Reactia kannattaa käyttää

React on ihanteellinen front-end-kehys sellaisen verkkosovelluksen rakentamiseen, jossa odotetaan paljon vuorovaikutusta ja usein muuttuvia tiloja. Sen ainutlaatuinen lähestymistapa Virtual DOM:n käyttämiseen tarkoittaa, että web-sovellus voi reagoida käyttäjien syötteisiin nopeasti ja renderöidä käyttöliittymän dynaamisesti.

Jos rakennat verkkosovellusta, johon on vain vähän aikaa, React on myös oikea ratkaisu. Sen uudelleenkäytettävät komponentit todistetusti auttavat lyhentämään kehitysaikaa.

Vue.js

Vue.js:llä ei ehkä ole tunnettuja nimiä omaksujien suhteen, mutta se on silti erittäin suosittu kehys kehittäjien keskuudessa. Kehyksen loi vuonna 2014 Evan You. Se on yksinkertainen ja monipuolinen, ja sen avulla kehittäjät voivat käsitellä dynaamisia prosesseja ilman ylimääräisiä kirjastoja.

Vue.js perustuu Reactin tavoin virtuaaliseen DOMiin. Sen lisäksi se on kevyt ja tukee kaksisuuntaista datan sitomista. Se, että se on pienikokoinen kehys, auttaa myös kasvattamaan frontendin suorituskykyä.

Vue.js:n hyvät puolet

• Vue.js:llä on laaja ja ytimekäs dokumentaatio, joka auttaa sinua oppimaan kehyksen aloittelijana.
• Se käyttää virtuaalista DOM:ia, mikä parantaa renderöinnin tehokkuutta.
• Vue.js on hyvin integroitavissa. Pienemmät Vue.js-komponentit voidaan integroida saumattomasti olemassa olevaan infrastruktuuriin ilman haitallisia vaikutuksia.
• Se tarjoaa reaktiivisia ja kokoonpantavia näkymäkomponentteja.
• Vue.js:llä luodut mallit ovat HTML-muodossa. Se on plussaa kehittäjille, jotka tuntevat HTML:n.
• Koko kehyksen koko on vain 18 kB, mikä tekee Vue.js:stä uskomattoman kevyen ja parantaa UX-suorituskykyä.

Vue.js:n huonot puolet

• Vue.js:n yhteisö on suhteellisen pieni, sillä sen suosio on vähäinen. Siksi vertaistuen saaminen on melko vaikeaa.
• Vuesta.js:stä käydään eniten keskustelua kiinaksi, koska kehys on erittäin suosittu kiinalaisten yritysten keskuudessa. Kielimuuri vaikeuttaa kommunikaatiota muualla toimiville kehittäjille.
• Kokeneiden kehittäjien ja yhteisön tuen puute sekä komponenttien vakausongelmat tekevät Vue.js:n käytöstä riskialtista suurissa projekteissa.

Milloin Vue.js:ää kannattaa käyttää

Vue.js sopii mainiosti yksinkertaisen yhden sivun sovelluksen luomiseen. Sillä on matala oppimiskäyrä, jonka avulla kehittäjät voivat oppia nopeasti kehyksen käytön. Sitä ei kuitenkaan ole vielä tarkoitettu monimutkaisiin projekteihin, sillä Vue.js:n asiantuntijan saaminen ei ole helppoa.

Angular

TypeScriptin pohjalta luotu Angular on Googlen kattava frontend-kehys. Se julkaistiin vuonna 2016 ja se on rakennettu olio-ohjelmointilähestymistavalla. Kehyksessä on kaksisuuntainen datan sitominen, mikä toimii hyvin web- ja mobiilisovellusten kehittämisessä.

Tänään Angular on yksi kaikkien aikojen kattavimmista kehyksistä, sillä kehittäjät pystyvät ratkaisemaan monimutkaisia tehtäviä itse kehyksen sisällä. Monimutkaisen UI/UX:n kehittämisessä ei tarvita lisäkirjastoja.

Angularin edut

• Sovelluslogiikka ja UI-kerros on irrotettu toisistaan Angularin Model-View-Controller-arkkitehtuurin avulla. Se tukee myös huolenaiheiden erottelua.
• Voit ohittaa mallin oletusarvoisen DOM-renderöinnin sieppaamalla renderöintipuhelut. Renderöijä voidaan esimerkiksi konfiguroida muuttamaan käyttöliittymää dynaamisesti.
• Angularissa on vahva tuki dynaamisten lomakkeiden rakentamiseen ja käsittelyyn. Mallien avulla voidaan luoda uusia lomakkeita dynaamisesti muuttuvan tietomallin pohjalta.
• RxJS-kirjasto asennetaan yhdessä Angularin kanssa. Se on kirjasto, joka tukee reaktiivista ohjelmointia havainnoitavilla virroilla, jotta asynkronista koodia voidaan käsitellä helposti.
• Angularin palvelut ja Dependency Injection mahdollistavat komponenttien helpon uudelleenkäytön, testauksen ja ylläpidon. Ominaisuus auttaa suurempia projekteja, sillä riippuvuuksia voidaan kutsua ulkoisista lähteistä sen sijaan, että ne luotaisiin luokan sisällä.
• Angularin ennakkoon tapahtuva kääntäminen johtaa nopeampaan latausaikaan ja parempaan tietoturvaan. Tässä prosessissa JavaScript-koodi luodaan rakentamisvaiheessa selaimen lataamisen jälkeen.

Angularin huonot puolet

• Joidenkin voi olla vaikea ymmärtää Angularin monikerroksista arkkitehtuuria, mikä voi vaikuttaa kehyksen debuggaamiseen. Mittavan Angular-pohjaisen sovelluksen virheenkorjaus voi olla sietämätön prosessi.
• Angularilla luoduilla verkkosovelluksilla on rajoitetut SEO-mahdollisuudet, ja hakukoneiden indeksoijien voi olla vaikea tavoittaa niitä.
• Javainscriptiin perehtyneet kehittäjät kokevat Angularin suhteellisen vaikeaksi Reactiin ja Vueen verrattuna.
• Angular käyttää Typescriptiä yleisemmän JavaScriptin sijaan.

Milloin Angularia kannattaa käyttää

Angular on suositeltava kehys, kun luodaan suurta yrityssivustoa tai laajamittaista projektia, jossa on monimutkainen infrastruktuuri. Se sopii myös projekteihin, joissa käytetään progressiivisia verkkosovelluksia (PWA).

Miksi käytämme Reactia

React on epäilemättä suosituin frontend-kehyksemme. Seuraavassa kerrotaan, miksi rakastamme sitä:

1. Pystymme käyttämään Reactia eri monimutkaisissa projekteissa. Se toimii MVP:n, startupin, yrityksen ja verkkokaupparatkaisun luomisessa.
2. React antaa meille vauhtia yksinkertaisten ja skaalautuvien ratkaisujen rakentamiseen. Työskentely Reactin kanssa on aina ollut miellyttävä kokemus.
3. Kehittäjiemme ei enää tarvitse rakentaa komponentteja tyhjästä. Reactin valtava määrä kirjastoja ja työkaluja lyhentää huomattavasti kehitysaikaa.
4. Pääsemme luomaan tuotteeseemme kunnioitusta herättävän käyttöliittymän käyttämällä avoimen lähdekoodin React-komponentteja, kuten Ant Designia ja Material AI:ta.
5. React on kiistatta suosituin front-end-kehys. Meidän ei tarvitse huolehtia ylläpidosta ja räätälöinnistä, sillä sillä on vilkas kehittäjäyhteisö. Toisin on, jos käytämme Vue.js:ää tai Angularia.
6. Tiimiimme on helpompi löytää React-kehittäjä verrattuna muihin kehyksiin.

Olemme kehittäneet menestyksekkäästi muutamia projekteja Reactin avulla, ja tässä on kaksi merkittävää.

Apprvl

Apprvl on valokuvaajille luotu sovellus, joka yksinkertaistaa heidän kuviensa asiakkaiden hyväksyntää. Valokuvaajat voivat ladata töitään sovelluksen kautta ja saada kommentteja jakamalla luotuja linkkejä asiakkailleen.

Ratkaisumme

Aloitamme rakentamalla tärkeimmät toiminnalliset osat verkkosovellukseen testataksemme hypoteeseja oikeilla käyttäjillä. Palautteen perusteella teemme osiin sopivia muutoksia.

Sitten jatkamme skaalautuvan backend-arkkitehtuurin rakentamista ja käynnistämme web-sovelluskehityksen.

Varmistimme MVP:hen perustuvan sovelluksen koko syklin kehityksen.

Tulokset

Käyttämällä Reactia pystymme toimittamaan MVP:n, joka täyttää kaikki vaatimukset. Se toimitetaan mahdollisimman vähin virhein koko kehityssyklin ajan, ja se on skaalautuva tulevaa kehitystä varten.

Plai

Plai on ilmainen suorituskyvyn mittaustyökalu, joka auttaa kasvattamaan, koordinoimaan ja sitouttamaan etäryhmää.

Ratkaisumme

Lähdimme projektin liikkeelle Discovery-vaiheesta, jonka avulla selvitimme startup-yrittäjien todelliset ongelmat ja tarpeet.

Palautteen perusteella käytimme Reactia verkkosovelluksen luomiseen. Sen avulla voimme kehittää MVP:n hyvin nopeasti.

Kun MVP on testattu ja validoitu, tiimimme jatkaa koko sovelluksen kehittämistä.

Tulos

MVP toimitetaan korkealaatuisena ja kaikki vaatimukset täyttävänä. Nykyään verkkosovellus jatkaa kasvuaan, kun lisäämme siihen lisää arvokkaita ominaisuuksia.

Yhteenveto

Sinulla ei ole varaa toimittaa huonoa käyttöliittymää tai tuhlata liikaa aikaa komponenttien rakentamiseen verkkosovellusta varten. Hyödynnä frontend-kehyksen kätevyyttä ja tehokkuutta ideoiden toteuttamisessa.

Ei ole olemassa yhden koon kehystä, joka sopii kaikille. Jos rakennat yksinkertaista sovellusta ja sinulla on hyvin vähän aikaa, valitse React tai Vue.js. Valitse Angular vain, jos rakennat monimutkaista web-ratkaisua, koska sovelluksen debuggaamisen tuska on todellinen.

Jos olet epävarma, opastan sinua mielelläni parhaan vaihtoehdon valinnassa. Laita minulle sähköpostia tänne.