¿Cuál es la mejor tecnología para el desarrollo de tu aplicación a medida?

Si estás pensando en tener una aplicación a medida, seguramente te habrás preguntado cuál es la mejor tecnología para desarrollarla.

Cada día hay más sitios webs y aplicaciones intentando conseguir el primer puesto en los resultados de búsqueda de los buscadores, y así conseguir llegar a más usuarios. Llegar ahí no es fácil, ya que requiere tener un producto de calidad, que sea eficiente y además tiene que estar actualizado rápidamente. Estas necesidades han hecho aparecer muchos “frameworks” y librerías, que ofrecen un abanico de posibilidades que pueden ser aprovechadas según el tipo de producto a desarrollar.

En Yapiko tenemos más de 7 años de experiencia ya, y con ella hemos aprendido que los requisitos anteriormente mencionados son la clave para el éxito.

En este artículo intentaremos explicar por qué lo elegimos de entre otras posibilidades, por qué se ha convertido en nuestra primera opción, y también otras alternativas que podrían funcionar según tu proyecto.

React, la mejor tecnología

React es una librería gratuita de JavaScript, uno de los lenguajes más usados en desarrollo web. React facilita la carga de desarrollo al combinar front y back ends. Esto significa que el estilo y lógica de la app puede estar simultaneamente en el mismo sitio usando React solo, por lo que el stack tecnológico necesario se reduce en comparación con otras opciones, y así los desarrolladores pueden aprender y adquirir experiencia más rápido.
React logo
Its main advantages are:

Easy to develop

React facilita la creación de UIs (Interfaces de usuario). Diseña vistas simples para cada estado en la aplicación, y React mostrará actualizados los componentes necesarios justo cuando cambien los datos, por lo que da una experiencia de usuario rica y fluida.
Las vistas declarativas hacen que el código sea más predecible y fácil de "debuggear", con lo que se ahorra tiempo de desarrollo.

Basado en componentes

Permite la creación de componentes simples que pueden ser reutilizados en cualquier sitio de la aplicación, como el menú o diferentes tipos de botones que aparecerán muchas veces a lo largo de la aplicación, pero que solo tendrán que ser creados una sola vez. Esto significa que durante el desarrollo, cualquier cambio que afecte a, por ejemplo, 12 botones, se puede hacer simplemente cambiando el componente individual en el que está el botón, y se aplicará a los 12 a la vez, por lo que los cambios se pueden aplicar rápidamente y comparar, mientras se mantiene un estilo consistente a lo largo de toda la aplicación.

 

“Aprende una vez, escribe donde quieras”

Con React puedes desarrollar funcionalidades para varias plataformas con el mismo código.
React también puede funcionar en servidores usando Node, y crear aplicaciones de móvil usando React Native, con el que se puede usar el mismo código para Android e iOS, por lo que con el código de una, podemos obtener dos apps listas para usar por prácticamente la totalidad de los smartphones.

Caronte imagen promocionalchronos web and login

Comunidad

React tiene una gran comunidad que sigue creciendo (es el “framework” más usado según GitHub) y tiene una gran variedad de librerías gratuitas que permiten implementar funcionalidades extra sin la necesidad de tener que crearlas desde cero, como por ejemplo estilos, componentes editables, widgets o botones para compartir en las redes sociales, autenticación de usuarios con seguridad “captcha” y otros tipos de formularios, y muchas más que facilitarán su implementación.

SEO

Ya que es un “framework” de JavaScript, el contenido se renderiza en el cliente, lo que afecta negativamente ya que Google recibiría casi una página en blanco mientras espera que JavaScript se ejecute. Sin embargo, Google ya ha estado mejorando este aspecto en los últimos años y ya no es el problema que era.
Pero React también puede ser renderizado en el servidor gracias a otras herramientas como Gatsby.js y Next.js, con lo que se logra que la web cargue más rápido en ordenadores o smartphones menos potentes, y así librar a Google de tener que ejecutar el JavaScript para leer el contenido de la página.

 

