Las mejores tendencias de JavaScript para ver en 2018

Si has estado viviendo bajo una roca o enterrado en proyectos durante 2017, este es el artículo para ti.

Mucho sucedió en 2017 que hemos estado observando cuidadosamente en X-Team , configurando 2018 para mucha acción e innovación.

También puede usar esto como una guía para planificar su crecimiento como desarrollador en 2018 para ayudarlo a obtener más proyectos innovadores.

React vs. Vue.js

Vayamos directamente a lo bueno: esta vez el año pasado, no muchos tenían fe en que Vue alguna vez se convertiría en un gran competidor para Reaccionar cuando se trata de grandes compañías que lo adoptan, pero fue imposible ignorar a Vue este año, incluso enviando a Angular a las sombras en términos de exageración de los desarrolladores.

A medida que miramos hacia el 2018, estamos a punto de embarcarnos en los próximos 2 años intensos llenos de mucha emoción para Vue .

Pero no olvidemos que React aún tiene el respaldo financiero de una de las compañías más ricas del mundo, por no mencionar a algunos gerentes increíblemente talentosos. Ambos equipos centrales también colaboran e inspiran entre sí.

Entonces, ¿qué le está dando a Vue el centro de atención?

Vue está haciendo todas las cosas que hacen a los desarrolladores realmente felices:

  • Vue es liviano, fácil de aprender, tiene herramientas increíbles, tiene una excelente administración de estado y enrutamiento incorporado (!), Etc.

La comunidad de Vue ciertamente aún no es tan grande como React, pero las comunidades crecen en función de si el equipo central tiene grandes embajadores y escucha a su comunidad (ambos están en su lugar).

Cuando se trata de complacer a los desarrolladores, no nos olvidemos de la épica falla de Facebook este año con el snafu de la licencia de patentes de BSD + que fue muy bien con los desarrolladores.

Claro, las guerras de Twitter nunca mataron un marco, pero ya hemos visto cómo la mala administración (por ej., Retraso angular 2) puede crear una ventana de oportunidad para permitir que una alternativa intervenga y sea el centro de atención.

Aquí hay un gran artículo sobre React vs. Vue vs. Angular de este año.

El escenario final probable? Facebook hace lo que hace mejor: copiar a los innovadores y el mundo sigue usando React.

Todos los desarrolladores de JS deben considerar aprender Vue.js, ya que es lo suficientemente grande como para comenzar a ver las solicitudes de alquiler de los desarrolladores de Vue.js, lo que significa que puedes crear un valor para ti en el corto plazo. al menos.

Next.js

Y luego está Next.js , que llamaremos 'seguro para Reaccionar'.

React junto con Next.js te acerca mucho más a la experiencia Vue en términos de herramientas, división de código, enrutamiento y administración estatal, lo que te permite conservar el enorme ecosistema y soporte de React.

Next también es especialmente útil para las aplicaciones renderizadas en el servidor creadas en React, una tendencia en aumento por sí misma.

Además, agrega Now.js (creado por el mismo equipo) y tienes una manera súper rápida de implementar tus aplicaciones React.

A medida que el debate Vue vs. React continúa entre los equipos de desarrollo y los gerentes, esperamos ver más y más adopción de Next en tándem con React.

Angular

A pesar de las crecientes dificultades de Angular para complacer a los desarrolladores, seguirá siendo un marco ampliamente utilizado en 2018.

Muchas grandes compañías adoptaron Angular hace 1.0 años, y mientras buscan migrar a algo mejor en 2018-19, verán React o Vue.js como alternativas potenciales a Angular 2.

Los defensores restantes de Angular han adoptado la postura de que Angular será el marco de JS de elección para la empresa porque las grandes empresas como los proyectos de SO respaldados por una gran empresa (Google). ¿Pero no se puede hacer el mismo argumento sobre React y Facebook?

Aquí encontrará todo lo que necesita saber sobre lo que le sucedió a Angular en 2017.

Razón

Siempre vale la pena prestar atención a todo lo que Facebook usa en producción.

Facebook ahora usa Reason (su versión del OCaml ya bien establecido) para la versión web de Facebook Messenger , entre otros proyectos (WhatsApp, Instagram, Ads, etc.).

En 2017, también lanzaron reason-react, lo que crea enlaces para React, por lo que puedes escribir el código Reason que se compila en el ReactJS idiomático.

Así que imagine que no necesita instalar Babel (+ muchos complementos), Flow, etc. y solo necesita la potencia de OCaml + Reason (que ahora admite enlaces React). Esa es una gran tendencia a la espera de explotar.

