Paras ystäväni React

Olenko jo kertonut sinulle Reactista, uudesta parhaasta ystävästäni? Minne minä menen, sinne menee React, ja missä olemmekin, siellä kaikuu ilosanoma Reactin onnesta ja autuudesta.

Kun minulle nykyään sanotaan jonkun muun fronttikirjaston nimi, Angular sitä ja Schmangular tätä, minä sanon "hyi".

Tunteen palo ja intohimo ovat argumentoinnille iloksi, ja kun asiantuntija sanoo ponnekkaasti "yök", päättäjien kannattaisi ottaa se kuuleviin korviinsa. Surullista kyllä, vakuuttaminen ei aina onnistu pelkältä fiilispohjalta. Perusteluja?!? Nehän ovat vässyköille!

Viime viikkoina olen saanut pohtia tyhjästä käynnistyvän ison hankkeen fronttiteknologiavalintoja tavanomaista perusteellisemmin. Olen sukeltanut syvälle omiin argumentteihini, niiden järkeenkäyvyyteen ja puolueettomuuteen. Lisäksi olen hahmotellut ylemmän tason kriteerejä, joiden perusteella voi suorittaa järkevää, neutraalia vertailua eri vaihtoehtojen välillä.

Tämä on ollut hitusen turhauttavaa, mutta palkitsevaa työtä. Ei ole huono taito osata perustella mielipiteitään tarpeen tullen hyvinkin yksityiskohtaisesti, kuin lapselle ikään, ja sen suhteen olen saanut hyvää oppia.

Tarpeettoman tunnelatauksen osalta… no, sanotaan, että siinä tarvitsen vielä lisäoppia.

Eteenpäin!

Frontti on viime aikoina harpponut eteenpäin jättiloikin. Heikompi voisi sanoa, että harppominen on ollut turhankin vauhdikasta.

Kun puhuin viime viikolla DrupalCampissa ensi kuukauden frontista, totesin että että ensi vuodelle tarvitaan uusi presentaatio. Vitsailin, tietysti, mutta kaskussani on kieltämättä vinha perä. Fronttikehityksen pyörät pyörivät perkeleellistä vauhtia, kunnes kaikki ensi viikolla keksitään kokonaan uudelleen.

Muutoksen suhteen on paha mennä sanomaan, mikä on muna ja mikä on kana. Ehkä kyseessä on vain sattumuksien summa. JavaScriptin uusi versio (ES2015) ilmestyy. Babelin ansiosta kaikkea uutta ja siistiä voi käyttää. Uudet taikatyökalut, kuten Webpack, tekevät tekemisestä siistimpää.

Angular, vanhan sukupolven merkittävin airut, tekee julkisen itsemurhan. React on sopivasti valmiina ottamaan kopin turhautuneista. Lumipallo lähtee vyörymään, samaan aikaan kaikkien näiden ja ei minkään näistä ansiosta.

Uhriluku joka tapauksessa kasvaa. Jopa jQuery, tuo uskollisista uskollisin, on käynyt uusissa projekteissa tarpeettomaksi. Backbone, Underscore, Bower ja monet muut enemmän tai vähemmän uljaat urhot voi taluttaa lahdattavaksi samaan kuoppaan, jonka Angular ehti kaivaa itselleen.

Harjoittaakseni liennytystä mustavalkoisten mielipiteideni tiimoilta, Angular on hyvä teknologia, eikä sen todellinen käyttöarvo ota osumaa terävästä kielestäni. Mekin käytämme Angularia useissa projekteissa. Pohdinnoissani on kyse siitä, millä teknologioilla lähtisin tekemään uutta, ja miksi?

Joka kerta kun kuulen A-sanan uuden tekemisen yhteydessä, en voi olla haddockmaisesti hikeentymättä. Senkin ignorantit! Diletantit! Bassi-basuukit!

Valintakriteereistä

On oletettavaa, että tähtäämme sekä työpöydälle että mobiiliin. Sen, mitä olemme rakentamassa, on muodossa tai toisessa toimittava selaimissa ja kännyköissä.

Mitä teknologioita valitsemmekaan, olisi suotavaa että niiden takana on jonkinlainen yhteisö. Yhteisön ei tarvitse tarkoittaa ison firman tukea, vaikka sellaisessakin on puolensa. Ainakin ison nimen henkseleiden paukuttelu luo hankkeelle uskottavuutta -- valheellista vai ei, siihen en ota kantaa.

