Software development is an ever evolving industry and keeping up with the latest trends is an integral part of being a web developer. Here at Outible we believe researching the latest development techniques to be key to our future growth. New frameworks and platforms are released at a rapid pace and it is imperative as a Digital Agency we keep up with the industry. As we keep up with the industry, new and exciting frameworks are released and at Outible we like to ensure our clients are getting innovative solutions on the latest tech so they are fully supported for years to come. GatsbyJS is a future proof technology which uses Javascript and React and one thing we do know is these technologies are here to stay for many years to come.
What is GatsbyJS?
GatsbyJS is a popular react based open source framework that allows us to create modern static sites and apps. It is one of the latest Javascript frameworks to enhance our tech-stack and it has made our solutions more practical and powerful. With GatsbyJS we can create web apps that are fast, secure, scalable and are backed by technologies including Javascript, React Component, GraphQL and WebPack.
GatsbyJS is a modern front-end framework that allows developers to create static sites and web apps with static assets including pre-built HTML pages, CSS, Javascript, images and other static content. GatsbyJS uses react components that are independent and reusable code which make up the UI and functionality of the site that can be reused throughout the application.
Data is accessed using GraphQL query language to build its data layer. With GraphQL we have one access data model capable of querying a myriad of data sources from markdown files sitting on your local disk, to headless CMSs and external REST API endpoints. GraphQL is a rich tool and GatsbyJS takes advantage of this technology to collect data from multiple sources.
GatsbyJS is a popular framework which has a big open-source community behind it and it currently has a rich plugin ecosystem with over 2000 plugins so far that are ever increasing which gives it a rich functionality base. Some plugins including retrieving data from different sources, grab files from your hard drive or other sources, image processing and adding google analytics in a way that is none blocking and optimal.
Enhanced Performance
GatsbyJS is really fast, efficient and optimal on performance and will score highly on performance analytical tools. The great thing about GatsbyJS is that performance isn’t something you have to work on, it comes out of the box when you setup a new GatsbyJS project as it has been built with performance in mind. Sites built in GatsbyJS are typically 2-3 times faster than similar types of sites as the framework takes care of the performance on its own.
It achieves this robust high performance by doing a number of techniques. It generates static html which enables content to be delivered to your browser promptly. There are no database lookups to do as it’s all done in build time instead of in runtime.
Another feature it has is code splitting which is something that only gets the components and Javascript needed for the particular page you are trying to view and GatsbyJS does this for you out of the box. It has the knowledge of which pages you’re generating and it can automatically code split for you. We can still create dynamic websites that uses react and we can have all the same dynamic features of making complex workflows, but out of the box GatsbyJS will code split the Javascript for us into separate smaller Javascript bundling increasing performance.
It also does inlined CSS which means it takes the critical parts of your CSS and moves it from an external stylesheet and into the head of the web page. This means that it’s generating less requests to the backend and the browser doesn’t have to wait for the external link to resolve before it can start rendering the layout.
SEO with GatsbyJS
Search Engine Optimisation is key for any business website or service. Increased visibility when people search for your products or services related to your business in search engines including Google, will attract new and existing customers to your business. GatsbyJS can help your site perform better and rank higher in search engines. We use GatsbyJS because it makes your site faster and more efficient for search engine crawlers to crawl your site and index pages. This enables your site to be closer to the top of the search results and increases the chances of potential clients visiting your site and engaging with your business.
What we can do with GatsbyJS
With GatsbyJS we can build an array of software apps including static sites, progressive web apps, static web apps and hybrid apps that are partly static and use hydration to bring in live data from external endpoints at runtime. So what does this mean? This means we can build you blogs, marketing sites, documentation sites and large scale web applications such as ecommerce sites to fit all client needs.
So to recap… why do we use GatsbyJS?
GatsbyJS is one of the latest Javascript frameworks with a rich plugin ecosystem with over 2000 plugins to enhance functionality. It is fast, efficient and has optimal performance by generating static html which provides content promptly to your browser. It automates code splitting of Javascript to separate smaller chunks and applies inlined CSS enabling less requests to the backend for a faster and slicker frontend. It out the box gives optimum SEO which enables your site to be closer to the top of search results resulting in increased site visits and clients engaging with your business. We can build highly rich blogs, marketing sites, documentation sites and large scale web applications using the technology and to top it off, it’s a really fun to use framework for us developers here at Outible to get stuck into. - Liverpool web design company