La razón recibió mucha más atención este año en el ámbito de JS que la mayoría de los otros lenguajes de compilación a jS (lo siento, Elm, igual te amamos de todos modos), así que definitivamente es uno para seguir mirando y jugando en 2018.

GraphQL

GraphQL es un lenguaje de consulta para las API (piense: una versión moderna de REST).

GraphQL estuvo a la altura de las expectativas en 2017, ya que las principales compañías como Yelp, Spotify, Github, Walmart, NY Times , etc. ahora tienen API basadas en GraphQL.

Algunas de estas API son incluso exclusivas de GraphQL, sin opción de REST disponible. En pocas palabras: las empresas innovadoras apuestan por GraphQL.

Las API RESTful están ciertamente lejos de estar muertas, pero de nuevo, mirando las tendencias de las startups en movimiento, GraphQL es una opción popular.

Alternativas como Falcor, por otro lado, apenas se discuten nunca más.

Este es definitivamente el momento de comenzar a aprender GraphQL si desea obtener trabajos en empresas innovadoras.

Redux, relé moderno y Apollo

Redux es el popular proyecto de Dan Abramov / Andrew Clark que rápidamente se convirtió en la solución ideal para la gestión estatal y la obtención de datos en React.

Pero GraphQL realmente sacudió las cosas para Redux, principalmente cuando se trata de obtener datos.

Ahora tenemos Relay Modern (creado por Facebook) y Apollo , frameworks de clientes GraphQL que le permiten buscar y pasar datos de GraphQL en su aplicación React de manera más eficiente que Redux.

Pero como un desarrollador señala sobre Relay / Apollo / Redux:

Estos marcos y sus beneficios no tienen que ser mutuamente excluyentes. De hecho, usarlos juntos puede proporcionar una buena separación de preocupaciones que es tan importante en el desarrollo web.

Esto significa que todavía puede usar Redux en tándem con Relay, usando Redux para el estado local y algún estado complejo que no sea servidor y luego el Retransmisión para la recuperación.

Pero la comunidad está ansiosa por algo que simplifique esto (y hasta ahora, la única respuesta es Vuex / Vue.js / Apollo o Cashay ).

Libro de cuentos

Wow, Storybook realmente estalló en 2017.

Storybook es un entorno para definir, desarrollar y probar componentes de UI.

Pasó de prácticamente muerto a comienzos de año a popularizarse masivamente a mediados de 2017 gracias a un gran esfuerzo de la comunidad. Es una historia tan inspiradora de cómo debería evolucionar el trabajo de código abierto y del que vale la pena leerlo.

Es increíblemente útil (e incluso divertido de usar), lo que le permite crear y probar componentes de IU de forma aislada. Es como una guía de estilo de UI viviente que realmente proporciona un valor real para el desarrollador.

Probablemente ya conozcas un proyecto de código abierto usando Storybook, pero para verlo en acción, echa un vistazo al Libro de cuentos para el selector de fechas de Airbnb.

Si desea destacarse como desarrollador en 2018, entonces preséntese a una entrevista con un libro de cuentos de su último proyecto.

Bono: También echa un vistazo a react-bluekit , una alternativa de Storybook que el equipo de ingeniería de Netflix está utilizando para su biblioteca de componentes.

Más bonito

Como su nombre lo indica, Prettier es un formateador de código que hace que tu código sea mucho más legible y, bueno, bonito.

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

se convierte …

 foo ( 
reallyLongArg (),
omgSoManyParameters (),
IShouldRefactorThis (),
isThereSeriouslyAnotherOne ()
);

Con más de 18,000 estrellas en Github , los desarrolladores adoran este proyecto simple y valioso.

También se usa en una tonelada de otros proyectos que probablemente ya te gusten, como Webpack, React, Next.js, Babel y más.

Por otra parte, podría convertirse en un desarrollador Go y ni siquiera necesitar instalar esto.

Jest y Enzima

En lo que respecta a las pruebas de JavaScript, Jest ciertamente ha tomado la iniciativa, con Enzyme como un excelente complemento al crear aplicaciones React específicamente.

Como verás aquí , Jest ahora está dominando a Jasmine en las descargas.

La función Instantáneas de Jest realmente despegó en 2017, por lo que es mucho menos doloroso lidiar con las pruebas. Vea esta charla de React Conf 2017 para aprender todo sobre ella.

Enzyme , creado por el equipo de ingeniería de Airbnb, es una biblioteca de JavaScript para probar los componentes de React. Se ha disparado a 12,000 estrellas en Github desde 2016.

