La Web en 2020: extensibilidad e interoperabilidad

En los últimos años, hemos visto muchos cambios y desvíos con respecto a las tecnologías web. En 2020, preveo que seremos una comunidad web encaminada hacia dos tendencias/objetivos principales: extensibilidad e interoperabilidad . Analicémoslos.

extensibilidad

La extensibilidad describe cuánto puede alguien tomar una tecnología particular y extenderla a sus propias necesidades. Hemos construido una web basada en componentes en los últimos años en términos de desarrollo (¡componentes React! ¡Componentes Vue! ¡Componentes Svelte! ¡Componentes web!) y diseño (¡Sistemas de diseño!). Es interesante cómo la forma sigue a la función, ¿no?

Ahora estamos tratando de hacer que ese sistema de componentes se vea y se sienta más exclusivo. La extensibilidad en la web nos permite adaptar la plataforma a nuestras propias necesidades y experimentar con los resultados.

CSS en sí se está volviendo mucho más extensible…

CSS Houdini

Con CSS Houdini , los desarrolladores podrán ampliar lo que actualmente es posible en el modelo de objetos CSS y enseñarle al navegador cómo quieren que lea y represente su CSS.

Eso significa que cosas que antes no eran posibles en la web, como esquinas en ángulo o diseños redondos, ahora son posibles.

Si aún no está familiarizado con Houdini, es un término general que describe algunas API de navegador diferentes, destinadas a mejorar el rendimiento del navegador. Hace que el estilo sea más extensible y permite a los usuarios dictar sus propias funciones CSS. Las API actuales de Houdini incluyen:

• Propiedades y valores
• API de pintura
• Worklet de animación
• Modelo de objeto escrito
• API de diseño

Con estas API, los usuarios pueden aprovechar CSS semántico significativo (gracias al modelo de objetos tipificados ) e incluso aplicar semántica a sus variables CSS (Propiedades y Valores). Con Paint API, puedes dibujar un lienzo y aplicarlo como una imagen de borde (hola, bordes degradados) o crear destellos animados que aceptan argumentos dinámicos y se implementan con una sola línea de CSS.

.sparkles {  background: paint(sparkles)}

Puede crear menús redondos sin colocar los elementos manualmente a través de los márgenes (a través de la API de diseño) y puede integrar sus propias interacciones que viven del hilo principal (usando el Animation Worklet).

Definitivamente, Houdini es uno a seguir en el nuevo año, y ahora es un buen momento para comenzar a experimentar con él si aún no lo ha hecho.

fuentes variables

Otra tecnología que se alinea con el objetivo de hacer que los sitios web tengan más rendimiento y al mismo tiempo ofrezca más extensibilidad al usuario son las fuentes variables. Con tantas fuentes variables nuevas apareciendo (y el reciente lanzamiento beta de Google Fonts), las fuentes variables ahora están más disponibles y son más fáciles de usar que nunca.

Las fuentes variables están basadas en vectores y permiten establecer una amplia gama de valores para varios ejes de fuente, como el peso y la inclinación. La interpolación de estos ejes permite que las fuentes realicen una transición fluida entre puntos.

He aquí un ejemplo:

Las fuentes variables también permiten nuevos ejes para ayudar a los diseñadores y desarrolladores a ser aún más creativos con su trabajo. Aquí hay un ejemplo de algunos de ellos de un excelente recurso llamado v-fonts :

Las fuentes variables son relativamente bien compatibles: el 87% de los navegadores modernos admiten el formato de fuente requerido.

Propiedades personalizadas

Las propiedades personalizadas, como las fuentes variables, también son compatibles. Si bien no son nuevas, todavía estamos descubriendo todas las cosas que podemos hacer con las propiedades personalizadas.

Las propiedades personalizadas permiten variables CSS verdaderamente dinámicas, lo que significa que podemos ajustarlas en JavaScript, separando la lógica y el estilo. Un gran ejemplo de esto proviene de David Khourshid , quien nos muestra cómo crear animaciones reactivas y sincronizar el estilo sin preocuparse.

