2021. aasta saab veebiarenduses olema edasiminekute, arengute ja muutuste aasta. Toome välja 9 arengut, mis mõjutavad 2021. aastal veebidisainerite, -arendajate ja sisuloojate tööd.
Henri Parkja
01.01.2021
Me elame digitaalse darvinismi ajastul, kus tehnoloogia areneb kiiremini kui ettevõtted suudavad sammu pidada. Digitaalne darvinism on halastamatu reaalsus. Kui me uute oludega ei kohane, siis jääme maha. Loe edasi, et veebiarenduse olulisemate trendidega kursis olla ning kiiresti muutuva maailmaga kaasas käia.
Bootstrap 5 peaks välja tulema 2021. aasta esimeses pooles. See saab olema Bootstrapi raamistiku jaoks suur muudatus, mis mõjutab ka ülejäänud veebiarenduse maailma.
Üks suuremaid muudatusi on jQuery eemaldamine. See teeb Bootstrapi JavaScripti faili 85 kB väiksemaks, mis omakorda teeb Bootstrappi kasutava veebisaidi kergemaks ja seetõttu ka kiiremaks. Veebisaidi laadimise kiirusel on mõju SEO-le, kuna Google arvestab seda otsitulemuste paremusjärjestuse loomisel. Veel küll ainult mobiilis, kuid varsti ka arvutis tehtud otsingute puhul. Kõiki jQuery funktsionaalsuseid hakkab asendama Vanilla JavaScript.
Vanilla JavaScriptile üleminek on hea uudis kõikidele kaasaegsete front-end raamistike (React.js, Vue.js, jt) kasutajatele, sest nüüd on Bootstrapi kasutamine neile oluliselt mugavam ja teostatavam kui varem. Põhjuseks on, et jQuery ja mõne front-end raamistiku samaaegne kasutamine põhjustab tavaliselt probleeme ning on ülemäärane.
Teine oluline muudatus on IE (Internet Explorer) toe kadumine. Bootstrapi tiim on jQuery eemaldamise ja IE toe kaotamise kohta öelnud, et “aeg on edasi liikuda sellest, mis on vananenud ja pole enam asjakohane”. IE toe kaotamise peamine põhjus on selle üha kahanev populaarsus. Isegi desktopi kasutajate seas on IE turuosa kõigest umbes 2.5%.
Veel muudatusi, mida Bootstrap 5 endaga kaasa toob:
Responsive Font Sizes (RFS) – varasemalt oli see ainult fondi suuruse automaatseks muutmiseks erinevatel ekraani suurustel, kuid nüüd saab seda kasutada peaaegu iga CSS-i omadusega, nagu margin, padding jt.
Gutteri (tühi ruum kahe elemendi vahel) põhiühikuks saab rem – Põhiühik rem võimaldab senisest põhiühikust px paremini ja kiiremini responsive layoute luua. Kui kasutaja muudab fondi suurust, siis ei muutu mitte ainult fondi suurus, vaid kogu layout sellele vastavalt.
Uued klassid – näiteks laieneb grid ühe tasandi võrra, lisandub xxl klass. Mõned klassid, nagu näiteks card-deck ja list-inline kaovad. Lisanduvad gutteri laiuse ja kõrguse muutmise jaoks vajalikud klassid gx-*, gy-* ja g-*.
Uus SVG ikoonide library – kui varasemalt pidid arendajad lootma näiteks Font Awesome ikoonidele, siis nüüd saab kasutada Bootstrapi enda poolt loodud ikoone.
Utilities API – selle abil saab muuta, lisada ja eemaldada Bootstrapi utility klasse.
RTL (right to left) toe lisamine – see on mõeldud keelte kuvamiseks, kus kirjutatakse paremalt vasakule.
2. Kaasaja sisuhaldussüsteemide populaarsuse kasv
AI tehnoloogia areng võimaldab luua veelgi kasutajasõbralikemaid sisuhaldussüsteeme (Content Management System – CMS). Paljud inimesed loovad oma veebilehed selliste sisuhaldussüsteemidega, nagu näiteks Wix ja Voog, kuna need annavad võimaluse ehitada isikupärane koduleht üsna vähese aja ja kerge vaevaga ning lihtsama veebi puhul ei pea selleks kasutama veebiarendajate abi.
Wixil ja Vool on palju konkurente: Webnode, WebStarts, Jimdo, Shopify – kui tuua vaid mõned näited. Samal ajal vanade tuntud CMS-de Joomla, Magento ja Drupali turuosa järjekindlalt väheneb.
3. Headless sisuhaldussüsteemid (Headless CMS)
Üha populaarsemaks saavad ka niinimetatud headless sisuhaldussüsteemid. Need on sündinud digitaalse ajastu ettevõtete vajadusest kuvada sisu ja kaasata kliente erinevatel platvormidel: veebisaidid, nutikellad, mobiilid, tabletid, erinevad IoT seadmed, jms. Headless CMS võimaldab sisu loomist ja esitamist erinevates kanalites läbi ühe tsentraliseeritud sisuhaldussüsteemi.
Traditsiooniline CMS vs headless CMS
Traditsioonilised CMS-d, nagu WordPress, Joomla, Drupal jt on monoliitse (monolithic) arhitektuuriga, mis tähendab, et back-end ja front-end on kokku seotud (coupled). Selline süsteem kuvab back-endis loodud sisu ühel kindlal viisil front-endis, mis on täielikult CMS-i kontrollitud ja tavaliselt on selleks veebisait.
Headless CMS on front-endi vaba süsteem. Sisuliselt on see ainult back-end platvorm, kus luuakse sisu ning see ei defineeri mingil viisil, kuidas või kus seda sisu kuvatakse. “Head” tähendab selles kontekstis front-endi, sellest ka nimi “headless”.
Headless CMS annab arendajatele vabaduse luua nii palju erinevaid päid (heads), kui nad soovivad. Nendeks võivad olla aplikatsioonid erinevates sisu kuvamiseks mõeldud kanalites ja seadmetes, nagu näiteks veebilehed, äpid, targad kõlarid, reklaamtahvlid, nutikellad, VR prillid, jms.
Video, mis selgitab lihtsalt ja arusaadavalt, mis on headless CMS:
Lahti ühendatud ehk decoupled CMS
Mõned traditsioonilised CMS-d, nagu näiteks WordPress, on ehitanud endale juurde API kihi, mis võimaldab sellel funktsioneerida sarnaselt headless CMS-le. Selliseid CMS-e kutsutakse “decoupled CMS”. Decoupled CMS säilitab traditsioonilise CMS-i tugevused, millele on lisatud headless CMS eelised.
Sellel lahendusel on siiski mitmeid miinuseid. WordPressi headless CMS režiimil kasutades kaob ära tavapärane WYSIWYG tööriist, mis võib sisu muutmise tavakasutaja jaoks teha väga vaevaliseks. Teiseks, WordPress sõltub tugevalt pluginatest, mis sel juhul ei pruugi töötada. Lisaks kurdetakse ka WordPressi aegluse üle headless CMS režiimil ja tuuakse välja veel teisigi probleeme.
Headless CMS eelised
Headless CMS-d pakuvad traditsiooniliste CMS-de ees mitmeid eeliseid:
Suurem paindlikkus – Headless CMS-i kasutades on arendajad vabad CMS-i back-endi programmeerimiskeele piirangutest, milles neil puudub ekspertiis. Selle asemel saavad nad kasutada endale sobivat ja vajadustele vastavat programmeerimiskeelt või front-end raamistikku.
Erinevates kanalites oleva sisu haldamine on lihtne – Headless CMS võimaldab kõikides kanalites (veebisaidid, äpid, IoT seadmed, reklaamtahvlid jt) kuvatavat sisu hallata sujuvalt ühest tsentraliseeritud kohast.
Lühem turule jõudmise aeg – Arendajad ja sisuloojad saavad headless CMS-i kasutades töötada paralleelselt. Front-end arendus ja back-end sisuloome on üksteisest eraldatud, mis muudab turule jõudmise aja lühemaks.
Tulevikukindel lahendus – Kui tulevikus tuleb turule uus tehnoloogia, milles soovitakse sisu kuvada, siis saab seda lihtsalt teha, sest kogu sisu on läbi API saadaval.
Suurem turvalisus – Tavapäraselt on API-d, mida kasutatakse sisu kuvamiseks, read-only. See annab turvalisuse taseme, mis traditsioonilise CMS-i puhul pole võimalik. Lisaks pole headless CMS-i kasutaval veebisaidil andmebaasi, kuna kogu sisu tuleb läbi API. See tähendab, et häkkeritel pole väravat, mida turvaauguna ära kasutada.
Headless CMS platvormid
Kõige populaarsem vabavara (open-source) headless CMS on Strapi, mis on ehitatud JavaScriptiga Node.js peale. Sellel on hea kommuuni tugi ja see on haldajale lihtne kasutada.
Headless CMS-id ei ole reaalsuses aga midagi uut. Magnolia CMS on pakkunud headless CMS-i juba üle 15 aasta. Butter CMS võimaldab haldajale rohkem paindlikkust. Arendajad loovad haldajale stiilitud komponendid, mille abil saab haldaja ise erinevaid lehti kokku panna. See on näide modulaarsest disainist.
G2 on veebisait, kust saab lugeda klientide tagasisidet erinevate headless CMS-de kasutajakogemuse kohta ning lühiülevaate peamistest turul olevatest headless CMS platvormidest.
Millal kasutada headless CMS-i?
Headless CMS-i kasutamine ei ole kindlasti alati parim ja õigustatud valik, aga see on tugev valik järgnevatel juhtudel:
Veebisaitide või -äppide loomisel, mis kasutavad JavaScripti raamistikke (React, Angular, Vue.js)
Kui soovitakse rohkem paindlikkust nii haldaja kui ka arendaja perspektiivist
Veebisaidi loomisel kasutades UI komponente (modulaarne disain)
Native mobiiliäppides sisu kuvamine
Kui sisu soovitakse kuvada erinevates platvormides korraga
Staatilist sisu generaatorit (static site generator) kasutades
4. WebAssembly võimaldab luua võimekamaid veebirakendusi
WebAssembly on madaltaseme binaarkood, assembler (assembly) tüüpi kood veebi jaoks, mistõttu on see palju kiirem kui JavaScript. WebAssembly tehnoloogia abil saab erinevate programmeerimiskeelte abil loodud koodi kompileerida baidi koodiks (byte code), mis brauseris töötab. Sellel on veebi jaoks suur mõju.
Praktiliselt tähendab see seda, et WebAssembly kaotab JavaScripti limitatsioonid ja võimaldab luua nõudlikumaid rakendusi, mida varasemalt sai teha vaid töölaua rakenduste kaudu (native desktop apps). JavaScript saab limiteerivaks faktoriks selliste rakenduste puhul, mis nõuavad palju reaalajas andmete töötlust: pildi- ja videotöötlus, 3D mängud, AR/VR, jms.
Rakenduse osa, mis vajab rohkem jõudlust, kirjutatakse sobivas keeles (nt C/C++/C#/Rust), mis kompileeritakse brauseris töötamiseks WebAssembly koodiks. Seega pole WebAssembly programmeerimiskeel, mida eraldi peab õppima ja kirjutama, vaid kompilatsiooni tulem, mille allikaks on eelmainitud programmeerimiskeeled.
Modulaarne disain või ka atomaarne disain (atomic design) võimaldab veebiarendajatel ja -disaineritel veebilehe loomisel taaskasutada komponente ja mooduleid. Veebilehe moodulid on sarnased legodele. Kui moodulid omavahel õigesti ühendada, siis tulemuseks on toimiv veebileht.
HubSpoti loodud uuringust selgus, et digiturundajate seas oli traditsiooniliste CMS-de NPS (Net Promoter Score) -65. See tähendab, et paljud digiturundajad pole üldse rahul oma CMS platvormiga, sest nad ei saa seal teha vajalikke muudatusi. Ühe veebilehe keskmine eluiga on 2-3 aastat ja see on loonud lõhe selle vahel, mida kliendid ootavad ja mida ettevõtted suudavad pakkuda. Tänapäeval soovivad digiturundajad, tuginedes veebi analüütikale, teha muudatusi igapäevaselt. Nad riskivad kaotada raha, kui ootavad päevi või nädalaid, et uus maandumisleht või vorm üles saada.
Kui veebileht paberile printida, siis tavaliselt peaks saama sellest kääridega välja lõigata erinevad osad ning need oleks veebilehe moodulid. Neid paberitükke kombineerides on võimalik luua täitsa uus veebileht. Et seda päriselt veebis ka teha, peaks sisuhaldussüsteem sellist modulaarse disaini võimalust toetama.
Selle asemel, et veebilehte iga paari aasta tagant uuendada, saab modulaarse disaini abil seda teha jooksvalt mooduleid ümber paigutades ja neid täiustades.
See on samm edasi templiidipõhisest arendusest. Modulaarse disaini abil saab luua odavamaid ja paindlikumaid veebilehti, sest eelmistes projektides loodud mooduleid on võimalik uuesti kasutada.
Varasemalt loodud mooduleid saab taaskasutada ja seetõttu ei pea kõike nullist uuesti üles ehitama, mis muudab arendusprotsessi odavamaks. Eelmainitud põhjustel näeme 2021. aastal ka modulaarse disaini populaarsuse kasvu.
Häälotsingute tehnoloogia on praeguseks niivõrd arenenud, et Google ingliskeelse häälotsingu täpsus on 95%. See on võrdväärne inimese kuulmise täpsusega. Proovi kasutada Google häälotsingut ja sa üllatud, kui hästi see sinu (inglise keeles) öeldud sõnadest aru saab. Ka eestikeelne häälotsing ei jää sellele enam kuigi palju alla.
Häälotsingu kasvu peamiseks põhjuseks peale vastava tehnoloogia arengu on asjaolu, et hääle abil või rääkides info küsimine on inimese jaoks loomulikum, kiirem ja mugavam viis info saamiseks kui trükkimine. Teiseks, häälotsinguid saab paremini kasutada nende tegevuste ajal, mil trükkimine on raskendatud.
Häälotsing ja SEO
Digiturunduse ja SEO eksperdid kirjutavad, et kodulehe häälotsingutele optimeerimine ei ole ainult üks trendidest, vaid see on saamas hädavajalikuks. Need, kes sellega kaasa ei lähe, kaotavad tõenäoliselt oma positsiooni otsitulemustes neile, kes on häälotsingutele optimeeritud.
Google otsimootorites tehti mõned aastad tagasi oluline sisuline muudatus nimega Hummingbird, mis oli suurim muudatus alates aastast 2001. Alates sellest muudatusest on Google otsing semantiline ehk rõhk on tehtud otsingu tähendusel (semantika) ja kavatsusel.
Seda saab testida küsides telefonis Google häälotsingu abil näiteks „what is the world’s largest animal“ ning peale vastuse saamist „how big is it“. Google saab aru, millele sõna “it” selles kontekstis viitab. Selline otsimootori toimimisloogika võimaldab teha häälotsinguid, mis on sarnased tavalisele vestlusele.
Kuidas veebilehe SEO-d (häälotsingutele) optimeerida?
Selleks on mitmeid viise nagu näiteks KKK (FAQ) lehe loomine, kõnekeelsetele otsingufraasidele optimeerimine ja veel meetodeid, mis on guugeldades leitavad. Selles postituses käsitleme lähemalt ühte strateegiat.
Schema metadata kasutamine
Erinevalt inimestest ei saa otsimootorid veebilehe sisulisest tähendusest aru. Kasutades veebilehe HTML-is spetsiaalset Schema märgendust (mark-up), on võimalik otsimootoritele lehe sisu arusaadavaks teha. Selle tulemusel on veebileht kasutajatele paremini leitav ning otsimootorid kuvavad veebilehe sisu relevantsemas vormis. See ei mõju hästi mitte ainult häälotsingutele, vaid mis tahes seadmes tehtud otsingutele.
Schema.org veebileht toob schemade kasutamisest hea näite. Kui mingi veebileht räägib filmist Avatar, siis selle HTML kood näeks lihtsustatult välja midagi sellist:
<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<a href="/../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>
Selleks, et sisu otsimootoritele arusaadavaks teha lisatakse Schema märgendus.
Nüüd saab otsimootor aru, et tegemist on filmiga ja nüüd on otsimootoril võimalik ka selle filmi kohta erinevat infot (režissöör, žanr, treiler) välja lugeda, mida otsingu tulemustes korrektselt kuvada.
Schema märgenduse kasutamine tõstab nii positsiooni otsitulemustes kui annab ka kasutajatele koheselt otsitu kohta rohkem infot.
Schema mark-up’i kasutamine on väidetavalt üks kõige alatarvitatum, kuid üks võimsamaid viise, kuidas SEO tulemusi parandada. Mõnede uuringute andmetel kõigest 0.3% veebisaitidest kasutavad Schema märgendust, seega on sellel tohutu potentsiaal veebisaitide SEO-d parandada. SEO tähtsuse tõttu võib Schema märgenduse kasutamine saada ka üheks 2021. aasta trendiks.
7. Internet of Things (IoT) ehk asjade internet
IoT-l saab veebiarendusele olema 2021. aastal suurem mõju kui varasemalt, kuna internetiga ühendatud seadmete arv aina kasvab. Internetiga võivad ühenduda erinevad esemed alates riietest ja mähkmetest kuni autode ja kodudeni.
Internetti ühendatud seadmed 2015-2025. Pilt: statista.com
Kuidas IoT mõjutab veebiarendust?
Veebi kuvamine erinevates IoT seadmetes
Veebiarendus on IoT projektide tähtis osa, kuna paljud IoT seadmed kuvavad veebi sisu. Interneti brauserit on võimelised kuvama üha rohkem eriilmelisi seadmeid, nagu näiteks nutikellad, autode kompuutrid, tööstuslikud ekraanid, targad prillid, smart TV-d, digitaalkaamerad ja mängukonsoolid.
Veebiarenduse käigus tuleb üha rohkem mõelda sellele, kuidas veeb mingis konkreetses seadmes toimib ja välja näeb. Nutikellas veebi kuvamine vajab hoopis teistsugust lähenemist ja lahendusi kui veebi kuvamine nutitelefonis. Seda nii arenduse kui ka disaini ja sisuloome poole pealt. Näiteks trükkimisvõimaluste piirangute tõttu peaksid nutikella veebis olevad vormid võimaldama häälkäskluste kaudu infot vastu võtta. Nutikella tehniliste piirangute tõttu peaks veebi laadimise kiirus olema seal oluliselt kiirem kui nutitelefonis, et võimaldada sujuvat kasutajakogemust.
Veebidisainerite ja -arendajate ülesandeks ning väljakutseks saab üha enam olema see, kuidas teha veebid selliste eriilmeliste seadmete sõbralikuks.
Back-endi olulisus ja tavapärase front-endi järkjärguline vähenemine
Paljudel IoT seadmetel aga polegi ekraani. Võtame näiteks Amazon Echo targa kõlari koos virtuaalse assistendi Alexaga. Alexa suudab otsida veebist infot Amazon Echo back-end brauseri kaudu, kuid tal puudub ekraan ja tema front-endiks on sisuliselt kõlar ja mikrofon, mille kaudu inimene veebiga suhtleb.
Tulevikus hakkavad IoT seadmed teatud ulatuses asendama ekraane ja traditsioonilist front-endi ning mõned inimesed usuvad, et praegu liigume maailma suunas, kus üha suurem osa interaktsioonist elektrooniliste seadmetega toimub läbi viibete (gestures), kompimise (haptics), häälkäskluste, arvutinägemise jms. Seda põhimõtet teatakse ka kui Zero UI ja Amazon Echo IoT seade koos virtuaalse assistendi Alexaga on selle üks näide.
Kuna IoT seadmed koguvad palju andmeid, siis andmevahetus peab olema töökindel ja turvaline. Isegi ühe biti kadumine pole lubatud. Seetõttu keskendub IoT veebiarendus süsteemi mastaapsusele ja usaldusväärsusele. Teisalt on IoT seadmed tihti akutoitega ning kommunikatsioon ja kood peavad olema võimalikult efektiivsed ning energiasäästlikud. Veelgi enam, andmevahetus peab olema turvaline ja kaitstud. Back-endi arhitektuur ja disain on nende eesmärkide saavutamisel määrava tähtsusega.
Dünaamiline UI
Kasutajad peavad tihti saama UI abil oma IoT seadmeid kontrollida. Samal ajal peab kasutajaliides kuvama suurel hulgal andmeid, mis IoT seadmest tulevad, mis tekitab vajaduse dünaamilise UI järele.
Üheleherakenduse idee pärineb juba 2000ndate algusest, kuid alles nüüd on hakanud sellised rakendused populaarsemaks saama tänu JavaScripti raamistike arengule. Me kõik kasutame neid igapäevaselt – Gmail, Trello, Google Maps ja Facebook on mõned näited üheleherakendusest.
Traditsioonilises veebis on nii, et kuskile klikkides avaneb tavaliselt uus leht. See leht luuakse täies mahus serveris ja saadetakse siis kliendi brauserisse HTML-i, CSS-i ja JS failide näol. See on aga üsna ebaefektiivne protsess, kuna enamasti suur osa veebist jääb samaks, nt päis ja jalus.
SPA puhul laaditakse kogu leht ainult ühe korra ehk HTML, CSS ja JS failid laaditakse ühekordselt. Kõigi järgnevate päringute puhul saadab server kliendile ainult konkreetse päringu teostamiseks vajalikud andmed (tavaliselt JSON kujul) ning vastav osa veebist kirjutatakse kliendipoolselt dünaamiliselt üle. See muudab SPA tavalise veebisaidiga võrreldes palju kiiremaks ja kasutajakogemuse paremaks.
SPA-de peamine miinus on olnud halb SEO, kuid selle parandamiseks on mitmeid võimalusi. Teiseks, SPA-d hallatakse tavaliselt läbi headless CMS-i ja kui konkreetsel CMS-l pole live preview või visual builder võimalust, siis haldaja ei näe, kuidas sisu reaalselt front-endis hakkab välja nägema. Nüüd on aga turul mitmeid selliseid headless CMS-e, kus sisuloojad saavad SPA sisu kuvamist front-endis lihtsasti näha, näiteks Magnolia-CMS.
9. Animatsioonid veebis
Kasutajate üha suurenevad ootused veebisaitidele ning ettevõtete kasvav soov ja vajadus oma tooteid ja teenuseid atraktiivselt esitleda on loonud vajaduse ka erinevate animatsioonide ja üleminekute järele. Üks võimalus, kuidas arendajad saavad neid vähese ajakuluga luua, on Sass-i libraryMotion UI. Sellise library kasutamine aitab kasutajate ootusi täita ning tooteid ja teenuseid atraktiivsemalt esitleda.
