Using Next.JS and Redux for Epic Noscript Web Apps

Rate this content
Bookmark

A short exploration of a method for building websites that work without JS, while still enjoying the convenience of modern frontend and backend technologies - with live coding!

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

The main advantage of using Next.js and Redux for no-script web apps is the ability to create applications that function seamlessly both with and without JavaScript enabled in the browser. This approach allows for consistent performance and user experience by ensuring the same HTML is rendered and state management is maintained across both scenarios.

Individuals may choose to disable JavaScript for several reasons including improved performance, faster load times, fewer interruptions like popups, enhanced privacy by avoiding tracking scripts, and increased security by mitigating risks like cross-site scripting and other vulnerabilities associated with ad networks.

Web applications can function without JavaScript by utilizing server-side processing and forms to manage interactions. When JavaScript is disabled, actions like button clicks result in form submissions that are processed server-side, allowing the server to handle state management and rendering of the updated application state.

In the no-script version, instead of using JavaScript event handlers, buttons were wrapped in forms. These forms handle submissions directly, sending the action to the server when JavaScript is disabled. When JavaScript is enabled, the default form submission is prevented, and actions are handled client-side.

Yes, async actions can be handled in a no-script web app by passing the name of an action creator to the server. The server then awaits the dispatch of the action creator, processes the action asynchronously, and updates the state accordingly, ensuring the functionality remains consistent with or without JavaScript.

Potential drawbacks include increased server load due to handling more actions server-side, potential loss of dynamic client-side interactions like animations or immediate feedback, and additional complexity in managing forms and submissions for every user interaction.

Styles in no-script scenarios can still be applied as usual, though some issues may arise in development mode with frameworks like Next.js. In production, styles should render correctly even if JavaScript is disabled, ensuring the visual appearance remains consistent.

Daniel Skogly
Daniel Skogly
21 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This Talk explores developing web applications that work without JavaScript enabled in the browser, while still enjoying the benefits of modern web technologies. The speaker demonstrates converting an existing application to work without JavaScript by wrapping buttons in a form and preventing the default submit event. React helpers are introduced to handle async actions and the speaker shows how to make a counter app work without JavaScript by removing unnecessary callbacks and changing buttons to a button component. The talk also covers adding a form and a surprise feature, and emphasizes that by leveraging forms and an event-based store, applications can seamlessly work with or without JavaScript.

1. Introduction to No-Script Web Apps

Short description:

In this talk, I will explore a method to develop applications that work without JavaScript enabled in the browser while still enjoying the benefits of modern web technologies. I will show you a TodoMEC application that works with and without JavaScript. There are several reasons why someone would disable JavaScript, including performance, fewer popups, faster load times, and increased security. I added making my wishlist service work without JavaScript to my task list because it's privacy-friendly and can function without JavaScript. However, I didn't know how to achieve this with Redux and server-side rendering.

Hi, my name is Daniel and I'm a web developer and a privacy enthusiast based in Oslo, Norway. Thank you for tuning in to this talk about using Next.js and Redux for epic no-script web apps, which will be a short exploration of a method that will enable you to develop applications that work without JavaScript enabled in the browser while still enjoying the benefits and convenience of modern web technologies when making them.

Right off the bat, I want to show you this. This is your standard TodoMEC application, where you can add stuff, edit stuff, check stuff off, filter them and clear them. And here it is again. And I want you to pay close attention and see if you can spot any difference. So we can add stuff, we can say whoops, and edit stuff, check off stuff, apply some filters and we can clear them. So, notice anything? Well, this last one was entirely without JavaScript in the browser. And what's so exciting is that this was both the exact same React application, the exact same HTML rendered to the DOM. And I find that pretty cool, that we can have one application that seamlessly works both with and without JavaScript.

But why would anyone disable JavaScript in the first place? Well, there are several reasons, actually. One of them is performance. When there's no JavaScript running in the background, then your computer has more resources to do other stuff. Another one is fewer popups. When you disable JavaScript, you don't have any of the pull screen newsletter signups or slides up from the bottom, scroll hogging or content that are suddenly applied to the website that makes the scrolling jump and stuff like that. You also have faster load times, as obviously you're not loading the JavaScript, so the page will load faster. And a contributing factor to that is that you're not loading the tracking scripts and the ad networks that in themselves aren't really wanted most of the time. Some users will also disable JavaScript because of increased security. There are examples in the past where ad networks have been used as an attack vector for browser vulnerabilities. And by disabling JavaScript, you avoid them and you also avoid stuff like cross-site scripting. I run a wishlist service called Wishigift. And back in 2018, I added this to the task list, make the site work without JavaScript. Because it's a privacy-friendly wishlist service, and I figure that maybe our most privacy-minded users would like to have an experience that works without JavaScript. And also it's nice to be able to post something on Hacker News without the comments saying that this doesn't work without JavaScript. But also because it's the kind of website that can work without JavaScript or perhaps even should, I don't have any WebGL experiences, or I'm not using any web APIs in a heavy way. It's basically a glorified CRUD application, as are many other applications. And I think that those kinds of websites that can work without JavaScript also should. But I had no idea how. I was using Redux for absolutely everything. And I also dabbled a bit in server-side rendering.