Jest's Snapshots + La API súper simple de Enzyme para probar los componentes de React es una gran combinación de pruebas que continuará aumentando en popularidad en 2018.

Webpack

Webpack se ha convertido en el paquete de activos más popular. Webpack también tuvo un INCREÍBLE año.

Esta vez el año pasado, Webpack apenas tenía documentación y la mayoría de los desarrolladores no tenían idea de cómo empezar a usarla.

Luego, a comienzos de año, escribí sobre lo increíble que era que Webpack había recaudado $ 15,000 en 3 meses ( y lo feliz que éramos de ser uno de sus primeros patrocinadores ) para apoyar el proyecto. Ahora tienen cientos de miles de dólares en fondos.

No solo es Webpack pavimentando el futuro de cómo los proyectos de código abierto pueden prosperar, sino que el desarrollo del proyecto ha mantenido su impulso masivo durante todo el año.

Y afortunadamente, con Sean Larkin liderando el movimiento de la Webpack, realmente no hay un final a la vista para lo que Webpack es capaz de lograr a continuación.

Debido a cuán bien respaldado es este proyecto (y cuánto se preocupan por su comunidad), es la tendencia más fácil de predecir para 2018.

Paquete

Pero con cada tendencia masiva, hay una fuerza creciente de desarrolladores descontentos.

Parcel, un bundler competidor, está ganando impulso bastante rápido con 12,000 estrellas de Github fuera de la puerta en 2017 y yendo directamente después de Webpack.

El argumento de Parcel es que todos los demás bundlers se han vuelto demasiado inflados, mientras que Parcel funciona dos veces más rápido en paquetes como Webpack (10 veces más rápido cuando se usa su caché).

También va después de la configuración de configuración algo confusa de Webpack, ya que con Parcel, no se necesita configuración.

"Simplemente apúntelo en el punto de entrada de su aplicación, y hace lo correcto".

Aunque simplificar la configuración y mejorar la velocidad son grandes mejoras, no me sorprendería que Webpack no copie estas mejoras para la primera mitad de 2018.

De forma similar a Vue vs. React, el pequeño siempre innovará más rápido, pero depende del chico grande inspirarse en esa innovación y mejorar sus proyectos.

Puedes leer todo el debate aquí.

ACTUALIZACIÓN: Webpack v4 ahora viene con configuración cero fuera de la caja.

Gatsby

Gatsby es un generador de sitios estáticos para React construido por Kyle Mathews.

Desde que Kyle fue a tiempo completo a Gatsby el año pasado, realmente comenzó a tomar impulso.

No hay mejor prueba de eso que el hecho de que el sitio web de React en sí está construido con Gatsby.

Gatsby tiene que ver con el rendimiento y ofrecer la experiencia web más rápida posible en React.

Este diagrama de su sitio web le da una idea de cómo funciona:

Gatsby también utiliza tecnología web progresiva que capta recursos de otras páginas, por lo que navegar es muy rápido.

Aunque Gatsby no va a dominar la industria de ninguna manera, es una solución fantástica para construir sitios estáticos rápidos que seguirán aumentando su popularidad.

Para más información sobre Gatsby, lee esta publicación.

También nos complace patrocinar el desarrollo de Gatsby este año.

Babel

Babel no necesita presentación en este punto y sigue siendo una tendencia esencialmente por defecto.

En general, fue un buen año nuevamente para Babel, centrado principalmente en la construcción de Babel 7 (con suerte, a principios de 2018). Lo más importante es que escribieron una canción 🙂

Actualmente, la única preocupación de Babel (aparte de que su extraordinario mantenedor toma un descanso indefinido / vago del proyecto ), es algo así como que la Razón se está convirtiendo en la corriente principal.

Pero por ahora, Babel debería continuar fuerte durante 2018.

También nos complace patrocinar a Babel este año.

Flujo y mecanografiado

Typescript y Flow son excelentes opciones de tipo estático para que los desarrolladores de JavaScript las utilicen para mejorar la calidad de sus códigos.

Es probable que no veamos que uno supere al otro en 2018 en términos de popularidad, ya que ambos han sobrevivido juntos, atendiendo diferentes casos de uso.

Flow, creado por Facebook, es la opción preferida de los desarrolladores de React ya que se integra fácilmente con Babel, que también se usa comúnmente en los proyectos de React.

TypeScript, creado por Microsoft, es popular entre los desarrolladores de Angular 2+ ya que es el idioma principal.

