Kehitysuutisia: L'Math <3 React

· kehitys uutiset

Oli kesä 2018 kun L'Math heräsi henkiin: YTL:n kaavaeditori toimi kuin toimikin monista bugeistaan huolimatta hätäisesti kyhätyssä Electron-ikkunassa. Tuosta onkin vierähtänyt tovi, ja purkkavirityksiä on kasaantunut vähän joka nurkkaan – edes käytettyä kaavaeditoria ei ole kokonaisuudessaan päivitetty YTL:n uudempiin versioihin, vaan sitä on paikkailtu ja päivitelty tarpeellisin osin.

Tämän vuoksi käynnissä onkin ollut L'Mathin näkyvän frontend-osan täysi rewrite täydellinen rewrite, tarkoituksenaan päivittää softa käyttämään modernimpaa lähestymistapaa ja harkitumpia teknisiä ratkaisuja.

L'Math <3 Typescript (backend)

Ensin alkoi frontendin rewrite (kertomus alempana), minkä jälkeen kävi nopeasti selväksi, että myös backend vaatii uudistamista. Teknistä velkaa ja purkkavirityksiä kertyi vuosien varrella reippaasti – L'Math muun muassa käytti todella vanhaa Electron-versiota vielä hyvin pitkään.

Välilehdet

Välilehtiä ja useamman tiedoston avausmahdollisuutta on toivottu ominaisuudeksi pitään. Suoraan sanoen se oli myös ensimmäinen pääsyy backendin uudelleentoteutuksen aloittamiselle: vanha backend kun oli tehty käytännössä yksitiedostoiseksi, yksi-ikkunaiseksi, ja sen arkkitehtuuria olisi ollut erittäin vaikeaa muuttaa – softaa oli kasattu lisää vanhojen viritysten päälle välittämättä ylläpidettävyydestä.

Siispä Typescript käyttöön ja täysin uutta backendia kirjoittamaan. Näin varmistui myös se, että kaikki backendinkin puolella tulee tyypitetyksi (osittain myös yhteisesti frontendin kanssa), backend-frontend-kommunikaatio selkiytyy, ja Electronin sandboxaus tulee viimeinkin käyttöön.

Siis uudessa 1.10-versiossa tulee olemaan välilehtijärjestelmä, jossa nauhassa näkyvät kaikki avoimet tiedostot, asetusvälilehdet, ja niin edelleen. Myös ajatus esimerkiksi nettiselainvälilehden mahdollistamisesta (vaikkapa cheat.abitti.fi -taulukoiden nopeaan käyttöön) on tullut nyt mahdollisemmaksi. Käytännössä tämä on toteutettu Electronin BrowserView-näkymillä, joita voi piirtää pohjaselaimen päälle.

 

Uutuuksia ja parannuksia

  • Electron-versio päivitetty
  • Frontend on viimein hiekkalaatikoitu; web-kehittäjäkonsolista ei siis pysty enää esimerkiksi käyttämään Node-integraatiota
  • JSDOM on vaihdettu Cheerioon → tiedostolataukset ja turvatarkistukset nopeutuivat huomattavasti
  • PhantomJS on heivattu ja käytössä Electronin oma printToPDF → PDF-vienti luultavasti toimii jatkossa paremmin ja nopeammin kaikilla alustoilla (+ asennuskoko hieman pienempi!)
  • Tiedosto-operaatioihin JS-kirjastojen sijaan mukaan pakattu 7zip-binäärit (tämä on jo aiemmista beta-versioista tuttu) → vähemmän rikkoutuneita tiedostoja, nopeampaa pakkaamista ja purkamista
  • Patch-päivitysjärjestelmä heivattu, korvataan simppelimmällä automaattipäivityksellä (tästä lisää myöhemmin)
  • ASAR-paketoinnin käyttöönotto (osittain PhantomJS:n poistamisen myötä) → asennus- ja päivitysoperaatioiden nopeutuminen (miljoona pientä tiedostoa vs. sisäinen asar-paketti)

 

"Beta when??!?!!"

