News banner
News author avatar
Kasperi Pohtinen | WWW/IT vastaava28.3.2024 klo 18.29

Luupin weban uusi aikakausi – aprillipila, joka olikin totta

Sisältö päivitetty: 28.3.2024 klo 18.29

"Uusi weba tulee pian”-lausahdus on varmasti saanut optimistisimmatkin Luuppilaiset pettyneiksi vuosien varrella. Nyt kuitenkin olemme vihdoin saavuttaneet jonkinlaisen kulminaatiopisteen, ja uusi verkkosivusto on vihdoin saatu kaikkien käpisteltäväksi julkiseen alpha-testaukseen. Henkeen hyvin sopien julkaisuhan tehtiin pienen apprillijäynän muodossa, sillä olisi ollut suuri vääryys jättää tämä hieno ajankohta hyväksikäyttämättä! Vaikka uuden verkkosivun kehitys alkaakin olla melko hyvässä vaiheessa ei aivan vielä voida vetäistä wanhaa webaa life-supportista, vaan täytyy sitäkin vielä kestää hetki.

jekutus.png
Kuvassa näkyy hieman verkkosivua jolla jekutettiin Luuppilaisia uuden weban julkaisussa apprillipäivänä 1.4.2024

Pakollinen disclaimer

Sivuston alpha-versio on KESKENERÄINEN ja bugeja varmasti löytyy! Myös esimerkiksi uusi tapahtumailmoittautuminen on vielä täysin tekemättä. Aikaisen julkaisun taustalla on idea saada nopeampi feedback-loop, jotta sivustoa saadaan parannettua mahdollisimman nopeasti. Ilmoitathan siis kaikista ongelmista, joita uusilla sivuilla kohtaat. Bugien ilmoittamisen ohjeet löytyy artikkelin loppupäästä!

Mitä uutta

Uusi ulkoasu

Lienee sanomattakin selvää, että kun koko weba vedettiin uusiksi, niin jonkinlainen kasvojenkohotus oli tiedossa. Uuden verkkosivun keskiössä on erityisesti ollut parempi mobiilituki, sillä wanhan weban käyttö puhelimella oli vähintäänkin kehnoa. Tämä näkyy erityisesti tapahtumakalenterissa, jossa on täysin desktop-näkymästä eroava mobiilikalenteri. Tyylillisesti uusi verkkosivu pyrkii olemaan suhteellisen yksinkertainen, jotta käyttäjän olisi helppo löytää tarvitsemansa tiedot.

Yrityssivut ja LuuppiSanomat

Uuden verkkosivuston myötä vanhat yrityssivut ja LuuppiSanomat integroidaan osaksi verkkoympäristöä, eivätkä ne jatkossa ole enää erillisiä. Tämä toivottavasti helpottaa niiden löytämistä ja siten parantaa niiden näkyvyyttä! LuuppiSanomat ilmestyy jatkossa muutaman kerran vuodessa näköislehtenä, joka on saatavilla myös verkkosivustolla kunhan ensimmäisen julkaisun aika koittaa, ja siitä painetaan myös fyysisiä versioita. Vanhaan LuuppiSanomaan verrattava tutumpi "blogiformaatti" säilyy uuden LuuppiSanoman rinnalla, ja sitä kutsutaan uudessa verkkoympäristössä "uutisiksi".

Avointa lähdekoodia

Tähän asti WWW/IT-tiimi on ollut pääasiallisesti vastuussa Luupin verkkosivujen kehityksestä. Uuden verkkosivun myötä vastuu säilyy edelleen pääasiassa webatiimillä, mutta verkkosivun lähdekoodi on nyt julkisesti saatavilla. Tämä tarkoittaa, että kuka tahansa voi tarkastella koodia ja ehdottaa siihen muutoksia. Tavoitteena on jakaa vastuuta pois webatiimiltä ja antaa mahdollisuus kaikille osallistua verkkosivun kehittämiseen – olemmehan me ns ”koodareita” kuitenkin. Jatkossa sinun ei siis välttämättä tarvitse hakea webatiimiin, mikäli haluat tehdä parannusehdotuksia verkkosivuille.

Jatkossa myös weban virheiden seuranta siirtyy julkiselle alustalle, ja käytössä on GitHubin repositorion "Issues" -välilehti. Tällä foorumilla kuka tahansa voi luoda virheestä tai uudesta ominaisuuspyynnöstä "Issue":n, ja niitä käydään läpi ja toteutetaan parhaan kykymme mukaan.

Sisällönhallintajärjestelmä

Vanhan verkkosivun sisällön päivittäminen on ollut jokseenkin haastavaa ja sieltä löytyykin paljon vanhentunutta tietoa, jota kukaan ei ole viitsinyt päivittää. Varsinkin kun sivuston kielen vaihtaa englanniksi, voi joillakin sivuilla legacyn pöly pöllähtää ja näytölle piirtyy sisältöä suoraan 2000-luvun alkupuolelta.

