Perinteisestä moderniin: VILDn teknologinen kehitys Jaa

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.