Perinteisestä moderniin: VILDn teknologinen kehitys 1

Johdanto#

Siirtymä VildFactory.com:sta Vild.fi:hin edustaa merkittävää harppauksen eteenpäin web-kehityksen käytänteissä. Tämä vertailu esittelee, kuinka Symfony-pohjainen sovellus kehittyi perinteisistä työkaluista omaksumaan modernit web-standardit säilyttäen samalla ydintoiminnallisuutensa. Koodiin tehtiin yli 1900 committia, 570 tiedostoa muutettu, 34392 riviä koodia lisätty ja 14264 riviä poistettu. Tarkoittaa siis että se on koodattu kokonaan uudestaan.

Ydinkehyksen edistysaskeleet#

Symfony-version harppaus#

Merkittävin muutos on päivitys Symfony 6.4:sta Symfony 7.3:een, joka tuo:

• Parannettu suorituskyky: Parannettu säilön käännös ja reititys
• Moderni PHP-tuki: Täysi PHP 8.4 -yhteensopivuus vs. PHP 8.2 -minimi
• Uusimmat ominaisuudet: Pääsy uusimpiin Symfony-komponentteihin ja parannuksiin

Frontend-vallankumous: Webpackista Asset Mapperiin#

Miksi tämä muutos on tärkeä#

Siirtymä Webpack Encoresta Asset Mapperiin edustaa perustavanlaatuista muutosta siinä, kuinka web-sovellukset käsittelevät frontend-resurssejaan.

Vanha lähestymistapa (Webpack Encore)#

Vanha järjestelmä vaati monimutkaisen rakentamisprosessin, jossa kaikki JavaScript- ja CSS-tiedostot piti kääntää ja niputtaa ennen kuin verkkosivusto voisi toimia. Ajattele sitä kuin joutuisit keittämään kaikki aineksesi yhdessä ennen kuin voisit tarjota aterian - joka kerta kun muutit jotain, jouduit aloittamaan koko keittämisprosessin uudelleen.

Miksi valitsin nämä teknologiat:

• Webpack-konfiguraatio oli tarpeen kertomaan järjestelmälle, kuinka niputtaa kaikki JavaScript-tiedostot yhteen
• jQuery-kirjasto otettiin mukaan helpompaa DOM-käsittelyä ja tapahtumien käsittelyä varten
• Bootstrap 4 tarjosi käyttöliittymäkehyksen johdonmukaiseen tyylittelyyn
• Rakentamisputki oli välttämätön SASS-tiedostojen käsittelyyn ja resurssien optimointiin

Mukana olleet riippuvuudet:

• jQuery 3.5.0 interaktiivisia ominaisuuksia varten
• Bootstrap 4.4.1 responsiivista suunnittelua varten
• Monimutkainen webpack-rakentamisjärjestelmä
• Node.js kehitysympäristö kääntämistä varten

Moderni lähestymistapa (Asset Mapper + Importmap)#

Uusi järjestelmä toimii enemmän kuin moderni suoratoistopalvelu - se lataa täsmälleen sen, mitä tarvitset, kun tarvitset, ilman esikäsittelyä.

Miksi valitsin nämä uudet teknologiat:

• Asset Mapper eliminoi monimutkaisten rakentamisprosessien tarpeen
• Importmap mahdollistaa selaimen natiivin JavaScript-moduulien latauksen
• Stimulus tarjoaa kevyen tavan lisätä interaktiivisuutta
• Live Components mahdollistavat reaaliaikaiset päivitykset ilman sivun päivitystä

Keskeiset parannukset:

• Ei rakentamisvaihetta: Muutokset näkyvät välittömästi ilman kääntämistä
• Yksinkertaistettu kehitys: Näen muutokset välittömästi
• Modernit riippuvuudet: Bootstrap 5.3.8 paremmalla saavutettavuudella, Stimulus 3.2.2 moderneille interaktioille
• Parempi suorituskyky: Selain lataa vain sen, mitä tarvitaan, kun tarvitaan

Käyttäjäkokemuksen parannus: Ääninäyttelijähaku#

