Kehityskäytännöt Evermadella 2022

Evermade on kokonaisvaltainen digitoimisto, joka suunnittelee, toteuttaa, markkinoi, optimoi ja ylläpitää verkkopalveluita, verkkosivustoja, sovelluksia ja verkkokauppoja. WordPress on ydinosaamistamme, mutta työskentelemme myös muiden alustojen parissa. Työskentelen Evermadella teknologiajohtajana ja tässä artikkelissa kerron, kuinka kehitystiimimme toimii ja millaisia työkaluja käytämme. Tämä on neljäs kehityskäytäntöjämme käsittelevä teksti. Aiempien vuosien versiot löytyvät täältä: 2017, 2019 ja 2020.

Jaakko Alajoki, 21.11.2022

Johdanto

Näistä kirjoituksista on mielestäni ollut paljon hyötyä, ja näin olen kuullut myös muilta. Lähes jokainen Evermadelle kehittäjän hommiin hakenut on lukenut nämä blogitekstit ennen haastattelua. Uskon myös, tekstini voi auttaa jotakuta kehittäjäyhteisössä. Olenkin saanut viestejä muissa toimistoissa työskenteleviltä ihmisiltä ja meillä on ollut todella hyviä keskusteluja.

Kehittäjätiimimme

Aloitetaan tiimeistämme. Tätä kirjoittaessani meillä on 50 työntekijää, joista puolet on kehittäjiä. Evermade on jaettu useampaan asiakkuustiimiin, joista jokaisella on omat asiakkaansa ja kaikki palveluiden rakentamiseen tarvittavat ammattilaiset: projektipäälliköt, suunnittelijat, kehittäjät, analyytikot ja SEO-asiantuntijat. Yksittäisen tiimin koko on noin kymmenen henkilöä ja jokaisessa tiimissä on 4-5 kehittäjää.

Asiakkuustiimien lisäksi meillä on yksi jatkuvaan kehittämiseen ja ylläpitoon omistautunut tiimi, tukitiimi, kasvumarkkinoinnin tiimi ja admin-tiimi.

Kehittäjät työskentelevät asiakkuus- tai ylläpitotiimeissä. Jokaisessa asiakkuustiimissä on johtava kehittäjä, joka on vastuussa devaajien hyvinvoinnista ja osaamisesta tiimissä. Työ sisältää esimerkiksi kehittäjien tukemista projekteissa, tiimiläisten valmentamista ja kehittäjätapaamisten järjestämistä. Lisäksi meillä on senior-kehittäjiä, joilla on yleensä laajennettu vastuualue, kuten joidenkin sisäisten työkalujen hoitaminen tai muiden valmennus. Teknologiajohtajana teen parhaani varmistaakseni, että kaikki nämä toiminnot sujuvat kitkattomasti. Ja olen tietysti myös vastuussa tällaisten postausten kirjoittamisesta.

Ydinteknologiamme

Evermade on WordPress-toimisto. Emme ajattele, että yksi työkalu tai teknologia olisi ratkaisu kaikkiin ongelmiin, ja tutkimme jatkuvasti myös muita alustoja – mutta noin 80 % liikevaihdostamme tulee WordPress-projekteista. Työskentelemme myös HubSpot CMS:n parissa ja meillä on oma HubSpotiin erikoistunut tiimi. Muutamissa projekteissa olemme käyttäneet myös Contentfulia.

Verkkokauppoja rakennamme WooCommercella ja Shopifylla. Rakennamme myös mobiilisovelluksia, jotka ovat joko progressiivisia verkkosovelluksia tai React Native -sovelluksia.

Tapaamiset ja koulutukset

Tiedon jakaminen ja muiden inspiroiminen on erittäin tärkeä osa työtämme. Meillä on paljon erilaisia kanavia tiedon jakamiseen ja sujuvan yhteistyön varmistamiseen.

1. Olemme järjestäneet kuukausittaisia kehittäjätapaamisia niin kauan, kuin muistan. Kehittäjien tapaaminen on tunnin mittainen sessio, jossa jaamme päivityksiä viimeaikaisista muutoksista ja kehityskaarista ja pidämme myös yhden tai useamman pienimuotoisen esityksen jostakin aiheesta.
2. Evermade on jaettu pieniin asiakkuustiimeihin. Jokaisessa tiimissä on noin viisi kehittäjää ja näillä kehittäjillä on myös omat tiimipalaverit.
3. Käytämme Evermadella OKR-mallia. Kokoonnumme kerran kuussa kehittäjätiimin voimin tarkoituksenamme viedä OKR-tavoitteita eteenpäin.
4. Näiden toistuvien tapahtumien lisäksi järjestämme lisäkoulutuksia, joita varten joku tiimistämme valmistelee esityksen. Meillä on ollut koulutuksia esimerkiksi integraatioihin, NGINX-välimuistiin ja saavutettavuuteen liittyen.

