¿Por qué JavaScript se está comiendo HTML?

1. Antecedentes: HTML, CSS y JavaScript
2. Dos tipos de programación
3. Avanzando hacia una única fuente de verdad
4. Es una compensación
5. Úselo si le ayuda, no porque sea "lo que está de moda en este momento".
6. ¿Qué es esto que he oído sobre CSS-in-JS?

El desarrollo web siempre está cambiando. Una tendencia en particular se ha vuelto muy popular últimamente y esencialmente va en contra de la sabiduría convencional sobre cómo se debe crear una página web. Es emocionante para algunos pero frustrante para otros, y las razones de ambos son difíciles de explicar.

Una página web se compone normalmente de tres partes separadas con responsabilidades separadas: el código HTML define la estructura y el significado del contenido de una página, el código CSS define su apariencia y el código JavaScript define su comportamiento. En equipos con diseñadores dedicados, desarrolladores de HTML/CSS y desarrolladores de JavaScript, esta separación de preocupaciones se alinea muy bien con los roles laborales: los diseñadores determinan las imágenes y las interacciones del usuario en una página, los desarrolladores de HTML y CSS reproducen Esas imágenes en un navegador web, y los desarrolladores de JavaScript agregan la interacción del usuario para unirlo todo y “hacer que funcione”. La gente puede trabajar en una pieza sin involucrarse con las tres.

En los últimos años, los desarrolladores de JavaScript se han dado cuenta de que al definir la estructura de una página en JavaScript en lugar de HTML (usando marcos como React), pueden simplificar el desarrollo y el mantenimiento del código de interacción del usuario que, De otro modo, sería mucho más complejo de construir. Por supuesto, cuando le dice a alguien que el HTML que escribió debe ser cortado y mezclado con JavaScript del que no sabe nada, puede (comprensiblemente) frustrarse y comenzar a preguntar qué diablos estamos obteniendo con esto. .

Como desarrollador de JavaScript en un equipo multifuncional, ocasionalmente recibo esta pregunta ya menudo tengo problemas para responderla. Todos los materiales que encontró sobre este tema están escritos para una audiencia que ya está familiarizada con JavaScript, lo cual no es muy útil para quienes se centran en HTML y CSS. Pero este patrón HTML en JS (o cualquier otra cosa que proporcione los mismos beneficios) probablemente seguirá existiendo por un tiempo, así que creo que es algo importante que todos los involucrados en el desarrollo web deben entender.

Este artículo incluye ejemplos de código para aquellos interesados, pero mi objetivo es explicar este concepto de una manera que pueda entenderse sin ellos.

Antecedentes: HTML, CSS y JavaScript

Para ampliar la audiencia de este artículo tanto como sea posible, quiero brindar una breve descripción general de los tipos de código involucrados en la creación de una página web y sus funciones tradicionales. Si tiene experiencia con estos, puede seguir adelante.

HTML es para estructura y significado semántico.

El código HTML (lenguaje de marcado de hipertexto) define la estructura y el significado del contenido de una página. Por ejemplo, el HTML de este artículo contiene el texto que estás leyendo ahora mismo, el hecho de que está en un párrafo y el hecho de que viene después de un título y antes de un CodePen.

Digamos que queremos crear una aplicación de lista de compras sencilla. Podríamos comenzar con algo de HTML como este:

Podemos guardar este código en un archivo, abrirlo en un navegador web y el navegador mostrará el resultado renderizado. Como puede ver, el código HTML en este ejemplo representa una sección de una página que contiene un encabezado que dice “Lista de compras (2 artículos)”, un cuadro de entrada de texto, un botón que dice “Agregar artículo” y una lista con dos artículos. leyendo “Huevos” y “Mantequilla”. En un sitio web tradicional, un usuario navegaría a una dirección en su navegador web, luego el navegador solicitaría este HTML a un servidor, lo cargaría y lo mostraría. Si ya hay elementos en la lista, el servidor podría entregar HTML con los elementos ya en su lugar, como en este ejemplo.