Tämä oli yksi erityisen iso asia, jota uuden verkkosivun toteutuksessa haluttiin ottaa huomioon. Uuden verkkosivun taustalla on avoimen lähdekoodin sisällönhallintajärjestelmä Strapi, jonka kautta lähes koko verkkosivun sisältöä voi päivittää helposti ja nopeasti. Strapi tukee myös useita eri kieliä kohtalaisen kivasti ja tämän ansiosta myös englanninkielisen sisällön ylläpitäminen on huomattavasti kivuttomampaa!

Uudenlainen käyttäjienhallinta

Uuden weban käyttäjienhallinta menee Microsoftin Entra ID:n kautta. Mitään Microsoft-tili pakkoa tämä muutos ei kuitenkaan tuo, vaan kaikki käyttäjät ovat lokaaleja. Eli voit jatkossakin käyttää omaa sähköpostiosoitettasi tilin luontiin. Uuden weban myötä myös kuka tahansa voi rekisteröityä webaan, eli sinun ei tarvitse olla enää Luupin jäsen tehdäksesi käyttäjän. Tämä mahdollistaa esimerkiksi kaverisitsit-tyylisten tapahtumien helpomman ilmoittautumisen jatkossa.

Huomionarvoisena seikkana, että wanhassa Webassa olleet käyttäjät eivät toimi uudessa webassa, vaan mikäli haluat kirjautua uuteen webaan, sinun tulee rekisteröidä itsellesi uusi käyttäjä. Uuteen webaan on myöhemmin tulossa mahdollisuus linkittää vanha Luuppi-tilisi uuteen erillisen migraation kautta, jolloin sinun olemassa oleva Luupin jäsenyytesi saadaan linkitettyä.

Uuden weban Alpha-vaiheessa kirjautuminen on vielä turhaa, sillä mm tapahtumailmoittautuminen menee vanhan verkkosivuston kautta. Myös jäsenrekisteri on toistaiseksi täysin vanhan verkkosivuston varassa. Nämä molemmat tullaan siirtämään hiljalleen uuteen verkkosivustoon ja pidämme kaikki ajan tasalla muutoksista.

Lyhyt kurkistus pellin alle

Uuden verkkosivun taustalla on Next.js, joka on mielestäni jo kohtalaisen maturiteetin saavuttanut Reactin meta-framework. Nextillä pystyy hoitamaan kätevästi sekä palvelinpuolen, että frontendin logiikkaa samassa paketissa, eli varsinaista erillistä backendiä ei tarvita. Next tarjoaa myös loistavan tuen palvelinpuolen renderöinnille (SSR) jolla vältytään jäätävän kokoiselta JS-bundlelta.

Tyylittelyyn UI:ssa on ollut käytössä mielipiteitä jakava Tailwindcss ja sen lisäksi on osittain käytetty DaisyUI:ta, joka tarjoaa Tailwindin päälle tehtyjä ”komponentteja”.

Luupilla on käytössä Azuren julkipilvi, jonka takia käyttäjänhallinnan osalta päädyttiin Entra ID:seen. Pienien taisteluiden jälkeen Entra osoittautui olevan ihan kohtalaisen hyvä ratkaisu ja säästyttiin vaivalta ylläpitää omaa käyttäjienhallintaa.

Teknologisiin valintoihin tässä artikkelissa ei tämän enempää sukelleta. Lisätietoja voi käydä kurkistelemassa projektin julkisesta GitHub-repositoriosta, mikäli tämän osalta homma jäi piippuun.

weba.png
Kuvassa pientä arkkitehtuurin tynkää uudesta webasta :D

Mitä seuraavaksi?

Kuten yllä jo osittain sivuttiin, on uusi weba taustajärjestelmien osalta aika raakile. Seuraavat isot askeleet projektissa on toteuttaa uusi tapahtumailmoittautuminen, sekä saada vanhojen Luuppi-käyttäjien migraatiovaihe toimimaan, niin että jäsenrekisterin osalta siirtyminen uuteen webaan olisi myös mahdollista.

Vanha weba säilyy siis Luupin "pääsivuna", eli luuppi.fi domainin alla niin kauan kunnes uusi weba on siinä pisteessä että se pystyy korvaamaan vanhan weban keskeiset toiminnallisuudet, eli suurimpana juurikin yllämainitut puutteet. Oikeesti uus weba ei valmistu koskaan.

Mikäli juuri sinulla 🤠🫵 on Nexti hanskassa, tai haluaisit sitä oppia hanskaamaan, kutsumme sinut kehittämään uutta avoimen lähdekoodin webaa. Jokainen apukäsi on enemmän kuin tervetullut!

github-repositorio.png

GitHub-repositorio

GitHub-organisaatio

Kysyttävää webasta?

Uudesta webasta voi pistää kyssäriä suoraan meikäläiselle telegrammissa @KasperiP, tai lähettää sähköpostia koko webatiimille: webmaster@luuppi.fi. Mikäli kyseessä on ominaisuustoive tai ongelma, asiasta voi avata suoraan issuen GitHub-repositorioon.

Yhteistyössä