Cómo elegir el mejor marco de front-end

El mundo de JavaScript es un entorno rico con docenas de herramientas, bibliotecas y marcos. Pero, con muchas opciones viene mucha confusión. Realmente es un arma de doble filo.

Si bien tiene mucho espacio para la creatividad y la experimentación, a veces no está seguro de qué biblioteca o marco elegir.

El marco front-end que elija puede hacer o deshacer su proyecto a largo plazo.

En este artículo, veremos algunos de los marcos de JavaScript más populares y cómo se comparan entre sí. Examinaremos cinco perspectivas diferentes de estos marcos, lo que generalmente facilita el proceso de tomar una decisión sobre su próximo marco de JavaScript.

Ya sea que esté eligiendo uno de estos populares marcos de JavaScript o algo más esotérico, debe tener en cuenta cada uno de estos aspectos.

Disponibilidad de recursos de aprendizaje

Este es obvio, pero a menudo se pasa por alto. Si bien la página de inicio elegante de algún marco puede llamar su atención, aún necesita algunos cursos, libros, tutoriales y artículos adicionales además de documentación aburrida y seca para ayudarlo a comenzar.

Crear un marco impresionante es una cosa y comunicar las ideas centrales detrás de él es diferente. De hecho, hay muchos desarrolladores profesionales que se especializan en coaching. Un recurso de aprendizaje bien diseñado reducirá drásticamente su curva de aprendizaje.

Busque recursos de autores confiables con los que tenga experiencia previa; al final, valdrá la pena. Si tiene dificultades para encontrar algo útil, tenga cuidado: el marco que está tratando de aprender puede ser nuevo o la comunidad aún no lo ha adoptado bien.

Aunque mencioné que la documentación por sí sola no es suficiente, hay excepciones a esto. EmberJS, por ejemplo, tiene una excelente documentación. Las características principales y los casos de uso se describen muy bien con ejemplos genéricos aquí y allá. Desafortunadamente, además de la documentación, nos quedan pocos recursos, libros, cursos en video u otros materiales.

Por otro lado, hay una gran cantidad de recursos para Angular y React. Casi cualquier sitio web educativo orientado al front-end tendrá uno o dos artículos sobre ellos, tal vez incluso un curso completo en video o un libro.

Vue llega al término medio: tiene buena documentación y hay algunos buenos cursos entre los que puede elegir.

Aurelia, por ejemplo, tiene recursos casi nulos; la única esperanza para ti es la documentación y la suerte.

Prefiero tener opciones.

Incluso si lee un gran libro o curso, existe la posibilidad de que aprenda algo nuevo al exponerse a diferentes recursos. Si está familiarizado con el tema, a menudo puede hojear y buscar posibles áreas que aún no están del todo claras.

Desafortunadamente, esta estrategia no funcionará si sus opciones son limitadas, lo que nos lleva al siguiente punto.

Popularidad

Puede enorgullecerse de aprender algo exótico, pero si lo mira desde una perspectiva comercial, no es lo mismo. Su empresa o cliente probablemente prefiera utilizar un conjunto de herramientas probado en batalla.

Hay varias razones para esto. Si un marco no es tan popular, significa que hay algunos desarrolladores que se especializan en él. ¿Qué pasa si abandonas el proyecto o encuentras un nuevo trabajo? Su empleador termina atascado en la búsqueda de un desarrollador que conozca el marco que utilizó.

Este proceso puede convertirse en una verdadera carga para una empresa. Lo mismo es cierto incluso si te quedas con el proyecto y crece. Ahora el empresario necesita más desarrolladores para acelerar el desarrollo.

Hay algunas otras razones personales por las que podría optar por un marco popular y ampliamente utilizado. ¿Qué sucede si te encuentras atascado con algún problema y no hay realmente una comunidad a la que puedas pedir ayuda? Dado que usted está solo con la documentación, es probable que pierda mucho tiempo.

Además de eso, desea pensar en futuras oportunidades más atractivas en su carrera. Si te especializas en algo popular y lo haces realmente bien, habrá muchos proyectos para ti.

Los líderes obvios aquí son Angular y React.

La mayoría de los listados de trabajos relacionados con front-end requieren uno u otro. Están respaldados por Google y Facebook respectivamente y, por lo tanto, los empleadores se sienten "seguros" con su elección.

A veces, la elección del marco para su empresa o cliente no depende de usted; tal vez lo hizo un empleado anterior o alguna otra persona del equipo. Lo más probable es que sea Angular o React. Ahora hay otras opciones como Ember y Vue. Pero, tienes que buscar deliberadamente empresas que los utilicen.

Puede determinar la popularidad de un marco observando rápidamente qué tan bien le está yendo al proyecto en GitHub y en otros lugares. Aquí hay algunas estadísticas recopiladas al momento de escribir este artículo:

Aunque estas bibliotecas han existido durante el tiempo suficiente para demostrar que son opciones populares, si está probando algo realmente nuevo, las estadísticas similares para ellas pueden ayudarlo a elegir.