Teknisten parannusten lisäksi uusi Vild.fi sai myös täydellisen graafisen uudistuksen modernilla suunnitteluestetiikalla, parannetuilla typografialla ja tehostetuilla visuaalisilla hierarkioilla - tehden alustasta paitsi toimivamman myös visuaalisesti miellyttävämmän. Graafisen suunnittelun teki Theo Sandström / fel.one

Kuinka ääninäyttelijähaku toimi ennen#

Vanhassa VildFactory-verkkosivustossa oikean ääninäyttelijän löytäminen oli kuin vanhanaikaisen arkistokaapin käyttöä. Näin tapahtui, kun joku halusi etsiä ääninäyttelijöitä:

Vanha kokemus:

1. Asiakaspään suodatus: Järjestelmä käytti jQuerya näyttämään ja piilottamaan ääninäyttelijöitä suodatinvalintojen perusteella ilman sivun päivityksiä
2. Manuaalinen tilanhallinta: Minun piti manuaalisesti luoda uudelleen koko käyttöliittymän tila jokaisella sivun latauksella
3. Mukautetut pudotusvalikot: Piti rakentaa mukautetut pudotusvalikot tyhjästä, koska standardit eivät olleet tarpeeksi joustavia
4. Harkitut viiveet: Nimihakuun oli rakennettu 500 millisekunnin viive - hyvää UX:ää välttämään palvelimen ylikuormitusta ja antamaan käyttäjille aikaa lopettaa kirjoittaminen
5. PWA rajoituksilla: Järjestelmä toimi Progressive Web Appina, mutta vain 2 sivulla, joissa selaimen takaisin-painike ei toiminut
6. Tilan rekonstruktiohaaste: Suurin tekninen este oli selvittää, mitä käyttäjä odotti näkevänsä sivun latauksessa - suodatinvalintojen, suorikkilistan tilan ja näyttöasetusten uudelleenluominen vaati monimutkaista jQuery-logiikkaa

Miksi valitsin jQueryn tähän:

• jQuery oli tuolloin standarditapa tehdä verkkosivuista interaktiivisia
• Se tarjosi luotettavat menetelmät elementtien näyttämiseen/piilottamiseen
• Tapahtumien käsittely oli ennustettavampaa eri selaimissa
• Minun piti kirjoittaa kaikki suodatuslogiikka manuaalisesti jokaiselle haun tyypille
• PWA-haaste: Vaikka suodatus toimi sujuvasti, PWA-toiminnallisuuden toteuttaminen kunnollisella tilanhallinnalla oli monimutkaista, ja selainnavigointi hajosi kahdella sivulla, jotka käyttivät tätä lähestymistapaa

Kuinka ääninäyttelijähaku toimii nyt#

Uusi Vild.fi-verkkosivusto muutti tämän kokemuksen joksikin, joka on paljon enemmän kuin moderni älypuhelinsovellus:

Moderni kokemus:

1. Välittömät päivitykset: Kun muutat mitä tahansa suodatinta, tulokset päivittyvät välittömästi ilman sivun päivityksiä
2. Älykkäät komponentit: Jokainen suodatin (Kieli, Sukupuoli, Ikä, Sävy) on nyt "Live Component", joka osaa päivittää itseään
3. Reaaliaikainen palaute: Kun kirjoitat nimihakuun, tulokset näkyvät välittömästi
4. Dynaamiset laskurit: Jokainen suodatinvaihtoehto näyttää tarkalleen, kuinka monta ääninäyttelijää vastaa kyseistä kriteeriä
5. Istunnon muisti: Järjestelmä muistaa asetuksesi ja pitää ne aktiivisina sivuvierailujen välillä

Miksi valitsin Live Componentit:

• Automaattinen synkronointi: Komponentit pysyvät automaattisesti synkronissa palvelimen kanssa
• Vähemmän mukautettua ohjelmointia: Ei tarvetta kirjoittaa manuaalisesti näytä/piilota-logiikkaa
• Parempi käyttäjäkokemus: Päivitykset tapahtuvat saumattomasti ilman sivun keskeytyksiä
• Palvelinpuolen logiikka: Monimutkainen suodatuslogiikka pysyy palvelimella, missä se on turvallisempaa ja ylläpidettävämpää

Reaalimaailman vaikutus käyttäjille#

Ennen: Suomalaisen naisääninäyttelijän hakeminen iältään 30-40 tarkoitti:

1. Valitse "Suomi" → sivun päivitys, odota
2. Valitse "Nainen" → sivun päivitys, odota
3. Valitse ikäryhmä → sivun päivitys, odota
4. Toivo, että tuloksista löytyy kyseinen näyttelijä

Nyt: Sama haku on sujuvaa:

1. Klikkaa "Suomi" → tulokset suodattuvat välittömästi, muut vaihtoehdot päivittävät laskurinsa
2. Klikkaa "Nainen" → tulokset tarkentuvat välittömästi, jäljelle jäävät vaihtoehdot mukautuvat
3. Valitse ikä → lopulliset tulokset ilmestyvät saumattomasti
4. Kaikki vaihtoehdot näyttävät saatavilla olevien näyttelijöiden live-laskurit
5. Filttereitä käyttämällä et voi päätyä tilanteeseen jossa yhtään näyttelijää ei näytettäisi

Tekninen magia kulissien takana#

Vanha järjestelmä - Skaalautuvuusongelma:

• Mukautetut pudotusvalikot ja tapahtumien käsittely
• Manuaalinen DOM-käsittely jokaiselle muutokselle
• Erilliset AJAX-kutsut jokaiselle suodatinpäivitykselle
• Tilan rekonstruktiopulma: Jokaisella sivun latauksella järjestelmän piti selvittää, mitä käyttäjä oli aiemmin valinnut, tarkistaa heidän suosikkilistatilansa ja palauttaa oikea näyttötila
• Kasvukivut: Vaikka haku toimi hyvin aluksi, kun ääninäyttelijätietokanta kasvoi kymmenistä satoihin profiileihin, asiakaspuolen suodatus hidastui ja muuttui resursseja vaativaksi
• Muistirajoitukset: Kaikkien ääninäyttelijätietojen lataaminen kerralla muuttui kestämättömäksi luettelon laajetessa

Uusi järjestelmä - Rakennettu skaalautuvuuteen:

• Jokainen suodatin on itsenäinen komponentti, joka hallitsee automaattisesti omaa tilaansa
• Automaattinen palvelinkommunikaatio ilman manuaalista AJAX-ohjelmointia
• Sisäänrakennettu istunnonhallinta suodatinten pysyvyydelle - ei enää tilan rekonstruktiomurheita
• Reaaliaikaiset laskurinpäivitykset tapahtuvat automaattisesti
• Palvelinpuolen suodatus: Lataa vain ne tiedot, jotka vastaavat nykyisiä suodattimia, pitäen suorituskyvyn tasaisena tietokannan koosta riippumatta
• Automaattinen tilanhallinta: Järjestelmä tietää aina, mitä käyttäjä on valinnut ja mikä on hänen lyhytlistassaan, ilman manuaalista ohjelmointia

Miksi tämä on tärkeää liiketoiminnalle#

Ääninäyttelijöille: Heidän profiilinsa löydetään helpommin, mikä johtaa useampiin mahdollisuuksiin, ja järjestelmä pystyy nyt käsittelemään paljon suurempaa luetteloa ilman suorituskyvyn heikkenemistä
Asiakkaille: Täydellisen äänen löytäminen on nopeampaa ja intuitiivisempaa, kuten Spotifyn käyttö musiikin löytämiseen, vaikka lahjakkuuspooli jatkaa kasvuaan
Minulle kehittäjänä: Ei enää tilanhallintaongelmien debuggausta tai lyhytlistakonflikteista huolehtimista - järjestelmä hoitaa monimutkaisuuden automaattisesti
Liiketoiminnalle: Parempi käyttäjäkokemus johtaa onnistuneempiin yhteyksiin ja tyytyväisempiin asiakkaisiin, kun taas skaalautuva arkkitehtuuri tukee rajoittamatonta kasvua ääninäyttelijätietokannassa

Kehityskokemus#

Miksi kehitystyönkulku muuttui#

Kehityskokemuksen muutos on kuin päivittäminen valokuvien kehittämisestä pimeässä huoneessa välittömään digitaaliseen valokuvaukseen.

Työkalujen parannukset#

