WEB APP:

qué es y cómo crearla

Desarrollar una Web App puede tener muchas ventajas respecto a otras soluciones. Para emprender este camino es necesario conocer algunos fundamentos para no cometer errores, así como identificar las características adecuadas con respecto al tipo de uso que se pretende realizar.

Posibles arquitecturas: monolítica o con microservicios, desarrollo de API

Lo primero que hay que hacer es elegir la tipología de arquitectura a adoptar.

Existen diferentes arquitecturas, técnicas y tecnologías para desarrollar aplicaciones web y están en constante evolución, pero podemos identificar 3 arquitecturas principales.

Esta guía analiza las tres arquitecturas principales que son:

1. Arquitectura monolítica

2. Arquitectura de microservicios

3. Arquitectura Single Page Application con backend API

1 Arquitectura monolítica

Como sugiere el nombre, las Web App monolíticas se desarrollan en un solo bloque. Estas presentan una serie de ventajas que, en algunas condiciones, realmente marcan la diferencia. Una Web App monolítica tiene que ser simple, ágil y realizar pocas operaciones, pero en la mejor de las posibilidades.

Las ventajas de una Web App monolítica

Este tipo de arquitectura es quizás una de las más sencillas de desarrollar desde cero considerando que todas las funciones y funcionalidades del software se realizan en la misma instancia.

Test y debug de la Web App monolítica se ejecutan rápidamente y es muy fácil para el desarrollador detectar cualquier problema. Además de esto, se trata de la solución perfecta si se va buscando la máxima velocidad de ejecución de la Web App.

Las Web App monolíticas se distinguen también por las ventajas en términos de seguridad. Por su naturaleza, permiten un elevado control de las autorizaciones en los accesos y los posibles ataques externos son muy limitados considerando el limitado ámbito de acción de cualquier persona malintencionada. También se facilitan las operaciones de backup y cualquier restauración de datos.

Las desventajas de una web app monolítica

Frente a estas ventajas existen algunas desventajas.Las aplicaciones monolíticas son difíciles de escalar horizontalmente, es decir, con múltiples servidores.

Además, el codebase de una aplicación monolítica puede volverse realmente “grande” y es difícil dividir el trabajo en varios equipos, subcontratar partes de la aplicación o realizar partes con tecnologías (ejemplo lenguajes) y diferentes técnicas de desarrollo.

Recursos útiles

Para profundizar en este tema, el consejo es el de consultar los recursos más interesantes sobre el tema. Aquí los más importantes:

Artículo Microsoft “Monolithic applications”
Web Application Architecture: Principles, Protocols and Practices de Leon Shklar y Richard Rosen

Este libro será muy útil para comprender mejor las diferentes tipologías de arquitecturas para la realización de una Web App. Explora muchos momentos relacionados con las arquitecturas monolíticas de una manera sencilla y clara

2 Arquitectura de microservicios

La arquitectura de microservicios o modular, a diferencia de la anterior, permite subdividir el dominio de la propia Web App en diferentes partes, que se pueden confiar a diferentes equipos y que también se pueden crear con diferentes tecnologías.

Las ventajas de la arquitectura de microservicios

Estas Web App te permite desarrollar todos los componentes que la componen de forma independiente y precisa. Especialmente para las aplicaciones más complejas, la adopción de la arquitectura de microservicios, permite una gran flexibilidad también desde el punto de vista de cualquier actualización de la plataforma, lo que permite a los desarrolladores intervenir en un servicio determinado de forma completamente independiente de los demás.

Una Web App de microservicios permite escalar más fácilmente, por ejemplo, agregando más máquinas de servidor. También le permite adoptar la tecnología más adecuada para cada una de las funcionalidades y acelera el proceso de desarrollo de plataformas complejas.

Las desventajas de la arquitectura de microservicios

Las Web App basadas en esta tipología de arquitectura son más complejas de desarrollar y la motivación se encuentra entre las múltiples posibilidades que se otorgan a los desarrolladores.

Recursos útiles

Para profundizar en este argumento, también en este caso, el consejo es el de confiar en recursos como bibliotecas y guías dedicadas a este argumento:

3 Desarrollo Single Page Application con backend API

En este tipo de acercamiento se desarrollan dos partes de forma diferenciada:

• El Front-End
• El Back-End

Es un acercamiento más moderno y útil si las aplicaciones de front-end son diferentes, por ejemplo, la Web App a la que conectan mobile app IOS y Android.

En el lado Web App el front-end generalmente se crea como Single Page Application utilizando los framework Javascript entre los más populares como React, Angular o Vue.js.

