El desarrollo de sitios web está en constante evolución. Una vez limitado a sitios web basados en texto, el desarrollo web ahora incluye aplicaciones de una sola página, aplicaciones móviles, aplicaciones web progresivas y aplicaciones más complejas. El auge de Flash dio paso a JavaScript, seguido de jQuery, React y Angular. HTML ha evolucionado a HTML5. También hay CSS3, XML, PHP y muchas otras tecnologías disponibles en la actualidad.
Si bien algunas etapas de la evolución en el desarrollo web solo se pudieron ver años después, otras se pueden ver en tiempo real. «Los desarrolladores pueden ver los cambios en lo que las personas tuitean, lo que hablan en las conferencias o lo que las empresas usan y promocionan como sus preferencias», dijo Piotr Staniów, ingeniero de software sénior de HubSpot.
Mantenerse al día con las nuevas tendencias, tecnologías y estrategias de desarrollo web puede hacer que usted y sus productos sean más competitivos en el mercado. Con eso en mente, echemos un vistazo a algunas estrategias de creación de sitios web que tal vez desee abandonar este año y algunas alternativas para probar.
Estrategias de desarrollo web obsoletas
- Formateo manual del código
- Usar Float para crear mallas y diseños
- Usando componentes de clase en React
- Pruebas superficiales de los componentes de React con la enzima
- Usando Redux para almacenar el estado del backend
1. Formato de código manual
Qué hacer en lugar de: Use un formateador de código bien establecido
Durante años se ha debatido acaloradamente qué estilo usar para el formato del código. Los desarrolladores tenían sus propias preferencias personales, así como las políticas de la empresa que debían seguir, y dedicaron mucho tiempo a concentrarse en el aspecto de su código en lugar de en lo que estaba haciendo.
Kevin McLarnon, ingeniero de software sénior de HubSpot, aconseja a los desarrolladores que dejen de formatear su código ellos mismos: «Elija una herramienta de formateo automático que forme opiniones para el idioma de su elección, intégrela en su compilación y deje de perder el tiempo pensando en el estilo del código».
Por ejemplo, más bonita es un popular programa de formato de código que funciona en muchos idiomas, incluidos JSX, Vue y Less. Dado que requiere muy poca configuración y formatea automáticamente el código, ahorra tiempo a los desarrolladores al formatear el código ellos mismos, o discutir sobre cómo formatearlo.
2. Usando Float para crear mallas y diseños
Qué hacer en lugar de: Use Flexbox u otro modelo de diseño
Arthur Albuquerque Ferreira, ingeniero de software sénior de HubSpot, dijo que el uso de propiedades flotantes de CSS para crear mallas y diseños probablemente haya quedado obsoleto durante años. Pero durante aproximadamente una década, los flotantes fueron la única opción para crear un sitio web complejo.
Durante este período, los desarrolladores tuvieron que ‘hackear’ su CSS, utilizando elementos flotantes para colocar elementos de bloque uno al lado del otro en lugar de apilarlos uno encima del otro para crear diseños de estilo de revista. Hubo algunos problemas con este método. En primer lugar, carecía de características clave como el centrado vertical, lo que hacía frustrante crear diseños que tuvieran el mismo aspecto en todos los navegadores. También dificultó el mantenimiento del código del sitio web.
Para simplificar tanto la creación como el mantenimiento de sitios web, se han creado modelos de diseño receptivos. El uso de un modelo como Flexbox, CSS Grid o Bootstrap permite a los desarrolladores crear diseños receptivos que se ven iguales en todas las plataformas y navegadores mucho más fácil y rápido que usar la propiedad flotante.
3. Usar componentes de clase en React
Qué hacer en lugar de: Usa piezas funcionales con ganchos
Según Ferreira, los componentes de clase en React también están bastante desactualizados. Si bien React ha dejado en claro que no tiene la intención de depreciar los componentes de clase, muchos desarrolladores como Robin Wieruch creen que lo hará. desaparecer. Esto significa que, si bien los componentes de clase seguirán utilizándose ampliamente en muchos proyectos de React existentes, los desarrolladores optarán por utilizar enlaces de React.
Una nueva adición a React 16.8, Hooks permite a los desarrolladores usar el estado y otras funciones de React sin escribir una clase. Los ganchos ofrecen una serie de beneficios, incluida la capacidad de reutilizar, organizar y comprender mejor su código.
4. Prueba superficial de los componentes de React con la enzima
Qué hacer en lugar de: Usar pruebas de integración con React Testing Library
Staniów dijo que en los últimos años ha habido un gran cambio en el pensamiento sobre cómo escribir pruebas unitarias para los componentes de React, desde un pensamiento más back-end sobre los componentes hasta un enfoque de prueba de integración: «En 2016, el estado del arte eran pruebas superficiales con Enzyme y ridiculizando todas las dependencias. . Tres años más tarde, todo el mundo estaba muy entusiasmado con la biblioteca de pruebas de React.
Esta biblioteca se creó para ayudar a los desarrolladores a escribir pruebas mantenibles para sus componentes React. En el caso de una biblioteca como Enzyme, debe considerar los detalles de implementación de sus componentes. El problema es que si existen refractores de sus componentes (cambios en la implementación pero no en la funcionalidad), romperán sus pruebas. Dado que la biblioteca de pruebas de React le permite crear pruebas sin los detalles de la implementación del componente, serán fáciles de mantener a largo plazo.
Staniów señala que Enzyme seguía recibiendo dos millones de descargas semanales constantes el año pasado, pero las descargas semanales de React Testing Library aumentaron de 2,5 millones a 4,9 millones durante el mismo período. «Si bien algunas empresas o equipos pueden optar por usar solo Enzyme como una forma más rentable o más fácil de realizar pruebas, hay un claro ganador en términos de escala de uso y una tendencia al alza en las tasas de adopción», dijo.
Una de las principales razones de la transición es cómo enzima obsoleta. Si bien está destinado a permitir que los desarrolladores prueben las aplicaciones de React, Enzyme no es compatible con todas las funciones de React, por lo que es imposible probar el código que la gente escribe con él.
Sabiendo que no habrá consenso entre la comunidad de desarrolladores sobre cuál es mejor en general, Staniów aconseja: «Teniendo en cuenta lo que está sucediendo en la comunidad, sin siquiera tratar de determinar qué está bien y qué está mal, es justo decir que 2022 es un buen momento para que los desarrolladores front-end revisen sus estrategias de prueba, si aún no lo han hecho”.
5. Usar Redux para almacenar el estado del backend
Qué hacer en lugar de: Usa la consulta React
Redux ha revolucionado la forma de crear aplicaciones web. Al permitir compartir datos inmutables en la aplicación, los desarrolladores pudieron separar el código de backend y frontend. Sin embargo, dado que los datos debían ubicarse en dos lugares, surgieron nuevos desafíos con respecto a la mejor manera de almacenar estos datos en todo el mundo y reducir la latencia de la red. Hay muchas bibliotecas de Redux disponibles para ayudar a administrar los datos desde el backend, pero agregan complejidad.
En cambio, el ingeniero de software Gabriel Abud en artículo sobre la comunidad DEV recomienda usar React Query cuando su aplicación requiere más administración del estado del servidor que administración del estado global. Requiere menos código estándar y es fácil de aplicar de manera consistente en una gran base de código.
El futuro del desarrollo web
El desarrollo web está evolucionando rápidamente, al igual que las estrategias de los desarrolladores y las pilas de tecnología. Si bien ninguna práctica o herramienta de desarrollo es intrínsecamente incorrecta, algunas han sido reemplazadas por alternativas más rápidas, más eficientes o más simples. Conocer las últimas estrategias de desarrollo como las anteriores puede ahorrarle tiempo y frustraciones.
