Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Remix

Introduction to Remix

Remix is a full stack React framework with big focus on web standards and user experience. I talk about my experience with Next.js, and compare it to my experience with Remix so far.

Matija Marohnić

October 26, 2022
Tweet

More Decks by Matija Marohnić

Other Decks in Programming

Transcript

  1. Matija Marohnić
    Introduction to
    A full stack React framework

    View full-size slide

  2. Full stack?
    • frontend + backend

    • enjoying the bene
    fi
    ts of backend more cheaply

    • performance

    • SEO

    • may work without JS

    • etc.

    View full-size slide

  3. React… framework?
    Isn’t React already a framework?
    • in this context React, Vue.js, Svelte etc. can be referred to as UI libraries
    • generation and management of the DOM

    • no bundling, serving, live reloading, routing, pre-fetching etc.

    View full-size slide

  4. What about Next.js?
    • most popular full stack React framework

    • dynamic and static export, CSS support, image and font optimization…

    • tried it, but never particularly loved it

    View full-size slide

  5. My experience with Next.js
    • Next.js hasn’t taught me much

    • features seem like results of requests

    • retrospectively, the static export feature seems ill-advised

    • better to use Eleventy or Astro

    • o
    ff
    ers a lot without much direction

    View full-size slide

  6. next/image
    (for example)
    • a blackbox solution for buzzwords like LCP, CLS

    • doesn’t teach about responsive images, e.g. concepts like “art direction”

    • mentions stu
    ff
    like preload tags and priority hints, but no link

    View full-size slide

  7. Fancy terms
    • serverless, edge computing, deployment services…

    • many courses on building, but not so many on delivering

    • I often felt like this:

    View full-size slide

  8. Remix
    • no static export, teaches edge computing

    • only supports CSS
    fi
    les, no built-in Sass, CSS-in-JS etc.

    • no live-reload yet, but fast bundling with esbuild!

    View full-size slide

  9. • close to The Platform → transferrable skills

    • “build better websites, sometimes with Remix”

    • teaches web development, not (just) Remix

    • I became better at Next.js 😄

    View full-size slide

  10. • a lot of research → greater trust

    • The Edge

    • React Server Components

    • Remix vs Next.js

    View full-size slide

  11. 🧑💻 remix.run

    View full-size slide

  12. 🧑💻 silvenon.com

    View full-size slide

  13. Remix
    • motivated me learn no-JS, caching, cookies… even databases!

    • it helped me
    fi
    nally get into full stack 🥳

    • I’m building better user experiences

    View full-size slide

  14. @silvenon
    Thanks!

    View full-size slide