También estamos comenzando a experimentar con más lógica en nuestras hojas de estilo. Recientemente publiqué una publicación de blog que explica cómo crear temas de color dinámicos utilizando la calc()función CSS nativa, junto con propiedades personalizadas.

Esto elimina la necesidad de herramientas adicionales para procesar nuestro CSS y garantiza que esta técnica de creación de temas funcione en cualquier pila de tecnología, lo que me lleva a mi próxima visión para 2020: la interoperabilidad.

Interoperabilidad

Interoperabilidad, según mi definición en esta publicación, significa la capacidad de trabajar entre tecnologías y necesidades humanas. Desde una perspectiva técnica, con la web fragmentada, muchas empresas han migrado pilas en el pasado reciente, o tienen Múltiples pilas internas, y ahora probablemente estén interesadas en salvar su pila tecnológica contra cambios futuros para mantener cierta apariencia de uniformidad.

Web de componentes

Los componentes web intentan resolver este problema atacando el problema de la arquitectura basada en componentes desde una perspectiva de estándares web. La visión es introducir un formato estándar que pueda usarse con o sin biblioteca, beneficiando la experiencia del desarrollador y estableciendo uniformidad entre los componentes.

Cada componente web está encapsulado y funciona en navegadores modernos sin dependencias. Esta tecnología todavía está evolucionando y creo que veremos un gran crecimiento en 2020.

Propiedades lógicas

Las propiedades lógicas nos desafían a ajustar nuestro modelo mental de cómo aplicamos el tamaño del diseño en una página para que nuestras páginas sean más amigables en todos los idiomas y modos de lectura. Permiten que nuestros diseños sean interoperables con las experiencias de los usuarios.

En inglés y otros idiomas de izquierda a derecha, pensamos en el mundo del diseño en términos de alto y ancho, y usamos una expresión de tipo compás para márgenes, bordes y relleno (arriba, izquierda, abajo, derecha). Sin embargo, si aplicamos el estilo de esta manera y luego ajustamos el idioma a un idioma de derecha a izquierda, como el árabe, el relleno a la izquierda de nuestros párrafos ya no significa relleno desde el principio de donde leeríamos. Esto rompe el diseño.

Si escribiera padding-inline-starten lugar de padding-left, el relleno cambiaría correctamente al otro lado de la página (el inicio donde se estaría leyendo) al cambiar al idioma de derecha a izquierda, manteniendo la integridad del diseño.

Consultas de medios de preferencia

Las consultas de medios de preferencia también están en aumento, y habrá más capacidades en 2020. Nos permiten personalizar nuestros sitios para trabajar con personas que prefieren alto contraste o modo oscuro, así como personas que prefieren una experiencia con menos animación.

Las próximas consultas de medios sobre preferencias incluyen:

• prefiere-esquema-de-colores
• prefiere-contraste
• prefiere-movimiento-reducido
• prefiere-transparencia-reducida

En este video , repaso cómo crear una consulta de medios de preferencia para el modo oscuro, usando propiedades personalizadas para diseñar:

Subcampeón: Velocidad

La velocidad también es un tema que considero un gran foco del mundo web en 2020. Varias de las tecnologías que mencioné anteriormente tienen el beneficio de mejorar el rendimiento web, incluso si no es el foco principal (por ejemplo, cómo las fuentes variables pueden reducir el peso total). de fuentes descargadas). El rendimiento se vuelve cada vez más importante cuando pensamos en los próximos mil millones de usuarios que se conectarán en áreas donde las velocidades de red pueden faltar.

Además, Web Assembly , que es un contenedor que permite a los usuarios escribir más cerca del navegador, está ganando popularidad. También preveo mucho más trabajo con WebGL el próximo año, que utiliza técnicas similares para una representación de gráficos avanzada y rápida. Escribir código de nivel inferior permite experiencias más rápidas y, en algunos casos, WebGL puede ser necesario para evitar que la visualización avanzada bloquee nuestros navegadores. Creo que veremos crecer estas dos tecnologías y veremos más demostraciones WebGL en 2020.

La Web evoluciona constantemente y eso es lo que hace que sea tan emocionante ser parte de ella. ¿Qué crees que es un objetivo o una tecnología a tener en cuenta en 2020? ¡Dinos en los comentarios!