Joka tapauksessa olisi fantastista, jos valitsemiemme teknologioiden tuki ei jonakin alkutalven pimeänä yönä luikkisi pakoon. Niinkin on tapahtunut.

Trendi kohti komponenttipohjaisuutta on tällä hetkellä vahva. React, Angular 2, Polymer ja monet muut tulokkaat edustavat kaikki komponenttipohjaista ajattelua. Olisi toisin sanoen hauskaa, jos tekemämme jutut olisivat komponenttipohjaisia.

Juttujamme sopii kiinnostaa asiat, joiden avulla ne tekevät jutut joita haluamme niiden tekevän, ei mistä tai miten asiat niille tulevat. Itsenäisinä olisivat komponenttimme helpommin uudelleenkäytettäviäkin!

Valittujen teknologioiden tulisi tukea uusia, elämää parantavia ominaisuuksia, kuten JavaScriptin vuosimallia 2015. Haluamme käyttöömme modernit työnkulut, Webpackin tai vaikkapa Browserifyn päälle rakennettuna.

Kuvien ja CSS:n esiprosessoinnit, kuumat uudelleenlataukset, ihmisten ymmärrettävät virheilmoitukset ja muut ovat toivottavia. Kun lähdemme nollasta ja tähtäämme eteenpäin, menneisyyden taakka ei paina.

Uudelleenkäytettävyydestä on helppo puhua, itse puhuin siitä jo pari kappaletta takaperin, mutta temppu on helpommin sanottu kuin tehty. Olisi kiva, jos juttujamme voisi aikuisten oikeasti uusiokäyttää, eri projektienkin välillä jos siltä tuntuu.

Pienet kirjastot vastaavat uudelleenkäytettävyyteen paljon paremmin kuin monoliittiset sovelluskehykset. Ajan henki on, että kehitys kehittyy, ja pienet osat on ainakin helpompi vaihtaa kun ne menevät vanhaksi.

Kolikon kääntöpuolena pienistä kirjastoista koostuva ohjelmisto päivittyy usein ja osissa. Riippuvuudet on pakko pitää ajan tasalla, ja vaikka ne pitäisi ajan tasalla, kaikki hajoaa joskus silti.

Pahimpia ovat pääkirjastojesi isot päivitykset, koska liimakirjastot ovat luonnollisesti riippuvaisia pääkirjastojen versioista.

Koodarit, nuo pienet rattaat koneistossamme, ovat hauraita mutta tärkeitä. Onnellinen koodari, sanotaan, on tuottoisa. Mitä helpommin ohjelmoija oppii tarvittavat asiat, sitä nopeammin hänestä tulee tuottava. Työkalujemme oppimiskäyrä ei saisi olla liian jyrkkä.

Jos yhteisö on laaja, voimme hyödyntää sen mahtia. Rakentamalla omia juttujamme jo tehtyjen juttujen päälle voimme kohdentaa omat voimavaramme asioihin, jotka tuovat meille todellista lisäarvoa.

Avoimessa lähdekoodissa ja vapaissa ohjelmistoissa on se hyvä puoli, että voimme helposti antaa takaisin jos sille päälle satumme.

Webbisivut ovat niin paljon kauniimpia kun vilkaisee pellin alle!

Angular

Angular on tämän päivän käytetyin JavaScript-sovelluskehys. Se on peräisin Googlelta, mutta se on pajan sisällä vain yksi akateeminen projekti muiden akateemisten projektien rinnalla. Yksikään Googlen korkean profiilin palveluista ei käytä Angularia. Googlen ulkopuolella käyttö on paljon laajempaa.

Angularin tilanne on mielenkiintoinen. Sovelluskehyksestä ilmestyy kohtapuoliin uusi versio, jolla ei ole nimen lisäksi mitään yhteistä ykkösversion kanssa. Tekijöiden tavoitteena on tuoda markkinoille taaksepäinyhteensopivuuskerros, jonka avulla ykkös- ja kakkosversiot voivat elää rinnakkain. Uskallan kuitenkin luvata, ettei yhteiselo tule olemaan helppoa, koska versiot ovat keskenään niin erilaiset.

