Kehityskäytännöt Evermadella 2020

On taas aika päivittää devausta koskeva blogitekstimme. Jos olet kiinnostunut siitä, kuinka asiat ovat meillä kehittyneet, käy lukemassa aiemmat versiot vuosilta 2017 ja 2019. Kirjoitamme näitä postauksia pääasiassa kahdesta syystä:

Jaakko Alajoki, 07.10.2020

1. Osallistuaksemme yhteisön toimintaan. Toivomme, että ihmiset oppivat blogikirjoituksistamme jotakin, ja me taas toivomme saavamme yhteisöltä arvokasta palautetta. 
2. Kertoaksemme potentiaalisille työnhakijoille, kuinka työskentelemme. Suurin osa meille töihin hakevista devaajista on lukenut nämä artikkelit.  

Tämä postaus ei ole lyhyimmästä päästä, joten ota kuppi kuumaa ja sukella devauksen maailmaan! 

Tasapainoilua vapauden ja rajoitusten välillä

Devaajat pitävät vapaudesta. Täydellisessä maailmassa devaaja voisikin ottaa käyttöönsä minkä tahansa työkalun – tai ainakin sen, joka sopii parhaiten projektin vaatimuksiin. Idea kuulostaa houkuttelevalta, mutta todellisuus on lähes aina toisenlainen.  

Rajat eivät kuitenkaan ole vain huono asia. Tietyt suuntaviivat yhtenäistävät prosesseja ja tuottavat usein parempia tuloksia. Olemme löytäneet boilerplate-koodista ja muutamasta ohjenuorasta kolme tärkeää hyötyä:   

• Resursointi on helpompaa – ihmiset voivat siirtyä projektista toiseen ilman suurempia haasteita.  
• Ylläpito on helpompaa – eri ihmiset voivat kehittää ja ylläpitää samoja projekteja minimaalisella kitkalla. 
• Tuottavuus lisääntyy – yhtenäiset työkalut auttavat kaikkia kehittymään ja parantamaan tuottavuuttaan.  

Suuntaviivojen tarkoitus ei ole rajoittaa luovuutta, vaan nimensä mukaisesti antaa luovuudelle suuntaa. Kokeilemme ja testaamme jatkuvasti uusia työkaluja ja tarvittaessa uusia löydöksiä otetaan mukaan yhteiseen alustaan. Lisäksi kannustamme kaikkia ehdottamaan muutoksia työskentelytapoihimme.

Tärkeimmät teknologiat

Evermaden missio on auttaa asiakkaitaan menestymään verkossa. Tämä kuulostaa melko epämääräiseltä, kuten missiot yleensäkin – mutta käytännössä kehityksen kannalta se tarkoittaa verkkosivustojen, verkkokauppojen ja verkkopalveluiden rakentamista. Noin 80% liikevaihdostamme tulee WordPress-projekteista, eli meitä voi hyvin kutsua WordPress-toimistoksi. Nimityksessä ei ole mitään vikaa, kunhan muistetaan, että olemme avoimia myös muille sisällönhallintajärjestelmille.  

HubSpot on saavuttanut yhä enemmän suosiota vuosien varrella, ja se voidaankin nykyään laskea yhdeksi keskeisistä työkaluistamme. Meillä on oma HubSpot-tiimimme, joka keskittyy yksinomaan HubSpot-projekteihin.

Javascript-frameworkeista React on nykyään olennainen osa työtämme ja erityisen tärkeä rakentaessa monimutkaisempia frontendeja sekä verkkosovelluksia.

Verkkokauppaprojekteissa käytämme Shopify- ja WooCommerce -alustoja.

Jos WordPress ei sovellu projektin tarpeisiin, niin olemme tehneet backend-toteutuksia Node.js:llä ja Express-frameworkilla.

Ensisijaiset työkalut 

Tärkeimmät työkalumme ovat pysyneet suhteellisen muuttumattomina parin vuoden ajan. Versionhallintaan käytämme pääasiassa Bitbucketia. Olemme pohtineet GitHubiin siirtymistä iät ja ajat, mutta tällä hetkellä olemme riippuvaisia ​​Bitbucketin Pipelinesista – siirtyminen GitHubiin tuskin olisi vaivan arvoista. Avoimen lähdekoodin projekteissamme käytämme kuitenkin GitHubia. Projektien seurantaan käytämme Trelloa ja asiakkaiden kanssa kommunikoimme pääasiassa Basecampin ja Slackin avulla. 

Editorit

Kehittäjämme voivat vapaasti käyttää mitä tahansa editoria, kunhan he ymmärtävät .editorconfigia ja heidän valintansa tukee Prettieriä. Tällä hetkellä kaikki devaajamme käyttävät Visual Studio Codea (aiemmin listalla olivat myös Atom, Sublime Text, Emacs ja Neovim).

Pilvipohjainen kehitys

