Cómo Elegir el Mejor Framework de Front-End

Este articulo fue escrito por Giorgi Bakradze. Originalmente publicado en Toptal.

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

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

El framework de front-end que elija puede hacer o deshacer su proyecto en el largo plazo.

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

Ya sea que elijas uno de estos populares frameworks de JavaScript o algo más esotérico, debes 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 elegante página de inicio de algún framework puede llamar su atención, aún necesita algunos cursos, libros, tutoriales y artículos adicionales además de la documentación aburrida y seca para ayudarlo a comenzar.

Crear un framework impresionante es una cosa y comunicar las ideas centrales detrás de esto 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.

Busca recursos de autores confiables con los que tenga experiencia previa; al final valdrá la pena su tiempo. Si tienes dificultades para encontrar algo útil, ten cuidado: el framework que estás tratando de aprender podría ser nuevo, o aún no haber sido adoptado por la comunidad.

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

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

El tipo de Vue toca fondo: tiene buena documentación y hay algunos buenos cursos entre los que puede elegir.

Aurelia, por ejemplo, tiene casi cero recursos; la única esperanza para ti es documentación y 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 estás limitado con tus opciones, lo que nos lleva al siguiente punto.

Popularidad

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

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

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

Hay otras razones personales por las que puede optar por un framework 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? Ya que está solo con la documentación, es probable que pierda mucho tiempo.

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

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

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

A veces, la elección del framework para tu empresa o cliente no depende de usted; tal vez fue hecho por un empleado anterior u otra persona en el equipo. Lo más probable es que sea angular o reaccione. Ahora hay otras opciones, como Ember y Vue. Pero, tienes que buscar deliberadamente compañías que los usen.

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

	Angular 2	React	Ember	Vue
Stars on GitHub	26,924	73,530	18,154	63,438
Contributors on GitHub	495	1044	679	122
Tagged questions on StackOverflow	66,152	54,158	21,651	8,598

Aunque estas bibliotecas han existido durante el tiempo suficiente como para demostrar que son opciones populares, si está intentando algo realmente nuevo, las estadísticas similares pueden ayudarlo a tomar una decisión.

Aprender sólo Angular o React solo te llevará tan lejos en tu carrera. Por supuesto, tendrá muchas oportunidades, pero hay una razón por la que existen otros frameworks. Intenta aprender sobre ellos en tu tiempo libre y ocasionalmente haz algunos experimentos. Incluso si nunca los usa en proyectos reales, obtendrá valiosos conocimientos que lo ayudarán en su trabajo diario de desarrollo.

Funciones principales

Vamos a ponernos un poco técnicos ahora.

Al principio, desea hacer una breve descripción de las características principales del framework para tener una expectativa adecuada cuando comience a codificar. Para ello, escanee la documentación. Necesita tener una idea de lo que trata este framework en general. ¿Es solo una capa de visualización, completamente desarrollada o algo intermedio?

Si tienes una amplia experiencia previa con otros frameworks, este proceso es fácil y rápido. Busca 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 de todos los días que haces como desarrollador. No todos estos pueden presentarse en el framework central, o puede haber un enfoque diferente para un problema en particular.

Toquemos las opciones populares brevemente.

Comenzaremos con Reaccionar y Vue. No son realmente frameworks; sólo representan la capa de vista de su aplicación. Significa que todas las otras partes — comunicación HTTP, validación de formulario, etc .— dependen de usted.

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

El JSX de React siempre me hizo encogerme. Tenía que acostumbrarme a eso. Sin embargo, la creación de plantillas de Vue es realmente agradable, especialmente si vienes de Angular.

Por otro lado, Ember tiene casi todo. Sorprendentemente, el núcleo de Ember no proporciona 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 “de la manera Ember”.

Si tienes antecedentes en otros frameworks o JavaScript en general, puedes sentirse frustrado porque Ember usa su propio modelo de objetos. Las clases estándar de ES2015 no se usan ampliamente, como lo indica su documentación. Puede encontrar que asigna el valor directamente a una propiedad y Ember se queja de ello.

Otra cosa significativamente diferente de otros frameworks es Ember Data. Es una capa de datos para aplicaciones Ember. Puedes pensarlo como algún tipo de ORM para el front-end. Usted crea modelos y mapea las relaciones entre ellos.

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

Angular 2 es un framework rico en funciones. Se envía con muchos módulos como Ember, por lo que tiene un montón de herramientas a su disposición de la caja. Sin embargo, como Angular está destinado a aplicaciones de gran tamaño, promueve TypeScript, que podría desencadenar cierta resistencia antes de intentarlo.

Otra cosa notable es el uso intensivo de observables de la biblioteca Rx, que es realmente agradable. Puede representar casi cualquier cosa como observable y aplicar operaciones de alto nivel como mapa, filtro, etc. Si usó Lodash o Underscore, Rx es similar a los esteroides.

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

	Angular 2	React	Ember	Vue
