Autoría de HTML en un Mundo JavaScript

Rate this content
Bookmark

En esta charla, Tony muestra cómo un enfoque de autoría y HTML semántico primero para el trabajo de plantillas JSX conduce a componentes de interfaz de usuario más legibles, mantenibles y accesibles. Demuestra cómo pensar en implementar un prototipo de interfaz de usuario de una manera semántica, autoría de HTML antes de los visuales. Muestra cómo el marcado accesible mejora el rendimiento, reduce el tamaño del DOM, minimiza el tiempo dedicado a CSS y reduce la carga cognitiva no solo para los desarrolladores, sino también para todos nuestros usuarios, sin importar cómo consuman nuestros sitios y aplicaciones.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

Tony Alicia es un educador en plataformas como Udemy, Pluralsight, Teachable y YouTube. Trabaja con The Smythe Group y ofrece cursos en su sitio web TonyAlicia.dev.

La masterclass se enfoca en enseñar la importancia de pensar en HTML primero al desarrollar componentes de React, enfatizando la semántica y la estructuración adecuada del contenido antes de considerar CSS y JavaScript.

Pensar primero en HTML mejora la legibilidad y mantenibilidad del código, hace que los componentes sean más accesibles y puede mejorar el rendimiento al reducir el tamaño del DOM.

Una buena práctica en HTML ayuda a los lectores de pantalla y otros agentes de usuario a interpretar correctamente el contenido, lo que mejora la accesibilidad de la aplicación web.

Una estructura HTML bien pensada y semánticamente correcta puede reducir la cantidad de nodos en el DOM, lo que a su vez mejora el rendimiento de la aplicación al reducir la carga sobre el CSS y el procesamiento del navegador.

Tony Alicia sugiere que el elemento 'div' debe ser utilizado como un recurso de último recurso, cuando ningún otro elemento es más adecuado, promoviendo el uso de elementos más semánticos según el contenido.

Tony Alicea
Tony Alicea
21 min
15 Nov, 2023

Comments

Sign in or register to post your comment.
  • Timothy Trimble
    Timothy Trimble
    Excellent presentation, Tony. When I went to college to get my Web Application Developer Certificate, the first semester of web development was focused on HTML and the basics of JavaScript. For me, this was easy, and I ended up helping other students get through it. It wasn't until the second semester that he introduced React and Vue. I found it very refreshing to go back to the foundations of web development. We get so focused on the tools and the plugins, that we tend to forget the layer that supports everything else. I'll be sharing this with my team.

Video Summary and Transcription

Esta charla de Tony Alicia se centra en la autoría de HTML en un mundo JavaScript. El orador desafía a los desarrolladores a cambiar su enfoque para construir componentes React comenzando con HTML primero. Al autorizar HTML de una manera semántica, se puede mejorar la legibilidad y el mantenimiento. Un HTML bien autorizado proporciona una mejor comprensión del contenido y mejora la accesibilidad. También tiene beneficios de rendimiento al reducir el tamaño del DOM. Invertir tiempo en HTML puede ahorrar tiempo y hacer que las aplicaciones sean más a prueba de futuro.

1. Introducción y Antecedentes

Short description:

Hola, soy Tony Alicia. Esto es Autoría de HTML en un Mundo de JavaScript. Enseño en Udemy, Pluralsight, Teachable y YouTube. Conéctate conmigo en mi sitio web en TonyAlicia.dev o encuéntrame en YouTube, Twitter. Aprende sobre The Smythe Group en TheSmytheGroup.com.

Hola, soy Tony Alicia. Esto es Autoría de HTML en un Mundo de JavaScript. Primero, un poco sobre mí. Puedes encontrarme enseñando en Udemy, Pluralsight, Teachable y YouTube y trabajo con una empresa llamada The Smythe Group. Ahora, si te gustaría conectar, no dudes en ponerte en contacto. Puedes encontrarme y mis cursos en mi sitio web en TonyAlicia.dev. Envíame un correo electrónico, encuéntrame en YouTube, Twitter. Puedes ir a TheSmytheGroup.com para descubrir cómo ayudamos a los equipos de desarrollo a convertirse en lo mejor que pueden ser y hacer su mejor trabajo.

2. Autoría de HTML en un Mundo de JavaScript

