pwadev

Progressive Web Apps Development

Version 0.1.5 : 2019-07-12, 10:59:16

Work in Progress

Site Menu

Gatsby Icon

Gatsby

Gatsby is a pre-configured development environment and build process that delivers high performance PWA: Progressive Web Apps

Gatsby uses React for its UI: User Interface layer. It can be difficult to get started with React even for experienced React developers

Gatsby is a PWA generator. Gatsby compiles PWAs so they load only the critical HTML, CSS, data, and JavaScript so the site loads as fast as possible and becomes useful. Once the critical pieces are loaded, Gatsby prefetches resources for other pages

Making Fast Websites Is Hard

With the complexity of web technology stacks today, it’s easy for performance to suffer death by a thousand cuts. Is your site slow because of your e-commerce backend? Your caching configuration? Your Javascript? The answer is yes.

Moreover, site performance isn’t just a technological challenge. It’s also an organizational challenge. If one team owns the CMS, another owns the UI and another owns the app server, coordinating around performance improvements becomes difficult.

To paraphrase Tolstoy, all fast websites are alike, but all slow websites are slow in different ways.

The good news is that there are established patterns for improving website performance, no matter what your initial setup looks like. The bad news is that front-end performance checklists are long.

Your team probably doesn’t have the time for a long checklist, and that’s okay. Our approach is different — Gatsby bakes these performance improvements in at the framework level. We nerd out about performance, so you don’t have to.

As a result, people use adjectives for Gatsby sites like “disgustingly fast.” Users report speedups between 3x and 10x after migrating a website to Gatsby. — Kyle Mathews, creator of Gatsby

PWA Compiler

  • Compile - Gatsby generates Progressive Web Apps written in combinations of JavaScript, HTML, CSS, and Markdown programming languages, and integrates selected Gatsby plugins, React components, and Node modules, npm JavaScript packages

  • Develop - The Gatsby develop command starts a browser hot-reloading development environment. VScode saved edits are live reload in the browser.

  • Build The Gatsby build command starts an optimized production build of Progressive Web Apps.

  • Serve - The Gatsby serve command starts a local HTML server for locally testing Progressive Web Apps using the production build.

  • Deploy - When Progressive Web Apps repos are pushed to GitHub, they are automatically compiled and deploy to the Internet by Netlify Application Deployment Network

Some Of The Advantages Of Using Gatsby

  • Built for Speed - Gatsby builds high performance Progressive Web Apps. Users web experiences are not limited by the speed of server rendering engines or by the speed of the Internet. Speed is only limited by the speed of web browsers running on user devices, because the PWA is totally running in the browser

  • Data - Gatsby has a rich data plugin ecosystem enabling building Progressive Web Apps with data from one or many sources. Data from headless CMS, SaaS services, APIs, databases, file systems, etc, is read during compile time using GraphQL and and is compiled into the app

  • Static Progressive Web Apps - Gatsby is a static Progressive Web App compiler. When the PWA starts loading into users browsers, code and data loading is split. Gatsby loads only the critical HTML, CSS, data, and JavaScript so the site loads as fast as possible, and becomes usefull to users. Once loaded, Gatsby pre-fetches resources for other pages so clicking around the Progressive Web App site is fast.

  • Internet Scale - It doesn’t need complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling problems. Gatsby compiles to a single Progressive Web Apps HTML file which can be deployed to the Internet by several services

  • Future-proof - Gatsby is a universal JavaScript framework. The future of the web is mobile Progressive Web Apps, built using the JavaScript, APIs, Markup - JAMstack architecture.

  • Other Advantages

    • HTML code is generated server side

    • Extensible by plugin ecosystem

    • Configured Webpack based build system

    • Automatic routing based on the directory structure.

Gatsby Features

  • Integrations with 120+ backends, including 15+ enterprise content systems like Wordpress, Drupal, Contentful, Contentstack, Salsify and Shopify, as well as the ability to add additional sources.

  • A React development environment, along with key plugins that provide key website features like SEO, routing, accessibility, and i18n.

  • Lightning-fast out-of-the-box performance, including both payload and delivery optimizations.

Summary

Gatsby compiles high performance PWAs, supports modern development frameworks, and connects to enterprise content systems