Aprender solo Angular o React solo lo llevará hasta cierto punto en su carrera. Por supuesto, tendrá muchas oportunidades, pero hay una razón por la que existen otros marcos. Trate de aprender sobre ellos en su tiempo libre y, de vez en cuando, haga algunos experimentos. Incluso si nunca los usa en proyectos reales, obtendrá información valiosa que lo ayudará en su trabajo de desarrollo diario.

Características principales

Pongámonos un poco técnicos ahora.

Al principio, querrá repasar brevemente las características principales del marco para tener una expectativa adecuada cuando comience a codificar. Para ello, escanee la documentación. Necesita tener una idea de lo que trata este marco en general. ¿Es solo una capa de vista, completa o algo intermedio?

Si tiene una gran experiencia previa con otros marcos, este proceso es fácil y rápido. Busque los siguientes temas en la documentación: creación de plantillas, administración de estado, comunicación HTTP, procesamiento y validación de formularios y enrutamiento. Esas son cosas cotidianas que haces como desarrollador. No todos estos pueden presentarse en el marco central, o puede haber algún enfoque diferente para un problema en particular.

Veamos brevemente las opciones populares.

Comenzaremos con React y Vue. No son realmente marcos; solo representan la capa de vista de su aplicación. Significa que todas las demás partes (comunicación HTTP, validación de formularios, etc.) dependen de usted.

Como mencioné anteriormente, podría ser un arma de doble filo. Eventualmente, terminará construyendo su propio marco personalizado. Ambos tienen su ecosistema de bibliotecas para brindar soluciones a los problemas más comunes, pero la estructura general variará de un proyecto a otro.

El JSX de React siempre me hizo temblar. Tuve que acostumbrarme. Sin embargo, las plantillas de Vue son realmente buenas, especialmente si vienes de Angular.

Por otro lado, Ember tiene casi todo. Sorprendentemente, el núcleo de Ember no proporciona un procesamiento de formularios avanzado. Solo tiene algunos ayudantes de entrada y eso es todo. Es muy obstinado e incluso tiene su propia capa de datos. Todo tiene que hacerse “a la manera de Ember”.

Si tiene experiencia en otros marcos o JavaScript en general, es posible que se sienta frustrado porque Ember usa su propio modelo de objetos. Las clases estándar de ES2015 no se usan mucho, como indica su documentación. Es posible que se encuentre asignando el valor directamente a una propiedad y que Ember se queje al respecto.

Otra cosa significativamente diferente de otros marcos es Ember Data. Es una capa de datos para aplicaciones Ember. Puede pensar en ello como una especie de ORM para el front-end. Usted crea modelos y mapea las relaciones entre ellos.

Ahora, si su servidor usa la API JSON (es una especificación para implementar las API JSON), está en un buen lugar con Ember, pero desafortunadamente, la mayoría de los servidores no lo hacen. Por lo tanto, debe escribir adaptadores y serializadores personalizados. Sin embargo, si haces las cosas a la manera de Ember, podría ser realmente productivo. Simplemente tiene una curva de aprendizaje empinada.

Angular 2 es un marco rico en características. Se envía con muchos módulos como Ember, por lo que tiene un montón de herramientas a su disposición listas para usar. Sin embargo, como Angular está diseñado para aplicaciones grandes, promueve TypeScript, lo que podría generar cierta resistencia antes de intentarlo.

Otra cosa notable es el uso intensivo de observables de la biblioteca Rx, lo cual es realmente bueno. Puede representar casi cualquier cosa como un observable y aplicar operaciones de alto nivel como mapa, filtro, etc. Si ha usado Lodash o Underscore, Rx es similar pero con esteroides.

Aquí hay un resumen de las características principales de los cuatro marcos que estamos discutiendo en este artículo:

Todas esas características que revisamos brevemente no tienen valor si necesita quemar la vela en ambos extremos para usarlas de manera efectiva, que es el siguiente punto.

usabilidad

Si en este punto todavía tiene entusiasmo por el marco elegido, el siguiente paso es ensuciarse las manos.

Tal vez el marco sea una buena opción para usted debido a sus antecedentes. Tal vez sea un poco diferente y te desafíe de alguna manera. Todavía no lo sabe, y ninguna cantidad de tutoriales que lea o vea le ayudarán hasta que lo pruebe usted mismo.

La mejor manera de tener una idea de un marco es usarlo en algún mini proyecto. Esto le brinda la oportunidad de resolver los problemas cotidianos mencionados anteriormente con un marco determinado.

Mientras trabaja en un proyecto, tómese su tiempo y reflexione sobre si está siendo productivo o no. ¿Qué tan fácil es lograr el resultado deseado? ¿Tienes que buscar bibliotecas externas? Tal vez necesite algunos complementos de la comunidad. ¿Existe alguna estructura convencional o lineamientos dentro del contexto del marco? Tal vez haya una CLI para acelerar el proceso de desarrollo. En este paso, está reuniendo experiencia básica para que pueda pensar cómo sería si usa este marco para los próximos proyectos o incluso para la transición de los existentes.

