Desarrollo

Quince días probando tecnologías de desarrollo web

5 min
Quince días probando tecnologías de desarrollo web

Hacía ya bastante tiempo que tenía pensado iniciarme en el mundo del desarrollo web con JavaScript. Si habéis estado al loro de otros proyectos que he desarrollado, os habréis dado cuenta que yo era un firme defensor de PHP, y aunque aun creo que merece mucho la pena, he decidido probar algo más allá. Este año finalizo mis estudios de ingeniería, y como TFG, he optado por diseñar y desarrollar una solución para que empresas pueden montar su propio foro, en el que sus clientes discutan sobre ciertos temas. Para desarrollarlo, quería aprovechar la ocasión para comenzar en el mundo del desarrollo en JS, ¡y menuda perdición!

Sin duda, una de las principales cosas que he descubierto indagando en el desarrollo web con JS, es que hay un framework o una librería para casi todo. No solo eso, si no que además, las documentaciones suelen ser bastante buenas y cuentan con una comunidad bastante activa. Vamos, todo lo que pedimos cuando vamos a desarrollar. No obstante, no te puedes fijar en todo de lo amplio que, por lo que aquí os dejo las 5 cosas que he descubierto durante estas últimas semanas de JS.

React

La primera tecnología de la que quiero hablar es React. Si hablamos de tecnologías para el desarrollo de apps front en JS, quizás las tres que ahora mismo más destacan son Angular, React y Vue.js. De todas estas, he decidido quedarme con React porque tiene una curva de aprendizaje menos pronunciada que Angular y tiene una mayor comunidad detrás que Vue.js.

Captura 2021-01-05 a las 15.44.09.png

Para alguien como yo que viene de desarrollar webs en Twig, un motor de plantillas para PHP muy usado en Symphony, React es una autentica maravilla. Permite actualizar los datos de la ventana sin necesidad de recargar la página, los tiempos de carga son bastante buenos y la división por componentes facilita el desarrollo reutilizable.

No obstante, en proyectos grandes creo que tiene que ser un poco caótico, ya que al no ser un framework, no existen unas directrices de cómo se debe estructurar el proyecto, llamar los ficheros o hacer el routing.

Gatsby

La siguiente tecnología de la cual os quiero hablar es Gatsby. Gatsby no es más que un framework basado en React que nos permite construir páginas web estáticas. ¿Páginas estáticas? Eso suena muy a siglo XX. Sí, pero tienen muchas ventajas, como que son mucho más rápidas, soportan grandes cantidades de tráfico y son muy seguras,

La principal desventaja, como era de esperar, es que son páginas estáticas. Esto significa que no hacen ninguna consulta a ningún servicio, si no que cuando se les pide una página, simplemente devuelven los componentes HTML, CSS y JS. Esto hace que sean mucho más rápidas, pero cada vez que queramos actualizar su contenido, deberemos desplegarlas de nuevo.

En el caso de Gatsby, este despliegue no lleva más de unos minutos, pero en el caso de que necesitemos páginas que constantemente se estén actualizando, este framework no es una buena opción. Sin embargo, sí que puede ser una gran idea para páginas corporativas, blogs o tiendas que no actualizan de forma repetitiva sus contenidos.

Captura 2021-01-05 a las 15.44.37.png

Strapi

Acabamos ya con las tecnologías de front-end y pasamos a los servicios de back-end. Uno de los servicios cada vez más populares y al que muchas compañías están recurriendo cada vez más son las REST API. Una REST API no es más que una forma de utilizar URLs para poder listar, acceder, editar y eliminar datos de un servidor.

Captura 2021-01-05 a las 15.45.28.png

La forma más común de hacer APIs ha sido desarrollándolas por nosotros mismos usando tecnologías como Symphony en PHP o Express en JS. Pero yo buscaba algo mucho más fácil, una tecnología que me diera además un panel de administración, en el que poder editar los datos y que sirviera como intranet sin tener que desarrollarlo. Y eso es lo que hace Strapi, un headless CMS donde podemos configurar, añadir y personalizar nuestras propias entidades. Básicamente, podemos crear nuestro propio WordPress o Joomla con las entidades que queramos (no solo páginas y entradas) y usar su REST API para conectarlo con un aplicación front-end.