Intente escribir algo en el cuadro de entrada y haga clic en el botón “Agregar elemento”. Notarás que no pasa nada. El botón no está conectado a ningún código que pueda cambiar el HTML y el HTML no puede cambiarse a sí mismo. Llegaremos a eso en un momento.

CSS es para apariencia

El código CSS (Hojas de estilo en cascada) define la apariencia de una página. Por ejemplo, el CSS de este artículo contiene la fuente, el espacio y el color del texto que estás leyendo.

Quizás hayas notado que nuestro ejemplo de lista de compras parece muy sencillo. HTML no tiene forma de especificar elementos como el espacio, el tamaño de fuente y los colores. Aquí es donde entra en juego CSS (hojas de estilo en cascada). En la misma página que el HTML anterior, podríamos agregar código CSS para darle estilo a las cosas un poco:

Como puede ver, este CSS cambió los tamaños y pesos de fuente y le dio a la sección un bonito color de fondo (diseñadores, por favor no me @, sé que esto todavía es feo). Un desarrollador puede escribir reglas de estilo como estas y se aplicarán de manera consistente a cualquier estructura HTML: si agregamos más sectionelementos buttona ulesta página, se les aplicarán los mismos cambios de fuente.

Sin embargo, el botón todavía no hace nada: ahí es donde entra JavaScript.

JavaScript es para el comportamiento

El código JavaScript define el comportamiento de elementos interactivos o dinámicos en una página. Por ejemplo, los ejemplos de CodePen integrados en este artículo funcionan con JavaScript.

Sin JavaScript, para que el botón Agregar elemento en nuestro ejemplo funcione, será necesario usar HTML especial para que envíe datos al servidor ( form action="...", si tiene curiosidad). Luego, el navegador descartaría toda la página y recargaría una versión actualizada de todo el archivo HTML. Si esta lista de compras fuera parte de una página más grande, cualquier otra cosa que estuviera haciendo el usuario se perdería. ¿Desplazado hacia abajo? Estás de vuelta en la cima. ¿Viendo un vídeo? Empieza de nuevo. Así funcionaban todas las aplicaciones web durante mucho tiempo: cada vez que un usuario interactuaba con una página web, era como si cerrara su navegador web y lo volviera a abrir. Eso no es gran cosa para este ejemplo simple, pero para una página grande y compleja que podría tardar un poco en cargarse, no es eficiente ni para el navegador ni para el servidor.

Si queremos que algo cambie en una página web sin recargar toda la página, necesitamos JavaScript (no confundir con Java, que es un lenguaje completamente diferente… no me hagas empezar). Intentemos agregar algunos:

Ahora, cuando escribimos algo de texto en el cuadro y hacemos clic en el botón “Agregar elemento”, nuestro nuevo elemento se agrega a la lista y el recuento de elementos en la parte superior se actualiza. En una aplicación real, también agregaríamos algo de código para enviar el nuevo elemento al servidor en el segundo plano para que siga apareciendo la próxima vez que carguemos la página.

Separar JavaScript de HTML y CSS tiene sentido en este sencillo ejemplo. Tradicionalmente, se agregarían interacciones aún más complicadas de esta manera: el HTML se carga y se muestra, y luego se ejecuta JavaScript para agregarle cosas y cambiarlo. Sin embargo, a medida que las cosas se vuelven más complejas, comenzamos a necesitar realizar un mejor seguimiento de las cosas en nuestro JavaScript.

Si seguíamos creando esta aplicación de lista de compras, probablemente agregaríamos botones para editar o eliminar elementos de la lista. Digamos que escribimos JavaScript para un botón que elimina un elemento, pero nos olvidamos de agregar el código que actualiza el total del elemento en la parte superior de la página. De repente tenemos un error: después de que un usuario elimine un elemento, el total de la página no coincidirá con la lista. Una vez que notamos el error, lo solucionamos agregando la misma totalText.innerHTMLlínea de nuestro código “Agregar elemento” al código “Eliminar elemento”. Ahora tenemos el mismo código duplicado en más de un lugar. Más adelante, digamos que queremos cambiar ese código para que en lugar de “(2 elementos)” en la parte superior de la página se lea “Elementos: 2”. Tendremos que asegurarnos de actualizarlo en los tres lugares: en HTML, en JavaScript para el botón “Agregar elemento” y en JavaScript para el botón “Eliminar elemento”. Si no lo hacemos, tendremos otro error en el que ese texto cambia abruptamente después de la interacción del usuario.

