Fronttidevaus on vaikeampaa kuin koskaan...vai sittenkin helpompaa kuin koskaan?

Gulp. Sass. ES6. Mocha. Webpack. React. NPM. Redux. Babel. Less. PostCSS. Flexbox. Websocketit. Vaikuttavan kuuloista namedroppailua voisi jatkaa vaikka kuinka pitkään. Nykypäivänä web-frontend-kehityksen opiskelun aloittaminen nollatiedoista lähtien vaikuttaa monumentaaliselta tehtävältä, ja sitä se kieltämättä onkin. Kun itse aloittelin webbisivujen koodailun joskus kymmenisen vuotta sitten, HTML oli HTML:ää, CSS CSS:ää ja JS JS:ää, niitä kirjoitettiin tekstieditorilla tekstitiedostoihin ja palvelin tarjosi ne käyttäjille sellaisenaan. Devaajan sormista loppukäyttäjän silmiin oli todella lyhyt matka ja kaikki oli yksinkertaista.

Pikkuhiljaa fronttidevaus on kasvanut kohti “oikeaa ohjelmistokehitystä”, ja nykyään kaikki on toisin: jokaiselle selaimen ymmärtämälle kuvaus- tai ohjelmointikielelle löytyy jos jonkinlaisia esiprosessoreita tai päälle kirjoitettuja ohjelmointikieliä jotka lopulta kääntyvät JavaScriptiksi. Työkalut saattavat yksistään olla hyvinkin yksinkertaisia, mutta niiden yhdistely ja siten koko fronttistackin kasaaminen vie helposti päiviä jopa kokeneilla kehittäjillä. Kaikki muuttuu niin nopeasti, että JS-kirjastojen perässä pysyminen vie helposti paljon aikaa. Toisaalta sitten kun palaset saa loksautettua kohdalleen, kehittäminen nykyaikaisten työkalujen kanssa on todella vauhdikasta, kun työn tuloksen näkee välittömästi ilman minkäänlaista tallenna-vaihda selaimeen-paina refresh -akrobatiaa ja virheistäkin varoitellaan ennen kuin ne realisoituvat ajettavassa koodissa.

Ennen työkaluja oli vähemmän ja kaikki oli yksinkertaisempaa, mutta tässä ajatuksessa helposti aika kultaa muistot erään hyvin tärkeän asian suhteen: selaimien kehittymisen mukana niiden standardiyhteensopivuus on kasvanut todella paljon siitä, missä oltiin IE 6:n valtakaudella (tai ennen sitä…). Siinä missä nykyään työkalut elävät ja hakevat muotoaan, selaimet tuntuvat stabiloituneen niin standardiyhteensopiviksi, että suuria eroavaisuuksia esimerkiksi CSS-ominaisuuksien tulkinnan suhteen ei juuri tule. Uusien ominaisuuksien kehitys tapahtuu nopeissa sykleissä ja niiden kehitysaikainen selaintuki on erikseen päällekytkettävien vipujen takana – näin selainspesifisia erikoisuuksia ei jää “vahingossa” elämään.

Niin CSS:ään, HTML:ään kuin JavaScriptiinkin on vuosien varrella tullut uusia ominaisuuksia. Nopea kasvu asettaa toki haasteensa oppimisen aloittamiselle kun kohteen koko on niin suuri, mutta toisaalta monet uudet ominaisuudet joko tuovat täysin uusia mahdollisuuksia web-sovellusten tekemiseen tai helpottavat huomattavasti aiemminkin mahdollisten asioiden toteuttamista: tästä esimerkkinä vaikkapa flexbox.

Fronttikehitys on nykypäivänä kiistatta monimutkainen ja iso kokonaisuus, mutta avainasia on tämä: edelleen vuonna 2016 webbisivujen tekijä voi ottaa Notepadin, kirjoittaa HTML:ää, CSS:ää ja JavaScriptiä index.html-tiedostoon aivan kuin ennen vuosituhannen vaihdettakin, ja asiat toimivat kuten ennenkin. Mikään ei pakota hyödyntämään uusia työkaluja tai JavaScript-kirjastoja. Perinteiset asiat, kuten esimerkiksi CSS box model tai miten this toimii JavaScriptisssä ovat edelleen arvokasta perustietoa, joka jokaisen kehittäjän tulisi ymmärtää. Monesti uusien rajapintojen tai kirjastojen arvioiminen ja nopea ymmärtäminen helpottuu huomattavasti, kun perusasiat on hallussa.

Siitä sitten pikkuhiljaa repertuaaria laajentamaan esimerkiksi modulilataajilla tai esiprosessoreilla. Monien asioiden tekeminen nykypäivän työkaluilla tai CSS-ominaisuuksilla on lopulta huomattavasti helpompaa kuin ennen wanhaan. Kuten sananlasku sanoo: Kuinka norsu syödään? Pieni pala kerrallaan.