MongoDB

Por último, voy a hablar de MongoDB, un sistema gestor de bases de datos NoSQL perfecto para usarlo con tecnologías JS, ya que siguen la misma estructura que los objetos JSON.

Captura 2021-01-05 a las 15.45.51.png

Un sistema gestor de bases de datos NoSQL o Not Only SQL, se diferencian principalmente frente a las base de datos de tradicionales en que no tienen que seguir una estructura de datos fija. Es decir, aquí no tenemos tablas y columnas, sino objetos similares a los que tenemos en JS, donde cada uno puede tener la propiedades que le plazca.

Las principales ventajas de usar Mongo, y bases de datos NoSQL en general, es que son mucho más rápidas, escalan mejor de forma horizontal (muchos objetos de tipos distintos) y son mucho más baratas de mantener. Sin embargo, como principal desventaja, diría que están todavía muy poco maduras para muchas empresas, aunque grandes gigantes tecnológicos ya las usan en varias de sus aplicaciones.

Heroku y Netlify

Hasta ahora, solo había hecho despliegues de aplicaciones en PHP con frameworks como Symfony. El proceso era bastante tedioso, pero siempre era él mismo: contratar un servidor, hacer el despliegue de forma manual, configurar los ficheros del servidor, mantener actualizados los certificados TLS, etc. Bueno, pues con JavaScript eso se simplifica hasta límites insospechados (y sin necesidad de saber mucho de sistemas operativos).

Captura 2021-01-05 a las 15.46.15.png

Vamos a comenzar hablando de despliegues de aplicaciones de front-end, como por ejemplo las de React o Gatsby. La forma de despliegue tradicional pasaría por configurar de cero ese servidor donde irá la aplicación y relacionarlo con la carpeta build donde se encuentra el código compilado de nuestra aplicación. Pues bien, por suerte los tiempos han cambiado y han surgido servicios como Netlify, un SaaS que nos permite desplegar aplicaciones de front-end de forma automática.

Su forma de trabajar es bastante sencilla. Damos a Netlify acceso al repositorio de GitHub, GitLab o GitBucket donde se encuentre localizado nuestro proyecto, y cada vez que este detecte un push, desplegará la última versión que se haya subido al repositorio. En resumen, cada vez que actualices el repositorio de GitHub (o cualquiera de las otras dos plataformas) se te desplegará esa misma versión actualizada.

También es importante tener en cuenta que podemos cambiar el dominio de la aplicación por uno propio y también se encargan de gestionar los certificados SSL para nuestras aplicaciones.

Ya que hemos hablado de despliegues de apps front-end, hablemos ahora de cómo podemos desplegar servicios de back-end como Strapi. En este caso, usaremos Heroku, un SaaS propiedad de Salesforce que nos permite poner en producción aplicaciones de servidor. ¿Cómo funciona? Pues de una forma bastante similar a Netlify, a través de actualizaciones del repositorio. Sin embargo, tenemos que tener en cuenta que al tratarse de un servicio donde se encontrará la lógica de negocio, deberemos instalar plug-ins o add-ons para poder hacer uso de una BD o para almacenar fotografías y vídeos. Estos add-ons funcionan como microservicios, los cuales podemos vincular con nuestra aplicación, además que la gran mayoría de ellos cuentan con planes gratuitos.

Conclusiones

Supongo que una parte de vosotros conoceríais todas las tecnologías que he comentado en este artículo. Como ya he dicho antes, este no era un post para descubriros novedades de JS, sino todo aquello que yo he descubierto durante estos últimos días.

Posiblemente en las próximas semanas lleguen varios artículos hablando de varios proyectos que se he desarrollado con estas tecnologías, entre los que se encuentra esta web, que aunque sigue teniendo el mismo diseño que antes, ya no está basada en WordPress. ¿Te interesa saber cómo la he hecho? Pues vuelve dentro de unos días jeje.