Työtavat ja työvälineet kehittyvät jatkuvasti. Tässä kirjoituksessa avaamme salaisuuksien lipasta ja kerromme miten ja millä Agendassa hoidetaan verkkokehitystä ja ohjelmistokehitystä nyt, vuoden 2020 syksyn alkuhetkinä. Mahdollista – ellei jopa luultavaa – on että vuoden mennessä tilanne on jo jotenkin muuttunut.
Kehityksen kannalta jatkuvuus on tärkeää.
Ensiksikin siksi, että kehitys on tiimilaji – kehittäjien yhteistyön samassa projektissa täytyy olla mahdollisimman sujuvaa, kun halutaan varmistaa ettei koodiin synny ristiriitoja. Kun uusia jäseniä liittyy tiimiin, täytyy heidät saada osaksi samaa työn tekemisen mallia ja varmistaa että myös he tuottavat koodia joka on linjassa muiden työn kanssa.
Toiseksi jatkuvuus on tärkeää ajallisesti, sillä kehitystyötä tehdään pitkän ajan kuluessa: myös vuosia myöhemmin täytyy sekä oman tiimin että mahdollisesti muiden kyetä lukemaan, ymmärtämään ja sitä kautta muokkaamaan koodia. Monesti yhteisten kirjastojen ja frameworkien käyttäminen mahdollistaa suurempaa jatkuvuutta kuin täysin yksilöllisesti räätälöityjen omien ratkaisujen käyttö. Koodin kommentointi ja asioiden nimeäminen on myös ensiarvoisen tärkeää jatkuvuuden ja luettavuuden kannalta.
Yleisesti ottaen verkko- ja ohjelmistokehityksen lähihistorian keskeinen teema on ollut valmiiden komponenttien ja apuvälineiden (kirjastojen, frameworkien) yleistyminen. Siinä missä ennen kaikki koodi kirjoitettiin esimerkiksi yhteen css ja js -tiedostoon, perustuu nykyinen työnkulku isoon joukkoon erilaisia valmiita, kehittyneitä ratkaisuja toistuviin ongelmiin.
Versionhallinta
eli miten mahdollistetaan usean eri kehittäjän työskenteleminen saman koodipohjan parissa, pitämään kehitys- ja tuotantoversioiden sekä eri ominaisuuksien kehitys hallittuna.
Versionhallinnan peruskivi on Git – avoimen lähdekoodin versionhallintajärjestelmä. Työnkulku alkaa yhteisen repon (repository, tietovarasto) avaamisella tai kopioimisella. Varsinainen koodi säilytetään täällä.
Lokaalit palvelinympäristöt
eli miten työn kohde saadaan pyörimään omalla koneella.
Nyt pystytetään lokaalipalvelin kehitystyötä varten. Lokaalia palvelinympäristöä käytetään sivustojen pystyttämiseen ja esittämiseen omalla työkoneella. Käyttöjärjestelmän mukaisesti vaihtoehtoja ovat LAMP, WAMP ja MAMP, joista jälkimmäistä käytetään Agendassa. MAMP:in kautta MySQL-tietokantayhteys lukee sisällöt tietokannasta (relaatiotietokanta) ja Apache-palvelin esittää koko roskan (koodin ja sisällöt) selaimessa: Php-koodi käännetään palvelimella selaimen luettavaksi html:ksi.
Lisäksi Node (standalone JavaScript-tulkki ilman selainta) on apuna tietyissä käyttötarkoituksissa: esim. selainyhteensopivien tyylisääntöjen ja pakatun javascriptin luomisessa. Sitä voidaan käyttää myös itse backendinä paikallisesti: Strapin pyöritys toimii Nodella ja sitä voi käyttää myös HTML-palvelimena (npm-paketit).
Tietokanta ja yhteys siihen
eli mihin tiedot tallennetaan.
Seuraavaksi luodaan tietokanta, tai otetaan siihen yhteys. Tietokanta on missä varsinaista sisältöä säilytetään. Se voi olla yhteinen etäkanta tai lokaalikanta: Paikallinen MySQL tai MongoDB, tai esimerkiksi yhteinen tietokone toimistolla, Google Compute Instance, Google SQL, Amazon RDS yms. Tietokantaa luetaan ja muokataan eri konteksteissä eri työkalulla
Kehitysympäristö
eli kehityksen työkalupakki.
Tässä vaiheessa asennetaan tarvittavat apukirjastot ja frameworkit (viitekehykset), ynnä muut mahdolliset apuvälineet kehitystyötä varten.
Yarn/NPM on Noden paketinhallinta, joka mahdollistaa valmiiden kirjastojen käyttöönoton omassa Node-pohjaisessa toteutuksessa. Paketit vaihtelee kevyistä, valmiista JavaScript-luokista natiiveihin puhelinelementteihin ja kaikkea siltä väliltä.
Composer on PHP:n “NPM”. Mahdollistaa back-endille ladattavia, valmiita frameworkkejä.
Webpack/Gulp on SCSS/JS koontityökalu, jolla luettavammat tyylisäännöt ja JavaScript pakataan kompaktimpaan muotoon ja tiedostot yhdistetään. Hyödyntää muita teknologioita muuntamaan uudempaa koodin syntaksia verkkoselainyhteensopivaksi.
Browserify muuntaa Noden “require” lataukset verkkoselain-yhteensopivaksi, eli muodostaa funktioiden riippuvuuspuun ES5-yhteensopivana.
Babel on uusimman ECMAScript (“esnext”) ja TypeScript tulkki, joka muuntaa tuoreimmilla standardeilla tehdyn JS/TS ES5-yhteensopivaksi. Tähän sisältyy myös “import” lausekkeiden muuntaminen yhteistyössä browserifyn kanssa.
TypeScript on Microsoftin ECMAScript-implementaatio, jossa pääpointtina on muodostaa tyyppimäärityksillä laadukkaampaa koodia, jossa virheet näkee ja voi korjata jo ohjelmointivaiheessa
Docker on virtualisointialusta, jossa kokonaisen virtuaalikovalevyn sijaan käyttöjärjestelmäkerros “konfiguroidaan” tekemään haluttuja toimintoja.
React on JavaScript-pohjainen framework, jolla voidaan tehdä joko kokonaisvaltaisia, asynkronisesti toimivia verkkoalustojen frontendejä tai dynaamisia, yksittäisiä elementtejä verkkosivulle
Laravel/Blade on PHP framework esim. rajapintojen tekemiseen, joka mahdollistaa ensisijaisesti luettavamman syntaksin sekä ohjaa koodaamista MVC-tyyppisiin ratkaisuihin.
SCSS on ohjekieli koostamaan verkkosivun lopullinen, pakattu CSS. SCSS ei toimi sellaisenaan verkossa, vaan vaatii tulkin.
Bootstrap on css/js -framework, jossa on valmiina tyylejä ja toiminnallisuuksia. Bootstrap on erittäin laajasti käytetty, joten se mahdollistaa ottamaan nopeasti käyttöön monia universaalisti hyväksi todettuja toteutustapoja. Uusin versio BS5 julkaistaan pian.
BEM on yleinen nimeämiskäytäntö muodostamaan laadukkaita ja johdonmukaisia tyylisääntöjä.
Koodin kirjoittaminen
eli varsinainen ohjelmointi.
Valitaan taski, jota aletaan koodaamaan, ja koodataan. Kirjoittamiseen Agendan kehittäjien suosikki on Visual Studio Code on tekstieditori, jolla koodia kirjoitetaan. Siinä on paljon lisäosia eri toimintoihin ja Git-tuki versionhallinnan tarpeisiin.
Muutokset tallennetaan (commit) omaan lokaaliin repoon: commit on periaatteessa lista tehdyistä muutoksista.
Pull hakee uusimman version siitä oksasta (eli kokonaisuuden osasta) joka sattuu olemaan työn alla. Mahdolliset ristiriidat (jos vaikkapa kaveri on tehnyt muutoksia samaan kohtaan) ratkaistaan manuaalisesti (git conflict). Visual Studio Code visualisoi konfiktit ja mahdollistaa niiden ratkaisun graafisella valinnalla.
Valmiit muutokset pusketaan yhteiseen repoon.
Testaus
Tyypillisin verkkokehityksen testausmuoto on selaintestaus, johon Agendan kehityksen suosikki on laajalti käytetty Browserstack. Selenium mahdollistaa selaintestauksen (ainakin osittaista) automatisointia.
Google Lighthouse on oiva valinta performanssin testaukseen ja pintapuoliseen saavutettavuustestaukseen. Saavutettavuutta voidaan testata lisää SiteImprovella ja Axella.
Lisäksi käytämme Postmania rajapintojen testaamiseen.
Miltä työnkulun tulevaisuus näyttää
Keskustelua aiheuttaa pian julkaistava Bootstrap 5: Internet Explorer 11 -selaimen tuki on siinä tiputettu pois kokonaan. Lisäksi syöttökenttien ulkoasua on muunnettu, yleisen BS asetukset nojaavat enemmän CSS3-muuttujiin (:root{ –muuttuja:”arvo”; }), jolloin niitä voi esim Php-koodissa vaihtaa. Myös jQuery on tiputettu pois.
Oman porukan sisällä intohimoja on herättänyt Flutter, joka on Googlen iOS/Android/Web natiivien ohjelmien framework. Ainakin tästä aiheesta on seuraamassa oma artikkelinsa.
Isoja teemoja vaikuttaa olevan myös Cross-platform: yhden koodin kääntäminen eri alustoille. Tähän liittyvät mm. yllä mainittu Flutter, React Native (React-räätälöity JS-tulkki mobiilille) ja NativeScript (Yleispätevämpi JS-tulkki mobiilille, mahdollistaa esim. Angular-toteutuksen natiivina sovelluksena).
PWA, SPA eli “Progressive Web Apps” tarkoittaa että sama websovellus on konfiroitu tukemaan “App”-tilaa, jossa kyseinen verkkosivu toimii omassa ikkunassaan ja omaa kuvakkeen käyttöjärjestelmässä. Tällöin sitä voidaan käyttää ns. offline-tilassa. Tämä tosin edellyttää googlen dokumentoidun ServiceWorker-prosessin konfigurointia, jossa taustaprosessi osaa hallinnoida fetch-pyynnöt ja välimuistittaa datan offline-tilaa varten. Tämä mahdollistaa (väitetysti) paremman tietoturvan ja performanssin.
“Single Page Applications” -aiheeseen liittyy eräänlainen “buumi”, jossa nämä muodostetaan staattisen sivun generaattoreilla perfomanssisyistä.
Pythonin suosio vaikuttaa olevan kasvussa Djangon ansiosta.
Php8 tuo mukanaan JIT (just-in-time) compilerin, joka pähkinänkuoressa nopeuttaa PHP-tulkkia.
Tiedätkö paremmasta? Kerro myös devaustiimillemme: [email protected]