Tiimimme työskentelee pilvessä toimivilla virtuaalisilla Ubuntu Linux- koneilla. Virtualisoidussa ympäristössä työskentelyssä on muutama etu paikalliseen kehitykseen verrattuna:

• Voimme käytännössä työskennellä millä tahansa tietokoneella.
• Keskitetty pilviympäristö on turvallisempi, kuin projektien tallentaminen paikallisesti kannettaville tietokoneille.
• Ympäristöt ovat identtisiä, mikä auttaa meitä jäljittämään ja etsimään vikoja. 
• Kaikki voivat käyttää kaikkia instansseja. Näin kaverin auttaminen tai kollegan töiden jatkaminen on helppoa.

Palvelimemme sijaitsevat UpCloudin Helsingin datakeskuksessa ja viive toimistollemme on minimaalinen. Käytämme VSCoden etämuokkausta tai SSHFS:ää etätiedostojärjestelmän liittämiseen.

Pilvipohjaisella kehityksellä on tällä hetkellä kaksi haittapuolta: 

• Se on kalliimpaa kuin paikallinen kehitys, koska tarvitsemme kaikille virtuaalipalvelimet.
• Jotkut työkalut edellyttävät erityistä konfiguraatiota, koska dev-ympäristöä ei suoriteta paikallisesti (esimerkiksi Swagger-esikatselu).
• Pilvipohjainen kehitys vaatii vakaan Internet-yhteyden, joten etänä tai syrjäisissä paikoissa työskentely voi olla haastavaa.

Jotkut ihmiset työskentelevät paikallisissa ympäristöissä, esimerkiksi React- tai Node.js -projekteissa. Tämän määrittää pääasiassa kehittäjän oma mieltymys. 

UpCloud kirjoitti meistä blogissaan alkuvuonna 2018: Case Study: How Evermade cloudified their infrastructure

Käytämme kaikkeen Dockeria

Hyödynnämme kehitysympäristössämme voimakkaasti Dockeria. Docker ja Git ovat ainoat pakolliset paikalliset työkalut, kaikki muu voidaan ajaa Docker-containereina.

Tämä lähestymistapa eliminoi ongelmat esimerkiksi niiden välillä, joilla on erilaiset Node-versiot sekä tekee legacy-projekteissa työskentelystä helppoa. Jos tarvitset vaikkapa Noden versiota 12, käytät vain toista Docker-imagea. Docker on myös kätevä tapa pitää kehityskoneet siisteinä.

Jokainen projekti toteutetaan projektikohtaisella Docker-stäkillä, jolloin kaikki projektin vaatimat työkalut ja paketit ovat sisäänrakennettu osa kokonaisuutta. Näin meidän tarvitsee vain pystyttää Docker-kontit ja ryhtyä töihin.

Jatkuva toimitus

Käytämme Bitbucket Pipelinesia projektien buildaamiseen ja tuotantoonvientiin. Kun stagingia tai tuotantohaaraa päivitetään versionhallinnassa, Pipelines käynnistyy automaattisesti ja rakentaa uuden Docker-imagen. Pipelines myös vie aina uusimmat kuvat tuotantoympäristöihin Docker Hubin avulla.

WordPress-kehitys

Olemme kehittäneet oman WordPress-pohjan, Mayhemin. Se huolehtii muunmuassa:

• Docker-kehitysympäristön luomisesta
• PHP / WordPress -lisäosien riippuvuuden hallinnasta Composerilla  
• Dockerisoidusta staging ja production -konfiguraatiosta
• Bitbucket Pipelines -konfiguraatiosta
• Projektien setup-skripteistä 

Olemme aiemmin käyttäneet esimerkiksi Bedrockia, mutta päätimme rakentaa oman työkalun, sillä yksikään olemassa oleva ratkaisu ei täysin vastannut tarpeitamme. 

Yritämme välttää liiallista lisäosien käyttöä ja olemme tarkkoja siitä, mitä lisäosia asennamme. Nämä lisäosat ovat käytössä lähes jokaisessa projektissamme:

• ACF
• Gravity Forms
• WP Super Cache
• Redis cache (jos Redis on aktivoitu)
• Polylang
• Yoast SEO
• WP Offload S3
• WP Mail SMTP

Integraatiot ovat tänä päivänä osa lähes kaikkia verkkosivustoja, ja mekin teemme niitä nykyään paljon. REST ja GraphQL ovat yleisimpiä, mutta joskus painimme SOAP:n tai brutaalisti CSV-tiedostojen parissa.

Integraatioissa keskitymme näihin:

• Jatkuvuus. Jos integrointi epäonnistuu, voimme jatkaa integraatiota siitä mihin se jäi.
• Yksityisyys. Integraatiot yleensä mahdollistavat pääsyn yksityisiin tietoihin, joten käyttöoikeudet on rajattava tarkkaan.
• Seuranta. Meidän tulee tietää, milloin integraatio toimii ja erityisesti, jos se ei toimi.   
• Dokumentaatio. 