Olen ensimmäisenä jonossa myöntämässä, kuinka hyvältä Angular "silloin joskus" tuntui. Katsomalla softan oman monimutkaisen jargonin määrää varoituskellojen olisi pitänyt soida. Direktiivi? Linkitys? Transkluusio? Ruuansulatussykli?!? Jep jep. Ei ihme, että tekijät nostivat kätensä pystyyn ja aloittivat alusta.

Ykkösversio ei välittömästi kuole, kun kakkosversio pullahtaa ulos, mutta kehittäjät siirtyvät ennen pitkää johonkin muuhun. Siirtymä on voinut jo hyvinkin tapahtua, tai olla paraikaa tapahtumassa, ja tämä mystinen "joku muu" saattaa olla, mutta ei välttämättä ole, Angular 2. Joka tapauksessa on varmaa, että Angular 1 on siirtymässä ohjelmiston elämässä ensin ylläpito- ja sitten terminaalivaiheeseen.

Koska Angular ykkönen on vanha, se ei suoraan tue uutta JavaScriptiä tai moderneja työnkulkuja. Kolmansien osapuolten tuottamilla lisäpalikoilla herkut saadaan käyttöön, mutta mikään mahti maailmassa ei tee Angular ykkösestä komponenttipohjaista.

Direktiivit voi tehdä "komponenttimaisiksi", mutta niin voi tietotekniikassa monta muutakin neliönmuotoista palikkaa vimmatusti vasaroimalla saada menemään pyöreisiin reikiin. Onko se järkevää jos sen voi välttää? No, eihän se ole.

Angular ykkönen on tunnettu siitä, että se on vaikea oppia. Ja kun sen on oppinut, on oppinut paljon asioita ja termejä jotka ovat merkityksellisiä vain Angular ykkösen maailmassa. Ja vaikka osaisi hommansa, joutuu koodiansa silti hieroskelemaan vaikkapa suorituskyvyn suhteen.

Jotkut raskaasti Angulariin panostaneet ottivat herneen nenäänsä kuultuaan Angular kakkosen erilaisuudesta. Oppimiskokemukset osaavat joskus alallamme olla aika äkkinäisiä ja rujoja. Onneksi oppimista on peruuttaminenkin, siinä missä perintö-angulaaristen sovellusten refaktorointi ja ylläpito. Eipä ainakaan työ lopu.

Angular kakkonen on moderni, TypeScriptillä tehty ja komponenttipohjainen. Kuten isänsä, kakkonen on enemmän sovelluskehys kuin kirjasto, joten sen mukana tulee paljon valmiiksi leivottua ja esipureskeltua palikkaa. Tilanteesta riippuen tämä voi olla joko siunaus tai kirous.

Angular ykköselle on vuosien mittaan tehty paljon ilmaista ladattavaa. Kännykkäsovelluksetkin onnistuvat, monella eri työkalulla ja tavalla.

React

React, yksi Facebookin lahjoista koodimaailmalle, on tämän hetken kuumin JavaScript-kirjasto. Reactin, Reactin ajamien ajatusten ja niiden ympärille syntyneen laajemman ekosysteemin ympärillä tapahtuu juuri nyt todella paljon.

Facebook koodasi Reactin itseään varten. Korporaatio käyttää sitä molemmissa lippulaivatuotteissaan, Facebookissa ja Instagramissa, ja Facebookin ulkopuolella Reactin käyttö leviää räjähdysmäisesti. Netflix tukeutuu Reactiin, ja tuoreimpana WordPress.comin uusi admin-käyttöliittymä tehtiin Reactilla.

Vaikka React on valmis käyttöön, se ei ole vielä "valmis". Pari kertaa vuodessa iso päivitys rikkoo ympäriltään kaiken, ja kestää vajaan kuukauden että asiat vakaantuvat. Kun tähän yhdistää sen, että laajemmassa ekosysteemissä asiat elävät jatkuvasti, voi ymmärtää etteivät kyyneleet silmäkulmissani aina johdu onnentunteesta.

Sinällään Facebookilla on vahva tarve saada versiopäivitykset hoidettua ilman tuskaa. Firmalla on kuuleman mukaan tuotannossa 25 000 React-komponenttia. React kuitenkin on kirjasto eikä sovelluskehys, eikä pelkällä Reactilla synny kummoista webbisoftaa, joten hajoamisilta ei voi välttyä.

React kirjastona on helppo oppia. Siinä on pari konseptia ja muutama elämänkierron funktio. Kun samaan aikaan kuitenkin opettelee uuden JavaScriptin, Webpackin, uudet paradigmat, funktionaalista ohjelmistoa ja kaiken muun diibadaaban, kyllä silläkin pään saa räjähtämään.

