ReactJS Göteborg: Neo4J, GraphQL, Switching to React

ReactJS Göteborg September 2017

Av Tobias Ljungström och Valon Huskaj

ReactJS Göteborg är en meetup som arrangeras med jämna mellanrum i Göteborg. Fokus ligger naturligvis mycket på ramverket React, men även tangerande och relevanta ämnen tas regelbundet upp. Denna gången hölls eventet i The Techno Creatives lokaler, i centrala Göteborg.

Neo4J and GraphQL

Först ut var William Lyon från Neo4J. Han talade om två teknologier som delar en hel del likheter och därmed kan komma att fungera mycket väl tillsammans. Den första var själva Neo4J, en open source grafdatabas som briljerar när det kommer till att strukturera stora mängder data som har stora mängder relationer och kopplingar till varandra. T ex har Neo4j använts för att strukturerat lagra de 11.5 miljoner dokument som läcktes i de sk. Panama papers. Med hjälp av en grafdatabas kan man definiera relationer mellan aktörer, banker och dokument på ett sätt som hade varit opraktiskt, om inte omöjligt, i exempelvis en vanlig relationsdatabas.

Den andra teknologin som William belyste var GraphQL: ett alternativ till RESTful APIer för kommunikation mellan frontend och backend i en applikation. Till skillnad från den nuvarande paradigmen, där en endpoint motsvarar ett dokument/en uppsättning data, så använder sig GraphQL endast av en enda endpoint. Mot denna ställer man sedan mycket specifika frågor: man har sedan tidigare specificerat vilka datastrukturer man skall kunna behandla, och nu kan man be om exakt den datan man vill, i det format man vill ha den i. Det är lite som att skicka ett tomt JSON-objekt till sin backend, för att sedan få det returnerat, ifyllt med den relevanta datan.

Det finns ingen 1:1 mappning mellan GraphQLs queries och backend-queries mot grafdatabasen, men med hjälp av GraphQLs “directives” kan man ändå åstadkomma ett stadie där backend behöver göra väldigt lite översättning av queries, och man kan i frontend be om datan man vill ha, nästan direkt från själva databasen.

GraphQL Browser

När en presentation innehåller något utav följande tre punkter så blir jag alltid lika entusiastisk på att lyssna:

  • Hur jobbar man i ett team
  • Hur testar man sin kod
  • Demo utav <awsome_stuff>

Oskar Hane från Neo4j hade samtliga tre punkter i sin presentation och jag måste säga att den tidigare tröttheten var ett minne blott när jag såg bilden med agendan.

Vi fick en bra bild över hur effektivt det kan vara med ”pair programming” och hur man både lär sig från varandra samt ökar kvaliteten av koden med genomtänkta ”code reviews”. Just ”code reviews” är något jag personligen använder ofta under mitt nuvarande uppdrag.

Testing inom front-end är alltid ett hett ämne, där finns alltid något nytt att lära sig och så var det även här. Vi fick lite kodexempel och tankar kring följande:

  • Jest för Unit tester
  • Enzyme för Component tester
  • Cypress för e2e/full-integrations tester

Sist men inte minst fick vi se en trevlig demo utav Neo4j Browser. Ett trevligt och funktionellt verktyg som känns ett självklart val när man ska jobba med Neo4j’s databaslösning.

Switching to React

Sist ut var Mikael Eliasson från Bokio som berättade om erfarenheter i deras byta av frontendramverk, från AngularJS till React. Bland kriterierna som hade spelat in i valet av ramverk fanns bland annat utvecklarnöjdhet som en mycket viktig punkt. Baserat på resultaten från State of JS visade det sig att React är det ramverk som har störst nöjdhet bland de som använder det. Mikael talade också om hur kostsamt det var att få nya utvecklare att sätta sig in i koden och projektet – med React lyckades de uppnå en simplare stuktur och en reducerad kostnad för nyrekrytering. Detta var inte helt och hållet Reacts förtjänst, men det skedde en simplifiering i bytet.

Bland de planer som fick kastas var Redux: det introducerade för mycket extra krångel i bytesprocessen. De hade även planerat att göra en prototyp i React som sedan skulle kastas, men verkligheten föll sig i stället så att de byggde vidare på prototypen, med suboptimalt reultat, istället för att använda sig av koncepten och lärdomarna och göra det rätt från början.

Lärdomar från projektet var även:

  • Typsäkerhet är bra, med hjälp av Typescript
  • Använd linters för konsekvent kodstil
  • API-anrop är lättare i Angular
  • React är lättare att lära sig, mer ren kod, mindre ramverk, och lättare att debugga

Avslutningsvis

Med tre intressanta ämnen var det en lyckad kväll, om än lite lång då talarna hade upp till en timme var på sig. Ett mer fokuserat format hade nog hjälp till att hålla skärpan och intresset uppe.

Allt som allt ännu ett trevligt meetup, gå in på gruppsidan på meetup.com för att anmäla dig till kommande event.

One thought to “ReactJS Göteborg: Neo4J, GraphQL, Switching to React”

  1. Hej Tobias,
    Tack för ett fantastisk samanfattning!
    Jag ska ladda upp Wills tal inom kort, meddela när det är gjort.
    Välkommen till nästa meetupen!
    /Stephen ( reactjs göteborg Organiser )

Leave a Reply

Your email address will not be published. Required fields are marked *