SSL / TLS: n konfigurointiin käytämme Let’s Encryptiä. Valvomme myös varmenteitamme jatkuvasti, jotta sertifikaattien vanhentumisia ei tapahtuisi. 

Jokaisella verkkosivustolla on kehitysympäristö(jä), staging-ympäristö, sekä tuotantoympäristö. Palvelinympäristönämme käytämme UpCloudia. Olemme automatisoineet palvelinten luonnin UpCloud-rajapintaa hyödyntäen.

Tarjoamme WordPress-ylläpitoa osana Evermade Care -palveluamme. Päivityksistä ja ylläpidosta huolehtii siis kehittäjistä koostuva Care-tiimimme. Olemme poistaneet käytöstä automaattiset päivitykset ja käytämme composeria riippuvuuksien päivittämiseen. Sivustot testataan aina staging-ympäristössä ennen käyttöönottoa.

Frontend & React

Käytämme omaa pohjateemaamme Everbloxia, joka on saatavilla GitHubista. Se on teema, jossa on kiinnitetty huomiota erityisesti sisällöntuottajien käyttökokemukseen ja kehittämisen helppouteen. Sen mukana tulee huolella valittu joukko eniten käytettyjä verkkosivustojen rakennuspalikoita (kuten hero-elementti, kolumnit, luettelot, filtteröitävät listat jne), ja teema on heti käyttövalmis. Samalla se on helposti muokattavissa ja suunniteltu tarjoamaan jatkokehitykselle hyvät lähtökohdat. 

Tällä hetkellä Everblox perustuu ACF:n Flexible content -toimintoon. Meillä on Everbloxin Gutenberg-versio jo tehtynä, mutta se ei ole vielä tuotantovalmis. 

Everblox käyttää SCSS:ää. Nimeämme luokat BEM-nimeämiskäytännöllä ja preprosessointiin käytetään Webpackia. Webpack hoitaa myös Javascriptin bundlaamisen ja esimerkiksi Reactin käyttö onnistuu projekteissa ilman sen suurempaa säätämistä.

Tavallista JavaScriptia kirjoitetaan ilman frameworkeja. Monimutkaisten toimintojen tai muiden kuin WordPress-frontend -projektien osalta käytämme yleensä Reactia. Meillä ei ole mitään valmista alustaa Reactin käyttöön, ja kehittäjät valitsevatkin kirjastonsa projektin vaatimusten perusteella. Sanoisin, että jokin tällainen on nykyään tyypillisin joukko työkaluja React-projekteissa:  

• Create React app
• TypeScript
• Redux
• Redux-thunk
• Framer motion
• React router
• Styled components

Muita kirjastoja käytetään projektista riippuen. 

Olemme testailleet myös Vue:ta ja Angularia, mutta päätimme keskittyä Reactiin. Lisäksi olemme kokeilleet React Nativea.

Muut backendit

Vaikka suurin osa projekteistamme on WordPress-pohjaisia, työskentelemme myös muutaman Node-projektin parissa. Stack valitaan tietysti aina tapauskohtaisesti, mutta viime aikoina olemme käyttäneet esimerkiksi:

• Node.js
• Express
• Typescript
• Sequelize
• Jest

Jotkut projektit käyttävät myös Amazonin serverless-stackeja.   

Mitä seuraavaksi?

Tällä hetkellä meillä on useita tavoitteita devauksen kehittämiseen liittyen. Siellä täällä on tehtävä pieniä parannuksia työnkulun optimoimiseksi. Tällä hetkellä keskitymme esimerkiksi TypeScriptin tuomiseen osaksi päivittäistä työnkuvaamme.

 Analytiikka antaa meille syvempää ymmärrystä siitä, kuinka onnistumme projekteissamme. Datan integrointi osaksi lopputuotteitamme on erittäin tärkeää. Vaikka HubSpot saavuttaa tällä hetkellä suosiota nopeasti, se ei ole kaikille asiakkaillemme sopiva työkalu. Tutkimmekin tällä hetkellä sitä, kuinka markkinoinnin automaation ominaisuukset voisi tuoda WordPressiin. 

Yksityisyys ja tietoturva ovat verkkopalveluissa aina vain tärkeämpiä asioita, ja työskentelemme jatkuvasti niitä parantaaksemme.  

Lopuksi

Kuten varmaankin huomasit, meillä on paljon ideoita kehityskäytäntöjemme parantamiseksi, mutta pyrimme samalla pitämään työskentelyssämme tietyn vakauden ja yhdenmukaisuuden. Tämä varmistaa jatkuvan korkealaatuisten tulosten tuottamisen. Mielestäni kyse on viime kädessä vapauden ja rajojen tasapainottamisesta.

Kerro meille, mitä mieltä olet! Puuttuuko meiltä mielestäsi jotakin olennaista? Teemmekö jotakin, missä ei ole järjen hiventäkään?