Oppimiseni on kokemukseni mukaan ollut yleishyödyllisempää kuin mitä Angular minulle antoi. Reactin ekosysteemin parissa puuhastelu on ollut minulle hyväksi, koska se on avannut ovia uusiin ajatuksiin, jotka ovat tehneet minusta paremman työssäni.

Tuskailusta huolimatta olen alusta asti kokenut Reactin kanssa olevani törkeän tuottava ja huomattavasti iloisempi kuin aikaisemmin fronttia tehdessäni. React tekee monista aikaisemmin vaikeista asioista triviaaleja, ja harvoista ennen triviaaleista asioista mahdottomia.

Uusilla välineillä koodaus on ihanaa. Niin helppoa! Niin puhdasta! Niin mukavaa!

React, toisin kuin Angular, on ajattelematta nopea. Se on komponenttipohjainen, tukee kaikkea uutta ja vänkää, ja kannustaa uudelleenkäytettävyyteen. Viivan alle jää kosolti vihreää.

Reactille on olemassa paljon apukirjastoja ja komponentteja, ja lisää tehdään joka päivä. Kuten totesin, juuri nyt JavaScriptin maailmassa tunnutaan uskovan React-keskeiseen maailmankuvaan. Vaikka kirjasto itsessään jonain päivänä katoaisikin, sen ajamat "uudet" trendit toivottavasti kestävät ajan hammasta.

Suurimmat voitot Reactilla voi saavuttaa mobiilissa. Olette ehkä jo kuulleetkin React Nativesta, pyhästä graalin maljasta, jolla työpöytä-, mobiili- ja webbisovellukset voivat teoriassa jakaa suuren osan koodistaan. On liian aikaista sanoa, mihin kehitys johtaa, mutta se voi hyvinkin johtaa ihanaan paikkaan.

Muita vaihtoehtoja?

Googlen Polymer-hanke on siitä mielenkiintoinen, että se perustuu ihan oikeisiin speksin mukaisiin web-komponentteihin.

Ikävä kyllä selaimet, paitsi Googlen oma Chrome, eivät Polymerin tahtomia juttuja tue. Kukaan ei varmuudella tiedä, tukevatko ne niitä ikinä, joten Polymer on erittäin kokeellinen. Ennen kuin joku huutaa taustalta "baabeloi se!", huomautan että Polymerin vaatimia ominaisuuksia -- esimerkiksi shadow DOMia -- on konstikasta baabeloida uskottavasti.

Moni kirjasto tulee tulevaisuudessa kulkemaan Reactin jalanjäljissä. Esimerkkinä jo ehtineistä mainittakoon suomalainen Riot.

React-kloonit ovat kaikki mielenkiintoisia polkuja seurattavaksi, mutta en itse lähtisi tässä vaiheessa niiden kelkkaan. Vaikka olisivat kuinka hyviä, kopiot kärsivät uskottavuusongelmasta. Niin kauan kuin Facebook on ohjelmistollisia kultamunia muniva hanhi, on Reactin varjosta vaikea ponnahtaa suuren yleisön tietoisuuteen.

Jos kaipaa totaalista ratkaisua, Meteor on jännittävä vaihtoehto. Väittävät, että siihenkin saa kytkettyä Reactin, ja kun nämä kaksi yhdistää, ovat aika monet vaikeat asiat muuttuneet helpoiksi. Mutta siinähän sitten olet, kiinni Meteorin tavassa tehdä asioita, eikä sekään maailma kuulemma autuaaksi tee.

Ember on kuulemma hyvä sovelluskehys sekin, ainakin niin kauan kuin tykkää tehdä asiat Emberin tavalla. Aurelia ansaitsisi tulla huolellisemmin koeajetuksi sekin. Niin monta sovelluskehystä, niin vähän aikaa, aivan liian suuri tyytyväisyys Reactiin ja ihan riittävästi seuraamista pelkästään sen ympärillä tapahtuvassa kuohunnassa.

Jos lähtisin itse tänään rakentamaan uutta webbisoftaa, valitsisin aika pirun monessa tapauksessa fronttiteknologiaksi Reactin ystävineen. Se vaan tuntuu niin hyvältä ja on kaupan päälle järkisyin perusteltavissa!