Aunque fue lanzado hace unos pocos años, ha crecido constantemente cada año y ya se ha convertido en el segundo “framework” más usado por desarrolladores profesionales, adelantando a Angular.

También ha mantenido el primer y segundo puesto como el “más querido” durante 4 años seguidos con un porcentaje del 67-75% de “desarrolladores que están trabajando con el lenguaje o tecnología y han expresado interés en continuar trabajando con él”.

Uso de React y otros frameworks por desarrolladores profesionales en StackOverflow

Año

Gráfica

Procentaje

Crecimiento anual

Posición

2017

12.6%

311% (según el
valor del año anterior)

2018

28.3%

15.7%

2019

32.3%

4%

2020

36.8%

4.5%

Fuente

Solo por detrás de jQuery, que encaja mejor para webs más simples, el futuro de React parece prometedor, con un constante crecimiento y una gran comunidad que le apasiona y asegura que seguirá siendo relevante durante muchos años más.

Usado por:

  • Facebook: StackShare
  • Instagram:“La velocidad de desarrollo es un valor principal en la ingeniería móvil de Instagram.. A principios de 2016, empezamos a usar React Native para permitir a nuestros equipos de desarrollo lanzar nuevas funcionalidades más rápido a través de un código compartido y mayor velocidades de iteración” (React Native sobre Instagram)
  • Reddit: StackShare
  • Uber / UberEats: “…[ReactNative] parecía encajar con el caso de uso de UberEATS bastante bien. Desde que la idea original del Restaurant Dashboard se creó e la web, nuestro equipo contaba con bastante experiencia usando React pero estaba limitada a iOS/Android. También había riqueza de conocimiento sobre cómo funcionaba el componente de restaurantes del servicio, que habíamos acumulado al trabajar en UberEATS desde su creación. Estas consideraciones hicieron que ReactNative, que provee una plataforma para el desarrollo móvil en el lenguaje de la web, fuera una opción atractiva. Puso a nuestra disposición los utensilios que necesitábamos para “cocinar” la aplicación que queríamos casi a la perfección” (StackShare)
  • Airbnb: StackShare
    “El principal beneficio de React Native es el hecho de que el código que escribes funciona nativamente en Android e iOS. La mayoría de las características usadas en React Native fueron capaces de logar el 95-100% de código compartido y un 0,2% de archivos eran específicos de la plataforma”. “Una de las grandes preocupaciones sobre React Native era su rendimiento. Sin embargo, en la práctica, era rara vez un problema. La mayoría de las pantallas en React Native se sienten tan fluidas como las nativas.” (Post en Medium).
  • Netflix: Interfaces de usuario de alto rendimiento / Rendimiento sin concesiones
  • Amazon: StackShare
  • Tesla: En reactnative.dev
  • Spotify: Tenían clientes de web y de escritorio. Y aunque el de escritorio era su principal cliente desarrollado con otras tecnologías, decidieron unificar ambas utilizando el enfoque React de Web de "una experiencia mucho más liviana y simple". Y ahora, “a principios de 2021, hemos creado una base de código mantenible para nuestros dos clientes con el alto estándar de accesibilidad y velocidad de desarrollo que esperábamos”, teniendo a React como el núcleo de ambos. ("Construyendo el futuro de nuestras apps de escritorio" )
  • Forbes: StackShare

Y muchos más: reactnative.dev/showcase , incluyendo la versión para móviles, React Native: github.com/ReactNativeNews/React-Native-Apps

Alternativas a React para tu aplicación a medida

Angular

Angular es también uno de los “frameworks” de JavaScript más comunes que ayuda a desarrollar aplicaciones web dinámicas de una sola página. Hecho por Google, pero está perdiendo terreno y lucha por mantenerse relevante ahora, ya que ha sido superado por React.

Núcleo potente

