GERARD COMAS

GERARD COMAS

Desarrollo de una static PWA (Progressive web app), con ReactJs y GatsbyJs, optimizada tanto a nivel de performace como de posicionamiento SEO, para el consultor SEO Gerard Comas

Visión general
GERARD COMAS
Características técnicas
GERARD COMAS

Tecnologías frontend:
ReactJs, Sass, GatsbyJs

Tecnologías backend:
Webpack, Netlify, API Rest de Wordpress para el backoffice

Web site

Descripción

Este website se base en el desarrollo de PWA (Progressive Web Apps), está implementado a través de la técnica de "server-render".
Esta técnica ofrece niveles de rendimiento inmejorables, priorizando la performance y velocidad de carga. Está desarrollado bajo el framework Gatsbyjs que a su vez usa ReactJS para el desarrollo.

React es una muy buena opción para crear interfaces de usuario para sitios web y aplicaciones, además nos permite usar componentes reutilizables que en proyectos grandes son una bendición, sin embargo React solo se usa para trabajo frontend, así que necesitamos una plataforma detrás, de la cual podamos consumir datos y una estructura en el servidor sobre la que podamos trabajar usando herramientas como webpack o compiladores de CSS como SASS.

GatsbyJS ofrece un entorno preconfigurado, además de poder consumir datos de una o múltiples fuentes como Wordpress, APIs, Bases de datos, archivos locales y más, directamente desde tu página usando GraphQL. En este caso particular hemos usado Wordpress.

Lo mejor de esto es que aprovecha el server-render para generar un sitio web estático que puede ser cargado en cualquier servidor o en algún CDN como Netlify que permita que tus sitios carguen muy rápido y luego consuman datos para ser mostrados en la página.

Cuando hablamos de sitios web estáticos no se refiere a que el contenido será estático, ya que pueden tener un API desde donde cargar datos para mostrar en su sitio, solo que los archivos que carga el navegador no tienen que ser generados en el servidor una y otra vez sino que son cargados por el servidor lo más rápido posible y no deben ser recargados en cada petición, lo que hace que tus sitios sean mucho más rápidos.

Para este proyecto, nuestro cliente (Gerard) nos puso como condicionante llegar a un 100/100 en pagespeed así como cumplir todos las buenas practicas de desarrollo, de acesibilidad, de SEO y de Progressive Web App con opción de trabajo offline mediante Service Workers. En las siguientes capturas de detalle, se puede ver como cumplimos con todas sus expectativas.

Detalles

Detalle de pantallas y funcionalidades

GERARD COMAS
GERARD COMAS
GERARD COMAS
GERARD COMAS
GERARD COMAS
GERARD COMAS
Bcnapps | Desarrollo de apps en Barcelona

Bcn Apps.