Short description:

Pero esta masterclass es Autoría de HTML en un Mundo de JavaScript. Me gustaría desafiarte a cambiar tu forma de pensar, a cambiar tu enfoque de cómo construyes tus componentes de React. Digamos que obtienes un prototipo. ¿Cuál es la primera cosa que pasa por tu cabeza? ¿Cuáles son los primeros pasos en tu mente mientras imaginas implementar el prototipo en React? Comencemos pensando en HTML primero. ¿Qué pasaría si pensáramos en nuestro HTML primero y luego comenzáramos a pensar en cómo hacer que la aplicación funcione y el CSS viene de la mano mientras lo hacemos parecer al prototipo? El punto principal de autorizar nuestro HTML es elegir nuestros elementos HTML de acuerdo a la información y las cosas que están sucediendo en la página. Ahora hablemos de los beneficios de autorizar nuestro HTML de una manera semántica y cómo realmente se ve. La autoría de HTML es una habilidad. Y es una habilidad muy aprendible.

Pero esta masterclass es Autoría de HTML en un Mundo de JavaScript. Y todos nosotros, todos ustedes que están escuchando, todos ustedes pasan su tiempo en JavaScript. Ya sea que estemos escribiendo TypeScript, ya sea que estemos lidiando con bases de datos, ya sea que estemos en el servidor, ya sea que estemos escribiendo pruebas, nuestra vida gira en torno a JavaScript. Es un mundo de JavaScript. Y sin embargo, hay tres patas del taburete cuando se trata de tecnologías web fundamentales, HTML, CSS, y JavaScript.

Entonces, en esta masterclass, me gustaría desafiarte a cambiar tu forma de pensar, a cambiar tu enfoque de cómo construyes tus componentes de React. Lo que quiero decir con eso es esto. Digamos que obtienes un prototipo. Este es un ejemplo muy simplista. Pero obtienes un prototipo, quizás de un diseñador, y ahora tienes que implementarlo. ¿Cuál es la primera cosa que pasa por tu cabeza? ¿Cuáles son los primeros pasos en tu mente mientras imaginas implementar el prototipo en React? Bueno, puede ser que empieces a pensar en cuáles serán los componentes, cómo será la estructura del componente, cuál será el CSS para hacer que el sitio web o la aplicación web se parezcan a un prototipo. Entonces, realmente, mentalmente, comenzamos en el mundo del CSS. ¿Cómo puedo hacer que se parezca al prototipo? Y comenzamos en el mundo de JS. ¿Cómo puedo hacer que funcione? ¿Cómo puedo hacer que la aplicación real haga lo que el prototipo dice que debería hacer? Y luego, en el camino, en algún lugar del camino, metemos algo de HTML. Realmente es una especie de estructura, un andamio, un esqueleto en el que colgar un código de JavaScript y CSS. Y si estamos escribiendo JSX, podrías decir, bueno, no estoy escribiendo HTML. Pero realmente, lo estamos, porque ambos se están convirtiendo en el DOM. Y así, en última instancia para el usuario, es lo mismo que si estuviéramos escribiendo HTML. Así que elegir nuestros elementos es algo que sucede en el camino. Me gustaría desafiarte a cambiar tu mentalidad y en su lugar pensar en HTML primero. ¿Qué pasaría si pensáramos en nuestro HTML primero y luego comenzáramos a pensar en cómo hacer que la aplicación funcione y el CSS viene de la mano mientras lo hacemos parecer al prototipo? De nuevo, si solo estamos mirando el prototipo y estamos pensando en el HTML, lo que estamos realmente pensando es cuál es el significado de cada una de estas piezas de información que vemos en el prototipo. Si estamos pensando en HTML, estamos pensando en semántica y la palabra semántica significa tener que ver con el significado. El punto principal de autorizar nuestro HTML, y vamos a introducir esa frase cuando autorizamos nuestro HTML, cuando nos comportamos como autores de HTML, es decir, estamos eligiendo nuestros elementos de HTML de acuerdo a la información y las cosas que están sucediendo en la página en la pantalla, entonces estamos lidiando con semántica. Estamos autorizando de una manera semántica.

