Drömmer du om att gå med i DWWW?

Då måste du känna till vår tech-stack och bli king på webbutveckling. I denna artikel går jag (Oliver Levay) igenom vår tech-stack och ger tips på hur man kan lära sig olika teknologier som vi använder.

Vi börjar längst bak i backend, där lever databasen. Vi använder oss av postgresql som påstår sig vara "The World's Most Advanced Open Source Relational Database". Men egentligen är det SQL databas som SQL databas kan jag tycka.

Ni kanske känner igen elefanten?

Vår databas lever i en docker container, faktum är att alla våra funktioner lever i varsin docker container. Docker används i flera syften, jag kan nämna ett par. Det ser till att din tjänst är isolerad till en helt egen modul, så att flera tjänster inte råkar bråka med varandra. Dessutom ser det till att din tjänst alltid kör samma operativsystem oavsett om utvecklaren använder linux, windows eller mac. Inga mer "det funkar på min maskin" klagomål.

Docker containerna vi har är:

• database - innehåller vår postgresql databas
• minio - minio är ett open-source filsystem, används av oss för att lagra mötesdokument, bilder och så vidare.
• search - vi använder meilisearch för att indexera våra medlemmar och söka bland dom supersnabbt
• backend - här lever vårat GraphQL API, mer om det längre ner.
• frontend - här lever vår React frontend byggd i Next.js, mer om det längre ner

Det finns fler containers än dessa, men dom andra är egentligen irrelevanta att känna till.

Backend

Vår backend är skriven i TypeScript, som är JavaScript med stöd för typer.

För att komma åt databasen från backend använder vi Knex.js som är en så kallad "query builder". Den hjälper programmeraren enkelt skriva SQL queries genom att skriva kod istället. Vi använder även knex för att seeda och migrera databasen.

På backend använder vi oss av GraphQL för att kommunicera med frontend. Det är ett queryspråk för att definera ett API. Om du är sugen på att gå med i DWWWs backend-team är detta viktigt att kunna och förstå. Vi använder Apollo Server för att köra själva servern. Om du vill lära dig bygga GraphQL apier (inför att gå med i DWWW? 😉), så rekommenderar jag Apollo Servers Getting Started Guide

För att gå med i DWWWs backend team behöver du lära dig:

1. Grunderna inom relationsdatabaser, specifikt postgresql.
2. JavaScript / TypeScript
3. Grunderna i Knex.js och hur det fungerar med migrationer
4. Vad ett webb API är och grunderna om olika typer av anrop
5. Grunderna i GraphQL och hur man använder Apollo Server för att bygga ett GraphQL API.

Du måste inte kunna ALLT innan du går med, men du måste känna till det åtminstone.

DWWW rekommenderar

• Codeacademys JavaScript kurs
• Codeacademys TypeScript kurs
• Apollo Servers Getting Started Guide

Frontend

Vår frontend är också skriven i TypeScript. Vi använder React för att skriva våra UI komponenter.

Som tidigare nämnt använder vi Next.js, ett React framework. Vi använder Next.js för att få smidigt stöd för statiska och server-side renderade komponenter, göra så att sidan känns snabbare, hjälpa till med routing och mycket mer.

Vi använder Material UI som komponentbibliotek, så sparar vi tid när vi utvecklar genom att inte behöver utveckla allt från grunden.

Vi använder i18next för att översätta vår hemsida till engelska, och möjligtvis fler språk i framtiden.

Om du vill bli en del av DWWWs frontend team behöver du lära dig:

1. HTML, CSS och JavaScript / TypeScript
2. React
3. Next.js
4. Hur man konsumerar ett GraphQL API.

Du måste inte kunna ALLT innan du går med, men du måste känna till det åtminstone.

Jag personligen lärde mig HTML, CSS och JavaScript på codeacademy (#not sponsored), och jag rekommenderar deras kurser för att lära sig grunderna.

DWWW rekommenderar

• Codacademys HTML kurs
• Codeacademys CSS kurs
• Codeacademys JavaScript kurs
• Codeacademys TypeScript kurs
• Learn React Quick Start Guide (beta) , vi rekommenderar inte den som inte är beta då den använder utdaterad react logik.
• Learn Next.js docs
• Introduction to GraphQL

Appen

Appen, som för närvarande endast finns för android är byggd i React Native. React Native kan man använda för att skriva appar med React kod, vilket är väldigt smidigt för att många i teamet redan kan React. Därmed är det väldigt likt kodbasen i frontend. App-teamets största uppgift just nu är att lansera appen till iOS.

För att utveckla smidigt, hjälpa till med push notiser och bygga appen använder vi Expo.

Om du vill bli en del av DWWWs app-team behöver du lära dig:

1. HTML, CSS och JavaScript / TypeScript
2. React
3. React Native
4. Expo

Du måste inte kunna ALLT innan du går med, men du måste känna till det åtminstone.

Vår källkod

Jag tror att det var det mesta. Det finns fler saker att ta upp, men det som är absolut viktigast att kunna har tagits upp i denna artikel. Om du vill läsa vår källkod finns den på GitHub:

Medlemssidan:

https://github.com/Dsek-LTH/member-page.git

frontend finns under /frontend och backend finns i skrivande stund under /backend/services/core

Appen

https://github.com/Dsek-LTH/dsek-app

Appen behöver lanseras till iOS ASAP.

new.dsek.se

https://github.com/Dsek-LTH/landing-page.git

Denna sida kommer troligtvis genomgå en del förändringar under nästa år.

Framtiden

Under detta året har vi fått många lärdomar inom DWWW.

Ett av dom är att om ett gäng duktiga och drivna utvecklare slår sina kloka huvuden ihop kan dom göra något riktigt häftigt.

Om du vill vara med och göra skillnad, på riktigt, inom DWWW, så behöver du bli king på webbutveckling. Bästa tiden att börja var igår, näst bästa är just nu :) Lycka till!

Har du några frågor? Tveka inte att höra av dig till dwww-ansvarig@dsek.se

Jag hejar på dig med fanan i högsta hugg.

För D-sektionen i tiden.

Oliver Levay