Back to the roots with Remix

The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?

Prerequisites

• Good understanding of JavaScript or TypeScript
• It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications
• Preinstall Node.js, npm
• We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)

Alex Korzhikov

Software Engineer, Netherlands

My primary interest is self development and craftsmanship. I enjoy exploring technologies, coding open source and enterprise projects, teaching, speaking and writing about programming - JavaScript, Node.js, TypeScript, Go, Java, Docker, Kubernetes, JSON Schema, DevOps, Web Components, Algorithms 👋 ⚽️ 🧑‍💻 🎧

• AlexKorzhikov
• korzio

Pavlik Kiselev

Software Engineer, Netherlands

JavaScript developer with full-stack experience and frontend passion. He runs a small development agency codeville.agency and likes to talk about technologies they use: React, Remix and Serverless.

• Pavlik Kiselev
• paulcodiny

Code

• Movies - CodeSandbox Project
• Movies - Github Repository

Agenda

• introduction - @alex
• example app @pavlik
• theory - @alex
  • overview frameworks - @alex, @pavlik
    • backend - express vs nestjs, fastify?
    • rendering strategies/frameworks
      • static site generation/ssr
  • how remix works
    • api
      • Deeper into Remix
        • Compiler
        • HTTP Handler and Adapters
        • Server Framework
        • Browser Framework
      • auth
        • session
      • cookies
      • web worker

      a seamless server and browser runtime

    • esbuild experiment
      • existing remix plugin example
• remix dive in - in practice - @pavlik
  • app notes in depth
    • what we wanted to achieve
      • nested requests
      • ssr
      • no javascript
  • rendering frameworks comparison
    • frontend - NextJS, Astro, Remix...
      • api comparison
• summary
  • links
    • React Streaming In Depth: NextJS! Remix! DIY!- Jack Herrington

Meetings

2023-03-23

• slides from pavlik https://excalidraw.com/#json=cPxoCmTRFZVfhIRiFfyBI,-8sf8ck2VqPiCxjwCYMjtQ

2023-03-17

• esbuild experiment - sat, progress updates

2023-03-05

• pavlik
  • nextjs - not full ssr, data from api on fe only. new version supports though
  • next - pretty app
  • astra?
• alex
  • esbuild experiment
  • Remix ws: begin with example
  • Remix ws: ask mentorees help
• agenda
  • example app
  • theory - alex
    • api
    • overview frameworks
      • express vs nextjs vs astro vs nextjs
    • esbuild experiment
    • how remix works
      • how remix works
  • remix dive in - in practice - pavlik
    • app notes in depth
      • what we wanted to achieve
        • nested requests
        • ssr
        • no javascript
    • overview frameworks
      • astro vs nextjs

2023-02-25

• wow?
  • ask twitter, conf
  • live coding
    • simpler
  • practice
    • more complicated to prepare and conduct

2023-02-17

- Page (movies/shawkank/comments)
  - List
    - Item
    - Item
    - Item
  - Item (url=id, fetch)
  - Comments

pavlik

• parrallel data load
• question: load state per component, why should we nest components in data flow?

alex

• comparison astro, nextjs?

  • how deep should we go? api overview, or deeper. esbuild configs. is remix treeshaking+transformation+build+runtime wrappers+optimizations+vuejs?

• it could validate routes consistency...

• maybe show the simplest remix implementation?

  • timebox todo alex -- 30 min? -- express - route - middleware @controller -> route -> express.route index.js: action/route -> backend.js component react -> client.js esbuild + backend.config -> node backend.js + (server.js)?! esbuild + frontend.config -> frontend.js?!

• another agenda proposal

  • api overview
  • frameworks overview
  • build your remix like framework
    • is compilation part actually interesting?

• live plans

  • remix - part II
  • esbuild
  • remix theory
  • astro vs nextjs

2023-02-05

• https://github.com/korzio/testcodesandbix.git
• remix.run/docs/en/v1/tutorials/jokes
  • https://remix.run/docs/en/v1/tutorials/jokes#build-logout-action
• alex
  • deeper into server side remix? arhictecture, videos
  • astro, nextjs? > later
• pavlik
  • layouts, full path data, no javascript flow with

2023-01-22

• state of js - Rendering Frameworks
• quickstart tutorial
• Idea - to compare with other frameworks
• Agenda

  instead of backend-frontend make a story and split this topics between us?

  • Introduction
  • Remix Overview
    • Definitions
      • Auth, DB, UI, styles, ...
      • Stacks - template
        • task - create your own stack?
    • Theory
      • Node.js Ecosystem
        • Frameworks Overview?
          • NextJS, Astro, Remix...
        • Deeper into Remix
          • Compiler
          • HTTP Handler and Adapters
          • Server Framework
          • Browser Framework
      • package.json
        • Auth, cookies
      • What are @remix-run, @remix-run/node, @remix-run/server-runtime
      • Prisma
      • invariant - TypeScript

      restart needed when db or deps change

    • Frontend
      • @remix-run/react
      • dynamic segment
      • no javascript
      • sync data decomposition
• Sat 28 Jan plans
  • write code - pavlik admin dashboard vs alex user dashboard
    • • nextjs, astro, ?
• Application ideas?
  • user dashboard

    e-commerce items managenemt

    • parallel requests
  • admin dashboard

    owners to manage sales, customers, roles, users

    • no js + filters
• Who does what?
• Tasks - in github issues? Y
  • codespaces
  • codesandbox...
• Alex Todos
  • Alex to ask Daria on format - Online/Offline - 2 hours Online - 2 hours Decide on date -> 12-16 июня Description
  • https://www.youtube.com/playlist?list=PLXoynULbYuEC8-gJCqyXo94RufAvSA6R3
  • https://remix.run/blog/remix-stacks
• Pavlik Todos
  • Pavlik to ask ING FrontEnd Guild Workshop on format
    • March/April offline

---

This workshop will introduce participants to the Remix web framework, a new and innovative full-stack framework that allows developers to focus on building fast, resilient, and user-friendly web applications. The workshop will cover the basics of the framework and will guide participants through the process of building a simple web application from scratch. By the end of the workshop, participants will have a solid understanding of how to use Remix to create web applications that provide a seaml

esbuild experiment

• see assets
• todos:
  • dev routes server
  • add esbuild, jsx
    • rename to jsx, add esbuild step leave only server export. dev server build version should work?
    • change dev server to use esbuild path and run build version
  • dev routes client
  • react ssr
  • load data from endpoint loaders
  • how remix works --- optional ---
  • streams instead of file render to sting
    • hydrate react on client side
    • server side components?
  • move & optimize transform and export to esbuild plugin
    • use esbuild metafile analyze options to get information about outputs https://esbuild.github.io/api/#metafile
  • add react router?
  • tests package.json scripts production build
  • add Virtual Machine context for importing routes and components
  • exclude hardcoded "dist" from compile and dev server