Strekmann

2016-02-25
Sigurd Gartmann

Redux

Det kan se ut som vi har tatt en pause fra Samklang, og vi har jo faktisk det. Vi hadde noen problemer med Flux-implementasjonen vi hadde valgt, og bestemte oss for å se på de mest brukte, og landet på Redux.

Siden vi støter på de samme konseptene i alle prosjektene vi jobber med, ga det mening å bruke tid på å få dette inn i Node-boilerplate, og få Samklang til å basere seg på denne igjen.

Litt på samme måte som React blander HTML og Javascript, prøver ikke Redux å følge Flux til punkt og prikke, men ender opp med sine egne konsepter. Her trigger man actions som blir lyttet på av reducers, som propagerer endringer i props til litt avanserte komponenter, kalt containers.

I vår nye versjon av Node-boilerplate har vi nå dratt inn Redux og et lite knippe nyttige tilleggsmoduler:

  • Redux
  • React-Redux
  • React-Router-Redux
  • Redux-Immutable
  • Redux-Socket.io

Jada. Det meste virker, men alt har ikke helt gått etter planen. Vi hadde veldig lyst til å lage dette “universalt” eller “isomorfisk”, som vil si at vi lar serveren og klient rendre innholdet likt. Noe av det som gjør React så bra, er at man kan rendre på server, og få klienten til å gjenbruke elementene, og dette gjør det fristende å få til det “universelle” her.

Noe av det flotte med en “universal” app, er altså at den samme koden rendrer likt på tjener og klient. Da hadde det også vært fint om nettverkskallene som brukeren initierer på klientsiden kan kjøres likt på serversiden. Og inn kommer Isomorphic-fetch, som bruker Whatwg-fetch og Node-fetch på henholdsvis klient og tjener. Men vi fant etterhvert ut at Node-fetch ikke er laget for å gjøre spørringer mot egen tjener:

Man må bruke tjenernavn i alle spørringer Man har ingen enkel måte å si at credentials skal følge med, og man må hente ut cookie og videresende den selv. Vi fikk det til, men siden det føles som et hack, har vi foreløpig landet på et alternativ der vi godtar å ha forskjellige ruter inn til api, og de rutene serveren initierer. Vi lar rutene være forskjellige, men lar dem wrappe felles funksjoner.

Jaja, det nærmer seg. Den versjonen som ligger ute nå, har ganske mye virk.

2015-12-18
Sigurd Gartmann

Samklang: Fungerende socket.io

Det ser nå ut som Socketio fungerer fint. MED autentisering.

Underveis har vi lagt ut ny versjon av Libby (2.3.0), med en ny sessionConfig som er nyttig om man skulle trenge session-parametre, f.eks til Passport-Socketio.

Vi starta med å se hvilke events som gikk mellom klienten og tjeneren når vi åpna eksempelsida, og så at vi at vi egentlig bare bryr oss om connect og disconnect nå i første omgang. Vi lot en React-Actions-fil stå for sending og mottak på klientsida, og la til en variabel wsconnected i en React-Store-fil. Denne variabelen avgjorde om vi viste “ON” eller “OFF” på eksempelsida vår. Det var så en smal sak å utstyre eksempelsida med en teller i tillegg, som viste hvor mange klienter som var tilkobla ved at vi broadcaster med io.emit(). Og til slutt å dra inn Passport-Socketio var overraskende enkelt, med den nevnte endringa vår i Libby.

Snasent å få tilgang på brukerinfo i Socketio-koden så enkelt.

2015-12-07
Sigurd Gartmann

Samklang: Innlogging, registrering, testing og websocket

Siden forrige oppdatering har vi startet på mye nytt, uten å ha fullført nok til at det har vært naturlig å skrive så mye.

Vi har laget registrering og innlogging, og fulgt samme lest som tidligere, med passport-local. Vi kom så langt på dette at vi kunne gå videre med noe annet, og er fornøyde med det – for nå. Det kan hende at vi ombestemmer oss her. Det virker fristende både med react-router og jwt-autentisering, men ikke så vi gjør noe med det nå. Nå ha jo Let’s encrypt kommet i public beta, så vi kan kanskje få oss billige ssl-sertifikater også.

Vi har også funnet fram vårt gamle testoppsett og konvertert oppsettet til es2015. Dette var en liten jobb, men er fortsatt ikke ferdig.

Det største vi har startet på er websockets. Etter å ha lest dokumentasjon for Primus, fant vi ut at det var noe der vi husket fra Socket.io som vi savnet, så vi går for Socket.io nå også, siden det er det vi kan best fra før.

Nå kommer det en ny uke, med nye og begrensede muligheter for å få til det helt store. Som vanlig, egentlig.

2015-11-24
Sigurd Gartmann

Samklang: eslint, jsx og vim

Vi er nå samkjørt, og har lagt inn en .eslintrc i prosjektet. Denne er veldig lik det som er vanlig for React-prosjekter, og vi håper den vil fortsette å være det.

I dette prosjektet lar vi også filer med jsx-syntaks får js-ending, siden Babel oversetter innholdet uansett.

Vi finner stadig filer som er tomme. For eksempel testing. Men det kommer nok når innlogging er på plass, og der har vi såvidt startet.

Men vi har i alle fall de samme syntakskravene, nå som vi har satt opp Eslint likt.

2015-11-19
Sigurd Gartmann

Importing the default module from es2015 into old code

Javascript es2015 has nice import and export statements. But if you need to import the “default” module from a file using es2015 into an older file not using it, you need to append “.default” in the require statement.

var somethingNew = require("./newModule").default