En este sencillo ejemplo, ya podemos ver lo rápido que estas cosas pueden complicarse. Hay formas de organizar nuestro JavaScript para hacer que este tipo de problema sea más fácil de manejar, pero a medida que las cosas se vuelven más complejas, necesitaremos seguir reestructurando y reescribiendo cosas para mantenernos al día. Mientras HTML y JavaScript se mantienen separados, puede ser necesario un gran esfuerzo para asegurarse de que todo se mantenga sincronizado entre ellos. Esa es una de las razones por las que los nuevos marcos de JavaScript, como React, han ganado fuerza: están diseñados para mostrar las relaciones entre cosas como HTML y JavaScript. Para entender cómo funciona, primero debemos entender sólo un poquito de informática.

Dos tipos de programación

El concepto clave que debemos entender aquí implica la distinción entre dos estilos de programación comunes. (Existen otros estilos de programación, por supuesto, pero aquí sólo nos ocuparemos de dos de ellos). La mayoría de los lenguajes de programación se prestan a uno u otro de estos, y algunos se pueden utilizar de ambas maneras. Es importante comprender ambos para comprender el principal beneficio de HTML en JS desde la perspectiva de un desarrollador de JavaScript.

• Programación imperativa : la palabra “imperativo” aquí implica ordenarle a una computadora que haga algo. Una línea de código imperativo se parece mucho a una oración imperativa en inglés: le da a la computadora una instrucción específica a seguir. En la programación imperativa, debemos decirle a la computadora exactamente cómo hacer cada pequeña cosa que necesitamos que haga. En el desarrollo web, esto está comenzando a considerar “la antigua forma” de hacer las cosas y es lo que se hace con JavaScript básico o bibliotecas como jQuery. El ejemplo anterior de JavaScript en mi lista de compras es un código imperativo.
  • Imperativo: “Haz X, luego haz Y, luego haz Z”.
  • Ejemplo: cuando el usuario selecciona este elemento, agregue la .selectedclase; y cuando el usuario lo deselecciona, elimina la .selectedclase.
• Programación declarativa : esta es una capa más abstracta por encima de la programación imperativa. En lugar de darle instrucciones a la computadora, “declaramos” cuáles queremos que sean los resultados después de que la computadora haga algo. Nuestras herramientas (por ejemplo, React) descubren el cómo hacerlo automáticamente. Estas herramientas están construidas con código imperativo en el interior al que no tenemos que prestar atención desde el exterior.
  • Declarativo: “El resultado debería ser XYZ. Haz lo que sea necesario para que eso suceda”.
  • Ejemplo: Este elemento tiene la .selectedclase si el usuario la ha seleccionado.

HTML es un lenguaje declarativo

Olvídate de JavaScript por un momento. Aquí hay un hecho importante: HTML por sí solo es un lenguaje declarativo . En un archivo HTML, puedes declarar algo como:

section h1Hello/h1 pMy name is Mike./p/section

Cuando un navegador web lea este HTML, descubrirá estos pasos imperativos y los ejecutará:

1. Crear un elemento de sección
2. Crear un elemento de encabezado de nivel 1
3. Establezca el texto interno del elemento de encabezado en “Hola”
4. Coloque el elemento de encabezado en el elemento de sección.
5. Crear un elemento de párrafo
6. Establezca el texto interno del elemento del párrafo en “Mi nombre es Mike”.
7. Coloque el elemento de párrafo en el elemento de sección.
8. Coloque el elemento de sección en el documento.
9. Mostrar el documento en la pantalla.

