Webbiselain on maailman yleisin käyttöliittymä ja sekä sen vaatimukset että ominaisuudet laajenevat koko ajan. CMS-työkaluja kehittävän Contentfulin Stefan Judis esitti uusi tapoja toteuttaa sujuvampia käyttöliittymiä. Judis keskittyi Javascriptin uusiin push-ominaisuuksiin, joita selaimet tulevat jo varsin hyvin.
Judis lähti liikkeelle korostamalla aikaa, jossa elementtien pitää ruudulle muodostua, jotta käyttöliittymä koetaan sujuvaksi ja miellyttäväksi. Esimerkiksi näyttöä tai elementtejä skrollattaessa miellyttävä kokemus – kosketusnäytöllä se, että näyttö pysyy tiukasti sormen mukana - tarkoittaa 60 ruudun sekuntinopeudella toimivaa pintaa.
60 ruutua sekunnissa tarkoittaa, että jokaiselle ruudulle on aikaa 16 millisekuntia. Itse asiassa kehittäjän koodille on aikaa vain 10 millisekuntia, sillä selaimella on muutakin työtä kuin koodin prosessoiminen. Judisin mukaan tämä on iso vaatimus Javascript-koodin nopeudella.
Tämän takia kannattaisi ryhtyä hyödyntämään javascriptin uusia rajapintoja. Esimerkiksi perinteisellä ScrollHandler-funktiolla aikaa kuluu moninverroin enemmän kuin tavoiteltu 10 millisekuntia. Tuloksena on ärsyttävästi lagaava näyttö.
Judis esitteli Intersection Observer -muuttujaa, joka selvittää onko joku objekti näytöllä näkyvä vai ei, vai tulossa näytölle. Tämän kutsumiseen menee aikaa 1,22 millisekuntia ja se vie vain tusinan verran koodirivejä. Suosituimmat selaimet Applen Safaria lukuun ottamatta tukevat jo tätä Javascrupt-toimintoa. Mutation Obverser -toiminto puolestaan tarkistaa näyttöpintaa sen varalta, mitkä elementit ovat muuttuneet. Tätä rajapintaa tukevat kaikki selaimet.
Selvää on, että laadukasta käyttöliittymää suunnittelevalle mittaustyökalut ovat elintärkeitä, mutta niitä on kehittäjille laajasti käytössä. Mittaamiseen voi käyttää synteettistä monitorointia, jossa palvelimella oleva robotti käy läpi sivuston koodia. Esimerkiksi Webpagetest on suosittu tällainen työkalu.
Synteettisen testaamisen sijaan kehittäjä voi käyttää uutta Performance Observer -rajapintaa. Siinä voidaan määritellä ne muuttujat, joita halutaan koodista mitata. Lisäksi API työntää mittaustulokset kehittäjälle automaattisesti push-tyyliin. Riittää, että dokumentin alkuun koodaa pätkän, jossa halutut mittarit on määritelty. Valikoimaan kuukuvat esimerkiksi paint timing -muuttuja, joka kertoo, milloin jokin näyttöpinnalla muuttuu. Longtask-muuttuja puolestaan hälyttää, mikäli joku Javascript-operaatio vie enemmän kun 59 millisekuntia. Tätä rajapintaa tukevat kaikki muut selaimet paitsi Microsoftin Edge.
