preface
GatsbyJS is a modern website generation system for developing websites, with a complete, rich and open source ecosystem. React + GraphQL generates multi-page applications that satisfy front-end engineers, editors, and users. Let’s explore the system step by step.
GatsbyJS
GatsbyJS is a React site generation system with over 20,000 Stars and 3,500 forks.
From a technical point of view, GatsbyJS is a hybrid system of React, React-Router, Webpack, Babel and GraphQL, which completely separates the data layer from the UI layer to create a fast website without losing SEO.
GatsbyJS provides an interface that allows you to easily access your remote database. Whether it’s traditional WordPress, modern Contentful, github CMS, or a JSON file, it can be plugged into the system painlessly.
With system-provided life cycle hooks, you can process, process, concatenate data, and then generate the data source you need.
Then, you can use React to write your favorite website, adding your own styling to the preprocessor, such as SCSS, styled- Components.
It’s worth noting that you can use the React lifecycle, for example, with lozad.js + React to create a lazy image-loading site.
It can generate static pages, which means you will generate a complete folder for your site, just upload the folder directly to make your site run.
Sites using the system include well-known ReactJS.org and Airbnb’s Engineering & Data Science.
Websites are getting more complex as they evolve
In the traditional full-stack project, we need to put all services on the same platform, such as WordPress, which provides a one-stop content management and display platform, which greatly facilitates the content management personnel to develop blogs and e-commerce platforms. Now, however, we will subdivide the system architecture to avoid the problem of high coupling, one system crash, one system crash.
Do not make wheels for your art
Today, we use different services to do this. For example, we use Algolia for search, Stripe for payment, Google Analytics for site statistics, and travisCI for automated testing.
Website role
Previously, engineers were responsible for developing the front-end view layer, maintaining the back-end database, optimizing the performance of the website, and so on. Now, the division of labor allows specialized people to perform these tasks, including front-end developers, publishers, and website visitors, as detailed below:
Front End engineer
As a front-end engineer, we pursue speed and user experience. How to provide a faster, better website to users around the world.
We use performance tuning tools such as Lighthouse and Puppeteer to test and improve the quality of web applications.
These users may come from far away, the network signal may not be very good, and dropped calls and network anomalies are common. They have a higher demand for performance and load speed. We may be able to solve this problem with PWA, or a lazy loading tool such as Lozad.js.
The editor
In order to optimize content, some companies have editors, content managers, who specialize in copywriting.
They care about editing articles, picking the right images, and using a simple and easy editor, such as a rich text editor.
Instead of waiting for the release to go live, they want to be able to use a rich text editor, or some other just-in-time editor, and access the project’s address.
At this point, if they are not happy with the results, they just need to revise the article and publish it.
Access to the user
With the proliferation of smartphones, web users are using different devices to access websites.
On my blog, for example, 40% of users use mobile phones to access the site.
They are concerned about how fast the site loads and don’t want to wait too long.
They will also be concerned about whether the site is taking up too much traffic, such as loading too many images and not enough optimization, and they will feel sad that the traffic is lost…
Front-end engineers are evolving every day to provide better websites in response to user needs. They will use more community-approved, maintainable projects to reduce development pitfalls, such as how to develop a site using React without losing the benefits of SEO, and how to achieve front and back end separation, data layer and presentation layer separation.
architecture
GatsbyJS builds a full life cycle and plug-in patterns that developers can access.
If I need to use some tools, I just write the name of the plugin in gatsby-config.js and then NPM install.
GatsbyJS has rich plugins that allow developers to painlessly install, remove, and enjoy better version plugins to avoid version-specific problems with older versions.
React
To avoid web performance issues caused by a lot of DOM manipulation, React will be used to manipulate the virtual DOM and generate a componentized site.
Also, to avoid reinventing the wheel, we use componentized development.
Storybook
Storybook can provide a quick start site that shows the components in the system.
Since the system uses React, you can quickly install Storybook plugins, such as NPX -p Storybook /cli sb init, in your project
Webpack
This is common in modern front-end engineering, and here’s a brief description: it packages different HTML, JS, and CSS files, and then compresses, encrypts, and degrades them so that we can put them on the CDN.
Babel
To be compatible with JavaScript versions supported by different browsers, we can use Babel. For example, say async/await backwards compatible to promises. If you want to learn more about asynchronous operations, the article.
ESLint
You can use code style checking, correction tools such as ESLint, to unify your team’s code style, not only to avoid unnecessary changes in Git operations, but also to avoid making low-level errors such as spelling, function variables created but not used.
Version management
Git will be used for version management, branching, splicing, automated testing, and deployment.
In case of a problem, we can quickly use dichotomy to check the version error, and then inform the website maintainer (himself) to rollback the version.
We can use Webhooks to automate test, deploy, and publish by sending requests to Netlify after editing the article.
Afterword.
With GatsbyJS, I can enjoy architecture front-end projects, embrace the advantages of the open source community, and constantly improve my blog framework.
With Netlify, I can enjoy the ability for the server to publish new sites without interruption and provide proofread versions to proofreaders before Posting articles. Even if there is a problem, you can quickly back up, DEBUG, and publish.
If you want to test the speed of GatsbyJS, you’ve already experienced it, because this blog uses GatsbyJS and the recently revamped Gatsby -starter-calpa-blog.
Try GatsbyJS + Cotentful’s blogging system (CodeSandbox) in an out-of-the-box sandbox environment.
Next time, I’ll show you how to connect GatsbyJS to a remote database, such as Contentful.
Refer to the link
- GatsbyJS website
- Rise of the Content Mesh: Webcast with Contentful and Gatsby
- gatsby-starter-calpa-blog – Github