Como desarrollador web, los detalles de cómo un navegador hace estas cosas son irrelevantes; lo único que importa es que los haga. Este es un ejemplo perfecto de la diferencia entre estos dos tipos de programación. En resumen, HTML es una abstracción declarativa envuelta en el imperativo motor de visualización de un navegador web. Se encarga del “cómo” para que usted sólo tenga que preocuparse por el “qué”. Puede disfrutar de la vida escribiendo HTML declarativo porque la excelente gente de Mozilla, Google o Apple escribieron el código imperativo para usted cuando creó su navegador web.

JavaScript es un lenguaje imperativo

Ya hemos visto un ejemplo simple de JavaScript imperativo en el ejemplo de la lista de compras anterior, y mencioné cómo la complejidad de las características de una aplicación tiene un efecto dominó en el esfuerzo requerido para implementarlas y el potencial de errores en esa implementación. Ahora veamos una característica un poco más compleja y veamos cómo se puede simplificar mediante el uso de un enfoque declarativo.

Imagine una página web que contiene lo siguiente:

• Una lista de casillas de verificación etiquetadas, cada fila de las cuales cambia a un color diferente cuando se selecciona
• Texto en la parte inferior como “1 de 4 seleccionados” que debería actualizarse cuando cambien las casillas de verificación
• Un botón “Seleccionar todo” que debería desactivarse si todas las casillas de verificación ya están seleccionadas
• Un botón “No seleccionar ninguno” que debe desactivarse si no se seleccionan casillas de verificación

Aquí hay una implementación de esto en HTML simple, CSS y JavaScript imperativo:

No hay mucho código CSS aquí porque estoy usando el maravilloso sistema de diseño PatternFly, que proporciona la mayor parte del CSS para mi ejemplo. Importé su archivo CSS en la configuración de CodePen.

Todas las cosas pequeñas

Para implementar esta función con JavaScript imperativo, debemos darle al navegador varias instrucciones granulares. Este es el equivalente en inglés del código de mi ejemplo anterior: Fotos Porno y actrices porno

• En nuestro HTML, declaramos la estructura inicial de la página:
  • Hay cuatro elementos de fila, cada uno de los cuales contiene una casilla de verificación. La tercera casilla está marcada.
  • Hay un texto de resumen que dice “1 de 4 seleccionados”.
  • Hay un botón “Seleccionar todo” que está habilitado.
  • Hay un botón “No seleccionar ninguno” que está deshabilitado.
• En nuestro JavaScript, escribimos instrucciones sobre qué cambiar cuando ocurre cada uno de estos eventos:
  • Cuando una casilla de verificación cambia de no marcada a marcada:
    • Busque el elemento de fila que contiene la casilla de verificación y agregue la .selectedclase CSS.
    • Busque todos los elementos de las casillas de verificación en la lista y cuente cuántos están marcados y cuántos no.
    • Busque el elemento de texto de resumen y actualícelo con el número marcado y el número total.
    • Busque el elemento del botón “No seleccionar ninguno” y habilítelo si estaba deshabilitado.
    • Si todas las casillas de verificación ahora están marcadas, busque el elemento del botón “Seleccionar todo” y desactívelo.
  • Cuando una casilla de verificación cambia de marcada a no marcada:
    • Busque el elemento de fila que contiene la casilla de verificación y elimina la .selectedclase.
    • Busque todos los elementos de las casillas de verificación en la lista y cuente cuántos están marcados y cuántos no marcados.
    • Busque el elemento de texto de resumen y actualícelo con el número marcado y el número total.
    • Busque el elemento del botón “Seleccionar todo” y habilítelo si estaba deshabilitado.
    • Si todas las casillas de verificación ahora están desmarcadas, busque el elemento del botón “No seleccionar ninguna” y desactívelo.
  • Cuando se hace clic en el botón “Seleccionar todo”:
    • Busque todos los elementos de las casillas de verificación en la lista y márquelos todos.
    • Busque todos los elementos de fila en la lista y agregue la .selectedclase.
    • Busque el elemento de texto de resumen y actualícelo.
    • Busque el botón “Seleccionar todo” y desactívelo.
    • Busque el botón “No seleccionar ninguno” y habilítelo.
  • Cuando se hace clic en el botón “No seleccionar ninguno”:
    • Busque todos los elementos de las casillas de verificación en la lista y desmárquelos todos.
    • Busque todos los elementos de fila en la lista y elimine la .selectedclase de ellos.
    • Busque el elemento de texto de resumen y actualícelo.
    • Busque el botón “Seleccionar todo” y actívelo.
    • Busque el botón “No seleccionar ninguno” y desactívelo.