Yksi erittäin tärkeä asia on myös #dev-support Slack-kanavamme. Kanava on varattu kehittäjien kohtaamille ongelmille. Jos on jotain kysyttävää, niin tiimikaveri #dev-support -kanavalta osaa todennäköisesti auttaa.

Meillä on myös oppimispäiviä. Evermadella voi käyttää yhden päivän kuukaudessa uuden oppimiseen. Devaaja itse päättää aiheen, kunhan se liittyy jollakin tapaa työhön. Oppimispäivän raamit eivät ole kovin tiukat – oppimiseen voi käyttää esimerkiksi kaksi puolikasta päivää tai matkustaa haluamaansa konferenssiin. Mikä ikinä tukeekin oppimista parhaiten.

WordPressin parissa työskentely

Pilvikehitys

Suurin osa kehitystyöstämme tapahtuu pilvipalvelimilla. Käytämme UpCloudia infra-palveluntarjoajanamme ja jokaisella kehittäjällä on oma Ubuntu-instanssi käynnissä. WordPressiä ajetaan Dockerin -konteissa. Kaikki prosessointi (esim. Webpack) tapahtuu kyseisellä palvelimella, ei paikallisesti.

Tällä lähestymistavalla on selviä etuja:

• Ympäristöt ovat tasa-arvoisia. Jos jotakin outoa tapahtuu, voimme olla melko varmoja siitä, ettei ongelma johdu ympäristön erilaisesta konfiguroinnista.
• Kaikki voivat käyttää kaikkia instansseja. Näin toisten auttaminen tai toisen työn jatkaminen on helppoa.
• Pystymme työskentelemään lähes millä tahansa saatavilla olevalla kannettavalla tietokoneella.
• Keskitetty pilviympäristö on turvallisempi verrattuna vaihtoehtoon, jossa projektit tallennetaan paikallisesti kannettaville tietokoneille.

Kaikki kehittäjämme käyttävät kehittämiseen Visual Studio Codea, joka tukee erinomaisesti tiedostojen etämuokkausta. Käytännössä koodaillessa ei edes huomaa, että tiedostot ladataan palvelimelta.

Pilvipohjaisella kehityksellä on tietysti myös joitakin huonoja puolia:

• Pilvipalvelimien käyttö sisältää kiinteitä kustannuksia.
• Jotkut kehitystyökalut vaativat erityisiä säätöjä, koska kehitysympäristö ei ole omalla koneella.
• Pilvipohjainen kehitys vaatii vakaan internet-yhteyden.

Kaikkea työtä ei tehdä näillä virtuaalikoneilla. Esimerkiksi puhtaissa React-projekteissa tämä ei ole järkevää. Etäinstanssia ei myöskään ole pakko käyttää – tosin toistaiseksi kaikki näin tehneet.

Dockerin käyttö

Kaikkia WordPress-projektejamme ajetaan Dockerilla. Kutsumme meidän Docker-alustaa Mayhemiksi. Dockerin konfiguraatiot huolehtivat NGINX:n, FastCGI-välimuistin, PHP-FPM:n ja MariaDB:n suorittamisesta. Meillä on projektin repossa kehitys-, staging- ja tuotantokokoonpanot. Hallitsemme eri ympäristöjen konfiguraatioita versionhallinnan kautta ja voimme näin varmistaa, että eri ympäristöt pysyvät hallinnassa. Tämä tekee myös palveluiden siirtelystä triviaalia. Rakennamme projektista Docker imagen, jonka voimme käynnistää helposti eri ympäristöissä.

Aiemmin ajoimme monia työkaluja Docker-konteissa. Esimerkiksi nodea ja composeria. Nykyään asennettua noden versioita voi kuitenkin helposti hallita esimerkiksi nvm:llä, joten olemme luopuneet työkalujen paketoinnista Docker-imageiksi.

Olemme automatisoineet joitain yleisimmistä Docker-tehtävistä sisäisellä em helper -työkalullamme. Se helpottaa projektien pyörittämistä sekä joidenkin automaatiotehtävien suorittamista, kuten tietokannan migraatiota ympäristöjen välillä.

Perusteema ja Gutenberg

Olemme hiljattain uudistaneet perusteemamme täysin Gutenberg-yhteensopivaksi. Kutsumme tätä Evermade Studioksi. Filosofiamme on se, että teema on käyttövalmis ja lisäksi hyvä pohja jatkokehitykselle. Olemme myös siirtäneet paljon teemamme ominaisuuksia lisäosiin. Liiketoimintalogiikka on jaettu omaan laajennuksensa (katso ominaisuudet alla) ja jokainen mukautettu lohko on erillinen lisäosa.

