En este post, vamos a analizar estas dos librerías y tratar de aprender sus similitudes y diferencias, lo cual te ayudará a decidir cuál de las dos usar en tu nuevo proyecto. Intentaremos utilizar nuestro mejor juicio dado que, para bien o para mal, esta decisión va a vivir contigo por un tiempo. Todos hemos estado en esta misma situación.
Estas son algunas de las preguntas que intentaremos responder hoy:
- Cuál es el objetivo de estas librerías? En qué se diferencian?
- Cómo puedo empezar a desarrollar con ellas? Va a ser difícil al comienzo?
- Cómo va a verse mí código si uso Angular o React?
Arquitectura y conceptos
Angular es desarrollado por Google y se presenta como el One framework para crear tu aplicación web o mobile, presumiendo sobre su increíble performance, el tooling y la popularidad entre los desarrolladores.
React es desarrollado por Facebook y se presenta como una librería de JavaScript para construir interfaces de usuario. Afirma tener un enfoque declarativo fácil de seguir y una arquitectura basada en componentes que puedes reutilizar a través de stacks tecnológicos diferentes.
Ambas librerías son utilizadas internamente en estas empresas, por loo que puedes estar seguro que estos grandes jugadores van a continuar apostando en estas tecnologías por un buen tiempo.
Y qué podemos apreciar respecto a sus diferencias?
- Angular dice ser un UI framework, mientras que React es una UI library. En la práctica, esto significa que Angular viene con muchas funcionalidades y es más opinionado al respecto de cómo debes implementar tu aplicación. Pero aunque React da más libertad en las librerías que puedes utilizar en tu aplicación (para ruteo, manejo de estado, fetching, testeo unitario, etc.), hay un set de librerías mainstream bastante establecido que posiblemente terminarás utilizando.
- Tanto Angular como React proponen el encapsulamiento de la lógica de negocio en componentes. Y luego integrar pequeños componentes en otros más grandes, para así crear UIs más complejas.
En la realidad, no hay grandes diferencias en el modelo arquitectural que proponen para tu aplicación y puedes hasta terminar con una experiencia de desarrollo similar, dependiendo de las otras librerías que utilices para complementar Angular y React.
Una cosa más para mencionar es que ambas utilizan la licencia de MIT, un tema importante para tener en cuenta si tienes planeado utilizar alguna de ellas en tu empresa.
Estilos de código
Dado que vamos a escribir mucho código con estas herramientas, es importante que sus estilos nos gusten. Veamos cómo se escribe un simple componente HelloMessage utilizando cada una de estas librerías:
Como hemos visto, los estilos para construir componentes son diferentes. Angular utiliza el decorador @Component para crear componentes y una combinación de HTML y directivas para templating. En paralelo, React utiliza la clase Componente y una sintaxis tipo-HTML llamada JSX para crear componentes, ambos conviviendo en el mismo archivo JS.
Elegir un enfoque sobre el otro es completamente subjetivo, pero algunas veces tienes un requerimiento que ayuda a inclinar la balanza. Por ejemplo, si en tu equipo tienes diseñadores que se sienten más a gusto entregando archivos HTML, Angular puede ser una mejor opción para ti. Por supuesto, tendrás que decirle a los desarrolladores que aprendan la sintaxis especial de Angular para poder aplicarla en estos archivos.
Curva de aprendizaje y tooling
Dado que Angular es un framework, al instalarlo uno encontrará muchas funcionalidades que desconoce, lo que puede ser muy abrumador. React sólo requiere un poco de conocimiento sobre JavaScript y JSX, lo cual puede parecer más fácil para los recién llegados. Sin embargo, a medida que uno va agregando complejidad en la aplicación, uno tiene que aprender temas complejos como ruteo, manejo de estados, llamadas asíncronas, etc.
Afortunadamente, ambas librerías tienen una gran documentación que puede ayudarte a ponerte al día Además existen muchísimas herramientas que te ayudarán en la creación de tu primera aplicación. Recomiendo que revises Angular CLI y Create React app, ambas herramientas son excelentes y estoy seguro que las amarás.
Para más información, navega a la documentación de Angular o la documentación de React.
Ciclo de vida de la aplicación
Este tema contiene las diferencias más significativas entre ambas herramientas:
Por un lado, Angular utliza un two-way data binding para conectar los elementos del DOM con el modelo que almacena los datos. Y los mantiene sincronizados gracias a un algoritmo de detección de cambios que automáticamente obtiene las modificaciones en los datos y las aplica en el modelo. Es necesario una serie de posts aparte para poder explicar los detalles de este algoritmo, por ahora sólo necesitamos saber que Angular intercepta todos los eventos asíncronos del browser que pueden potencialmente cambiar el modelo (una llamada AJAX, un evento onChange) y uno no tiene que ocuparse de implementar el control de cambios, como se observa en el siguiente código:
En cambio, React utiliza un mecanismo explícito de para actualizar el estado de los componentes (esto quiere decir, que debes llamar a una función para esto), pero esconde la complejidad de realizar los cambios en el DOM de manera eficiente al utilizar un Virtual DOM, una copia del DOM en memoria. Los datos viajan siempre en una dirección (del componente al DOM), por lo que utiliza one-way data binding.
Aunque cada uno utilice técnicas diferentes, en la mayoría de los casos no notarás ninguna diferencia en términos de performance ten en cuenta que estas librerías están fuertemente testeadas en miles de aplicaciones). Si existen diferencias al escribir componentes, pero queda en tu criterio personal decidir qué estilo prefieres.
Tipado estático
Angular viene con TypeScript, un superset tipado de JavaScript, y propone el uso de clases de OOP para desarrollar componentes. React no sugiere el uso de un sistema de tipos, aunque tiene una sección muy útil en su documentación que explica cómo agregar Flow o TypeScript en un proyecto. Es también menos opinionado sobre cómo debes escribir tus componentes, y puedes utilizar tanto funciones como clases para ello.
Conclusión
Tanto Angular como React son grandes opciones para tu próxima aplicación. Como hemos visto en este post, elegir una por sobre la otra está más relacionado con las preferencias personales que con una ventaja potencial en términos de performance, features, ecosistema o tamaño de la comunidad de desarrolladores.
Está en ti decidir qué estilo te gusta más. Cuando lo hagas, me interesa saber las razones (si es que las hay) que tenido en cuenta para tomar la decisión. Puedes contactarte conmigo via Twitter o MeetupJS Slack. Nos vemos!
No hay comentarios:
Publicar un comentario