Opcional Javascript: Aplicaciones React modernas que funcionan sin JS

Rate this content
Bookmark

¿Alguna vez has intentado navegar por tus sitios web favoritos con JS deshabilitado en tu navegador? Puede sentirse como cortar una línea de vida para internet. En lugar de interfaces amigables para el usuario, te enfrentas a una pared en blanco que dice “por favor, habilita JavaScript“ en el centro de ella. Pero no tiene por qué ser así.

En esta charla, exploraremos técnicas para construir aplicaciones web modernas que pueden seguir funcionando en un entorno sin JS, y proporcionar una experiencia completa cuando JS está activado.

Konstantin Lebedev
Konstantin Lebedev
28 min
13 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

En esta charla, el orador discute el concepto de construir aplicaciones opcionales de JavaScript, centrándose en el uso de herramientas como los componentes del servidor React, Next.js, remix, React Router, Astro, SolidStarts y Weld. Exploran varios aspectos como la construcción de aplicaciones de comercio electrónico, la paginación, la adición de artículos al carrito sin JavaScript, y la implementación de características como las vistas previas de tarjetas utilizando HTML y CSS. El orador también destaca los compromisos y consideraciones al deshabilitar JavaScript, mantener los artículos en el carrito, y combinar formas antiguas y nuevas de construir aplicaciones.

1. Construyendo Aplicaciones Opcionales de JavaScript

Short description:

En esta charla, compartiré mis hallazgos sobre la construcción de aplicaciones de React que pueden funcionar sin JavaScript. Aunque las aplicaciones altamente interactivas dependen en gran medida de JavaScript, hay muchas aplicaciones que utilizan JavaScript con fines cosméticos. Herramientas como los componentes de servidor de React, Next.js, remix, React Router, Astro, SolidStarts y Weld están abordando el desafío de las experiencias sin JavaScript. Aunque solo un pequeño porcentaje de usuarios desactiva JavaScript, el impacto en el rendimiento de la aplicación, específicamente el tiempo hasta la interactividad (TTI), es significativo.

Es genial ver tantas caras aquí. Y supongo que vamos a empezar de inmediato. Así que la idea para esta charla proviene del proyecto en el que trabajamos, que fue un experimento para obtener una respuesta a la siguiente pregunta. ¿Podemos construir aplicaciones de react que también puedan funcionar sin JavaScript? Y por falta de un nombre mejor, comencé a llamar a tales aplicaciones opcionales de JavaScript. Y hoy voy a compartir con ustedes mis hallazgos.

Pero primero, hablemos de la web sin JavaScript. Algunos de ustedes pueden haber intentado hacer esto en un navegador, por lo que saben lo que estoy a punto de mostrar. Pero para aquellos de ustedes que no lo han hecho, puedo resumir la experiencia de navegar por la web sin JavaScript en una diapositiva. Básicamente, se ve así. Hay un pequeño número de aplicaciones que conservan cierto grado de funcionalidad. Pero en la mayoría de los casos, obtendrás un esqueleto de aplicación que parece que está cargando pero nunca lo hará, o un simple mensaje pidiéndote que vuelvas a activar el JavaScript. Y eso tiene sentido, ¿verdad? Porque sabemos que las aplicaciones altamente interactivas van de la mano con JavaScript. Entonces, sin JavaScript, simplemente se rompen.

Pero no todos los sitios web son creados iguales. Y mientras tenemos un gran número de sitios web que tienen JavaScript como una parte intrínseca para proporcionar sus características principales, hay un número aún mayor de aplicaciones que utilizan JavaScript para mejorar la experiencia del usuario, ¿verdad? Para mostrar campos de entrada más amigables para el usuario, agregar algunas micro interacciones, cosas así. Pero esencialmente, tal JavaScript sirve para un propósito cosmético. Y por lo tanto, no debería ser difícil imaginar que tales aplicaciones aún podrían funcionar incluso cuando JavaScript está apagado, al menos en teoría. En la práctica, sin embargo, casi nunca sucede porque la construcción de aplicaciones para el enfoque opcional de JavaScript requiere una intención. Pero lo mejor que solemos hacer es poner una etiqueta de no-script con un mensaje y dar por terminado el día.

Ahora, todo eso puede parecer irrelevante, pero comencé a notar que las herramientas y frameworks que estamos utilizando están comenzando a abordar eso. Y no solo hablan de este problema, sino que también nos dan herramientas que facilitan el desarrollo de aplicaciones opcionales de JavaScript. Así que comenzando con el último React y Next.js que lo utiliza. Nos dan React componentes de servidor y acciones de servidor que nos permiten mover la obtención de datos y la mutación de datos al servidor. Ahora, esto es muy importante porque esa habilidad se convertirá en clave para desbloquear experiencias sin JavaScript. Luego también está remix y las aplicaciones construidas sobre React Router que utilizan el último enrutador de datos. Tienen abstracciones ligeramente diferentes, ¿verdad? Utilizan cargadores y acciones, pero esencialmente logran el mismo objetivo, obtener y mutar datos en un servidor. Y luego, incluso si miramos fuera del ecosistema de React, descubriremos herramientas como Astro, SolidStarts, Weld, tal vez incluso más que comienzan a abordar este problema de experiencias sin JavaScript de una forma u otra. Entonces eso plantea una pregunta, ¿verdad? ¿Por qué todo el mundo está hablando de esto de repente? Y si miramos las estadísticas de los usuarios que desactivan activamente JavaScript en su navegador, vamos a descubrir que el número es bastante pequeño, ¿verdad? Es aproximadamente el 0.2% de todo el tráfico web. Pero lo que importa mucho más es cómo este enfoque opcional de JavaScript afecta el rendimiento de la aplicación performance y una métrica llamada TTI en particular, ¿verdad? TTI, o tiempo hasta la interactividad en términos laicos, es la cantidad de tiempo que se necesita desde ver un botón hasta poder hacer clic en él, porque, ya sabes, en React no sucede instantáneamente. Primero necesitamos descargar, analizar y ejecutar el paquete de JavaScript.

2. Construyendo Aplicaciones de Comercio Electrónico Opcionales con JavaScript

Short description:

Si construimos nuestras aplicaciones para que sean utilizables incluso antes de que cualquier JavaScript esté listo, reducimos efectivamente el retraso a cero. Hablemos de la construcción de una aplicación de comercio electrónico utilizando componentes de servidor de React y acciones de servidor.

Y si tenemos un gran paquete de JavaScript y una red lenta, entonces tenemos un problema, porque este retraso puede extenderse a varios segundos, y vemos a los usuarios abandonar el sitio web. Pero si construimos nuestras aplicaciones de manera que sean utilizables incluso antes de que cualquier JavaScript esté listo, reducimos efectivamente este retraso a cero, lo que resulta ser muy efectivo.

Y hay mucho más que decir sobre las razones para el enfoque opcional de JavaScript, pero en interés del tiempo, hablemos de una parte más interesante y veamos cómo podemos hacerlo. Entonces, para demostrar eso, vamos a construir una aplicación de comercio electrónico. Y para los ejemplos de código, voy a usar React componentes de servidor y acciones de servidor. Pero hay que decir que todas las técnicas que voy a mostrarles funcionarán igual de bien con Remix, y en algunos casos, las soluciones serán incluso más simples.

QnA

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.

Workshops on related topic

Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
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)
How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Build and Launch a personal blog using Remix and Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
Robert Pop
Robert Pop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
Building High-Performance Online Stores with Shopify Hydrogen and Remix
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
Localizing Your Remix Website
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
Harshil Agrawal
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps