tillbaka till startsidan

62. Du har gett mig något att tänka på

Lyssna på Spotify lyssna! Lyssna på iTunes

Anton BABBLAR på om sitt nya sidoprojekt Fredagslunchen samt det nya heta ramverket som det är byggt med, Remix, och tro det eller ej så blir Thérese faktiskt lite såld. Dessutom en hel del om en skriva dig på näsan-attityd i sin marknadsföring, ett väldigt avancerat excelark, back to basics-strategin, filbaserad routing och att använda formulär istället för fetch för att skicka data.

Om du gillar podden blir vi väldigt glada för en liten recension i iTunes eller en prenumeration på Spotify. Följ oss och säg hej på @asdfpodden på Instagram eller Twitter (Anton, Therése) <3

Länkar

Avsnittets skämt:

Why do you never see Lucifers programs?
He only runs daemons.
Skrapa här!!
Transkribering
Transkriberingen är gjord av nån "AI-grej". Du kan förbättra den genom att klicka precis här :)
00:00:00
"Varför ser du aldrig Lucifers program?"
00:00:04
Jag vet inte.
00:00:08
"Han använder bara dämoner."
00:00:12
Det var kul. Jag tycker det var roligt.
00:00:16
Jag blev så mindfuckad när jag skämtade på engelska och jag trodde att det skulle komma på svenska.
00:00:22
Och sen säger jag ändå "jag vet inte på svenska" och då kände jag mig så jävla dum.
00:00:28
Det hade också varit jättekonstigt om du började prata engelska.
00:00:32
Jag håller med.
00:00:34
På tal om Lucifer och Demons såg jag någon som hade gjort en dal i den här OpenAI-modellen som spottade ut såna här bilder som alla använder.
00:00:46
Han hade skrivit någon prompt som hade med "show me what it looks like to program a demon"
00:00:55
Och då var det verkligen typ en demon som satt vid en dator.
00:00:58
Väldigt kul!
00:01:00
Välkomna till ett nytt avsnitt av ASTF!
00:01:03
Varmt välkomna!
00:01:07
Gud, idag är det mitt ämne känner jag.
00:01:13
Vi ska prata om mitt senaste sidoprojekt som som alltid när det kommer till mina sidoprojekt så känns det just nu som att fan vad bra det är.
00:01:24
Helvete vad kul det är att bygga. Och sen får vi väl se hur länge den här hypen håller i sig.
00:01:29
Men det som jag tänkte på, och det är värt att prata om, är att det är byggt i React-ramverket, som heter Remix.
00:01:40
Som ändå är ganska nytt. Det släpptes väl, det har funnits bakom betalvägg förra året, och sen släpptes det väl open source i våras, eller lite längre?
00:01:53
Något sånt, tio år kanske.
00:01:58
Någonstans där i alla fall. Så det har inte funnits jättelänge för allmänheten att köra.
00:02:03
Trots den bilden folk kanske har av mig, att jag är en person som testar allt nytt och hoppar på nya saker.
00:02:10
Så har jag ändå varit så här "Äh, jag orkar inte testa remix".
00:02:14
Jag vet inte riktigt vart det kommer ifrån. Jag tror att det kommer lite ifrån att de har haft en liten sån här "skriva dig på näsan"-attityd i sin marknadsföring.
00:02:24
Om du förstår vad jag menar.
00:02:27
Ja, är det typ, jag har varit inne i en blogg som var så här "Den här bloggposten var skriven innan Remix fanns och Remix borde du använda för det löser alla dina problem".
00:02:38
Och verkligen så att marknadsföringar var det. Men vi är liksom det bästa sen skivat bröd och allting kommer bättre när du kör remix och hokus pokus fram och tillbaka.
00:02:47
Typiskt osvenskt. Så alla svenskar blir såhär "Ooooh".
00:02:51
Exakt. Och det har då gjort att jag inte riktigt orkat köra remix.
00:02:56
remix. Men sen fick jag den här idén när jag började på ett nytt uppdrag.
00:03:00
Väldigt kort bakgrundsstory till vad det här är för något är att det kallas
00:03:07
för fredagslunchen. Den här appen som jag byggt och det kommer från att när jag var på ett uppdrag för massa år sedan så hade
00:03:12
vi ett avancerat Excel ark där vi förde in.
00:03:17
Vi gick ut och käkade lunch varje fredag tillsammans och då förde vi in då de här lunchen i det här Excel arket och
00:03:22
och satte betyg på dem och lite sådana saker.
00:03:24
Det i sin tur ledde till att Excel-arket spottade ur sig
00:03:27
"Vems tur är det att välja lunch?"
00:03:29
För vi hade ett problem med att
00:03:31
"Vart ska vi gå och äta idag?"
00:03:33
Och så var det ingen som visste riktigt vart vi skulle gå.
00:03:36
Det blev liksom kaos.
00:03:38
Så det här avancerade Excel-arket löste det problemet.
00:03:40
Men då började jag på ett nytt uppdrag i våras
00:03:43
med en kollega från det där gamla uppdraget.
00:03:45
Då kom jag ifrån att "Ska vi inte bygga den här appen nu?"
00:03:50
-från det här Excel-arket.
00:03:51
Vi har pratat om att vi gjort det flera år tidigare, men aldrig blev av.
00:03:54
Och nu sa vi "ja, men vi gör det tillsammans".
00:03:56
Och sen byggde jag den på semestern själv.
00:04:00
Vilket är ett dåligt exempel på hur man ska göra.
00:04:04
Men det var då för att jag testade Remix-
00:04:07
-och tyckte att det funkade så jävla bra.
00:04:11
Om jag ska vara ärlig, liksom.
00:04:13
-För... -Är det det bästa sen skivat bröd?
00:04:16
Nej, jag vet inte om det är det bästa sen skivat bröd.
00:04:18
Men det passade extremt bra till den här typen av hemsida eller den här typen av applikation.
00:04:26
Jag kan försöka förklara lite grann vad Remix är för dig så får vi se om du fattar.
00:04:31
Och du fattar förhoppningsvis de som lyssnar också.
00:04:35
Men om man liksom... vänta jag ska ta upp Remix-dokumentation framför mig så jag kan få pitchen.
00:04:43
Men jag tänker först, min grundtanke kring Remix är att det väldigt mycket går tillbaka till att använda native-grejer i browsern och är extremt bra egentligen för formulär.
00:04:58
Exakt. Det är i stort sett idén bakom att vi vill använda så mycket som finns inbyggt i JavaScript, browsern och HTML som möjligt.
00:05:11
Utan att lägga på massa lager ovanpå.
00:05:16
Läser man på deras hemsida så står det typ så här "Focused on web standards and modern web app UX. You're simply going to build better websites."
00:05:25
Och det här är också så här "Aaah, det är lite säljigt."
00:05:27
"Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick and resilient user experience. People are gonna love using your stuff."
00:05:40
Och det är som du säger, de har en ganska stor fokus på att man ska använda de byggstena som finns.
00:05:51
Väldigt mycket är att du skickar FormData-objekt istället för JSON
00:05:59
när du gör anrop.
00:06:02
Det var den stora grejen.
00:06:06
Istället för att du gör en onClick-handler på din knapp
00:06:09
och sen så har du ditt state i någon useState-hook
00:06:14
som fångar upp allt från ditt formulär med onChange-grejer
00:06:17
Istället för det har du en "form"-komponent som kommer från Remix.
00:06:21
Det den gör är att rendera ett formulär, alltså ett form-element.
00:06:26
Sen lägger den på lite magi och så har du en "Submit"-knapp.
00:06:30
Istället för att ha allt det här manuellt, att du skickar nåt och kör "fetch" och ett request med din data och allt sånt.
00:06:38
Så har du bara att du submittar ditt formulär.
00:06:40
Det här finns inbyggt, och det känns som att många har glömt bort det.
00:06:46
Du kan submitta ett formulär, du kan köra en post request från ett formulär, du kan köra ett get request från ett formulär och så vidare.
00:06:53
– Men det är väldigt mycket då kör de liksom uncontrolled components. – Ja, precis.
00:06:59
– Men det är mer som inbyggt React-hooks form då?
00:07:04
– Ja, exakt. Du skulle lätt kunna köra React-hooks form
00:07:08
ovanpå det här, bara att skita i
00:07:11
submit-vitarna eller "wrappa" Remix Submit i React Hook Form.
00:07:18
Så att när du submitar så submittar du formuläret.
00:07:20
Det finns ju lite hooks för att när man bygger applikationer idag så blir de ju till slut väldigt interaktiva.
00:07:25
Det går ju att göra det i Remix också.
00:07:27
Så att det finns hooks för att "use form" och så kan du få ut en submit-funktion som du kan anropa för att submita formuläret istället för att klicka på knappen till exempel.
00:07:37
Då skulle man kunna använda React Hook Form för att köra avancerad validering eller logik på vilka fält man skulle visa och sånt där.
00:07:44
Men hittills har jag inte utgjort det.
00:07:47
Jag tänker att om någon lyssnar på det här och vill gå in och titta på den här sajten så finns den på fredagslunchen.club.
00:07:52
Den ligger också i beskrivningen.
00:07:53
Men då kan man gå in och titta lite grann och klicka runt om man vill.
00:07:55
Medans vi pratar så kanske man fattar hur den ser ut.
00:08:00
Just det. Men för någonting, för jag vet att när jag tittar på det här så var det fortfarande så att någonting som man tänkte att det kanske skulle lösa men inte riktigt löste var formvalidering.
00:08:11
Ja, precis. Det gör det ju inte. Alltså server-side kan du göra, för det är en viktig grej här att Remix är liksom ett fullstack ramverk.
00:08:20
Så det är inte bara ett frontend-ramverk, utan du får även en server-side med handlers för de här endpoints som du skapar upp.
00:08:29
Eller formulär-postningarna egentligen.
00:08:32
Men det finns ju ingen inbyggd client-side-validering för formulär.
00:08:40
Men däremot finns det inbyggt i browsern ganska mycket.
00:08:43
Det finns ju det här formulär-constraints, jag kommer inte ihåg exakt vad det heter, men form-constraints tror jag.
00:08:48
som är när du sätter en "required" attribut på ett element, eller på en input-element till exempel.
00:08:54
Eller du sätter min och max på ett "type number" element, och så vidare.
00:09:00
Så de kör jag i stort sett bara i Fredagslunchen.
00:09:05
Och sen har jag "server-side-validering" då, som när den skickar tillbaka fel och då renderar man dem vid rätt element.
00:09:11
Ja, alltså det var länge sedan jag satt med formulär innan.
00:09:19
Alltså det var ett stort glapp liksom.
00:09:21
För då hade jag nog när jag kom tillbaka till formulär igen, notoriskt svårt.
00:09:26
Men hade glömt bort valideringen och hur extra notoriskt svårt det var.
00:09:31
Alltså det var som en kall dusch att komma tillbaka till det där.
00:09:34
Jag håller med, men det känns som att det här formulär constraint API räcker väldigt långt.
00:09:42
Det funkar väldigt bra för de flesta grejerna jag gör just nu.
00:09:48
Sen är det vissa saker som kanske inte riktigt kontrolleras.
00:09:52
Jag har ingen avancerad logik på att du ska ha ett telefonnummer input till exempel.
00:09:59
Det har jag inte att jag gör någon validering på.
00:10:02
Kan du styla?
00:10:04
I sådana fall skulle jag bara göra det server-side som det är just nu.
00:10:08
Just det, men kan du styla det som du vill eller blir det alltid bara browser-native?
00:10:13
Ja, de är väl browser-native bara. Jag har inte ens tänkt på hur jag skulle styla dem.
00:10:18
Faktiskt, om jag ska vara helt ärlig.
00:10:20
Vi funderar på om man kunde göra det på något per attribut.
00:10:23
Du vet när man kan säga om det här attributet har det här värdet så vill jag styla det så här.
00:10:28
Det kanske man kan.
00:10:29
Jo, jag undrar om det inte finns...
00:10:31
Jag tror att de slänger på om det är något data-attribut eller om det är något liknande.
00:10:36
När ett element har något fel.
00:10:38
Så att du skulle kunna rendera att borden blir röd eller bakgrunden blir röd.
00:10:41
Eller vad man nu vill göra.
00:10:44
Så det är det som jag känner igen när jag var inne och läste om det här form-constraints-apiet.
00:10:50
Just det.
00:10:51
Och sen det är ju som du säger, formulär i sig är ju lite mäckiga.
00:10:55
Det blir ju också lite mecket "vad händer när man klickar på save i formuläret?"
00:11:01
Och så ska det skickas till någon endpoint och sen blir det en redirect av sig själv när man håller på med formulär.
00:11:07
Men det är här en remix-magi kommer in som ligger ovanpå.
00:11:13
För det som händer är att om jag gör en ny route, för de använder också routingen i hela appen.
00:11:22
baseras på React Router.
00:11:25
Det är samma skapare bakom React Router som har skapat Remix.
00:11:28
De har tagit React Router-idéerna och gjort ett fullstäckt ramverk av det.
00:11:33
Jag vet också att de håller på att portar ganska mycket av den här dataladdningslogiken
00:11:38
in i React Router.
00:11:40
Så om du inte vill använda hela Remix-ramverket så ska du kunna köra
00:11:45
bara dataladdningen och routingen via React Router v6 eller v7.
00:11:52
Så det de har gjort egentligen är att du har en fil, eller så här konventionen ska säga, så det går det på flera sätt
00:12:03
Men konventionen är att du har en filbaserad routing, så att baserat på vilka filer du skapar och i vilken mappstruktur du lägger dem så får du en routing
00:12:13
Då kan det till exempel vara att du har en fil eller på Frihetslunchen kan man skapa en grupp
00:12:20
och i den gruppen kan du gå in på en massa olika saker.
00:12:23
Du kan titta på en specifik lunch som du har lagt upp eller en specifik användare.
00:12:27
Då är det en mappstruktur.
00:12:30
Du har en GroupID-mapp till exempel som mappar till GroupID-delen av URLen
00:12:38
som sedan används för att hämta upp gruppens data från databasen.
00:12:42
Det i sin tur. Sen kan man ha en undermapp till den som är en till del av Pathenson.
00:12:48
Du går på "groups/groupid/lunch" till exempel.
00:12:55
Då ligger "lunchrouten" som är en fil som ligger under den i mappstrukturen.
00:13:02
Med "nest" ladd ner.
00:13:04
Och så skapas allt det där upp automatiskt.
00:13:06
Och sen gör de massa magi här för att man ska slippa det här som kallas för "request vattenfall".
00:13:16
Så att om du laddar in flera komponenter på en sida, du har en föräldrakomponent som gör någon datanrop och sen så har du något barnkomponent som gör någon datanrop och så vidare.
00:13:27
Då blir det ofta att du väntar först på att föräldern ska rendera och gör klart sitt datanrop, sen kommer barnet göra sina datanrop och rendera och så vidare.
00:13:35
Och här gör de en massa saker som de smart räknar ut.
00:13:40
"Vilka andra ska vi göra?" Och så gör de alla de parallellt.
00:13:43
Och det gör ju att sajterna känns väldigt, väldigt snabba.
00:13:47
Och sen är det ju också server-sider underat såklart.
00:13:50
Men det tänkte jag vara det som alla råvaror är förfri.
00:13:54
– Blir det längre tid till time to paint då?
00:13:59
– Nej, det borde det inte bli.
00:14:01
Men innan man ser något?
00:14:06
Nej, utan den gör ju liksom alla de här anropena.
00:14:09
Om du skulle server-side-rendera, det spelar alltså så här,
00:14:12
om du skulle server-side-rendera med ett andra exempel,
00:14:14
så tar det längre tid att göra fler anrop sekventiellt än om du gör dem parallellt.
00:14:19
Just det, gör de parallellt, ja.
00:14:23
Ja, men jag tänker att innan du ens ser någonting så skulle det kunna ta längre tid,
00:14:27
För att om barnets anrop tar längre tid än förälderns anrop.
00:14:33
Ja, precis. Säg att det kommer ta lika lång tid som det längsta anropet tar.
00:14:39
Precis. Så om du då har ett barn som har ett jävla monsteranrop utan anledning.
00:14:45
Men säg det. Då kommer du kanske få en väldigt tydlig skillnad.
00:14:50
Ja, så skulle det kunna vara. Men det beror ju också lite på hur det är uppsatt.
00:14:53
Nu finns det ju halvfärdig support för suspens i React och server-side suspens är väl...
00:15:03
Jag vågar inte säga om det är implementerat eller inte för jag kommer inte ihåg.
00:15:06
Men där du kan säga att den här biten ska vara wrappad i suspens och då kan vi server-side-rendera allting fram tills den.
00:15:12
Om vi vet att den är långsam. Och sen så skickar vi in den biten när den är klar.
00:15:16
Vet inte hur supporten i Remix ser ut för det här, för jag har inte haft någon anledning att testa.
00:15:22
Men det är ju liksom en del av framtiden, React i stort sett, när du ska kunna streama in vissa delar och
00:15:29
rappa saker i Suspend Serverside och sen skicka tillbaka den utan att du behöver skicka all data igen.
00:15:34
Men sen då, det som jag tycker gör det så jävla lätt att jobba med det här sen är att
00:15:44
När du har skapat upp en route, alltså en fil.
00:15:47
Det kan vara till exempel att den heter "groups.tsx"
00:15:52
för jag kör TypeScript och tycker det är jävligt nice.
00:15:55
Så då har man skapat upp en "groups.tsx", man skapar upp en komponent som är det som renderas och allt sånt.
00:16:01
Och sen så kanske man behöver någon typ av data i den där routen.
00:16:05
Och det man gör då är att i samma fil som du har definierat din route så skapar du en "loader" som man kallar det.
00:16:11
Det är egentligen bara en funktion som du exporterar och kallar för Loader.
00:16:17
Då kommer Remix köra den när du laddar den routen.
00:16:23
Den skickas till din komponent genom en liten hook som heter UseLoaderData.
00:16:28
Vad du nu returnerar från din Loader får du ut ur den här UseLoaderData-hucken.
00:16:35
Det här är lite likt om man har Next som exempel där du har GetServerSideProps.
00:16:40
Det är samma tanke i stort sett, bara att istället för att det skickas som props så skickas det genom en hook.
00:16:45
Det som också är på det här spåret att de använder väldigt mycket native, eller inbyggda funktionalitet, är att du kan returnera ett request-objekt.
00:16:57
Som är det som browsern använder för att visa ett request, eller server-side i Node använder för att visa ett request.
00:17:05
Det kan vara att du returnerar ett request och sätter vilken statuskod du vill ha.
00:17:09
Till exempel 200 och såna grejer.
00:17:11
Det funkar extremt bra.
00:17:16
Sen har de visst att de laddar om de här lite grann i klienten också.
00:17:21
För det är klientnavigering när du väl har laddat in sidan.
00:17:24
Så om du går mellan olika routes så kommer den automatiskt köra din loader och ladda in datan till den routen som du går till.
00:17:32
Och det är liksom så man spesar det. Och det är ganska likt hur det funkar i Next.
00:17:37
I att du spesar din loader eller du spesar din getServerSideProps och så kan du matcha data från servern med din route-komponent.
00:17:45
Om det låter vettigt.
00:17:49
– Ja, men alltså för att det där... Jag kommer ihåg att jag läste lite om det där.
00:17:53
Och det var som att de sa att vi till andra håller vårt egna API, liksom.
00:17:58
Men jag fick nog aldrig riktigt någon fjong på det där.
00:18:00
För du säger att jag då väljer vilka egna statiskkoder jag vill returnera.
00:18:06
Men vad är...
00:18:08
Säg att jag behöver koppla ihop det här med en databas.
00:18:10
Är det den delen som gör det då?
00:18:12
Eller snackar vi fortfarande att jag har det till backen?
00:18:14
Nej, den körs ju på servern, så att säga.
00:18:18
Sen beror det ju på lite grann vad du har för databas och sånt.
00:18:21
Alltså, pratar vi i fredagslunchen till exempel, då har jag bara en SQLite-databas.
00:18:25
som ligger bredvid servern.
00:18:28
Och sen kör jag Prisma som är ett ORM för att hantera den.
00:18:33
Så jag har egentligen bara skapat upp några filer för att prata med databasen.
00:18:38
För att ha det lite separerat.
00:18:40
Och då anropar jag bara några funktioner som jag har i dem.
00:18:43
Och då läser de och skriver från databasen direkt i loader-funktionen.
00:18:47
Men du skulle ju kunna ha att "här gör jag ett anrop till min databas som ligger någon annanstans".
00:18:52
- Ja, du skulle också kunna ha någon typ av back-end API som ligger och kör för att hantera större saker.
00:18:58
- Ja, precis. Skulle du ha ett separat API, då skulle du kunna anropa vad du vill därifrån.
00:19:05
- Ja, men då blir det... Säg att du har ett API som vill pussla ihop flera olika tjänster och databaskopplingar och grejer.
00:19:10
Då skulle du ändå då... Är det då servern som kommer göra anropan och sen skicka ett nytt request upp till klienten?
00:19:20
Ja, om du lägger i loader-funktionen, för de kör ju alltid på servern.
00:19:26
Just det, men jag skulle kunna göra det direkt från klientkod också.
00:19:29
Ja, du skulle kunna lägga det i komponenten som du vill.
00:19:31
Alltså skriva det som att det var ett spa, så kan du lägga det i en ljuseffekthook och göra ett androp därifrån.
00:19:38
Några gånger missar jag allt det göttiga när vi...
00:19:41
Man missar lite av det göttiga, det gör man absolut.
00:19:43
Det som är nice sen är att när det kommer till formulären.
00:19:49
Så om man skapar en sådan här form eller man importerar den här formkomponenten som de har och så kör man den
00:19:55
som sitt formulär och så specerar man sin data som vanligt.
00:19:58
Du har inputs med names på som du sätter till det värde du vill ha och
00:20:04
med alla typer du vill ha och sedan har du en submit-knapp.
00:20:07
När du då klickar submit på den, då kan du på samma sätt skapa upp en funktion och
00:20:13
exportera den i din route-komponent som då heter Action istället.
00:20:18
Så du gör Export Const Action och det är då en funktion som tar emot
00:20:21
requestet och all information på det.
00:20:24
Och det är den funktionen som kommer att köras när du submittar ditt formulär.
00:20:28
Och då kommer den hantera den informationen som kommer därifrån.
00:20:33
Så då kan du plocka ut från det här formdata-objektet som skickas.
00:20:36
Så kan du plocka ut all information och göra om du vill göra någon
00:20:38
-som för exempel side-validering, och svara tillbaka med om du vill skicka tillbaka felkoder-
00:20:43
-eller om du vill redirekta till en annan sida, eller vad det nu kan vara.
00:20:48
Allt sånt görs ur action-funktionen, som också ligger i samma fil som hela routern.
00:20:57
-Men kör den också bara på servern? -Ja, den kör också bara på servern.
00:21:01
Så man kan jämföra med att action-funktionen skulle kunna jämföras med en API-endpoint.
00:21:06
Bara att den är hårt knuten, eller inte hårt knuten, men den är knuten till ditt formulär som du har i din route.
00:21:18
–Okej, men det gäller bara formulär, eller?
00:21:20
–Ja, det går att göra. Du kan ju skapa upp API-routes, så att säga.
00:21:26
Skillnaden blir att du skapar inte upp någon loader eller komponent i din fil.
00:21:33
Du exporterar bara den här action-grejen.
00:21:35
Då kan du anropa den som vanligt.
00:21:37
Du skulle kunna skicka JSON till den om du vill, och du kan skicka formdata och sånt där.
00:21:41
Då blir det mer en API-route än något annat.
00:21:45
- Men ponerar att jag ska bygga en applikation som inte har ett enda form.
00:21:51
Är det värt att använda Remix?
00:21:54
Det beror ju på vad den ska ha i stället.
00:21:59
Alltså vad du ska göra för information och sånt.
00:22:03
Det kan vara värt det, för en grej som är med Frihetslunchen till exempel är att
00:22:09
hela applikationen funkar nästan, det är väldigt nära, utan JavaScript som det är just nu.
00:22:15
Och det är utan att jag har försökt göra det så.
00:22:18
Anledningen till att det inte funkar är att jag kör några komponenter som inte har en fin fallback.
00:22:23
Jag har lite avancerade typ Select, Dropdance med Autocomplete och grejer.
00:22:29
Och de har ingen bra fallback till när du har JavaScript avstängt.
00:22:33
Men annars funkar i stort sett hela min applikation utan JavaScript.
00:22:36
Alltså även att skapa nya grupper och logga in och registrera sig och allting sånt.
00:22:41
Och det är ju väldigt trevligt.
00:22:42
Och det beror ju då på att jag använder formulären istället för JavaScript för allting sånt.
00:22:48
Och då menar du att det är för att allting är serverenderat?
00:22:51
Ja, precis. För allting serverenderas.
00:22:52
Och formulären används för att skicka data.
00:22:54
Så du behöver ingen JavaScript i klienten för att ett formulär ska skicka sin data.
00:22:59
- Ja, det är det nya som är det gamla.
00:23:04
- Så är det verkligen.
00:23:06
Många pratar om att det är en pendel, allting.
00:23:10
Nu har vi svingat ganska långt till client-siden.
00:23:14
Det är att allt ska vara ett spa.
00:23:16
Och nu håller pendeln på att svinga tillbaka lite grann.
00:23:19
Och sen får man väl se hur långt det tar vägen.
00:23:22
Men förhoppningsvis kan man hitta det här väldigt svåra ordet "Equilibrium".
00:23:27
Alltså ett nollläge, eller vad fan det är, när den står still.
00:23:30
Där det liksom är toppen.
00:23:33
Equilibrium?
00:23:35
Equilibrium, så kanske heter det.
00:23:37
Är det?
00:23:38
Jag har ingen aning.
00:23:39
Det är nog samma sak.
00:23:41
Det är ett klassiskt ord som känns här.
00:23:43
Det heter nog så här på engelska, det borde heta så här på svenska.
00:23:46
Ja, jag vet inte.
00:23:48
Men en fråga då.
00:23:52
Om man som till exempel jag skulle sitta och vela mellan Next och Remix.
00:23:58
Vad har du för tankar där?
00:24:00
Jag tycker det är svårt att avgöra för att jag inte har kört tillräckligt mycket Remix som det är just nu.
00:24:14
Jag tycker att för det här ljusgreset jag pratar om, där det är väldigt mycket formulär och datavisning och sånt.
00:24:21
Där tycker jag att Remix är magiskt bra hittills.
00:24:25
Jag har jobbat kanske två månader på det här till och från.
00:24:28
Och tycker att det funkar skitbra.
00:24:30
Det är sällan jag har byggt en applikation som jag har känt två månader senare att "fan vad enkelt det är att lägga till nya features".
00:24:37
"Fan vad enkelt det går att ändra saker och uppdatera saker och bygga om hur routern funkar och allting sånt".
00:24:43
Där tycker jag det är väldigt bra.
00:24:45
Jag vet att för nästa del så har de en RFC ute för att de ska uppdatera hur routerna funkar.
00:24:55
Då kommer det komma väldigt mycket av det som Remix har.
00:24:58
Alltså att du har den här nästladde routstrukturen där det beror på vilka mappar du har så kan du få olika.
00:25:06
Det finns också en sak i React Router som jag inte tror att jag nämnde.
00:25:12
Du kan ha en outlet-komponent.
00:25:14
Om du har en index-route eller en groups-route.
00:25:19
Den listar en vänstermeny med alla grupper i.
00:25:27
Den kan också rendera en outlet som är resten av skärmen.
00:25:31
När du då klickar på en av de här länkarna i menyn, då kanske den går till "groups/id".
00:25:43
Id kommer att renderas i den här outlet-komponenten.
00:25:51
Då kan du ha flera routes som renderar nästlade grejer på olika ställen på skärmen.
00:25:58
Det är väldigt svårt att förklara utan att visa det visuellt.
00:26:00
Men kolla på Remix eller på React Router så förstår man hur det funkar.
00:26:04
Och de bitarna kommer att komma till Next också.
00:26:07
Och jag tycker det är ett väldigt bra sätt att strukturera sina routes på.
00:26:14
Det blir väldigt tydligt.
00:26:16
Så svarta frågan är... Jag vet inte riktigt.
00:26:20
Okej.
00:26:24
Nej, bara den här outlet-grejen, jag visste inte om det. Det är ganska coolt egentligen.
00:26:29
För att jag har tidigare så här att vi byggde en sidodrawer som hade ett eget routing-system.
00:26:38
Till skillnad mot resten av skärmen.
00:26:40
Och då blev det så att man fick ha två history-objekt istället för att köra en memory-router och en browser-router.
00:26:47
Då skulle man slippa göra det i det här fallet.
00:26:49
Ja, precis. Jag har sprungit på den här outlet-idén några gånger tidigare och det har aldrig riktigt fastnat för mig.
00:26:58
Men nu tycker jag att det funkar väldigt bra, även om jag inte använder det supermycket i Frihetslunch-nappen.
00:27:03
Jag tycker att det är en väldigt bra idé, särskilt när man har den här tydliga hierarkin på sitt innehåll.
00:27:11
Jag tror att Remix skulle vara en dröm för att bygga en dashboard.
00:27:17
Då skulle du kunna ha outlets på lite olika ställen som baserat på vad du väljer i undermenyer.
00:27:24
Rendera saker på olika ställen.
00:27:26
Det tror jag den passar extremt bra för.
00:27:30
Du har gett mig lite att tänka på.
00:27:35
Ja, det är bra.
00:27:37
En annan grej som jag tycker är jättebra med Remix, som inte är hur ramverket funkar, men ur dokumentationsperspektiv och utvecklar DX-perspektiv, som vi pratade om innan, är att de har något som de kallar för stacks, som egentligen är bara ett annat namn för templates.
00:27:56
Men de har väldigt väl utbyggda templates på hur saker skulle kunna funka.
00:28:02
Så att Fredagslunch är baserat på något som kallas "The Indie Stack".
00:28:05
Och jag tror att de döper efter musikgenrer av någon anledning.
00:28:09
Så det finns ett metal stack och ett pop stack och allting sånt.
00:28:12
Men det här var liksom "The Indie Stack" om jag minns rätt.
00:28:14
Och då fick jag med en väldigt bra boilerplate med en SQLite databas.
00:28:19
Med ganska basic användarlig loggning.
00:28:22
med TypeScript support och allt man vill ha runt omkring.
00:28:27
Det gör att det är väldigt lätt att komma igång och testa hur man känner kring Remix
00:28:32
utan att behöva sitta och tänka "Fy fan vad jobbigt det är att sätta upp det här"
00:28:35
"Och hur skulle det funka om jag kör en databas?"
00:28:38
"Och hur skulle det funka med det här?"
00:28:39
Du kan testa Remix ganska lätt utan att behöva kommitta så mycket.
00:28:44
Hur är det med att bygga sida?
00:28:50
För i Next så kan man välja om man vill ha ett serverbygge static eller en klientbara.
00:28:59
Finns det möjlighet till remix eller är allting server?
00:29:01
Allting är server.
00:29:02
Och om jag minns rätt så är det ett väldigt medvetet val att de som har gjort det inte tror på statiskt genererat.
00:29:08
De tror att serverkraft är så pass billigt idag att du kan lika gärna server side-rendera än att statiskt generera någonting.
00:29:20
Ja, det kan jag väl känna.
00:29:23
Jag har liksom ingen riktigt åsikt. Jag tänker mig att statusgenererade saker kan ju också vara väldigt trevligt att slippa ha en server.
00:29:30
För att nu jag hostar den här på något som heter fly.io med en docker, container och sådär.
00:29:35
Och det funkar ju bra, men jag vet ju också att det skulle kunna strula.
00:29:40
Och jag hatar ju att gå ner i någon jävla infrastruktur och gräva utan att veta vad jag håller på med riktigt.
00:29:49
Känner du dig träffad? Jag vet att du har exakt det här du sitter med just nu.
00:29:53
Ja, jag är i ett sånt djupt aveshål.
00:29:57
Men det kan man ju spara till en annan gång.
00:30:02
Det känns som att jag har rantat i 30 minuter om Remix och att det är väldigt trevligt.
00:30:09
Funderar du på något mer? Det känns som att det är en perfekt tillfälle för dig att göra en fråga.
00:30:15
Nej, jag är lite mer fascinerad över att du har lyckats andas samtidigt.
00:30:23
Jag vet inte om jag har gjort det, jag kände att det är lite anfådd.
00:30:26
Ja, det har gått undan, men jag tycker det har varit extremt matnyttig information.
00:30:32
Jag vet inte, jag har varit lite sugen på att prova Remix, men sen gick jag in och började läsa och fastnade också lite för den här
00:30:39
"Bäst sen skivat bröd, vi löser alla problem." Då kände jag lite...
00:30:44
Och så la jag ner. Men du har fått mig lite taggad än.
00:30:48
Jag funderar på om jag kanske ska välja det över Next nästa gång.
00:30:51
Jag tycker definitivt att det är värt att testa.
00:30:54
För jag tycker utvecklarupplevelsen är väldigt bra.
00:30:59
Och jag tycker idéerna bakom är väldigt bra.
00:31:03
Jag tror jag skrev någon tweet när jag började testa det.
00:31:05
Jag tänkte inte hoppa på Remix-tåget, men det är väldigt bra.
00:31:11
Jag är väldigt glad att jag gjorde det.
00:31:12
För att det är väldigt lätt att lägga på nya features och bygga nya saker.
00:31:18
Sen kanske det spricker.
00:31:19
Frihetslunchen-appen är inte jättestor, men den är inte jätteliten heller.
00:31:23
Jag har ändå hunnit bygga ett gäng features som jag inte trodde skulle hinna bygga så här snabbt.
00:31:29
Det är ganska stora namn bakom det. Eller det är ganska bra grejer bakom det.
00:31:36
Det är Rec Router, Testing Library.
00:31:39
Ja, det är Kenzie Dodds, Ryan Florens, Michael Jackson och lite sådana folk om man känner igen dem.
00:31:47
Ja, så det känns som beprövade. Eller de har gjort mycket också.
00:31:52
De har extremt mycket erfarenhet kring många av de här grejbitarna.
00:31:56
Ja, verkligen. Jag tycker att man ska ge det ett försök.
00:32:03
Nu var det ett tag sedan, men jag testade ju Astro också som är ett mycket mindre moget ramverk för ett tag sedan.
00:32:10
Jag nämnde det kort i podden någon gång.
00:32:13
Men det fastnade jag inte alls för på samma sätt.
00:32:16
Det kanske är superbra också, men här var det verkligen så här att "oj, vad enkelt det är" var min upplevelse.
00:32:21
Och det tycker jag är ett gott betyg.
00:32:25
Hur är communityn och grejerna? Finns det hjälp att få när man hamnar i trubbel?
00:32:31
Jag har med mig någon Discord community, vilket uppenbarligen är en nya heta för alla saker.
00:32:37
Men de har en Discord community där folk är väldigt hjälpsamma.
00:32:41
Och det är extremt hög aktivitet. Men det kanske inte riktigt finns det här ekosystemet runt omkring det som det finns för Next.
00:32:50
Next, där finns det i stort sett plugins och extensions för allt.
00:32:55
Och på samma sätt mycket fler frågor och svar på Stack Overflow.
00:32:59
Men det är inte obefintligt heller.
00:33:01
Det är ganska många som kör Remix redan och tycker att det funkar väldigt bra.
00:33:06
Ja, det är nice. Där vill jag ha statisk information.
00:33:12
Jag vill ju inte behöva prata med människor direkt.
00:33:15
Nej, exakt. Du vill inte behöva skriva i någon jävla chatt.
00:33:17
Nej, för fan.
00:33:19
Nej, men det håller jag med dig om. Att behöva leta efter saker i någon Discord är helt värtlöst.
00:33:26
Ja.
00:33:28
Men ja, det kanske ska runda av remix-resan för den där gången.
00:33:35
Vi kanske får göra det. Jag kan andas litegrann igen.
00:33:38
Ja, så att du inte drunknar i luften.
00:33:43
Men ja, annars då? Vi finns på samma gamla vanliga ställen.
00:33:53
Exakt vad det är. Vi finns där vi finns. Vi hörs igen om två veckor.
00:33:59
Ha det bra, hej då!
00:34:02
Bye bye!
00:34:03
[Outromusik]
Tillbaka upp