Uuden backendin sisältäviä beta-julkaisuja on tulossa kokeiltavaksi syksyn mittaan. Opintokiireistä johtuen mitään tarkkaa aikataulua ei voida lyödä lukkoon!

L'Math <3 React (frontend)

Niin siinä sitten kävi, Reactia piti saada. Uutta frontend-moduulia rakennellaan Reactin ja TypeScriptin kanssa, bundlerinaan Parcel, ja mukana tietysti myös YTL:n rich-text-editor (tai oikeastaan sen forkki).

Käytännössä ohjelman UI noudattaa samaa vanhaa mallia: vasemmalla on sivupalkissa sivut, yläpalkissa on YTL:n editorin symbolipalkki ja keskenään vaihtuvat teksti- ja kaavaeditorin työkalut. Taustalla kuitenkin miltei kaikki on muuttunut, sillä vanhoista jQueryllä kuunnelluista taulukon sisäisten taulukkojen taulukoista on siirrytty pitkälti flexboxin ja gridin käyttöön, ja toiminnallisten elementtien tilasta ja kuunteluista vastaa React.

Koska L'Math on ja tulee olemaan Electron-pohjainen selainkikkare, ja jo aiemmalla toteutuksella on esiintynyt performanssivaikeuksia heikkotehoisimpien koneiden kanssa, on editorin parissa tehty jonkin verran kompromisseja. Esimerkiksi vastaus- eli tekstilaatikko on Reactin näkökulmasta kontrolloimaton elementti – annetaan selaimen handlata editoitavan sisällön editointi ilman puolta tuhatta kutsua joka näppäimenpainalluksella. (Toisaalta tämä mahdollistaa myös aika vaivattomasti YTL:n editorin integroimisen softaan ilman sen kummempia muutoksia)

Havaittavissa on (taas kerran) joitain ui-elementtien tyylittelymuutoksia. L'Mathin kotisivuilla tuli koekäyttöön aiemmin tämä ns. laatikkotyyli, jota myös ohjelman itsensä UI hiljalleen patcheissa siirtyi noudattamaan, ja nyt rewriten myötä entistä enemmän.

Varsinainen WYSIWYG-editoriosa on edelleen samankaltainen, joskin fonttikokojen parissa siirryttiin viimein pikselikokojen pariin, joten vanhasta rajallisesta 1-7-välistä päästiin eroon!

Latauspylpyröiden ja jumiutuvan UI:n tilalla onkin placeholdereita, jee. Työtä on tekemättä vielä sen verran, että beta-versiota tästä React-frontendistä ei ole odotettavissa ehkä vielä viikkoon tai pariin.

Aikataulu

Tarkkaa arviota ei vielä aikatauluista ole. Beta-versioita lienee tulossa saataville aikaisintaan lähiviikkoina. Ei ole vielä suunnitelmaa siitä, tuleeko React-frontend saataville seuraavassa patchissa vai vasta tulevassa 2.0-versiossa (näin mittavan rewriten jälkeen lienee syytä hypätä numeroinnissa 1.10:n sijaan jo versionumeroon 2.0).

Joka tapauksessa uutta UI:ta varmaankin testautetaan ensin 2.0-version beta-julkaisuilla, ja sitten vasta julkaistaan patchissa myös version 1.9 piiriin.

Muutosten esittelyä

Alla erinäisiä poimintoja muutoksista ja parannuksista

Frontend: Miljoonasta staattisesta js-filusta bundlattuun pakettiin

  • Hyvästi vuoden 2018 jQuery-purkkaviritykset, tervetuloa moduulit ja oikeasti ylläpidettävä frontend
  • Bundlaamassa Parcel, hajamielisyyttä ehkäisemässä TypeScript, rakennusalustana React
  • Bundle toivottavasti vähentää frontendin latausaikaa hitaammilla leivänpaahtimilla!

 

Frontend: Rich-Text-Editorin uusin versio

  • Forkattu, koska minimalistiset muutokset kaavaselektoreihin ym. ovat pakollisia – muuten käytössä aika pitkälti "out of the box" -periaatteella
  • Jatkossa helpompi päivittää, koska käytössä moduulina

 