Guau. Eso es mucho, ¿verdad? Bueno, será mejor que recordemos escribir código para todas y cada una de esas cosas. Si olvidamos o arruinamos alguna de esas instrucciones, terminaremos con un error en el que los totales no coinciden con las casillas de verificación, o se habilita un botón que no hace nada cuando se hace clic en él, o una fila termina con el color incorrecto , o algo más en lo que no pensamos y que no descubriremos hasta que un usuario se queje.

El gran problema aquí es que no existe una única fuente de verdad para el estado de nuestra aplicación, que en este caso es “¿qué casillas de verificación están marcadas?” Las casillas de verificación saben si están marcadas o no, por supuesto, pero los estilos de fila también deben saberlo, el texto de resumen debe saberlo y cada botón debe saberlo. Cinco copias de esta información se almacenan por separado en todo el HTML, y cuando cambia en cualquiera de esos lugares, el desarrollador de JavaScript debe captarla y escribir el código imperativo para mantener las demás sincronizadas.

Este es sólo un ejemplo simple de un pequeño componente de una página. Si esto le parece un dolor de cabeza, imagine lo complejo y frágil que se vuelve una aplicación cuando necesita escribirla toda de esta manera. Para muchas aplicaciones web modernas y complejas, no es una solución escalable.

Avanzando hacia una única fuente de verdad

Herramientas, como React, nos permiten utilizar JavaScript de forma declarativa. Así como HTML es una abstracción declarativa envuelta en las instrucciones de visualización del navegador web, React es una abstracción declarativa envuelta en JavaScript.

¿Recuerda que HTML nos permite centrarnos en la estructura de una página y no en los detalles de cómo el navegador muestra esa estructura? Bueno, cuando usamos React, podemos centrarnos nuevamente en la estructura definiéndola en función de los datos almacenados en un solo lugar. Cuando esa fuente de verdad cambie, React actualizará la estructura de la página automáticamente. Se encargará de los pasos imperativos detrás de escena, tal como lo hace el navegador web con HTML. (Aunque aquí se utiliza React como ejemplo, este concepto no es exclusivo de React y lo utilizan otros marcos, como Vue).

Volvamos a nuestra lista de casillas de verificación del ejemplo anterior. En este caso, la verdad que nos importa es simple: ¿qué casillas de verificación están marcadas? Los demás detalles de la página (por ejemplo, lo que dice el resumen, el color de las filas, si los botones están habilitados o no) son efectos derivados de esa misma verdad. Entonces, ¿por qué deberían necesitar tener su propia copia de esta información? Simplemente deberían usar la única fuente de verdad como referencia, y todo en la página debería “saber” qué casillas de verificación están marcadas y comportarse en consecuencia. Se podría decir que los elementos de fila, el texto de resumen y los botones deberían poder reaccionar automáticamente cuando se marca o desmarca una casilla de verificación. (¿Ves lo que hice ahí?)

Dime lo que quieres (lo que realmente, realmente quieres)

Para implementar esta página con React, podemos reemplazar la lista con algunas declaraciones simples de hechos:

• Hay una lista de valores verdadero/falso llamada checkboxValuesque representa qué casillas están marcadas.
  • Ejemplo:checkboxValues = [false, false, true, false]
  • Esta lista representa el hecho de que tenemos cuatro casillas de verificación y que la tercera está marcada.
• Para cada valor en checkboxValues, hay un elemento de fila que:
  • tiene una clase CSS llamada .selectedsi el valor es verdadero, y
  • contiene una casilla de verificación, que se marca si el valor es verdadero.