Tämä tekee itse teemasta erittäin kevyen. Teemassa on malleja joillekin perusnäkymille ja valmiit webpack-konffit. Se myös piilottaa ylläpidosta turhia asioita. Evermade Studiossa on lisäksi tyylittelyt Gutenbergin ydinlohkoille.

Gutenberg-lohkot

Teimme päätöksen olla käyttämättä ACF:ää lohkojen luomiseen, vaikka sitä paljon toimialalla käytetäänkin. Teimme vuosia saitteja ACF:n flexible layouttien avulla ja olisikin ollut helppoa aloittaa Gutenberg-lohkojen rakentaminen. Tässä ei sinänsä olisi ollut mitään vikaa, mutta toisaalta emme nähneet tähän erityistä syytäkään. WordPress tarjoaa hyvät työkalut ja ohjeet natiivilohkojen tekemiseen ja käyttökokemuksen saa hierottua natiiveilla lohkoilla paremmaksi.

Kehityskokemus on natiivilohkoilla hieman erilainen kuin ACF:llä. ACF:n kanssa lohkojen tekeminen on suhteellisen suoraviivaista. Natiivi Gutenberg tarjoaa kuitenkin useita vaihtoehtoja toteuttaa lohko:

• Staattinen natiivilohko
• Natiivilohko palvelinpohjaisella renderöinnillä
• Natiivilohko React-käyttöliittymällä
• Useista lohkoista koostuva lohkoryhmä (pattern)
• ACF-lohko

Työskentely Gutenbergin kanssa on ACF:ään verrattuna joustavampaa, mutta vaatii hieman ajattelua ennen kuin syöksyy koodaamaan.

Natiivilohkot ja jokaisen lohkon pitäminen erillisenä lisäosana pakottaa meidät tekemään lohkoista itsenäisiä ja riisumaan riippuvuudet pois. Näin voimme kopioida lohkoja projektista toiseen, mikä parantaa tuottavuutta.

Lisäosien käyttö

Lisäosat ovat WordPress-ekosysteemin suurin ja myös pelottavin osa. On tietysti mukavaa, että käytettävissä on todella paljon työkaluja, mutta samalla on vaikeaa yrittää poimia massasta oikein tehtyjä, luotettavia lisäosia.

Yleinen nyrkkisääntömme on, että yritämme välttää lisäosien asentamista aina, kun mahdollista. Valitsemme työkalumme erittäin huolellisesti.

On kuitenkin joitakin hyödyllisiä lisäosia, jotka asennamme melkein kaikissa projekteissamme:

• ACF
• Relevanssi
• Gravity Forms
• Redis cache (jos Redis on käytössä)
• Polylang
• Yoast SEO
• WP Mail SMTP

Täytyy myös myöntää, että käytämme joskus Wordfenceä. Tiedän, että se on paljon moitittu lisäosa, sillä on suorituskykyongelmia, sen tiedetään aiheuttavan outoa toimintaa ja sen historia on ollut tietoturvaongelma itsessään. Wordfence tarjoaa kuitenkin joitain helppoja plug and play -tyyppisiä ratkaisuja tiettyihin tietoturvatapauksiin, kuten monitorointii, audit logitukseen ja adminin suojaamiseen.

Evermade Features -lisäosa

Räätälöityjä toimintoja varten olemme ottaneet käyttöön lisäosan nimeltä Evermade Features. Tämä on itse asiassa uusi asia edellisiin vuosiin verrattuna. Aiemmin niputimme suurimman osan toiminnoista teemaomme, mutta nyt ideana oli erottaa toiminnallisuus omaan lisäosaan.

Lisäosa tekee asioita, kuten:

• Määrittää mukautetut sisältötyypit
• Määrittää mukautetut taksonomiat
• Tarjoaa valmiita CLI-komentoja ja pohjan kehittää omia
• Lisää admin-ajax- ja REST-endpointit
• Tekee kaikki muut projektikohtaiset asiat, kuten integraatiot ja actionit/filtterit

Muutama sana Reactista

Käytämme Reactia pääasiassa kolmeen asiaan:

• Gutenberg-lohkojen luominen
• Monimutkaisten käyttöliittymien luominen (kuten suodatetut näkymät, monivaiheiset lomakkeet jne.)
• Räätälöidyt sovellukset, kuten PWA:t

Olemme tehneet lohkoille boilerplateja ja frontendia, joita voidaan laajentaa tai muokata tarpeiden mukaan. En mene tässä kohtaa syvälle React-toteutuksiin, mutta on voin sanoa, että Evermadella keskivertokehittäjä tarvitsee vähintään perustiedot Reactista.

Sovelluksia varten meillä ei ole mitään valmista mallia, vaan kehittäjämme tehdä saavat tehdä päätökset jokaista yksittäistä projektia koskien.