En el lado backend las API se pueden realizar en casa, o se pueden usar API ya disponibles y esto convierte el desarrollo más conveniente y similar a la arquitectura de microservicios. En este caso, los servicios utilizados por la aplicación son externos y están disponibles a través de servicios terceros. Se trata de una metodología que asume que las tareas que realizará la aplicación han sido ya desarrolladas pero deben ser utilizables a través de una interfaz especialmente desarrollada.

En concreto una estructura de este tipo sirve para agregar servicios provenientes de más fuentes o de proveedores específicos (ejemplo los llamados sistemas headless). Su integración requiere el estudio específico para cada una de las API a integrar, así como entender cómo y por qué hacer este tipo de integración.

Las ventajas

Aprovechar las API ya existentes facilita y agiliza el trabajo de los desarrolladores. Es importante testear su funcionamiento antes de integrarlas en un nuevo software y utilizarlas.

No solo esto: es posible realizar una propia aplicación web al hacer que las API estén disponibles para que otras empresas puedan explotar los datos y servicios puestos a disposición de las propias API. También en este caso, es necesario tener bien claro el resultado que se quiere tener antes de comenzar a desarrollar las propias API. No hay que olvidar que, después de la creación de la propia Web App desarrollada en base a las propias exigencias, se proceda a generar desde ahí la estructura de las API que se necesitan.

Recurso útiles

Cómo elegir un Framework de Front-End

Después de haber elegido qué tipo de arquitectura, es importante elegir en qué tecnología confiar para el desarrollo frontend. Para acelerar el trabajo de los desarrolladores, la elección adecuada es la de confiar en un framework.

Las tendencias de los micro front-end

Para simplificar, es posible definir el front-end como un container que permite visualizar y utilizar las funcionalidades de la Web App que se está desarrollando.

Entre los framework más utilizados a día de hoy, están seguramente Angular, Vue.js y React.
Estos framework no son muy versátiles, pero la web está llena de recursos a disposición de los desarrolladores que quieren utilizarlos. Esto permite facilitar el trabajo de los desarrolladores que, en caso de problemas, no tendrán dificultad en encontrar la solución adecuada.

Si quieres profundizar estos framework, lee estos artículos:Angular, Vue.js.

Para simplificar y hacer más preciso el trabajo de una Web App, el mundo del desarrollo ha sacado a la luz una nueva metodología de desarrollo expresada a través de una arquitectura de micro front-end. Esta permite desarrollar independientemente las funcionalidades de la web app. Además, esto da la posibilidad de desarrollar el front-end utilizando varias tecnologías y eligiendo cuál es la adecuada para cada una de las funcionalidades desarrolladas.

Como elegir el framework de backend

Por lo que concierne al back-end, aquí están los 4 framework más utilizados a día de hoy:

Cabe señalar que Wordpress, Joomla o Magento no son framework, sino CMS. A diferencia de los frameworks, los CMS se usan para coordinar el funcionamiento de las aplicaciones web más complejas. Sin embargo, los framework son útiles para crear software y funcionalidades que pueden también incluirse en un CMS.

Laravel

Laravel es un framework PHP que responde a muchas exigencias de empresas y desarrolladores en términos de desarrollo de Web App. En particular, gracias a las herramientas a disposición, es capaz de administrar de la mejor manera posible todos los aspectos del backend de estas aplicaciones y simplifica la gestión del front-end.

El curso Hackademy de Aulab permite a cualquiera aprender los fundamentos de Laravel para aprender a programar y realizar la propia Web App. Gracias a sus características, todas las aplicaciones Web realizadas con Laravel son escalables y personalizadas a voluntad. La documentación a disposición y la gran community también permiten encontrar recursos que están siempre actualizados en el framework.

No solo Laravel: el curso Hackademy, en fase accelerate, también examina Laravel Nova. Como hemos dicho anteriormente, se trata de un framework que permite desarrollar Web App en low-code. En este caso, el desarrollador es capaz de aprovechar de la mejor manera Laravel escribiendo pocas líneas de código. Con Laravel Nova es posible desarrollar paneles de administración para aplicaciones Laravel de manera fácil. Es entonces una herramienta muy potente, en grado de facilitar el trabajo de los desarrolladores establecidos o no establecidos.

Laravel Forge

Si se está usando Laravel para el desarrollo de una Web App, la elección más inteligente para publicarla es sin duda la de confiar en Laravel Forge.

