Remix — Not just another javascript framework
Nowadays, a web framework is an integral component in web development. Web Framework is a framework that provides libraries for essential web features such as database access, API, authentication, session management, and many more. Web Framework promotes the re-usability of code to developers. By using the libraries from the framework, developers can quickly integrate a feature without implementing it from scratch, therefore, accelerating the development of the web application. There are a lot of available web frameworks available which are React, Vue, Angular, Next.js, Svelte, Gatsby, Remix, and others.
What is Remix?
Remix is a javascript web framework built on top of React, Web Fetch API, and React Router v6. Remix uses Server-side rendering (SSR) and fully processes the web page on the server before delivering it to the user.
Features
Why use Remix? We already have tons of Web Framework available out there, especially based on Javascript/Typescript, is it worth it to learn and build with Remix?
Here are the notable features which might make you consider using Remix:
Nested Routes
Remix’s Nested Route allows developers to eliminate most of the loading state inside the app. Most web frameworks fetch inside a component producing a request waterfall. Remix loads the data in parallel and then sends the data simultaneously to the user. This allows the app to load faster in Remix compared to using another framework.
Transferable Knowledge
Remix is built based on the Web Fetch API. Usually, most frameworks have their custom API for handling requests and responses. We need to spend time learning how to use the API whenever we start building with a different framework. However, when learning Remix, you will learn the Web Fetch API.
Progressive Enhancement
Remix is focused on Progressive Enhancement. Remix’s core features function without Javascript. This allows users to use the web app with minimal features without Javascript. Users can enable javascript in their browser to enhance their browsing experience.
Route error boundary
Remix has its own error handling component. You can modify the Error handling component‘s message. The unique feature of Remix’s error handling is that the error will be only contained in its route boundary. When an error occurs on a Route, Users are able to continue using other components of the Application without having to refresh the whole page.
There are still many more features available.
Creating your Remix Project
Prerequisites
Node JS (v14 or greater)
npm (v7 or greater)
Initializing Remix
Use the following command in your terminal to initialize a remix project.
npx create-remix@latestEnter your desired project directory
Choose Just the basics for the type of app.
Choose Remix Web Server for the Deployment options.
Choose Javascriptor Typescriptdepending on your preferences.
When asked to run npm install you can choose “Y”. Or type the command manually if you prefer to do it later.
After the process is finished, navigate to the project directory and use the command npm run dev to start the development server.
You can check out http://localhost:3000 to verify that the development server is running.
Project Structure
This is Remix’s project structure. There are 5 folders inside the root directory which are .cache, app, build, node_modules, and public
Our focus is on the main directory which is the app folder.
routes/index.jsx contains the root or the index of the project.
entry.client.jsx contains the code which is loaded first in the browser.
entry.server.jsx contains the code which will run first when the server is hit.
root.jsx is the root component. This is similar to React’s app.js
Wrap Up
By the end of this writing, we have covered:
- What is Remix?
- Core Features of Remix
- Initializing a Remix Project
- Remix’s Project Structure
To learn more about Remix you can read the official documentation here.
