HubSpot CMS:n kehittäjäkokemus on parempi, kuin luulet
SaaS-palveluista on usein sellainen kuva, että kehittäminen tapahtuu palvelun omalla editorilla eikä versionhallinnasta voi edes keskustella. Tällaiseen käsitykseen törmää usein HubSpot CMS:n suhteen, mutta myös esimerkiksi Shopify:sta ja Squarespacesta puhuttaessa. Totuus on kuitenkin se, että konepellin alla on paljon työkaluja, jotka tekevät kehittämisestä jopa mukavaa. 🙂 Tässä artikkelissa yritän rikkoa virheellisiä oletuksia HubSpot CMS kehityksen suhteen.
Lokaali kehitysympäristö: oma editori, versionhallinta ja preprosessointi
Jos minun pitäisi kehittää HubSpot CMS -sivustoja HubSpotin omalla tekstieditorilla, voin myöntää, että ottaisin loparit saman tien. Onneksi HubSpot on kehittänyt HubSpot CLI:n, minkä avulla pääsen heti takaisin omille pelikentilleni.
Hieno editori, HubSpot. Tätä en kuitenkaan käytä.
Versionhallinta HubSpotissa toimii erittäin hyvin esimerkiksi GitHubin ja Bitbucketin avulla. Lokaalin kehitysympäristön takia versionhallinta toimii, kuten pitää. Jos koodia kirjoitetaan suoraan HubSpotin omalla editorilla, ei Gitin kaltaista versionhallintaa ole.
Myös CSS:n ja Javascriptin preprosessointi on mahdollista lokaali kehitysympäristön avulla!
Oman editorin käyttö, versionhallinta ja preprosessointi ovat kaikki ominaisuuksia, mitkä toimivat myös HubSpotissa. Kehittäminen on siis jopa ihan jees. HubSpot menee kuitenkin mielestäni myös muista järjestelmistä ohi: lokaalin kehitysympäristön pystyttäminen on harvinaisen helppoa ja HubSpot on todellakin tehnyt kotiläksynsä auttaakseen kehittäjiä alkuun – ympäristöjen kanssa säätäminen on HubSpotin puolella historiaa.
Suurin väärinymmärrys tapahtuu, jos kehittäjä ei googleta “HubSpot Local Development”. Käy perehtymässä aiheeseen lisää täällä: Getting started with local development.
PS: Sama pätee myös Shopifyyn ja Squarespaceen 😉
HubSpot säästää kehittäjän aikaa
Hubspotin lokaalin ympäristön pystyttäminen on huomattavasti helpompaa kuin monien muiden ympäristöjen, mikä mielestäni tekee kehittäjäkokemuksesta paremman.
HubSpot CLI mahdollistaa kooditiedostojen tuomisen omalta koneelta HubSpot-ympäristöön ilman, että mitään “oikeaa” ympäristöä tulisi pystyttää omalle tietokoneelle. HubSpotin kanssa työskennellessä ei siis tarvita erikseen omaa serveriä (esim apache tai nginx). Kehitysympäristö on hyvin minimaalinen ja sisältää vain sivuston teeman koodit. Itse sivujen renderöinti tapahtuu HubSpotin omilla servereillä – näihin HubSpot tarjoaa ilmaisia kehitysympäristöjä.
Lue lisää HubSpot CLIstä HubSpotin omilta sivuilta.
HubSpot pyrkii parantamaan sivustojen nopeutta
HubSpot CMS:ssä on sisäänrakennettuna ominaisuus, joka tuo javascriptiä ja css:ää sivustolle pienissä paloissa riippuen siitä, mitä kullakin sivulla tarvitaan. Toisin sanoen sivuston elementit ja assetit ladataan sitä mukaa, mitä siellä pitää näyttää. Tämä on tutumpaa esimerkiksi JAMStack-kokonaisuuksissa, mutta yleistyy koko ajan myös WordPress-sivustojen toteutuksessa. Ominaisuus parantaa sivuston nopeutta ja performanssia, mikä vaikuttaa myös Google Web Vitals -arvioon ja sitä kautta sivuston hakukonenäkyvyyteen.
Muita HubSpot-sivustojen nopeutta parantavia toimintoja:
- Automaattinen GZip-tuki tiedostoissa
- Kuvien pienennys lennosta HubSpotin omia servereitä käytettäessä
- Lazyload-valmius
- Cache toimii, eikä sitä tarvitse juurikaan miettiä
Frontendin integrointi on HubSpotilla hyvin helppoa
HubSpotissa ei mielestäni ole vain yhtä hyvä, vaan elegantimpi ja huomattavasti helpompi backend-integrointi, kuin monessa muussa sisällönhallintajärjestelmässä. Frontendin liittäminen HubSpotin backendiin on tehty todella vaivattomaksi.
WordPress on edelleen hyvin monipuolinen ja räätälöinnissä se toki voittaa HubSpotin. Suurin osa sivustoista ei kuitenkaan tarvitse niin pitkälle vietyä monimuotoisuutta, kuin mitä WordPress tarjoaa. Mielestäni HubSpot voittaa WordPressin helppoudessaan kehittäjän näkökulmasta.
Yksi syy tähän on se, että HubSpot luo ns. peruskoodia kehittäjälle valmiiksi. Kun klikkaat actionsista “copy snippet” ja lisäät sen editoriin, on sinulla edessäsi valmista koodia. Kun kaikkea ei tarvitse tehdä itse, työ nopeutuu ja kehittäjän aikaa säästyy. Käytän tätä ominaisuutta edelleen itse yksinkertaisemmissa kokonaisuuksissa, ja se auttaa minua päivittäin.
Pienellä koulutuksella HTML:ää, CSS:ää ja Javascriptia osaavat ihmiset pystytään opettamaan HubSpot-sivustojen luontiin. Tästä syystä HubSpot on mielestäni juniorikehittäjälle helpompi järjestelmä oppia. Sen käytön oppii suhteellisen nopeasti kuka tahansa. Meillä viime vuoden kesäkuussa aloittanut, Drupal-ympäristöstä tullut Santtu Haltsonen hyppäsi heti HubSpot-kehittäjän hommiin.
“Vaikka HubSpot tarjoaa paljon muutakin kuin alustan nettisivujen kehitykselle, on se erinomainen työkalu myös siihen. Sivujen ja moduulien kehitys on suoraviivaista ja intuitiivista. HubSpot on ennen kaikkea kehittäjälle vaivaton työkalu, jonka oppii nopeasti. Alkuun pääsee pian järjestelmän pystyttämisen jälkeen ja HubSpot tarjoaa myös kursseja, joita käymällä sisäistää nopeasti miten yksinkertaista järjestelmän käyttäminen on.”
– Santtu Haltsonen, HubSpot-kehittäjä
HubSpotin mahdollistaa puhtaan koodin
Monet ajattelee, että HubSpot-sivustojen kehittäminen on jonkinlaista häkkäämistä, ja että sivustolla tulee aina olemaan HubSpotin omaa koodia näkyvissä.
“HubSpot lisää frontendiin omaa koodiaan, jota vastaan kehittäjän pitää taistella.”
Ajatus siitä, että HubSpot tunkee sivustolle aina omaa koodiaan, elää vieläkin hyvin vahvasti. Tämä ei kuitenkaan pidä paikkaansa. Jos käyttää lokaalia ympäristöä, on mahdollista rakentaa sivustoja, jotka eivät mitenkään viittaa HubSpotiin. Koodista voi siis tehdä hyvin puhdasta. Halutessaan voi jopa ottaa HubSpotin omat seuranta- ja analytiikkatyökalut sivustolta kokonaan pois.
Mainittakoon, että esimerkiksi moduulien väliin HubSpot lisää hieman koodia, eli ns. wrappereita. Tämä saattaa ärsyttää joitakin kehittäjiä. Minua se on häirinnyt muutamassa asiassa, mutta olen oppinut elämään sen kanssa.
Miten aloitan HubSpot sivustojen kehittämisen
Jos kiinnostuit HubSpot CMS -sivustojen kehittämisestä, siistiä! Tässä on sinulle tärkeitä linkkejä, jotka avaavat HubSpot CMS:n maailmaa:
- HubSpot CMS Sandbox for Developers: Ilmainen kehitysympäristö. Jos sinulla ei ole tunnuksia HubSpotiin, voit luoda tunnukset ilman kalliita lisenssejä.
- HubSpot CMS for Developers -kurssi: Kurssi, joka auttaa sinut alkuun. Kertoo HubSpotin perusteet.
- HubSpot Local Development Tooling: Työkalut, jotka mahdollistavat sivustojen kehityksen omalla tietokoneellasi käyttäen omaa editoriasi.
Muita mielenkiintoisia toiminnallisuuksia
Tässä pieni lista muita mielestäni mielenkiintoisia kokonaisuuksia. Näihin en nyt perehdy tämän enempää.
- HubDB: HubSpotin ratkaisu luoda erilaisia tietokantataulukoita. Näiden avulla voi luoda ”dynaamisia sivuja” tai erilaisia listauksia.
- Serverless Functions: Mahdollistaa erilaisten funktioiden luomisen ja niiden ajamisen ilman ulkopuolisia servereitä.
- Memberships: Luo sisältöä mihin on pääsy vain tietyillä käyttäjillä. Tämä on siis eri aihe kun esimerkiksi ”Gated content”.
- CRM Object: Luo sivuja HubSpot CRM datan perusteella.
- …… Ja on siellä muutakin 🙂
Loppuajatuksia
Olen tehnyt HubSpotia nyt viitisen vuotta ja täytyy sanoa, että aina kun olen olettanut HubSpotista jotakin negatiivista, on HubSpotin toteutus ollutkin yllättävän elegantti.
HubSpot CMS:n lisäksi HubSpotin API on myös erittäin kattava ja dokumentaatio on varsin hyvä (Paitsi V3, joka tuli juuri ulos, on edelleen kehitysvaiheessa ja siksi hieman puutteellinen. Itse tykkään käyttää “legacydocsia”).
Mielestäni HubSpotin pääkehittäjät osaavat selvästi työnsä. Jos sinulla on ennakkokäsityksiä HubSpotista, käy kuitenkin tutustumassa alustaan. Uskon, että voi olla sinulta itseltäsi pois, jos ei ennakkoluulojen takia halua edes kokeilla HubSpotia.
Me olemme tehneet HubSpot CMS-toteutuksia esimerkiksi Smartlylle, Qt:lle, Wattiselle ja SSH:lle. HubSpot ei sovi kaikkeen – mutta niille, joille se sopii, se sopii todella hyvin.
Kiinnostuitko HubSpotista? Ota meihin yhteyttä!