Käyttöönotot ja palvelimen infra

Ensisijainen hostausratkaisumme on ylläpitää sivustoa UpCloudin datakeskuksessa. Infrastruktuurin luomme ja ylläpidämme itse. Pohjimmiltaan se tarkoittaa joukkoa Linux-palvelimia, joista jokainen käyttää Docker-kontteja. Olemme tutkineet WordPress-as-a-service –palveluita, kuten Seravo ja WP-Engine, mutta päättäneet kuitenkin pyörittää sivustoja itse. Näin meillä on täysi määräysvalta (ja tietysti myös vastuu) käyttää sivustoja haluamallamme tavalla. Tämä tarkoittaa myös sitä, että meillä on omaa, arvokasta DevOps-osaamista. Suuret sivustot vaativat usein räätälöityä infraa, ja meille on tärkeää, että pystymme toimittamaan sitä asiakkaillemme.

Seuraamme sivustojemme käytettävyyttä ja palvelinresurssien käyttöä Hetrix Toolsilla. Tämän lisäksi meillä on räätälöity ratkaisu diagnostiikkatietojen keräämiseen sivustoilta (esim. lisäosaversiot). Keräämme tietoja palvelinten tilasta Podiolla, joka on hyvä, kustomoitava alusta tietojen keräämiseen ja järjestämiseen.

Automatisoitu testaus

Automatisoitu testaus on monesti kehittäjien mielestä siistiä ja jotakin, jota kaikkien tulisi tehdä. Todellisuudessa kunnollisen end-to end -testauksen luominen ei ole useinkaan vaivan arvoista. Olemme kuitenkin luoneet automatisoituja end-to-end -testejä joillekin verkkosivustoille, erityisesti verkkokaupoille ja liidien luomista varten. Automaattiset testit ovat estäneet meitä viemään rikkinäistä koodia tuotantoon. End to end -testaukseen käytämme Cypress.io-työkalua, jonka integroimme Bitbucket Pipelinesiin.

Sivustojen huolto ja jatkuva kehitys

Kun sivustoprojekti on valmis ja sivusto julkaistaan, siirretään se Care-tiimillemme. Care auttaa asiakkaitamme jatkokehittämään sivustojaan ja huolehtivat sivuston ylläpidosta sekä versioiden päivittämisestä. Kutsun Care-tiimiämme jopa yrityksemme selkärangaksi, sillä Care:

• Ilahduttaa asiakkaita tarjoamalla nopeita ratkaisuja heidän tarpeisiinsa
• Ilahduttaa myös projektitiimiä, sillä projektitiimi voi Caren ansiosta keskittyä omaan työhönsä

Kehittäjiä haastatellessa yhdeksi suurimmista eduistamme on osoittautunut se, että meillä on olemassa oleville asiakkaillemme täysin omistautunut tiimi. Näin muut voivat keskittyä puhtaasti projekteihin.

Lue ylläpitopalveluamme koskeva blogikirjoitus.

Muut työkalut

Meillä on myös työkaluja, jotka eivät suoraan liity kehitykseen, mutta saattavat silti kiinnostaa:

• Favro projektinhallintaan
• Google Workspace sähköpostille, kalenterille ja tiedostoille
• Figma layouteille
• Slack viestimiseen (joidenkin asiakkaiden kanssa käytämme Teamsia)

Mitä seuraavaksi?

Tällä alalla jatkuva kehittyminen on tärkeää. Toisaalta sisäinen kehitys vie aina aikaa ja meidän on keskityttävä oikeisiin asioihin. Näitä meillä on tällä hetkellä pöydällämme:

• Syvempi Gutenberg-ymmärrys.
• Evermade Caren prosessien automatisointi (automaattiset päivitykset ja testaus).
• Työkalujemme muuttaminen avoimen lähdekoodin työkaluiksi
• Lisää sisäistä koulutusta.
• Integraatioiden boilerplate, sillä teemme paljon monimutkaisia integrointeja.
• Personointi- ja A/B-testaustyökalut yhdessä Lianan kanssa.

Entäs HubSpot?

Mainitsin aiemmin HubSpotin ja sen kasvavan merkityksen, mutta en käsittele sitä tässä kirjoituksissa. HubSpot on oma aiheensa ja ansaitsee oman blogikirjoituksensa. Tämä julkaistaan myöhemmin, joten pysy kuulolla!

Lopuksi

Siinäpä se tällä kertaa. On aina mukavaa paeta arjen rutiineja ja pysähtyä hetkeksi miettimään, missä mennään. Näiden postausten kirjoittaminen on aina palkitsevaa, sillä se osoittaa, kuinka paljon olemme edistyneet viime vuosina 🙂

P.S. Jos etsit uusia haasteita, käy tutustumassa avoimiin työpaikoihimme!