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 👋 ⚽️ 🧑‍💻 🎧

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.

Code

Agenda

introduction - @alex
example app @pavlik
theory - @alex

a seamless server and browser runtime
- 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
summary
- links
  - React Streaming In Depth: NextJS! Remix! DIY!- Jack Herrington

Meetings

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

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 ---
- 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?
- streams instead of file redner to sting
  - hydrate react on client side
- tests package.json scripts production build
- add Virtual Machine context for importing routes and components
- exclude hardcoded "dist" from compile and dev server

paulcodiny/back-to-the-roots-with-remix