Ember se considera un marco muy productivo, al menos para sus usuarios principales. Viene con una CLI, que realmente ayuda. Puede generar rutas, controladores, componentes y modelos con sus propios conjuntos de pruebas. Hacer todo eso manualmente es una tarea tediosa. También es posible generar un nuevo proyecto. Creará la estructura de carpetas básica, instalará los paquetes necesarios, creará las herramientas, el entorno de prueba, etc. Si nunca ha usado una CLI hasta tal punto, estará muy satisfecho. Pero, como mencioné antes, Ember es muy obstinado; a pesar de toda esa bondad, es posible que te sientas frustrado al intentar realizar tareas comunes.

Ahora, para React y Vue, tienen algún tipo de CLI, create-react-app y vue-cli. Pero además de generar un proyecto inicial con algunas opciones, no ofrecen tanto en comparación con Ember o Angular. Es comprensible ya que ambos representan una capa de vista. Si le gustan los flujos de trabajo personalizados, la experimentación o las diferentes estructuras de un proyecto a otro, entonces está en un buen lugar. Para algunos desarrolladores, la flexibilidad es la clave inherente al uso de React o Vue.

Angular 4 viene con una CLI como lo hace Ember. Puedes generar componentes, directivas, servicios, etc. También genera la estructura inicial de una aplicación, por lo que solo debes preocuparte del producto. El entorno de prueba es realmente agradable ya que, con cada pieza de aplicación generada, el conjunto de pruebas vive cerca de ella (literalmente). Además de eso, TypeScript podría proporcionar un aumento real de la productividad. Este es el por qué:

¿Cuántas veces te has encontrado con el código con líneas como esta...?

 function doSomething(someData) { // do something }

… y se preguntó qué diablos es someData , qué propiedades debería tener, qué funciones debería proporcionar y cuál es su comportamiento. Con TypeScript, usted define el tipo y espera los datos apropiados. Puede ir más allá si usa algún IDE con soporte para TypeScript. Puede explorar diferentes partes de la aplicación en un abrir y cerrar de ojos.

No hemos tocado los IDE pero, para la mayoría de los marcos populares, existen algunos complementos que facilitan mucho el desarrollo. WebStorm, por ejemplo, viene con soporte integrado para Angular, React y Vue.

Facilidad de integración (con otras bibliotecas)

Por último, pero no menos importante, esto podría considerarse como parte de la usabilidad, pero es tan importante que merece su propia sección.

No importa cuán rico en funciones sea el marco seleccionado, es probable que enfrente problemas donde se necesitan herramientas adicionales. Existen excelentes bibliotecas que se enfocan en un problema, ya sea la manipulación de DOM, el procesamiento de datos, el formateo de tiempo, la edición de texto enriquecido, etc. Si intenta integrar uno de esos y dedica horas cada vez, tal vez esa no sea la opción óptima. .

Probar esto es muy fácil. Puede pensar rápidamente en un escenario imaginario en el que necesita una determinada biblioteca. Mira tus proyectos anteriores; ¿Qué herramientas has estado usando y en qué escenarios? Lo más probable es que vuelva a encontrarse con las mismas situaciones y quiera estar preparado para eso, o al menos tener una expectativa.

No todas las bibliotecas son compatibles con TypeScript. Como Angular lo usa mucho, algunas de las bondades de TypeScript podrían desaparecer al usar dicha biblioteca. Por supuesto, puede encontrar una solución alternativa, pero es un poco más complicado. Debido a la popularidad de Angular, puede integrar instrucciones en la página de la propia biblioteca.

Para Vue y React, usted es responsable de casi todo, y el uso de otras bibliotecas no es una excepción. Si usa Webpack o una herramienta de compilación similar, puede consultar directamente las bibliotecas instaladas con NPM. Descubrí que es un poco complicado para Vue usar complementos de la comunidad, especialmente cuando también contienen lógica de interfaz de usuario.

Ember tiene EmberObserver, que es un sitio web de complementos comunitarios. Cada uno de ellos tiene una puntuación en una escala de cero a diez. Es un gran lugar para buscar algo que necesita. Si escribe el nombre de sus bibliotecas favoritas, como Lodash, Rx o Ramda, encontrará complementos relacionados, desde envoltorios simples hasta reescrituras completas. Por supuesto, hay repositorios Awesome React y Awesome Vue que recopilan recursos relacionados, incluidas bibliotecas, pero EmberObserver me pareció especialmente útil.

Comprometerse con un marco de JavaScript

Elegir el marco JavaScript correcto es uno de los pasos más importantes para que su proyecto web sea un éxito. Ya sea que esté trabajando en un proyecto pequeño o grande, ya sea solo o en equipo, cada uno de estos detalles juega un papel crucial para determinar qué marco es el mejor para su proyecto (y menos qué marco puede preferir). ).

En cuanto a las funciones principales y la facilidad de uso, he enumerado los puntos que afectarán la productividad de los desarrolladores en varios grados. La usabilidad es especialmente complicada porque depende en gran medida de su experiencia y antecedentes, así como de la empresa u organización en la que está trabajando.

Con el tiempo, los marcos que hemos discutido en este artículo pueden evolucionar, su popularidad puede cambiar y los proyectos para los que son adecuados pueden cambiar, pero este artículo debería darle una idea general de dónde puede funcionar mejor cada uno de estos marcos.