Tiene un núcleo potente para que no dependa de bibliotecas externas para realizar ciertas tareas, a diferencia de React. Esto puede ser bueno ya que unifica el desarrollo, pero también limita la libertad. Es más probable que React tenga al menos una biblioteca para las muchas tareas que necesitará en su aplicación, lo que le permitirá al desarrollador elegir la que mejor se adapte a sus necesidades.

Reusabilidad

Los componentes de naturaleza similar están bien encapsulados, es decir, son autosuficientes. Los desarrolladores pueden reutilizarlos en diferentes partes de la aplicación. Esto es particularmente útil en aplicaciones de ámbito empresarial donde diferentes sistemas convergen pero pueden tener muchos elementos similares como cuadros de búsqueda, selectores de fechas, listas de clasificación, etc. Este comportamiento es similar al de React.

Curva de aprendizaje

Angular tiene una curva de aprendizaje pronunciada. Es un “framework” complejo y detallado con muchas formas de resolver un solo problema. Tiene una compleja gestión de componentes que requiere muchas acciones repetitivas.

Adecuado para aplicaciones grandes

Su complejidad está diseñada con sistemas complejos en mente. También se puede utilizar para sitios más pequeños, pero no será tan eficaz.

Enlace de datos bidireccional

Esto significa que cuando cambia el modelo, el DOM (Interfaz de usuario) también se actualiza y viceversa. Esto no requiere la intervención de un desarrollador, por lo que se puede ahorrar más tiempo y esfuerzo en la codificación, traducción y actualización de elementos DOM. Sin embargo, a medida que aumenta la complejidad y la amplitud de su proyecto, también aumenta la dificultad de administrar los elementos de la interfaz de usuario y los estados del modelo, lo que dificulta el control del rendimiento y el control de los renderizados.

Usado por:

  • Paypal
  • Google services:
    • Google Play Store
    • Google Voice app
    • G Suite homepage
    • Google Open Source
    • Google Play Books
    • Gmail
  • Forbes: StackShare
  • Deutsche Bank

 

Vue

Vue.js es un “framework” progresivo para JavaScript que se utiliza para crear interfaces web. La biblioteca principal se centra solo en la capa de la vista y es fácil de recoger e integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue también es perfectamente capaz de impulsar aplicaciones sofisticadas de una sola página (single-page) cuando se usa en combinación con herramientas modernasy bibliotecas de soporte.

Ligero

Es el más pequeño en comparación con los demás mencionados, por lo que tiene una ventaja a la hora del tiempo de carga en el lado del cliente mejorando la experiencia del usuario y también el ranking SEO.

Basado en componentes

Funciona como React, dividiendo su código en partes más pequeñas que se pueden reutilizar en muchas partes de la aplicación, lo que facilita la escritura de código, lectura y escritura de pruebas.

Comunidad

Vue tiene mucho soporte y se está convirtiendo en uno de los frameworks más utilizados, por lo que se están agregando más bibliotecas y son más fáciles de encontrar. Sin embargo, gran parte de esa comunidad es de China porque su creador, Evan You, es chino, y también es utilizado por algunas importantes empresas chinas, como Xiaomi y Alibaba, lo que si bien ayuda a incrementar los números, también significa que será más difícil de acceder a esas bibliotecas, documentación y ayuda para quienes no sepan chino.

Usado por:

 

Flutter

Es otro “framework” gratuito y una tecnología independiente de plataforma de Google para crear aplicaciones web y móvil nativas.

Nuevo lenguaje

Flutter es un “framework” bastante reciente, lanzado en 2017, y a diferencia de los anteriores, no es un “framework” de JavaScript, sino que se basa en Dart. Mientras que en 2021 JS tiene un 68% de desarrolladores profesionales usándolo, Dart solo tiene un 6%. Lo que hará que encontrar soporte y desarrolladores sea más complicado.

Rendimiento

Las aplicaciones de Flutter tienden a tener un rendimiento fluido, lo que mejora la experiencia del usuario. Aunque también tiende a tener un tamaño grande que puede afectar el tiempo de descarga y el espacio ocupado, lo que puede ser un inconveniente para los teléfonos más antiguos o para algunas personas que tienen poco espacio en sus teléfonos y tienen que priorizar entre aplicaciones.