• Hay un elemento de texto de resumen que contiene el texto “ {x}de {y}seleccionados” donde {x}es el número de valores verdaderos en checkboxValuesy {y}es el número total de valores en checkboxValues.
• Hay un botón "Seleccionar todo" que se habilita si hay valores falsos en checkboxValues.
• Hay un botón "No seleccionar ninguno" que se habilita si hay valores verdaderos en checkboxValues.
• Cuando se hace clic en una casilla de verificación, su valor correspondiente cambia en checkboxValues.
• Cuando se hace clic en el botón "Seleccionar todo", establece todos los valores en checkboxValuesverdadero.
• Cuando se hace clic en el botón "No seleccionar ninguno", establece todos los valores en checkboxValuesfalso.

Notarás que los últimos tres elementos siguen siendo instrucciones imperativas (“Cuando esto suceda, haz aquello”), pero ese es el único código imperativo que necesitamos escribir. Son tres líneas de código y todas actualizan la única fuente de verdad. El resto de esas viñetas son declaraciones (“hay un…”) que ahora están integradas directamente en la definición de la estructura de la página. Para hacer esto, escribimos nuestros elementos en una sintaxis especial de JavaScript proporcionada por React llamada JSX, que se parece a HTML pero puede contener lógica de JavaScript. Eso nos da la capacidad de mezclar lógica como "si" y "para cada uno" con la estructura HTML, por lo que la estructura puede ser diferente dependiendo del contenido checkboxValuesen un momento dado.

Aquí está el mismo ejemplo de lista de compras que el anterior, esta vez implementado con React:

JSX es definitivamente extraño. Cuando lo encontré por primera vez, me sentí mal. Mi reacción inicial fue: “¿Qué diablos es esto? ¡HTML no pertenece a JavaScript! No estaba solo. Dicho esto, no es HTML, sino JavaScript disfrazado para parecerse a HTML. También es bastante poderoso.

¿Recuerda la lista de 20 instrucciones imperativas anterior? Ahora tenemos tres. Por el precio de definir nuestro HTML dentro de nuestro JavaScript, el resto viene gratis. React simplemente los hace por nosotros cada vez que checkboxValueshay cambios.

Con este código ahora es imposible que el resumen no coincida con las casillas de verificación, que el color de una fila sea incorrecto o que un botón esté habilitado cuando debería estar deshabilitado. Hay toda una categoría de errores que ahora nos es imposible tener en nuestra aplicación: las fuentes de la verdad no están sincronizadas . Todo fluye desde una única fuente de verdad y los desarrolladores podemos escribir menos código y dormir mejor por la noche. Bueno, los desarrolladores de JavaScript pueden, al menos…

Es una compensación

A medida que las aplicaciones web se vuelven más complejas, mantener la clásica separación de preocupaciones entre HTML y JavaScript tiene un costo cada vez más doloroso. HTML se diseñó originalmente para documentos estáticos y, para agregar una funcionalidad interactiva más compleja a esos documentos, el imperativo JavaScript tiene que realizar un seguimiento de más cosas y volverse más confuso y frágil.

Lo bueno: previsibilidad, reutilización y composición

La capacidad de utilizar una única fuente de verdad es el beneficio más importante de este patrón, pero la compensación también nos brinda otros beneficios. Definir elementos de nuestra página como código JavaScript significa que podemos convertir fragmentos de ella en componentes reutilizables, lo que nos impide copiar y pegar el mismo HTML en varios lugares. Si necesitamos cambiar un componente, podemos realizar ese cambio en un lugar y se actualizará en todas partes de nuestra aplicación (o en muchas aplicaciones, si publicamos componentes reutilizables para otros equipos).

Podemos tomar estos componentes simples y componerlos como ladrillos LEGO, creando componentes más complejos y útiles, sin que sea demasiado confuso trabajar con ellos. Y si utilizamos componentes creados por otros, podemos actualizarlos fácilmente cuando publiquen mejoras o corrijan errores sin tener que reescribir nuestro código.

La desventaja: es JavaScript completamente

