Käytetyimmät front-end -teknologiat juuri nyt

Käytetyimmät front-end -teknologiat juuri nyt

käytetyimmät front-end -teknologiat juuri nyt

 

Nykyisin web-sovellukset ovat yleensä yhden sivun sovelluksia (SPA, Single Page Application). Tämä tarkoittaa sitä, että palvelimelta käytännössä ladataan yksi sivu, jonka näkymää päivitetään dynaamisesti reagoiden käyttäjän toimintaan. Moderniin front-end -kehitykseen kuuluu, että sivua on mahdollista päivittää yksi komponentti kerrallaan. Funktionaalinen ohjelmointitapa sopii mainiosti uudelleenkäytettävän komponenttirakenteen luomiseen, ja moderniin fronttikehitykseen onkin järkevää valita kyseiseen tyyliin taipuvat teknologiat. 

Tässä tekstissä listaamme omien projektiemme ja kokemustemme pohjalta käytetyimmät front-end -teknologiat juuri nyt.

React

React on JavaScript-kirjasto, jonka avulla rakennetaan käyttöliittymiä ja käyttöliittymäkomponentteja. Pienempien komponenttien pohjalta saadaan rakennettua varsinainen kokonaisuus. React on kätevä teknologia juuri siksi, että sen avulla käyttöliittymä saadaan jaettua pienempiin osiin, joita on helpompi hallinnoida ja tarvittaessa käyttää myöhemmin uudelleen. React-komponenteilla voi olla oma ohjelmallisesti muutettava tilansa, jonka perusteella komponentti renderöidään sivulle. Muutos komponentin tilassa esim. käyttäjän toimintaan reagoiden aiheuttaa komponentin päivityksen (uudelleenrenderöinnin) uutta tilaa vastaavaksi. 

Redux

Redux on JavaScriptillä tehdyille ohjelmistoille tarkoitettu tilanhallintatyökalu, joka keskittää tiedon ja jakelee sitä tarvittaessa. JavaScript-komponentit voidaan tarpeen mukaan liittää Reduxiin, jolloin ne saavat tarvitsemansa tilatiedon jaetusta lähteestä. Ilman Reduxia tieto on välitettävä komponentilta toiselle, mikä voi hankaloittaa sovelluksen ylläpitoa. Redux helpottaa siten debuggausta: ongelmatilanteet on helppo toistaa, kun sovellukselle voidaan sopivilla työkaluilla antaa suoraan kopio virheeseen johtaneesta tilasta ja tarvittaessa käydä tilan muutokset läpi yksitellen.

React Native (mobiilikehityksessä)

React Native on tällä hetkellä mobiilikehityksessä ehdottomasti käytetyin framework. React Nativen perusperiaatteet ovat samat kuin Reactissa, mutta toki React Nativessa on tiettyjä, juuri mobiiliin spesifejä ominaisuuksia. Moni Reactilla tehty kirjasto voi toimia hyvin React Native -sovelluksissa, mutta taas joissain tapauksissa eri käyttöjärjestelmät saattavat vaatia jopa ihan omat toteutuksensa. Mobiilikehityksessä on lisäksi hyvä ottaa huomioon, että iOS-kehitys vaatii aina Macin ja koska mobiilisovellukset julkaistaan yleensä Applen ja Googlen kauppapaikoissa, esimerkiksi markkinointikuvien käyttöön ja sovelluksen nimen suhteen on tiettyjä vaatimuksia. 

JavaScript

JavaScript on yksi suosituimmista ohjelmointikielistä koskaan, ja ainakin omissa projekteissamme sen osaaminen on edellytys frontin tekemiselle. JavaScriptin suosio perustuu sen monipuolisiin käyttömahdollisuuksiin. Node.js on mahdollistanut JavaScriptin ajamisen selainten ulkopuolella, ja sille on olemassa työkaluja, joilla front-end- koodista saa koottua selaimessa pyörivän bundlen palvelimen puolella. Noden bundlessa tulee mukana vain tarvittava koodi koko JS-kirjaston sijaan.

TypeScript

TypeScript on JavaScriptin päälle tehty vahvaan tyypitykseen tarkoitettu laajennus. TypeScriptin avulla muuttujien ja parametrien tietotyypit määritellään käsin, minkä ansiosta IDE:t pystyvät havaitsemaan monia tyypillisiä virheitä jo ennen koodin ajoa. TypeScriptin osaaminen voi olla hyödyllistä, sillä etenkin projektin tai ohjelmiston paisuessa TypeScript parantaa ylläpidettävyyttä ja ehkäisee tyypillisiä virheitä koodissa. Joitain samoja etuja voidaan kuitenkin saavuttaa myös esim. PropTypeillä

Vue

Vue on Reactille vaihtoehtoinen JavaScript-framework käyttöliittymien rakentamiseen. Perusperiaatteet siinä ovat samat kuin Reactissa mutta syntaksi on kuitenkin eri. Reactiin verrattuna Vue on kattavampi framework, jolla tehdään samankaltaisia komponentteja kuin Reactilla. Vue vaikuttaa olevan suosittu erityisesti Kiinassa, ja siihen löytyy paljon kiinankielistä dokumentaatiota. 

Amazon Web Services eli AWS

Nykyisin useimmat web-sovellukset rakennetaan pilveen. Siksi ymmärrys ja osaaminen pilviteknologioista on frontin tekemisessä ehdottomasti eduksi, joskaan ei välttämätöntä. Omissa projekteissamme selvästi käytetyin pilviympäristö on Amazon Web Services eli AWS. AWS:n työkalujen avulla sovelluksiin on mahdollista liittää vaikkapa käyttäjähallintaan liittyviä toiminnallisuuksia ilman vahvaa back-end -osaamista. Lisäksi AWS sisältää työkaluja esimerkiksi virhelokien tarkasteluun, ja siksi frontissa on hyödyksi, jos osaa käyttää näitä sovelluksia. Niiden avulla voi esimerkiksi selvittää, onko koodiin liittyvä ongelma frontin vai back-endin puolella.

CSS

CSS on tyylikieli, jolla tehdään ohjelmiston ulkoasu, ja sitä on osattava frontissa, sillä käyttöliittymän tyylittelyt tehdään sillä. CSS:ää kirjoitettaessa on otettava huomioon selaintuki. Kaikki selaimet tai niiden versiot eivät nimittäin tue kaikkia olemassaolevia CSS-lauseita, tai ne voivat käyttäytyä eri tavalla selaimesta riippuen. CSS:n esiprosessorit SASS ja LESS puolestaan käyttävät omaa määrittelykieltä, jolla lopullinen CSS-tyylitiedosto generoidaan. SASS:n tai LESS:n käyttö parantaa tyylimäärittelyn ylläpidettävyyttä.

Muut 

Muita omissa projekteissamme käytettyjä teknologioita ovat mm. MobX, joka joissain tapauksissa voi olla vaihtoehto Reduxille ja Flutter, joka puolestaan on vaihtoehto React Nativelle. Osassa projekteistamme on käytössä lisäksi UI-komponenttikirjastot Material-UI ja Semantic-UI. 

Lue lisää osaamisestamme tai kurkkaa viimeisimmät kuulumisemme!

Jaa artikkeli:

Jutun kirjoitti:

Joni Laihonen

Software Consultant

 

Teemu Sinkkonen

Software Consultant

Tuoreimmat jutut:

Oletko kiinnostunut palveluistamme?

Ratkomme digitaalisuuden haasteita innovatiivisesti ja luotettavasti.