View/Templating	✔	✔	✔	✔
Router	✔	✔	✔	✔
Form processing	✔		✔
Form validation	✔
HTTP communication	✔		✔

Todas esas características que resumimos brevemente son inútiles si necesita quemar la vela en ambos extremos para usarlas efectivamente, que es el siguiente punto.

Usabilidad

Si en este momento todavía tienes entusiasmo por el framework elegido, el siguiente paso es ensuciarse las manos.

Tal vez el framework es una buena opción para ti debido a tu formación. Tal vez es un poco diferente y te reta de alguna manera. Aún no lo sabes, y ninguna cantidad de tutoriales de lectura o observación lo ayudará hasta que lo pruebe ti mismo.

La mejor forma de familiarizarse con un framework es utilizarlo en algún mini proyecto. Esto te brinda la oportunidad de resolver problemas cotidianos mencionados anteriormente con un framework dado.

Mientras trabaja en un proyecto, tómese su tiempo y reflexione si está siendo productivo o no. ¿Qué tan fácil es lograr el resultado deseado? ¿Tienes que buscar bibliotecas externas? Tal vez necesites algunos complementos de la comunidad. ¿Hay alguna estructura o directrices convencionales dentro del contexto del framework? 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 framework para próximos proyectos o incluso transición de los existentes.

Ember se considera un framework muy productivo, al menos para sus usuarios principales. Viene con un CLI, que realmente ayuda. Puede generar rutas, controladores, componentes y modelos con sus propios conjuntos de prueba. Hacer todo eso manualmente es una tarea tediosa. Generar un nuevo proyecto también es posible. Creará la estructura de carpetas básica, instalará los paquetes necesarios, las herramientas de compilación, el entorno de prueba, etc. Si nunca ha utilizado una CLI en esa medida, estará muy satisfecho. Pero, como mencioné antes, Ember es muy obstinado; a pesar de toda esa bondad, puede encontrarse frustrado al tratar de 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 mucho 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 proyecto a proyecto, entonces se encuentra en un buen lugar. Para algunos desarrolladores, la flexibilidad es la clave que inherentemente viene con el uso de React o Vue.

Angular 4 viene con un CLI como lo hace Ember. Puede generar componentes, directivas, servicios, etc. También genera la estructura inicial para una aplicación, por lo que solo debe preocuparse por el producto. El entorno de prueba es muy bueno ya que, con cada aplicación generada, el banco de pruebas vive cerca de él (literalmente). Además de eso, TypeScript podría proporcionar un impulso de productividad real. Este es el por qué:

¿Cuántas veces has encontrado 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 de TypeScript. Puede explorar diferentes partes de la aplicación en un abrir y cerrar de ojos.

No hemos abordado los IDE pero, para la mayoría de los frameworks populares, existen algunos complementos que hacen que el desarrollo sea realmente fácil. WebStorm, por ejemplo, se envía 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 qué tan rico en funciones tenga el framework seleccionado, es probable que se enfrenten a problemas donde se necesitan herramientas adicionales. Hay excelentes bibliotecas enfocándose en un problema, ya sea manipulación de DOM, procesamiento de datos, formateo de tiempo, edición de texto enriquecido, etc. Si intentas integrar una de ellas y dedicar horas cada vez, quizás esa no sea la mejor opción.

Probando esto es muy fácil. Puede encontrar rápidamente un escenario imaginario donde necesite una determinada biblioteca. Mira tus proyectos pasados; ¿Qué herramientas has estado usando y en qué escenarios? Lo más probable es que se encuentre nuevamente en las mismas situaciones y quiera estar preparado para eso, o al menos tener una expectativa.

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

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 mediante NPM. Me parece un poco molesto para Vue el uso de complementos de la comunidad, especialmente cuando también contienen la lógica de la interfaz de usuario.

Ember tiene EmberObserver, que es un sitio web de complementos de la comunidad. Cada uno de ellos tiene un puntaje 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á los complementos relacionados de envoltorios simples para completar las reescrituras. Por supuesto, hay repositorios Awesome React y Awesome Vue que reúnen recursos relacionados. incluyendo bibliotecas, pero encontré que EmberObserver es especialmente útil.

Comprometerse con un framework de JavaScript

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

En cuanto a las características principales y la usabilidad, he enumerado los puntos que afectarán la productividad de los desarrolladores en diversos 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 frameworks que hemos discutido en este artículo pueden evolucionar, sus opiniones pueden cambiar y los proyectos para los que son adecuados pueden cambiar, pero este artículo debería brindarle una idea general de dónde cada uno de estos frameworks puede funcionar mejor.