Si estás aquí es porque quieres conocer las tecnologías más usadas en desarrollo web y cual es la tendencia de cara al futuro. Este es un tema que podría abarcar millones de páginas con documentación sobre todo esto, no obstante, existen tantas formas de programar como desarrolladores existen. De momento, hablaremos de los dos métodos más utilizado actualmente, los CMS y los frameworks de Javascript. Aunque mi intención es ir actualizando este post para que no te pierdas ninguna herramienta útil.
Lo habitual, al desarrollar una web dinámica, en el que el administrador pueda mantener el contenido actualizado de forma sencilla. Para ello lo recomendable es utilizar un CMS.
Gestores de contenido. CMS
Un CMS es un gestor de contenidos que nos ayudará a subir el contenido, que luego se mostrará en la web. Normalmente los administradores no suelen tener conocimientos de programación y de esta forma nos aseguramos que la tarea de publicación y actualización les resulta sencilla. Los CMS tienen una parte backend, que proporcionará las funcionalidades y contenidos, pero algunos también pueden gestionar el frontend mediante temas o plantillas.
Uno de los CMS más utilizados en todo el mundo es WordPress. Existen otros como Drupal, Joomla o los especializados en ecommerce como son Prestashop o Magento.
En este caso solo os hablaré de WordPress ya que, a mi juicio, es el más completo. El 40% de todas las páginas de Internet está desarrollado con este CMS. Una cuota muy por encima de cualquier otro.
Ventajas de WordPress
Voy a enumerar todas las bondades de este CMS, desarrollado en PHP, para que puedas comprobar por ti mismo por que es tan utilizado.
- Es gratuito. Si, es gratis y se puede instalar en cualquier servidor con soporte PHP y bases de datos.
- Tiene una comunidad de desarrolladores enorme, lo que hace que tenga muchísima documentación sobre su funcionamiento. Sus actualizaciones también son gratuitas, aunque hay que andarse con ojo, ya que una incompatibilidad con otro complemento anticuado puede romper la web.
- Puedes añadirle todo tipo funcionalidades mediante plugins, muchos de ellos gratuitos. Uno de los más utilizados es el que lo convierte en tienda online, Woocommerce.
- Tiene multitud de funciones al alcance de un clic. Gestor de usuarios, menús de navegación, tipos de posts, ajustes avanzados, etc. Además, tiene una estructura que, con el plugin adecuado, se pueden generar sitemaps y optimización para SEO de forma muy cómoda.
- Reduce mucho los costes de desarrollo y mantenimiento de una web ya que puedes instalar temas ya construidos que, con un poco de conocimiento en CSS y Javascript, permite construir páginas web en tiempo record.
Además de poder comprar temas muy útiles, con componentes ya construidos, es posible crear tus propios temas con un poco de conocimiento en PHP. Esto eliminaría una de las pocas desventajas que tiene, la necesidad de cargar mucho código innecesario, por ejemplo, de componentes que luego no se usan. Esto, claro está, aumenta el tiempo de desarrollo y por consiguiente los costes.
Por si fuera poco, podemos desacoplar el Frontend, o la parte visual, para crear un CMS headless. Esto es, utilizar WordPress simplemente como almacén de contenido, aprovechando todas sus ventajas y utilizar los nuevos paradigmas de programación, de los que hablaré más adelante, para el Frontend. Por algo WordPress se está migrando de PHP a React en los últimos años. ¿No sabes que es React? no te preocupes, lo aclaro más adelante.
Nuevos CMS headless
Y hablando de CMS desacoplados, podemos enumerar multitud de ellos que están a la vanguardia en la tendencia actual como son Netlify, Strapi o Prismic.
Precisamente puedo hablaros un poco de Prismic, que es el que más he utilizado. Es un CMS en el que podrás controlar los tipos de post que necesitas y qué contenidos podrá modificar el administrador. Es utilizado por grandes empresas como Netflix, Google o Deliveroo. Además, tiene soporte y documentación extensa para poder utilizarlo con un montón de tecnologías (Node.js, React.js, Next.js, Gatsby, Vue.js, Nuxt.js).
Este CMS proporcionará un documento JSON con toda la información necesaria que debe montarse en la parte Frontend, mediante una aplicación de Javascript.
Frameworks para webs creativas
En los últimos tiempos la forma de presentar una web ha cambiado bastante. De tener una web creada en PHP, para que el servidor lo compile en HTML, CSS y Javascript y que lo entienda y renderice el navegador; hemos pasado a crear aplicaciones construidas en Javascript que se renderizan en el servidor, teniendo una respuesta mucho más rápida.
Este tipo de desarrollo, combinado con CMS headless, se utiliza mucho en páginas web de alto contenido creativo. Suelen ser muy impactantes, con gran importancia de las animaciones. Puedes deleitarte con algunos ejemplos si exploras la página web de awwwards.
Te dejo un resumen de los Frameworks más utilizados para desarrollar apps web:
- Node.js: Es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación JavaScript, asíncrono, con entrada y salida de datos en una arquitectura orientada a eventos.
- Angular.js: Desarrollado en TypeScript, de código abierto y mantenido por Google. Utilizado para crear interfaces y aplicaciones de una sola página.
- React.js: Framework diseñado para crear interfaces de usuario y con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es de código abierto y mantenido por Facebook.
- Vue.js: Es un framework de JavaScript, de código abierto, para la construcción de interfaces de usuario y aplicaciones de una sola página.
- Gatsby: Es un generador de sitios estáticos construido con ReactJS y alimentado por GraphQL.
- Next.js: Está construido sobre Node.js y permite funcionalidades de aplicaciones web basadas en React, como la representación del lado del servidor y la generación de sitios web estáticos.
- Nuxt.js: De código abierto y basado en Vue.js, Node.js, Webpack y Babel.js. Nuxt está inspirado en Next.js, que es un marco de propósito similar. Puedes ver un ejemplo de web creada con Nuxt y Prismic aquí.
- Three.js: Es una biblioteca liviana escrita en JavaScript para crear y mostrar gráficos animados 3D en un navegador Web. La tecnología que emplea es conocida como WebGL y es muy valiosa para crear sitios con animaciones muy avanzadas, imposibles de crear con CSS y JavaScript. Puedes ver un ejemplo aquí.
- Barba.js: Biblioteca utilizada en la creación de transiciones fluidas entre páginas. Puedes comprobarlo en su propia web.
- GSAP: Esta es la librería de JavaScript más utilizada en el mundo para crear animaciones de todo tipo.