Perinteinen kehitysprosessi: Minun piti ajaa rakentamiskomentoja joka kerta, kun tein muutoksia. Työnkulku sisälsi komentoja kehityspalvelimen käynnistämiseen, tiedostomuutosten seurantaan ja tuotantoassettien rakentamiseen.

Miksi nämä rakentamisskriptit olivat välttämättömiä:

• Kehityspalvelin oli tarpeen assettien kääntämiseen koodatessa
• Watch-tila piti seurata tiedostomuutoksia ja rakentaa uudelleen automaattisesti
• Tuotantorakennus oli välttämätön kaikkien assettien optimointiin ja pakkaamiseen
• Manuaalinen kääntäminen oli välttämätöntä, koska selaimet eivät voineet ymmärtää raakoja lähdetiedostoja

Moderni kehitys: Uusi järjestelmä eliminoi suurimman osan tästä monimutkaisuudesta:

• Ei rakentamisskriptejä: Muutokset näkyvät välittömästi selaimessa
• Välittömät assettipäivitykset: Tallenna tiedosto ja näe muutokset heti
• Yksinkertaistettu käyttöönotto: Ei käännösvaihetta tuotantoon
• Parempi debuggaus: Suora pääsy lähdetiedostoihin tekee vianetsinnästä helpompaa

Miksi omaksuin tämän muutoksen:

• Nopeammat kehityssyklit tarkoittavat enemmän aikaa varsinaiseen ominaisuuksien rakentamiseen
• Vähemmän aikaa rakennusten odotteluun tarkoittaa parempaa tuottavuutta
• Vähemmän liikkuvia osia tarkoittaa vähemmän asioita, jotka voivat hajota

Koodin laadun työkalujen tehostus#

Moderni versio sisältää merkittävästi parannetut kehitystyökalut, jotka auttavat ylläpitämään koodin laatua:

Miksi nämä työkalut lisättiin:

• PHP CS Fixer: Formatoi koodin automaattisesti yhtenäisen tyylin ylläpitämiseksi tiimissä
• PHPStan: Analysoi koodin mahdollisia virheitä ennen kuin ne saavuttavat käyttäjät
• Rector: Auttaa päivittämään koodin käyttämään moderneja PHP-ominaisuuksia turvallisesti
• Twig CS Fixer: Varmistaa, että mallitiedostot noudattavat parhaita käytänteitä

Hyöty: Nämä työkalut toimivat kuin asiantuntevakehittäjä tarkistaisi jatkuvasti työtäsi, kiinni ottamassa virheitä ja ehdottamassa parannuksia automaattisesti.

Turvallisuus ja modernit standardit#

Riippuvuuksien hallinta#

Modernit edut:

• Päivitetyt tietoturvapäivitykset kaikissa riippuvuuksissa
• jQuery-riippuvuuden poistaminen vähentää hyökkäyspinta-alaa
• Modernit autentikointimallit Symfony 7.3:n kanssa

Web-standardien noudattaminen#

• Natiivi ES-moduulien tuki
• Modernit CSS-ominaisuudet ilman esikäsittelyä
• Tehostetut saavutettavuusominaisuudet

Muuton hyötyjen yhteenveto#

Johtopäätös#

Kehitys VildFactory.com:sta Vild.fi:hin osoittaa onnistuneen modernisoinnin, joka priorisoi:

1. Kehittäjäkokemus: Yksinkertaistetut työkalut ja nopeammat kehityssyklit
2. Suorituskyky: Natiiivit selainominaisuudet ja optimoitu lataus
3. Ylläpidettävyys: Modernit kehykset paremmalla pitkän aikavälin tuella
4. Käyttäjäkokemus: Tehostettu interaktiivisuus Stimuluksen ja UX-komponenttien kautta

Tämä teknologinen edistysaskel asettaa Vild.fi:n moderniksi, ylläpidettäväksi ja suorituskykyiseksi web-sovellukseksi, joka voi helposti mukautua tuleviin web-kehitystrendeihin säilyttäen samalla Symfnyn tarjoaman vankan perustan.

Uudelleen tekeminen osoittaa kuinka modernien web-standardien omaksuminen voi samanaikaisesti parantaa kehittäjän tuottavuutta ja loppukäyttäjän kokemusta, tehden siitä erinomaisen tapaustutkimuksen Symfony-sovellusten modernisointiin.