2. Converting App to Work Without JavaScript

Short description:

To convert an existing application to work without JavaScript, wrap buttons in a form and prevent the default submit event. If JavaScript is enabled, the event is prevented, and the action is dispatched client-side. If JavaScript is disabled, the request hits the server, and the server dispatches the action and re-renders the application server-side. The resulting state and HTML are the same in both scenarios.

So I just started some background processing. Asked myself, what's available when JavaScript is disabled? It's just HTML and CSS. Okay. How can I convert this already existing application to one that works without JavaScript? No idea. And how can I do it in a way that's maintainable? Because I didn't want to have two separate codebases that would need to be maintained.

Well, fast forward to 2020, and I think I wake up one day, and my mind has put some pieces together. I realized that one of the tenets of Redux, which is thou shalt only put serializable values in state or actions, goes very well with, or actually aligns perfectly with a certain type of payload that's also serializable. Well, talking about forms, the solution was there all along. Instead of having standalone buttons, I could simply wrap them in a form and prevent default on the submit so that if there was JavaScript enabled, the event would be prevented. And if there wasn't, well, it just hit the server and we can have our server dispatch whatever action that we want to perform.

So instead of having just a simple click handler on a button, instead we do something like this. We wrap it in a form and set the action to just an empty string so that when you submit this form, it's going to be sent to the same route that we're already at, which means a view route. And we make the assumption that the only reason why anyone would ever do a post request to a view routes is because they are submitting this kind of form that wraps an action that they want to perform. And inside it, we embed the current state or the client state, the app state and also the kind of action that we want to be dispatched. And we will replace our button type button with a submit button. And you can also omit the type attribute here.

Then in our app.js, if you're using Next.js that is, we have this get initial props, and we check for if this is a post request, well, then we want to read the body and the body will look something like this. It'll have an action type, for example, and the state. And we pass that along to a helper function. Now we'll parse the payload. Using the callback that we supplied, getReduxStore, it'll take the parsed state in the payload and create a new ReduxStore with that. And also dispatch the action in the payload to that ReduxStore and return the updated ReduxStore and the updated state. Then we can assign that to our preloaded state and re-render our application with that state.

So when JavaScript is enabled, user clicks the button, the event is prevented and the action is dispatched. State is updated and the React application re-renders client side. And it's quite similar when JavaScript is disabled, except that we can't prevent default. So the request will hit the server and our server will parse the payload and dispatch the action, get the updated state and re-render the React application server-side. And in both scenarios, the end result is the exact same. The state you end up with is exactly the same. And also, the HTML is exactly the same.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
ESM Loaders: Enhancing Module Loading in Node.js
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
ESM Loaders enhance module loading in Node.js by resolving URLs and reading files from the disk. Module loaders can override modules and change how they are found. Enhancing the loading phase involves loading directly from HTTP and loading TypeScript code without building it. The loader in the module URL handles URL resolution and uses fetch to fetch the source code. Loaders can be chained together to load from different sources, transform source code, and resolve URLs differently. The future of module loading enhancements is promising and simple to use.
Out of the Box Node.js Diagnostics
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
This talk covers various techniques for getting diagnostics information out of Node.js, including debugging with environment variables, handling warnings and deprecations, tracing uncaught exceptions and process exit, using the v8 inspector and dev tools, and generating diagnostic reports. The speaker also mentions areas for improvement in Node.js diagnostics and provides resources for learning and contributing. Additionally, the responsibilities of the Technical Steering Committee in the TS community are discussed.
Node.js Compatibility in Deno
Node Congress 2022Node Congress 2022
34 min
Node.js Compatibility in Deno
Deno aims to provide Node.js compatibility to make migration smoother and easier. While Deno can run apps and libraries offered for Node.js, not all are supported yet. There are trade-offs to consider, such as incompatible APIs and a less ideal developer experience. Deno is working on improving compatibility and the transition process. Efforts include porting Node.js modules, exploring a superset approach, and transparent package installation from npm.
Multithreaded Logging with Pino
JSNation Live 2021JSNation Live 2021
19 min
Multithreaded Logging with Pino
Top Content
Today's Talk is about logging with Pino, one of the fastest loggers for Node.js. Pino's speed and performance are achieved by avoiding expensive logging and optimizing event loop processing. It offers advanced features like async mode and distributed logging. The use of Worker Threads and Threadstream allows for efficient data processing. Pino.Transport enables log processing in a worker thread with various options for log destinations. The Talk concludes with a demonstration of logging output and an invitation to reach out for job opportunities.

Workshops on related topic

Node.js Masterclass
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Top Content
Workshop
Matteo Collina
Matteo Collina
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
Building a Hyper Fast Web Server with Deno
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Matt Landers
Will Johnston
2 authors
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
Mastering Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.
GraphQL - From Zero to Hero in 3 hours
React Summit 2022React Summit 2022
164 min
GraphQL - From Zero to Hero in 3 hours
Workshop
Pawel Sawicki
Pawel Sawicki
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.