#selv #: Tämä artikkeli käsittelee canvas-pohjaisia käyttöliittymiä ja fui-as-projektia. Kirjoitan suomeksi luonnollisella, bloggaajan äänellä.

Hui, Canvas-pohjaiset käyttöliittymät tekevät paluun – ja nyt ne oikeasti toimivat

Selvä totuus web-kehityksestä

Olen joskus miettinyt, miksi CSS:n kanssa tappelu tuntuu loputtomalta. Viikko menee nappulan hover-efektin hiomiseen, ja sitten Safari rikkoo kaiken. Tai miksi tuo fontti näyttää erilaiselta joka selaimessa, vaikka sama koodi.

Perinteisissä DOM-pohjaisissa kehyksissä on paljon hyvää. Mutta joskus tuntuu, että taistelet alustaa vastaan sen sijaan, että rakentaisit.

Entä jos homma toimisikin toisin?

Tuossa sattumalta törmäsin projektiin nimeltä fui-as. Se on avointa lähdekoodia, ja lähestymistapa on virkistävä.

Ideana on yksinkertainen mutta rohkea: rakennetaan koko käyttöliittymä HTML5-canvakselle. Siis ihan oikeasti piirretään kaikki. Ei div-elementtejä, ei flexboxia, ei CSS-spesifisyyden sotia.

Tavoitteena työpöytäsovellusten taso

Jos olet joskus käyttänyt WPF:ää tai Qt:ta, tiedät mitä tarkoitan. Nämä kehykset antavat täyden kontrollin pikseleihin. Animatiot ovat sulavia. Teksti näyttää samalta kaikkialla.

Canvas-pohjaiset käyttöliittymät tuovat saman kokemuksen verkkoon. Voit suunnitella täsmälleen sen näköisen käyttöliittymän kuin haluat, ilman yllätyksiä.

Mutta ongelmia on ollut

Canvas-ratkaisuissa on ollut isoja heikkouksia. fui-as näyttää ratkaisevan ne tyhjentävästi:

Saavutettavuus on ollut suurin kompastuskivi. Ruudunlukijat eivät yleensä näe canvas-sisältöä. Tässä projektissa ongelma on ratkaistu rakentamalla semanttinen puu automaattisesti. Teknologia siis piirtää canvakselle, mutta kertoo taustalla saavutettavuustyökaluille mitä siellä oikeasti on.

Kansainvälistäminen on toinen kriittinen kohta. HarfBuzz-helmet huolehtivat tekstin muotoilusta ja ICU-kirjasto tukee käännöksiä. CJK-merkit, arabia, kaikki toimii. Myös se ikävä tilanne, jossa käyttäjä liimaa tekstiä eri kielellä – fonttivaralinko toimii oikein.

Suorituskyky on kolmas huoli. Monet pelkäävät canvas-sovellusten olevan raskaita. fui-as käyttää Brotli-pakkausta, ja demot载荷t ovat alle 100KB. Välimuistiin tallennus toimii pysyvästi.

Tekninen toteutus on vaikuttava

Mitään ei ole keksitty uudelleen. Projekti hyödyntää:

• Yoga-layoutmoottoria (sama kuin React Nativessa)
• Skia-kirjastoa laitteistokiihdytettyyn 2D-piirtoon
• HarfBuzz ja ICU-komponentteja

Nämä ovat vuosia testattuja avoimen lähdekoodin osia, jotka pyörittävät mobiilisovelluksia ja työpöytäohjelmia. Nyt sama teho on käytettävissä selaimessa.

Milloin tämä on järkevää?

En ole sanomassa, että kaikki pitäisi rakentaa näin. DOM-pohjaiset kehykset ovat yhä oikea valinta useimmille projekteille.

Mutta on sovelluksia, joissa canvas-lähestymistapa on selvästi parempi:

• Datan visualisointityökalut, jotka tarvitsevat custom-grafiikkaa
• Yhteistyöalustat monimutkaisine piirustustyökaluineen
• Pelit ja interaktiiviset kokemukset, jotka elävät jo canvaksella
• Yritysraportointi, jossa pikselintarkka ulkoasu on kriittinen

Ja myönnettäköön: joskus haluaa vain rakentaa ilman CSS-spesifisyyden taisteluita.

Filosofinen kysymys

Projektin kehittäjä totesi jotain, mikä jäi pyörimään päähäni. Hän kysyi, onko tällaiselle enää edes tarvetta, kun kaikki voi tehdä tekoälyllä.

Rehellisesti? Kyllä on.

Tekoäly auttaa nopeuttamaan kehitystä. Mutta ymmärrys siitä, miten tekstin renderöinti oikeasti toimii tai miten saavutettavuus pidetään yllä epätavallisissa käyttöliittymissä – se tieto kasautuu. Hyvä suunnittelu ei ole mennyt muodista.

Mistä tästä eteenpäin?

Jos kiinnostaa, kannattaa seurata projektin kehitystä. Canvas-pohjaiset käyttöliittymät ovat olleet web-kehityksen reunalla, mutta työkalut kypsyvät nopeasti.

Ja jos projekti voisi hyötyä tästä lähestymistavasta, mieti myös hosting-ratkaisua. WebAssembly-sovellukset canvakselle ovat yllättävän kevyitä oikein deployattuna – etenkin kun yhdistää sen toimivaan CDN:ään.

Verkkoplatformi yllättää jatkuvasti. Joskus vanhat unelmat – työpöytälaatuinen käyttöliittymä selaimessa – eivät olekaan niin kaukana kuin luulimme.

Mitä mieltä sinä olet canvas-pohjaisista käyttöliittymistä? Onko sinulla projekteja, jotka hyötyisivät tästä lähestymistavasta? Jätä kommentti alle – meitä kiinnostaa aina, mitä developer-yhteisö rakentaa.