Todos esos beneficios tienen un costo. Hay buenas razones por las que la gente valora mantener HTML y JavaScript separados y, para obtener estos otros beneficios, debemos combinarlos en uno solo. Como mencioné antes, alejarse de los archivos HTML simples complica el flujo de trabajo de alguien que antes no necesitaba preocuparse por JavaScript. Puede significar que alguien que antes podía realizar cambios en una aplicación por sí solo ahora debe aprender habilidades complejas adicionales para mantener esa autonomía.

También puede haber desventajas técnicas. Por ejemplo, algunas herramientas como linters y analizadores esperan HTML normal, y puede resultar más difícil trabajar con algunos complementos de JavaScript imperativos de terceros. Además, JavaScript no es el lenguaje mejor diseñado; es justo lo que tenemos en nuestros navegadores web. Las herramientas y funciones más nuevas lo están mejorando, pero todavía tiene algunos inconvenientes que debe conocer antes de poder ser productivo con él.

Otro problema potencial es que cuando la estructura semántica de una página se divide en componentes abstractos, puede resultar fácil para los desarrolladores dejar de pensar en qué elementos HTML reales se generan al final. Las etiquetas HTML específicas como sectiony asidetienen significados semánticos específicos que se pierden cuando se usan etiquetas genéricas como divy span, incluso si visualmente tienen el mismo aspecto en una página. Esto es especialmente importante para la accesibilidad. Por ejemplo, estas opciones afectarán el comportamiento del software lector de pantalla para los usuarios con discapacidad visual. Puede que no sea la parte más interesante, pero los desarrolladores de JavaScript siempre deben recordar que el HTML semántico es la parte más importante de una página web.

Úselo si le ayuda, no porque sea "lo que está de moda en este momento".

Se ha convertido en una tendencia entre los desarrolladores recurrir a marcos en cada proyecto. Algunas personas piensan que separar HTML y JavaScript es obsoleto, pero esto no es cierto. Para un sitio web estático simple que no necesita mucha interacción del usuario, no vale la pena. Los fanáticos más entusiastas de React pueden no estar de acuerdo conmigo aquí, pero si todo lo que hace JavaScript es crear una página web no interactiva, no debería usar JavaScript . JavaScript no se carga tan rápido como el HTML normal, por lo que si no obtiene una experiencia de desarrollador significativa o una mejora en la confiabilidad del código, está haciendo más daño que bien.

¡Tampoco es necesario que crees todo tu sitio web en React! ¡O Vue! ¡O lo que sea! Mucha gente no lo sabe porque todos los tutoriales que existen muestran cómo usar React para todo. Si solo tiene un pequeño widget complejo en un sitio web que de otro modo sería simple, puede usar React para ese componente. No siempre necesitas preocuparte por webpack o Redux o Gatsby o cualquiera de las otras tonterías que la gente te dirá son las "mejores prácticas" para tu aplicación React.

Para una aplicación suficientemente compleja, la programación declarativa vale la pena. Es un punto de inflexión que ha permitido a los desarrolladores de todo el mundo crear software asombroso, robusto y confiable con confianza y sin tener que preocuparse por cosas pequeñas. ¿Es React en particular la mejor solución posible a estos problemas? No. ¿Será simplemente reemplazado por lo siguiente? Eventualmente. Pero la programación declarativa no va a ninguna parte, y lo siguiente probablemente lo hará mejor.

¿Qué es esto que he oído sobre CSS-in-JS?

No voy a tocar ese.

Tal vez te puede interesar:

1. Cargas útiles HTML más pequeñas con trabajadores de servicios
2. Cómo crear un temporizador de cuenta regresiva animado con HTML, CSS y JavaScript
3. Inspirando a estudiantes de secundaria con HTML y CSS
4. Mismo HTML, diferente CSS

¿Por qué JavaScript se está comiendo HTML?

Antecedentes: HTML, CSS y JavaScriptDos tipos de programaciónAvanzando hacia una única fuente de verdadEs una compensaciónÚselo si le ayuda, no porque sea

programar

es

https://aprendeprogramando.es/static/images/programar-por-que-javascript-se-esta-comiendo-htmlja-1227-0.jpg

2024-09-25

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente