Cómo ser mejor Front-end este 2021

Episodio 1

2020-12-16

En este episodio te comparto aquellas cosas que creo que necesitamos seguir para ser mejores Desarrolladores Front-end este 2021.

Las notas del show

  • Caracter√≠sticas de CSS0:57 #CSS

    Subgrid

    CSS grid ha sido una de las caracter√≠sticas de CSS que m√°s impacto ha tenido en los √ļltimos dos a√Īos. Grid nos permite dise√Īar nuestras interfaces con mayor flexibilidad y agilidad.

    La adopci√≥n de¬†Grid¬†ha crecido considerablemente este a√Īo y era de esperarse que este crecimiento se viera reflejado tambi√©n en¬†Subgrid. √Čsta √ļltima, si bien todav√≠a no est√° en la especificaci√≥n, es la caracter√≠stica de CSS que debemos dominar este 2021.

    Container Queries

    Esta nueva y emocionante caracter√≠stica permite dar estilos a nuestros elementos a partir del tama√Īo del contenedor, de la misma manera como funcionan los @media queries en relaci√≥n con el viewport.

    Esto nos abre un mundo nuevo de posibilidades para controlar nuestras interfaces cuando estamos dise√Īando layouts responsivos.

    Aspect Ratio

    Esta otra característica nos permite manipular el aspecto de las imágenes, ya es totalmente soportada por Chrome. Firefox por su parte, la soporta parcialmente.

    Sin duda otra opci√≥n muy interesante con la que podemos empezar a experimentar para tener m√°s control en nuestro dise√Īo.

    CSS Houdini

    CSS Houdini es una serie de APIs que nos permiten extender CSS y que nos dan acceso directo al CSS Object Model (CSSOM), permitiéndonos escribir código que el navegador puede interpretar como CSS sin que este sea incluso soportado por el navegador. Esto nos permite experimentar con nuevas características que no están incluidas en la especificación, pero que ayudarán a facilitar el proceso de estandarización.

    Aprende m√°s sobre Houdini.

    Otras características

    Tambi√©n, te dejo una peque√Īa lista de aquellas caracter√≠sticas que no tienen mucho soporte o a√ļn no han sido adoptadas por la comunidad de desarrolladores, pero que son muy prometedoras:

  • Frameworks4:09 #JAVASCRIPT

    No est√° de m√°s recomendarte que elijas aprender uno o dos de los frameworks m√°s populares, como React (librer√≠a), Vue.js, Angular o incluso Svelte; pero no me detendr√© mucho en contarte acerca de ellos. Lo qu√© s√≠ voy a hacer es brindarte un poco de informaci√≥n acerca del panorama de los frameworks de JavaScript para que t√ļ decidas cu√°l de ellos agrega m√°s valor a tu carrera profesional.

    Google trends mostrando la popularidad de los frameworks de javascript

    En primer lugar tenemos a React que sigue a la cabeza en esta carrera de popularidad. Si lo que buscas es oportunidades de trabajo, React es una buena opción.

    Angular sigue en la batalla en el segundo lugar de popularidad. También hay muchas oportunidades de trabajo con este framework, pero en lo personal, creo que es un poco más complejo posicionarte como un nuevo desarrollador de Angular ya que hay varias versiones y dominar todas quizá implique una curva de aprendizaje más larga. No es que las tengas que dominar todas, pero no todas las oportunidades de trabajo se presentarán en la versión que elijas.

    El que sigue creciendo a√Īo con a√Īo es¬†Vue¬†y sin duda creo que es una excelente opci√≥n para tener en tu stack. Actualmente se encuentra en su versi√≥n 2, pero ya se ha liberado la versi√≥n 3, con la que puedes empezar a experimentar. Si vas a empezar a aprender este framework, te recomiendo que lo hagas en su versi√≥n 2, pues est√° m√°s consolidada, hay m√°s recursos alrededor de ella y por supuesto m√°s empleos.

    Svelte se ha vuelto muy popular, aunque fue apenas este 2020 cuando lanzaron su primer versión estable. Sin duda es una de mis opciones para aprender este 2021.

  • JAMStack5:38 #JAVASCRIPT

    Ahora quiero hablarte del JAMStack y por qu√© creo que es importante tenerlo en nuestra lista de habilidades t√©cnicas. La palabra es un acr√≥nimo deJavaScript APIs Markup, es una arquitectura que fue dise√Īada para crear sitios web r√°pidos, seguros y f√°ciles de escalar.

    Front-end Pre-Interpretado

    Con JAMStack, el front-end de nuestros sitios es pre-interpretado en páginas estáticas y recursos altamente optimizados. Este proceso resulta en sitios que son entregados desde un CDN, reduciendo el costo de los recursos, aumentando la seguridad y mejorando increíblemente el rendimiento.

    Sitios Web est√°ticos

    Lo que te acabo de contar es prácticamente lo mismo que un sitio web estático y para poder lograrlo hacemos uso de algunas de las herramientas más populares como lo son Gatsby (para React), NextJs (para React), NuxtJs (para Vue), Sapper (para Svelte), entre otros.

    Estas herramientas son mejor conocidas como generadores de sitios web est√°ticos.

    APIs

    Las APIs que consumimos en la arquitectura JAM, pueden ser servicios de terceros que accesamos a través de HTTPS o pueden ser servicios propios. Estas APIs nos proveen los datos que mostraremos en nuestros sitios web estáticos.

    Hay diferentes enfoques, los m√°s comunes son consumir datos desde:

    • APIs con GraphQL
    • Sistema de archivos (Filesystem)
    • Desde Administradores de Contenido (CMS)
    • JSON o YAML
    • Bases de datos

    Los generadores de sitios est√°ticos como Gatsby, cuentan con plugins que nos ayudan a abastecer de datos nuestro sitio web con cualquiera de los enfoques mencionados.

    Automatización

    Otra característica del JAMStack es que puedes automatizar el proceso de creación del código, así como el despliegue en tu servidor. Esto lo puedes hacer con servicios como Netlify, que te permiten crear hooks para que cuando mandes un cambio a la rama principal de tu proyecto, este servicio active la construcción y despliegue de tu código.

    Aunque esta solución es bastante práctica y barata, también es posible hacer este proceso llamado despliegue continuo con Github y cPanel.

    Si quieres aprender más acerca de esta arquitectura, visita el sitio oficial de JAMStack.

  • TypeScript7:54 #JAVASCRIPT

    Creado por Microsoft, TypeScript es una variante de JavaScript, con la diferencia que es de tipado fuerte. Esto quiere decir que los tipos primitivos de JavaScript como string, number y object deben ser correctamente asignados y TypeScript se asegura que así sea.

    Algunas de las ventajas que nos brinda Typescript son que funciona con nuestro código existente de JavaScript, nos ayuda a prevenir errores y potenciales comportamientos indeseados en nuestro código.

    TypeScript funciona con la mayoría de los frameworks más populares, así que si ya dominas JavaScript, no te costará mucho empezar a usarlo y hacer el cambio definitivo. Inténtalo ahora.

  • GraphQL8:37 #JAVASCRIPT

    Por mucho tiempo, REST ha dominado el campo de la creación de APIs. Si bien GraphQL puede ser una alternativa para crear APIs, también puede funcionar consumiendo REST APIs. Esta tecnología fue creada por Facebook para contrarrestar algunos problemas que enfrentan los desarrolladores al lidiar con RESTful APIs.

    A diferencia de las REST APIs, donde los desarrolladores consultan m√ļltiples endpoints con prop√≥sitos espec√≠ficos, GraphQL nos da la posibilidad de consultar un solo endpoint que nos provee toda la informaci√≥n que necesitamos. Esto lo hacemos a trav√©s de una petici√≥n en donde le especificamos al servidor los datos requeridos.

    Algunas de las ventajas de GraphQL son que utiliza un sistema de tipado fuerte y que los esquemas definidos en el servidor quedan documentados para poder ser consultados y usados correctamente por el front-end, evitando potenciales errores en nuestras consultas.

    GraphQL no solo est√° disponible para JavaScript, tambi√©n es soportado en otros lenguajes como Phyton, PHP, Ruby, Go,¬†entre otros. Existen varios clientes y herramientas que nos permiten usar GraphQL en el front-end, pero la m√°s popular es¬†Apollo Client¬†dise√Īado para trabajar con React, React Native, Angular 2, o Vanilla JavaScript.

    En lo personal lo he utilizado para React con Gatsby y para React Native con Apollo Client y Expo consumiendo la API de un sitio web de WordPress. Si estás interesado en cómo construí una app con WordPress, React Native y GraphQL déjalo en los comentarios, si hay suficiente interés, podré hacer una publicación al respecto.

  • Testing10:16 #JAVASCRIPT

    Es muy importante hacer pruebas de nuestro código antes de que salga a producción. Hay diferentes tipos de testing:

    Imagen mostrando testing con Jest

    Unit testing

    Son los que hacen pruebas de un solo componente o función fuera del contexto de la aplicación.

    Integration tests

    Son las pruebas que se hacen entre componentes de una aplicación.

    End-to-end tests

    Son las pruebas de los flujos completos en nuestra aplicación.

    Hay más tipos de testing, pero estos enfoques son los que quiero destacar en este artículo y los que creo que te ayudarán a ser mejor front-end.

  • Habilidades Blandas10:53 #JAVASCRIPT

    Por √ļltimo pero no menos importante, quiero hablarte de las habilidades blandas que debes empezar a desarrollar o seguir mejorando este 2021. Muchas veces las subestimamos, pero son igual de importantes que todas nuestras habilidades t√©cnicas. Si lo que quieres es crear una carrera en esta industria, te recomiendo que trabajes en las siguientes habilidades:

    • Empat√≠a
    • Trabajo en equipo
    • Comunicaci√≥n
    • Responsabilidad
    • Disposici√≥n a escuchar retroalimentaci√≥n
    • Dar retroalimentaci√≥n positiva
    • Creatividad para resolver problemas
    • Manejo del tiempo
    • Paciencia
    • Respeto
    • Autoeducaci√≥n
    • e Ingl√©s

    Si quieres dar el siguiente paso en tu carrera profesional, aprende a entablar una conversación escrita y oral en Inglés. La suma de todas tus habilidades técnicas, más las habilidades blandas, te van a llevar lejos en tu carrera como front-end, pero además hablar Inglés te ayudará a consolidar el impacto de tu trabajo.