Comunidad

Tiene una comunidad en crecimiento que es esencial, y aunque no tiene tanto soporte y bibliotecas de terceros como React, si mantiene este camino se convertirá en una herramienta importante y valdrá la pena tener un ojo puesto en su evolución.

Usado por:

  • Google
    • Google Ads
    • Stadia
  • Tencent
  • The New York Times

 

Svelte

Svelte se lanzó a finales de 2016 y también se basa en JavaScript. Es un compilador de front end de código abierto para crear interfaces de usuario.

Rendimiento

Al ser compilado, significa que el usuario final en realidad no lo "ve". En cambio, se transforma en JavaScript estándar cuando se lanza a producción. De esta forma no es necesario que el usuario descargue nada relacionado con Svelte, sino que obtiene el código JS que necesitará el navegador en un tamaño mucho menor, aprovechando todas las funcionalidades de Svelte pero de una manera más eficiente, haciéndolo una experiencia más fluida y atractiva para el usuario.

Curva de aprendizaje

Svelte también se basa en JavaScript, y su código también es más simple que la mayoría de las otras opciones enumeradas anteriormente, por lo que los desarrolladores adquirirán experiencia más rápido que con el resto.

Desarrollo más rápido

También se basa en componentes, lo que facilita la creación de un componente y su uso en muchos lugares diferentes de la aplicación, al tener el mismo componente o al cambiar partes pequeñas como el texto de un botón, manteniendo el mismo estilo.

Comunidad

Parecido a Flutter, está creciendo pero todavía no se acerca a React o Angular. El soporte y otras bibliotecas serán más difíciles de encontrar y, en algunos casos, la única opción será crear el componente requerido desde cero, lo que requiere mucho más tiempo que descargar una biblioteca de terceros que ya ha sido utilizada y probada por miles de otros desarrolladores. en el que solo necesitas cambiar y adaptar algunos parámetros al gusto de tu app.

Usado por:

  • Avast
  • 1Password
  • IBM
  • GoDaddy
  • Philips

Comparativa de estadísticas

Repositorio en GitHub

Estrellas

Forks

Contribuidores

Usado por

Licencia

React

174k

35,2k

1,506

+7,463,259

MIT

Angular

76,4k

20k

1,447

+1,958,277

MIT

Vue

188k

30,1k

400

Unspecified

MIT

Flutter

131k

19k

921

Sin especificar

BSD 3-Clause

Svelte

50,9k

2,4k

446

62k

MIT

Estadísticas de GitHub en septiembre de 2021

Benchmark de "frameworks" de JavaScript : stefankrause.net/js-frameworks-benchmark8/table.html

 

Conclusiones

Entonces, ¿por qué React es la mejor tecnología para el desarrollo de su aplicación a medida?

Dados los pros y contras de React y algunas alternativas que también podrían funcionar, decidimos seguir usando React porque sus pros superan a los de las alternativas y con la experiencia que hemos adquirido en diferentes proyectos estamos convencidos de que estamos en el camino correcto. Un camino que seguramente durará muchos años más viendo cómo React sigue mejorando, volviéndose más importante y relevante cada año desde su lanzamiento.

Ningún lenguaje es de “talla única” y, según el tipo de proyecto, uno será mejor que los demás. Sin embargo, gracias a su escalabilidad, flexibilidad, soporte, gran comunidad detrás y nuestra experiencia con él, React es un candidato serio para su próximo proyecto.

Por eso, después de considerar la mejor opción para nosotros, terminamos eligiendo React, y después de probarlo y trabajar juntos nos convenció y nos hemos quedado con él desde entonces, conociendo cada vez más sus posibilidades, debilidades y fortalezas. y adaptándonos a su constante evolución.

 

ES New Slide ¿Necesitas un desarrollo? Cuéntanos cómo podemos ayudarte. CONTACTO