2018 probablemente sea aburrido en términos de avances de estos dos, y la pregunta real en los años siguientes será si algo como Reason reemplaza a ambos.

Immutable.js

Me gusta la forma en que un redditor describió Immutable.js :

ImmutableJS asegura que los desarrolladores en equipos grandes no hagan algo estúpido.

En pocas palabras: Immutable.js , otro proyecto de Facebook, se asegura de que el estado no se mute mediante el uso de objetos inmutables (inmutables).

Como señaló nuestro amigo redditor, esto puede ser increíblemente útil en un gran equipo de desarrolladores que pueden arruinar el estado involuntariamente.

Los datos encapsulados en un objeto Immutable.JS nunca se mutan. Siempre se devuelve una nueva copia. Esto contrasta con JavaScript, en el que algunas operaciones no modifican sus datos (por ejemplo, algunos métodos de Array, incluidos map, filter, concat, forEach, etc.), pero algunos sí (Array's pop, push, splice, etc.).

Existen algunas limitaciones bastante grandes al uso de Immutable.JS, pero existen limitaciones que pueden no ser importantes según sus necesidades. Puedes leer más sobre ellos aquí.

Con 20,000 estrellas en Github ahora, Immutable.js ha ganado popularidad en 2017 y se espera que siga aumentando en 2018 a medida que los desarrolladores comienzan a tomarse el tiempo para entender el concepto y las ventajas y desventajas.

Popmotion

Popmotion es una biblioteca de movimiento de JavaScript que gana rápidamente estrellas en Github.

Piense en ello como Flash meets jQuery.

Ahora, me doy cuenta que usar esas dos palabras en la misma oración no ayuda a vender esta biblioteca cada vez más popular.

Pero cuanto más se sumerge en este proyecto, más se descubre un grupo de personas que tenían serias quejas tanto con jQuery y Flash y simplemente necesitan para hacer las cosas mejor.

Y Popmotion es realmente una mejor experiencia con mucha innovación en torno a la animación web que recién comienza a hervir. Este es uno para ver en 2018 con seguridad.

Echa un vistazo a su sitio para empezar a ser objeto de burla para probarlo.

React Native & Electron

React Native le permite crear aplicaciones React para dispositivos móviles, mientras que Electron le permite crear aplicaciones JavaScript para escritorios.

Ambos se convirtieron en marcos bien establecidos en 2017 y ambos son excelentes soluciones para pasar de JavaScript a una aplicación nativa.

Algunas aplicaciones notables construidas en Electron incluyen: Slack, Atom, Github Desktop y Discord.

Y las aplicaciones populares compiladas con React Native incluyen: Facebook, Instagram, Airbnb y UberEATS.

También puede ahora crear aplicaciones React Native para Windows.

De todos modos, es un buen momento para ser un desarrollador de JavaScript teniendo en cuenta que puede crear aplicaciones para computadoras de escritorio y dispositivos móviles con mucha más facilidad que en el pasado.

Bonificación: Asamblea web

Con los 4 navegadores ahora soportando Web Assembly , ya casi llegamos. Todavía es demasiado pronto para llamarlo tendencia en 2018, así que lo actualizaremos en 12 meses.

Pero mantén esto en tu radar, ya que todos miran muy de cerca esto ahora.

2018 Materiales de estudio

Después de observar todas las tendencias que se avecinan, esto es lo que le recomendamos que considere aprender en 2018 para seguir siendo competitivo como desarrollador remoto y liberar su potencial:

  • Sé atrevido, aprende Vue.js
  • Todo desarrollador de React debe aprender Next.js
  • Comienza a aprender Reason (y ReasonReact ) y pruébalo en un proyecto paralelo.
  • GraphQL es imprescindible para su lista de tareas de 2018.
  • Seguido por el aprendizaje de Relay Modern , la opción de ir a buscar datos en las aplicaciones React + GraphQL.
  • ¡Libro de cuentos! ¡Libro de cuentos! ¡ Libro de cuentos !
  • Instale Prettier en un proyecto y haga que su código sea más legible.
  • Aprenda y use instantáneas de Jest en conjunto con Enzyme en un proyecto de React.
  • Learn Flow (desarrolladores de React) o TypeScript (Todos los demás).
  • Considere a Gatsby para construir algo de Markdown -> Páginas estáticas.
  • Crea una aplicación móvil usando React Native.
  • Crea una aplicación de escritorio usando Electron .
  • Juega con Popmotion para crear una animación suave.

Importe esta lista de recursos como un proyecto de Todoist :