Forge permite conectar la repository Git sobre la cuál se carga y actualiza el proyecto en Laravel delegando a Forge la puesta en marcha de todos los updates. Permite entonces, en pocos pasos, gestionar el flujo del trabajo del desarrollador o del equipo de desarrollo. Laravel Forge administra no solo Laravel, sino que también permite utilizar todos los framework principales como WordPress o Symphony. Muchos confían en Laravel Forge para la puesta en marcha de una Web App dada su facilidad y simple adaptación para el uso de la misma plataforma.

Laravel: ¿por dónde empezar?

Para profundizar todos los aspectos ligados al mundo del desarrollo de una Web App en Laravel es posible consultar la documentación oficial disponible en el sitio oficial del framework.

En alternativa, el consejo es el de aprender a programar gracias al curso Hackademy de Aulab. Se trata de un camino formativo de 6 meses durante los cuales se alterna la enseñanza frontal con ejercicios guiados por los tutores a disposición. Al finalizar el curso, todos los estudiantes reciben las herramientas necesarias para convertirse en desarrollador full Stack en grado de desarrollar una web app desde 0.

¿Listo para realizar tu primera Web App?

DESCUBRE EL CURSO HACKADEMY

Nuevas tendencias de desarrollo de una web app

Existen maneras que intentan reducir la cantidad de trabajo para los desarrolladores: entre estos tenemos el Backend as a service y los no code / low code.

Uso de Backend as a service

En casos particulares, es necesario considerar el uso de un servicio backend as a service como Firebase. Cuanto más compleja es la web app que se está desarrollando, es más probable que se tenga que dotar de servicios del estilo. En particular, el más utilizado, es sin duda Firebase.

Se trata de una plataforma en grado de ofrecer todas las funcionalidades previstas de un backend, pero en cloud. Esto permite ahorrar recursos en fase de desarrollo pero también de desarrollar un servicio sin recurrir al uso de un server dedicado.

Como alternativa, el mercado ha propuesto soluciones como Strapi. Se trata de un CMS headless open source que se basa en Node.js. El uso de Strapi en la propia web app permite desarrollar software sin preocuparse de las dificultades típicas de los CMS. A diferencia de Firebase, en este caso no se pueden usar database NoSQL.

Soluciones no-code o low-code sobre como hacer un sitio desde cero

Últimamente, el mercado está proponiendo soluciones para la creación de una Web App al alcance de todos. Esto permite, de manera virtual, desarrollar aplicaciones sin escribir una sola línea de código o muy pocas.

En el primer caso hablamos de verdaderos y auténticos framework visibles que permiten con pocos clics personalizar cualquier aspecto de la propia Web App. El límite, en este caso, es el mismo framework. Son soluciones que, quizás en fase de start, las empresas o los profesionales que no están en el sector toman en consideración solo para tener pocas horas una Web App funcional para mostrar a los clientes.

Las soluciones low-code permiten realizar, a través del framework, Web App complejas, personalizadas pero en simples pocos pasos. Son soluciones perfectas para desarrolladores que tienen la necesidad de presentar al mercado el trabajo en tiempo breve pero al mismo tiempo buscan una solución que ofrezca un mínimo de flexibilidad respecto a las no-code. Por el momento, uno de los framework más interesantes en este campo es sin duda Laravel Nova.

Herramientas para diseñar prototipos

Entre los aspectos a considerar y no olvidar en la fase de desarrollo de una Web App están UX y UI. Se trata de la interfaz que un usuario y cliente utilizarán para interactuar con la propia aplicación.

En la fase de proyección, es necesario definir tanto los aspectos funcionales como los gráficos de la propia Web App. Figma es una herramienta en grado de ayudar a los desarrolladores y gráficos en esta fase.

Se trata de uno de los tool más utilizados por el momento. Su éxito se encuentra en la gran flexibilidad que ponen a disposición los desarrolladores que permiten crear prototipos no solo de Web App sino también de aplicaciones mobile. En particular, Figma funciona tanto online a través de un browser como offline a través de las app disponibles para los diferentes sistemas operativos. Además, permite a más personas colaborar en el mismo proyecto mostrando comentarios live y modificaciones efectuadas por todos los colaboradores. A menos que no se pretenda utilizar soluciones no-code, es fundamental confiar en una herramienta como esta en fase de prototipo de una Web App.

¿Quieres aprender a crear aplicaciones web efectivas y funcionales? El curso aulab Hackademy se centra en el desarrollo web y la programación Object Oriented.

Los lenguajes tratados serán HTML, CSS y Javascript para el desarrollo frontend y PHP con Framework Laravel para el desarrollo backend; aprenderás a trabajar en equipo con las Metodologías Ágiles, utilizando el framework SCRUM.
Para el proyecto final pondrás en práctica todo lo que has aprendido, desarrollando un portal de anuncios desde cero.

Descubre el curso Hackademy