WordCamp 2016 - Calypso

Door op | in Weblog

Matias Ventura vertelde ons over Calypso en gaf een klein kijkje in de keuken qua ontwikkeling en hoe Calypso tot stand is gekomen. In mijn ogen is Calypso nog niet interessant genoeg om in gebruik te nemen, maar de visie die de ontwikkelaars erop na houden en de punten waar ze rekening mee houden bieden genoeg inspiratie voor eigen projecten en ontwikkelingen.

A look into Calypso

Calypso is ongeveer 8 maanden geleden aangekondig en is een volledige op Javascript gebasseerde SPA (Single Page App). De doelstelling achter de ontwikkeling van Calypso is het creëren van een geveol dat je controle hebt. Dat jij bepaalt wat er gebeurt tijdens het beheren van je wesite en niet dat je instructies geeft aan je browser en vervolgens wacht tot deze zijn uitgevoerd.

De reden waarom Calypso uiteindelijk is ontwikkeld op basis van WordPRess is als volgt:

  • - WordPress is groter dan ooit
  • - De afgelopen 10 jaar bewezen als robuust systeem
  • - Je website(s) beheren vanuit 1 centraal punt (zonder page reload die de wp-admin heeft)
  • - Snelheid is een feature en wordt steeds belangrijker

API <--> client

Calypso is volledig ontwikkeld op basis van de REST API en WP-API, maar trekt de volledige UX los van WordPress en is een opzichzelfstaand systeem. De API is puur ingezet om de kracht van het CMS van WordPress te gebruiken, maar dan in een volledig nieuwe app welke is gericht op gebruikersgemak.

Evenals WordPress zelf en alle aankondigingen die zijn gedaan, is ook Calypso opensource. Je kunt de gehele code downloaden en bijvoorbeeld lokaal runnen om te testen. Zo kun je Calypso inzetten voor andere doeleinden dan alleen voor gebruik van WordPress.com (WordPress.org wordt nog niet ondersteund).

Snelheid

Matias kon niet genoeg krijgen van het woord "speed". Calypso moet snel, sneller, snelst. Als een gebruiker op een menu-item drukt, moet deze zonder enige vertraging geladen kunnen worden. Wat Calypso hiervoor doet is het volgende. De volledige code en functies zijn, zoals je eigenlijk niet verwacht bij een SPA, onderverdeeld en gesplit (code splitting). Vervolgens worden de delen die nodig zijn als je op een knop klikt, ingeladen zodra je er overheen hovert.

Hover je dus over een menu item "pagina's", dan worden tijdens de hover, de functie al ingeladen die nodig is als je er klikt. Klik je vervolgens, dan is de data al geladen en kun je zonder hapering de pagina tevoorschijn toveren. Dit gebeurt bij alle functies die in Calypso aanwezig zijn. doordat de codes optimaal gesplit zijn, zijn de functies die op de achtergrond worden ingeladen slechts 20 tot 500kb groot en op deze manier zonder problemen in te laden.

Nog sneller

Dit is echter voor Matias niet genoeg. Hij denkt dat het optimaliseren van de snelheid nog beter kan, nog sneller. Door bijvoorbeeld hoofd-elementen (key-elements) voorrang te geven t.o.v. minder belangrijke elementen. Wil je een nieuwe pagina introduceren? Laad dan eerst het titel veld en text-editor in en pas als die zijn geladen de elementen zoals categorie keuze, thumbnail en andere aanverwante elementen.

Niet direct inzetbaar

Voor Tussendoor is Calypso niet direct inzetbaar. Zo mist het een mogelijkheid om te gebruiken self-hosted wordpres sites en kan het niet overweg met plugins (die kun je niet beheren), maar de manier van ontwikkelen en 200% focus op UX is een ware inspiratiebron. Het async inladen en op de achtergrond inladen van processen die waarschijnlijk plaats gaan vinden zijn in onze ogen functies die op alle huidige platformen aanwezig horen te zijn.