Frontend: Kehittyneemmät kuvatyökalut

  • Kuvien koon muuttaminen nurkasta raahaamalla
  • Kuvatyökalut kelluvasta palkista työkalupalkkiin jonkin kuvan ollessa aktiivisena/valittuna

 

Frontend: Selkeytetyt asetukset

  • Ikonivalinta ikoneina
  • Hyvästi "sliderit", tervetuloa perinteiset checkboxit

 

Frontend: Uudistetut dialogi- ja latauspalkkityylit

 

Frontend: Laskinpäivityksiä

 

Frontend: Sivulistan natiivimpi järjestely-drag'n'drop

  • Sivulistan sivujen järjestely toteutettuna HTML5-standardien mukaisilla drag-drop-eventeillä

 

Frontend: Nopeakäyttöisempi sivuasetusboksi

  • Sivujen asetusboksi on nyt nopeampi ja helpompi käyttää
  • Muutokset tallentuvat sivun tietoihin heti muokkauksen aikana

 

Frontend: Erotinsivut

  • Sivut, joiden nimi on pelkkää viivaa tai ajatusviivaa (esim. "-----" tai "––––––––––"), näytetään ohuempina "erotinviivoina" ilman nimeä

 

Frontend: Paranneltu tumma teema

  • Tumma teema visuaalisesti miellyttävämpi ja luettavampi

 

Frontend: Värilaatikot

  • Sivuille on mahdollista lisätä "värilaatikoita" esimerkiksi huomioiden, esimerkkien tai tärkeiden asioiden merkintää ja erottamista helpottamaan
  • Valittavissa taustaväri ja reunan tyyli

 

Frontend: Piilotettava sivupalkki

  • Sivupalkki on mahdollista piilottaa, jolloin se siirtyy piiloon ikkunan oikeaan laitaan
  • Kätevää erityisesti pienillä ruuduilla!

 

Frontend: Haku sivuilta ja työkirjasta

  • Hakutoiminto tekstin etsimiseksi sivulta
  • Erillinen hakutoiminto tekstin etsimiseksi koko työkirjasta

 

Frontend: Päivitetyt sala████ ja ███████

  • Vanha s████ on korvattu uudella b█████ s██████ -tyyppisellä ███████
  • Vanha keskustelutyylinen kr████████████ on korvattu hieman P█████ 2 -henkisillä ter██████kr██████████
  • (L'Mathiin piilotettujen pääsiäismunien triggerit ovat edelleen samat kuin aiemmissa versioissa! (...vai ovatko?))

 

Backend: Pakkausapuna 7z

  • Mukana 7z-binäärit, joilla pakkaus sujuu nopeammin kuin vanhentuneilla js-kirjastoilla
  • Parempi tuki hieman hajonneille pakkauksille
  • Vanhat versiot eivät pysty avaamaan uudempaa zip-formaattia; jostain syystä aiemmin käytetty zip-purkaja luulee zip-versiota uudemmaksi ja ei suostu purkamaan sitä
  • Vähentää toivottavasti loputkin tiedostohajoilut pois

 

Frontend/Backend: Lizäosasysteemin parempi versio

  • Lisäosasysteemi on aiemmissa versioissa ollut melko kökkö
  • Tarkoituksena mahdollistaa hyödyllisten lisäosien tuottaminen ja johdonmukaiset rajapinnat ja event-huudot
  • Mahdollisesti helpompia tapoja asentaa lisäosia – esim. raahaaminen ja pudottaminen, tai ohjelmiston sisäinen "lisäosanäyteikkuna" (vaatii tosin käsityötä, jottei mitään epäilyttävää pääse mukaan)

Kaiken kaikkiaan työn alla on siis melko mittava rewrite, joka varmaankin myöhemmissä vaiheissa ulottuu myös backendin puolelle. Edistystä voi seurata L'Mathin sosiaalisen median kanavissa ja tässä uutisvirrassa!

Facebook: @laudaturmath Instagram: @laudaturinmatikka