Ahora me gustaría hablar sobre los beneficios de autorizar nuestro HTML de una manera semántica y qué realmente parece. Para empezar, hablemos de la capacidad de aprendizaje. Todos estamos tratando de mantenernos al día con las últimas cosas que suceden en el mundo de JavaScript. Pero HTML es una habilidad. La autoría de HTML es una habilidad. Y es una habilidad muy aprendible.

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

Lo Bueno, Lo Malo, y Los Componentes Web
JSNation 2023JSNation 2023
29 min
Lo Bueno, Lo Malo, y Los Componentes Web
Top Content
Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.
Es hora de desfragmentar la web
React Day Berlin 2022React Day Berlin 2022
34 min
Es hora de desfragmentar la web
Top Content
Today's Talk introduces Mitosis, an open source project that solves the problem of building framework agnostic components. It supports JSX and Svelte syntax and outputs human-readable code for various web frameworks. Mitosis is already being used by enterprise customers and can be easily integrated with React, Svelte, and other frameworks. It saves time, allows for easy handling of framework version migrations, and enables efficient unit and integration testing.
Componentes Web, Lit y Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Componentes Web, Lit y Santa 🎅
Web Components and the Lit library are introduced, highlighting their ability to create custom elements and replicate built-in components with different functionality. The use of semantic HTML and the benefits of web components in development are emphasized. The features of Lit, such as data binding and rendering, are discussed. The Santa Tracker is showcased as an example of web components being used in educational games. The compatibility of web components with other frameworks and their versatility in creating small widgets or large applications are highlighted.
Aplicaciones Web Inmutables
JSNation 2022JSNation 2022
20 min
Aplicaciones Web Inmutables
Today's Talk discusses immutable web apps and their benefits, such as faster loading times and easy version tracking. The use of Universal Module Definition (UMD) style bundling allows for flexible dependency management and gradual upgrades. Tools like Webpack and Rollup provide ways to reference UMDs in bundles and automate dependency configuration. Arborist and YAML files help resolve dependency trees and handle conflicts, while the Orchard CLI tool automates dependency ordering. Internal and external dependencies can be initialized and managed effectively for optimal performance.
¡Los componentes web son increíbles!
JSNation 2022JSNation 2022
10 min
¡Los componentes web son increíbles!
Web components allow you to create your own HTML elements that can do anything you want, and they are supported by all modern browsers. Many companies, including YouTube and GitHub, use web components to enhance their websites. There are extensive tooling and libraries available for web component development. The Model Viewer Web Component enables the display of 3D models in Virtual and Augmented Reality without needing to know underlying technologies. Web components can be used with various frameworks and libraries, and there are resources available to help with compatibility.
Hablemos de los Componentes Web
React Advanced Conference 2021React Advanced Conference 2021
32 min
Hablemos de los Componentes Web
Web Components are a suite of technologies that allow you to create reusable HTML elements, combining the fun of React with regular HTML. Custom elements and the shadow DOM are key features of Web Components, allowing you to define new elements, encapsulate functionality and styles, and interact with a separate DOM. HTML templates serve as placeholders for content to be rendered later in custom components. Custom elements and HTML templates are cross-framework compatible and can be used in React, Angular, Vue, or any other framework.

Workshops on related topic

Despliega una aplicación de componentes web y configura un flujo de integración continua
DevOps.js Conf 2022DevOps.js Conf 2022
111 min
Despliega una aplicación de componentes web y configura un flujo de integración continua
Workshop
Philippe Ozil
Philippe Ozil
Únete a nosotros en un masterclass en el que desplegarás una aplicación Node.js simple construida con componentes web y configurarás un flujo de integración continua (CI). Aprenderás sobre el poder del Lightning Web Runtime (LWR) y las GitHub Actions.
Componentes Web en Acción
JSNation Live 2021JSNation Live 2021
184 min
Componentes Web en Acción
Workshop
Joren Broekema
Alex Korzhikov
2 authors
El masterclass amplía el conocimiento del lenguaje de programación JavaScript, revisa los patrones generales de diseño de software. Se centra en los estándares y tecnologías de los Componentes Web, como Lit-HTML y Lit-Element. También practicamos la escritura de Componentes Web tanto con JavaScript nativo como con Lit-Element. Al final, revisamos las herramientas clave para desarrollar una aplicación: open-wc.