DEV Community: Mariusz

Why is Gatsby JS Good for Google Rankings?

Mariusz — Fri, 18 Sep 2020 12:34:10 +0000

SEO, which stands for Search Engine Optimisation), doesn't seem to get old — it's just different every year. Google changes its Search Algorithm and Ranking System every once in a while, adding new ranking factors or modifying existing ones. And since 2018, the page speed is one of them.

However, there are more: content relevancy, mobile-friendliness, user experience, on-page optimisation... There are more than 200 of them in total. It's mind-blowing, isn't it?

However, you don't have to take them all into account — focus on the most important ones.

And if you are wondering how to do that and create a website with the highest chances to rank high, consider Gatsby.

Keep reading to check why!

What is SEO?

Search Engine Optimisation (SEO) is a set of practices aimed to make a particular website look better and better in the eyes of Google. In other words, SEO is about improving the quality and quantity of website's traffic coming through search engine results pages (SERPs).

Search engine result page, on the other hand, is a page that displays mainly (but not only) results returned by a search engine like Google as a response to query search such as "online shopping" or "front-end development agency".

Why does SEO matter?

SEO helps companies bring valuable, organic traffic to their websites which is the first step towards getting new clients and increasing revenue. The better SEO-optimised the site is, the higher it's ranked in SERPs. And the higher the ranking is, the bigger the traffic.

The main difference between organic traffic (brought by SEO) and paid traffic (brought by money) is that the first one is free, forever. However, great SEO has more benefits than just saving money:

It drives the quality traffic to your website — instead of reaching out to people whether they want to or not (interruption marketing), SEO focuses on making it easy for them to find you when they want to (permission marketing).

Organic results get more clicks than paid ads — it's hard to tell why that is, but it doesn't alter the statistics: over 70% of searches end in clicking an organic result on the first page.

SEO supports Public Relations efforts — one of the main elements of SEO is link building, which is about earning links from industry-respected publications and other relevant websites. On the other hand, featuring in such publications and being mentioned by influencers is a primary point of PR strategy. This presents an excellent opportunity to get in front of new customers through, for example, guest posting.

It helps you to overtake the competition — SEO is an essential part of most marketing strategies which means there is a huge chance that your competition is already fighting for better rankings. However, with well-prepared and well-executed SEO efforts, you can catch up with them or even surpass them.

Main SEO ranking factors

There is a legend circulating in the marketing world that there is a man who knows all SEO ranking factors used by Google. However, no one ever saw him.

Luckily, you don't have to know them all – only the main ones. But since giving specific SEO advice is not our goal here, we will just scratch the surface to provide you with an overview.

Accessibility

All your efforts to rank high will be for nothing if your website is not visible to search engine crawlers. These are robots that are crawling through the Internet to index websites. If the specific site is not indexed correctly, it won't be displayed in search results.

What you have to do is create robots.txt file and website's sitemap. It's a confirmation of your site's accessibility. However, you can go one step further by submitting your website to Google through Google Search Console.

Backlinks

This is one of the most crucial SEO ranking factors, if not the most crucial one. As a reminder, backlinks are links to one website inserted on another website. The more backlinks you earn, the better it is for your website's SEO.

However, it's more complicated than it looks like. Every single backlink and its effect on SEO is influenced by other factors like relevancy or domain authority.

Mobile-friendliness

Mobile-friendliness (or responsiveness) is a ranking factor for both mobile and desktop searches. If your website fully adapts to a visitor's device — whether it's a small-screen mobile phone or big-screen TV — it means that it's mobile-friendly (or responsive). And this is very much welcomed by Google.

You can check if your website is mobile-friendly with Google's official tool.

On-page optimisation

All efforts within the website that are intended to improve the website's position in search engine results are called on-page optimisation. Among them are: creating proper title and meta tags, using the right keywords, optimising images, writing original and valuable content.

Page speed (desktop and mobile)

Page speed has been a ranking factor for a decade now. And two years ago it started to affect not only desktop searches but also mobile searches. However, don't treat it like a challenge to beat competitors by trying to make your website load a few milliseconds faster. Instead, make it fast enough, so it won't affect the user experience negatively.

One more thing: according to Google's research, one-third of visitors will leave your website if page load time goes from one to three seconds. If it takes longer, it's even worse.

User experience

Would you come back to a place where you have had a terrible experience? Doubtful. The same thing goes for websites — the first impression makes all the difference. If the user experience is awful, it's likely you won't revisit it.

While it's not clear how exactly Google measures user's satisfaction from visiting a particular website, they gave some suggestions about what's essential from the UX perspective:

Content that's useful and easy to read
Design that's responsive and responds to users' needs
Well-organised site architecture

Dynamic site vs static site: which one is better for SEO?

There is one more thing to consider: what kind of website should you choose to raise your chances of ranking high in search engine results pages. First of all, there are two main website types — dynamic site and static site.

What is a dynamic site?

Dynamic sites allow users to interact with the content posted on a website. That content is being generated in real-time, which means it can be different for different users, depending on their location, device, time zone, or even network.

A dynamic website can use client-side scripting (the browser executes code), server-side scripting (the server runs code) or a combination of both.

A good example of such websites are those built using a Content Management System (CMS) like WordPress or Drupal.

What is a static site?

Static websites, on the contrary, offer the same content for every visitor, regardless of their browser's language or other preferences. For every page, there is a specific HTML file on the server that contains the content of this page. Such a website is pre-rendered and is not meant to be regularly updated because it requires some HTML knowledge to edit source files.

A good example of such websites is simple business websites created using static site generators (SSG) like Gatsby.

Which one does Google prefer?

While both types serve different purposes and require different skills, let's take a look at dynamic sites and static sites from Google perspective.

Static sites are faster.

Page load speed is one of the leading SEO ranking factors, which also affects user experience in either a good or bad way. Static sites are faster than dynamic sites because they are pre-rendered. Pre-rendering means that your website is generated as a set of static files in advance, not in real-time.

Static sites are easier to index.

Static websites consist of HTML and CSS files which are extremely easy to read and index by Google crawlers. Another thing that helps with indexation is a simple sitemap which is recommended by all search engines, including Google.

Static sites are easier to optimise.

When you decide to choose a static site, you gain total control over SEO. You can customise any page of your website in any way you want. In a case of dynamic websites, you need to install a plugin or two to help you with SEO efforts.

Static sites are less expensive to host and maintain.

Since static sites consist of simple HTML files, they need much less space on the hosting server than dynamic sites. Also, such a website won't use much of the monthly transfer limit.

What is Gatsby?

If you are considering creating a static site, Gatsby may be your choice of tool to do so. It is a free and open-source framework created with React, helping developers to build blazingly fast sites and apps. Gatsby is also called static site generator (SSG).

Why is Gatsby good for SEO?

It's time for the most important part of this article. I haven't jumped straight to that from the beginning because I wanted to explain the context. So far, you found out:

what is SEO
what does it matter
main SEO ranking factors
which one is better for SEO: dynamic site or static site

It helped you to understand the whole picture better, right?

Now it's time to find out why Gatsby is good for SEO.

Accessibility

Web accessibility means that websites, tools and technologies should be designed to be accessible for everyone, especially for those with permanent or temporary disabilities. When it comes to Gatsby and its accessibility, WebAIM (Web Accessibility in Mind, non-profit organisation) recognised Gatsby as the most accessible web framework.

Gatsby uses different practices to make its websites as much accessible as possible:

Accessible routing — the main feature of every website is navigation, and accessible routing takes care of that. Thanks to it, you can, for example, use a keyboard to navigate through the website. Also, Gatsby manages page announcements on page change.
Building HTML pages by default — since it's using Node.js environment to compile pages, you don't have to worry about progressive page enhancement. Progressive enhancement means that the core page content is loaded before anything else from the server.
Linting using a plugin — Gatsby uses an eslint-plugin-jsx-a11y package that reduces the time needed to find accessibility errors. This plugin, among other things, encourages you to add alternative text to all images.

Page metadata

Gatsby gives you full control over the website's content and structure, and consequently, over the SEO of this website. You can add metadata like page titles, meta descriptions and alt text, which helps search engines to understand the content on your website and when to display your site in search results.

To add metadata to your website, you can use react-helmet components. Remember to add Gatsby React Helmet plugin to support SSR (server-side rendering).

Performance and speed

Gatsby is all about performance and speed. It comes with built-in features like rendering to static files or progressive image loading which are responsible for making Gatsby website fast. According to 2018 Google's update, site speed became the new ranking factor, and faster websites will likely rank higher than the slower ones.

However, you should still create content that's valuable and relevant to visitors, because the slower but more relevant site may rank higher than the faster ones.

Structured data

Structured data is what Google looks for on the web to understand the website's content. This is also its source of general information about the web and the world.

The better Google understands the content, the more relevant search results are. In other words, if you use structured data on your website, it helps you to rank higher.

In Gatsby, you can add structured data snippets with react-helmet in the JSON-LD (JavaScript Object Notation for Linked Data) format, which is embedded either in the page head or page body.

User experience

All the points made above ensure great user experience to visitors. And it's not just about the site speed — with Gatsby you can create fully customised websites that are accessible to everyone, easy to find and navigate, and visually attractive.

Examples of Websites built with Gatsby

Many well-known companies decided to build their websites using Gatsby — Airbnb, Bitcoin.com, Braun, Spotify, to name a few. However, there is no limitation on who can use Gatsby because startups and small companies also choose it.

Check below examples to see how such websites look and perform:

Airbnb Engineering & Data Science
Bitcoin.com
Braun
Frame.io
Hopper
Spotify.design
Frontend Day conference created by Pagepro
JS Minds created by Pagepro

Many well-known companies decided to build their websites with Gatsby — like Braun, Spotify and AirBnb, just to name a few.

Alternatives to Gatsby

We highly recommend Gatsby to build static sites, but we also would like to help you make a fully informed decision. Because of that, we wrote about Gatsby alternatives — you can read about them here.

Is React Native Good for Startups?

Mariusz — Thu, 03 Sep 2020 13:37:45 +0000

Building a startup is like driving a sports-car. It's fun, it's exciting, but it is also about fast yet wise decisions. Making mistakes is not an option, and the danger is high. You may either crash your car or run out of gas before getting to your planned destination.

If you want to avoid this, choose your vehicle and engine that comes with it wisely. And reading this piece will help you to decide whether choosing React Native for startups is actually a good idea.

What is React Native?

React Native is an open-source, cross-platform framework created by Facebook in 2015 for building mobile applications using React. It's like an engine for your startup's app. It allows developers to accelerate the development of native apps for operating systems like Android and iOS.

React, in turn, is a JavaScript library, which was created to build user interfaces.

If you want to become more familiar with React Native, read our comprehensive guide.

Which startups use React Native?

React Native is a choice for many companies, from tech giants like Facebook itself to young startups looking for funding. If you are curious, here is the list of some popular applications that have been built using this trend-setting technology:

Discord
Facebook
Facebook Analytics
Instagram
Pinterest
Skype
Salesforce
Uber Eats

There are more examples, but it all comes down to this: if they rely on React Native, why shouldn't the others?

And that’s just the way startups that use React Native like Mattermost (self-hosted open-source Slack alternative) or Oval (creators of personal finance app) think.

When to consider choosing React Native?

Choosing the proper technology for your mobile application is challenging. But it may become a bit easier after reflecting on needs, estimated budget and available time. Therefore, there are some scenarios in which React Native might be the right choice. Consider choosing React Native:

If you have native apps already— if you already have iOS and/or Android applications, you can change to React Native, because it doesn't require re-writing the entire code which makes migration a lot easier (check here how Khan Academy managed such a transition)
To scale quickly — it's easy to hire or train React Native developers so growing a team fast is not a problem.
To create MVP fast — having just an idea is not enough, and you must test it in real market conditions. In other words, you need to create an MVP as fast as possible.
If you have tight deadlines — if you work in a startup, you need to move fast. Need-for-Speed-like fast or even faster. And it's not about creating MVP. It's also about making constant changes and updates with as little effort and time as it's needed.
If your budget is strictly limited — having just an idea is not enough for most investors. A minimum you need is working MVP, but there is a chance that you won't finish it before running out of money. Using React Native will help you minimise that risk.

Benefits of using React Native for Startups

Looking closely at benefits is always a good idea when it comes to making more or less important decisions. To help you make a great one regarding technology for your startup, we prepared a list of benefits from both business and technical perspectives.

Benefits from a business perspective

Excellent User Experience — User Experience of any digital product is essential to its success. While technically a React Native app is not "the app", it looks and feels like it. Especially because it's fully responsive.
Stability and evolvement — since its foundation, React Native matured, is still evolving and backed up by a huge community. Most common problems are already solved. Therefore, the risk of using it doesn't exist.
Developers availability — React Native is not a new technology or one that nobody knows. The reverse is true: the developer marketplace is robust. You can either hire freelancers using websites like Upwork or talk to an agency like ours.
Shortened time to market (TTM) — the sky is the limit, and time is the money. As a startup, you don't want to create an app for months without showing it to real users and future customers. React Native boosts up mobile development up to 50% in comparison to native app development so startups can create working MVP even twice as fast.
Money savings — this point is highly connected with the previous points. Still, there is more: a decision to build a single cross-platform app is far better economical choice than creating two separate applications for iOS and Android.
Time savings — using React Native means that you don't have to create two separate applications for two separate platforms. Not to mention the time you will spend on upgrading and fixing them.

Benefits from a technical perspective

Compatibility with back-end technologies — you can use React Native with back-end frameworks like Django or Ruby on Rails, and it will work like a charm
Declarative style — it's about WHAT you want to do, in a contrary to imperative style, which is about HOW you want to do it. For example, let's say that you hired a private chef and want to eat a fancy dinner at home. Instead of telling him HOW to do it (imperative style), you just say WHAT you want (declarative style), i.e. "Make me Hawaii pizza, please."
Dynamic development — since its creation in 2015, React Native evolved both as a technology and community, and it doesn't seem it will rest on its's laurels. Because of that, you can be sure of two things: (1) it's more future-proof than some other technologies and (2) the chances of finding someone to hire or to help you are very high.
Hot Reloading — in short, it allows you for making changes to your app code while it's still up and running. It accelerates app developments significantly because your app can reload automatically.
Open-source community — if you are stuck somewhere along the development process, you can always go to GitHub or Reddit to ask for help, and there is a great chance that someone will help you out
Reusable components — why write the same code again and again, when you can re-use already-built elements? It works across both iOS and Android, and it's enough to update a particular component in one view. It's possible because updates will be automatically made in each case of using this component
Third-party extensions support — React Native is all about speeding up the development process. Apart from RN itself, you can use many third-party plugins and frameworks like NativeBase (which helps you to create native-like apps) or Galio (which is a library of UI components)

Disadvantages of using React Native

Unfortunately, it's not all rainbows and butterflies. Like any other technology, React Native also has its flaws:

Complicated updating process — keeping your cross-platform application always up with the latest React Native version is a challenge. It's a complicated process that's much easier in the case of native apps.
Issues with more complicated design — React Native may not be the best choice if you want to use gain business leverage by using some advanced interactions or custom graphics
Lack of custom modules — sometimes, you will have to build specific components from scratch.
Messy code after migration — you may have to rewrite some code to make necessary adjustments or to make APIs work correctly again.

When to choose a native app instead of React Native?

It’s not like that cross-platform app is always a better choice than going with a native app. There are some scenarios in which it's better to choose the latter option. Consider native app if:

Performance is what you care most about
Security is your priority, i.e. if you are in the FinTech industry.
Your app will be heavy on graphics. In other words, if you want to include advanced interactions, custom animations, or various screen transitions in your app.
Your app will require a lot of interactions with hardware like GPS, i.e. if it uses geolocation tracking.

Alternatives to React Native

Flutter — it's a framework created by Google to build mobile, web, and desktop applications using a single codebase. To find out more, read our comparison between these two.
Xamarin — it’s a framework created by Microsoft, which allows developers to build iOS and Android applications. But in a contrary to React Native, Xamarin apps are written in C#.
Ionic — thanks to it, developers can use standard web technologies like Javascript, HTML and CSS to build cross-platform mobile applications. The difference between React Native and Ionic is that Ionic is hybrid, and the RN is native.

All of the above alternatives are cross-platform and open-source solutions.

React Native FAQ

How long does it take to build a React Native application?

The reply is: it depends (it’s our favourite answer). While choosing React Native to build an application speeds up the development process up to 50% in comparison to native app development, the time needed depends on the complexity of the desired application.

Such an estimation can be prepared after outlining the software complexity by both sides.

How much does it cost?

Again, it depends. Development agency can give you a ballpark estimate of your project, including time and money needed, after outlining its complexity.

What's next?

If you are more like a reader, you can check our comprehensive guide on React Native.

Using Next.js as a Static Site Generator

Mariusz — Fri, 21 Aug 2020 09:55:10 +0000

Static Site Generators are becoming extremely popular in the world of web development and Next.js is a proud competitor in this race.

What are Static Site Generators?

🚀 STATIC = BLAZINGLY FAST 🚀

Static Site Generator are extremely fast. Once loaded, they prefetches resources for other pages so clicking around the site feels like a blonk of an eye.

💎 STATIC = SAFE 💎

You will just publish static files, which means there is no direct connection to the database, dependencies, user data or other sensitive information.

😎 STATIC = ENHANCED USER EXPERIENCE 😎

Simply because clicking and walking through your website feels like a walk in a park on a sunny day with no unexpected turns, stairs, or dead ends.

What is Next.js?

“Next is a framework which we can use to build React sites with Server Side Rendering or generate static pages from our react code. All that configured for us by Next itself.”

And in this post we will be taking a look at the static pages export functionality and how we can make it with next.js.

Let's go!

Creating an app

We will start by creating a new next app. To do that simply run the command:

yarn create next-app
# or if you are using npm
npx create-next-app

Now, let’s take a look at our project structure:

pages - this directory contains all our pages and defines routing for our app (more about routing here).

pages/api - here we can add our API endpoint if we need some, in our case we can remove this folder safely (more about API routes here).

public - we can put all our static assets in this directory.

Let’s change our commands to reflect what we want to achieve in this project. Got to package.json and modify scripts section like this:

"dev": "next dev" -> # remove
"build": "next build" -> "build": "next build && next export"
"start": "next start" -> "start": "next dev"

So now our scripts section should look like this:

{
  ...
  "scripts": {
    "build": "next build && next export",
    "start": "next dev"
  },
  ...
}

Now we can test our configuration, run the build command:

yarn run build
# or if you are using npm
npm run build

Next should create out directory at the root of our project with all the static html files and assets ready to host. We can change the out directory by adding a -o flag to our next export command like this:

{
  ...
  "scripts": {
    "build": "next build && next export -o build",
    ...
  },
  ...
}

Adding content to page

Let’s head to pages\index.js file and remove the content of Home component and change it like this:

const Home = () => {
  return (
    <p>
      Hello From my next.js app!
    </p>
  )
}

export default Home;

And start our app by running command:

yarn run build
# or if you are using npm
npm run build

Now you should be able to access http://localhost:3000 and see our Home component content.

Now let’s add some content that will be evaluated at the build time. We can do that by using getStaticProps which is a function exported from our page. As we don’t have any data source configured yet we will do a simple example to show how getStaticProps work.

const Home = ({ buildTimestamp }) => {
  return (
    <p>
      Hello From my next.js app!
      App built at: {buildTimestamp}
    </p>
  )
}

export const getStaticProps = () => {
  return {
    props: {
      buildTimestamp: Date.now()
    }
  }
}

export default Home;

We will see that buildTimestamp changes every refresh, this will not be the case when we build our app because getStaticProps is called only once when app is building.

Adding data source

We already know how getStaticProps works, now we can make it more useful and add some external data source to our app. Next.js doesn’t come with any data provider built in (for example GatsbyJS has graphql) so we will have to add it manually.

Basically you can load your data however you like. In this tutorial we will use GraphQL with Apollo Client. First let’s add src directory where we will keep all our code shared between pages. Then create src\setup\apolloClient.js file where our apollo client will be created.

import { ApolloClient } from "apollo-client"
import { HttpLink } from "apollo-link-http"
import { InMemoryCache } from "apollo-cache-inmemory"

const apolloClient = new ApolloClient({
  link: new HttpLink({
    uri: 'https://gitlab.com/api/graphql',
  }),
  cache: new InMemoryCache()
})

export default apolloClient

Additionally we will have to install some apollo realated packages. Simply run the command:

yarn run add apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag
# or if you are using npm
npm install --save apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag

As you can see we will be using GitLab graphql api (explorer is available here).

Creating pages and fetching data

Now we can fetch some data, let’s fetch some repositories. First we have to create graphql query:

const PROJECTS_QUERY = gql`
  query {
    projects (first: 10) {
      nodes {
        id
        name
        description
      }
    }
  }
`

Now we can import apollo client and use it with above query in our getStaticProps:

export const getStaticProps = async () => {
  const { data } = await apolloClient.query({
    query: PROJECTS_QUERY
  })

  return {
    props: {
      projects: data.projects
    }
  }
}

Now list of GitLab projects is available in our Home component props, let’s render it.

const Home = ({ projects }) => {
  return (
    <ul>
      {projects.nodes.map(({ name, description, id }) => (
        <li key={id}>
          <p><strong>{name}</strong></p>
          {description && <span>{description}</span>}
        </li>
      ))}
    </ul> 
  )
}

And that’s it, we have a working GitLab projects list.

Now let’s add project detail page.

First we have to add dynamic route to our app, we can do that by creating a file with square brackets in its name, like this:

More about dynamic routing here.

When we are building our pages statically Next.js requires us to export a function called getStaticPaths from our page.

We have to do that because Next.js needs to know all the page urls and their params at the build time. We have fetched first 10 Gitlab projects at our homepage so now we have to do the same in our getStaticPaths to generate urls.

First let’s add links to projects details on homepage. We have to add fullPath field to our query:

const PROJECTS_QUERY = gql`
  query {
    projects (first: 10) {
      nodes {
        id
        name
        description
        fullPath
      }
    }
  }
`

And render next link for every project:

const Home = ({ projects }) => {
  return (
    <ul>
      {projects.nodes.map(({ name, description, id, fullPath }) => (
        <li key={id}>
          <p><strong>{name}</strong></p>
          {description && <span>{description}</span>}
          <div>
            <Link
              href="/project/[...fullPath]"
              as={`/project/${fullPath}`}
            >
              <a>Details</a>
            </Link>
          </div>
        </li>
      ))}
    </ul>
  )
}

Now we can add code to our project details page:

import gql from "graphql-tag";
import apolloClient from "../../src/setup/apolloClient";

const ProjectDetailsPage = ({ fullPath }) => {
  return <>Project details page {fullPath}</>
}

export default ProjectDetailsPage;

const PROJECTS_QUERY = gql`
  query {
    projects(first: 10) {
      nodes {
        fullPath
      }
    }
  }
`

export const getStaticPaths = async () => {
  const { data } = await apolloClient.query({
    query: PROJECTS_QUERY,
  })

  return {
    paths: data.projects.nodes.map(({ fullPath }) => ({ // 1
      params: { fullPath: fullPath.split('/') },
    })),
    fallback: false, // 2
  }
}

export const getStaticProps = ({ params }) => {
  return {
    props: {
      fullPath: params.fullPath.join('/') // 3
    },
  }
}

Let’s explain some key parts here:

We map our projects list to an array of paths required by Next.js. Structure that Nexts.js expects looks like this:

{
  paths: [
    {
       params: {
         (all params that we want to pass to getStaticProps)
       }
    }
  ]
}

Also when we use Catch All route we have to pass our param as array that’s why we use split here.

We have to tell next if we want to render missing pages live or just return 404. In our case we are making fully static page so we define fallback as false. More about fallback here.
We merge our fullPath param to single string so we can display it nicely in our component.

Now we can change getStaticProps to be more useful and fetch some project data for us. First we need query for project details:

const PROJECT_DETAILS_QUERY = gql`
  query ($fullPath: ID!) {
    project(fullPath: $fullPath) {
      name
      descriptionHtml
      repository {
        empty
        tree {
          lastCommit {
            sha
          }
        }
      }
    }
  }
`

And run it inside of our getStaticProps

export const getStaticProps = async ({ params }) => {
  const fullPath = params.fullPath.join('/');
  const { data } = await apolloClient.query({
    query: PROJECT_DETAILS_QUERY,
    variables: {
      fullPath
    }
  })

  return {
    props: {
      project: data.project
    }
  }
}

Now we can display some data on our project details page:

const ProjectDetailsPage = ({ project }) => {
  const {
    name,
    descriptionHtml,
    repository: {
      tree
    }
  } = project
  const { lastCommit } = tree || {}
  const { sha } = lastCommit || {}

  return (
    <div>
      <h1>{name}</h1>
      <p dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
      {sha && <p>Last commit SHA: {sha}</p>}
    </div>
  )
}

And that’s it, we have created a static page displaying first 10 GitLab projects and their details.

We can now build it and serve to check if everything is working properly.

yarn run build
# or if you are using npm
npm run build

# if you are using yarn and don't have serve installed run this command first
yarn global add serve


# if you are using yarn
serve ./build
# or if you are using npm
npx serve ./build

Access the full project here.

Next.js vs GatsbyJS

As we can see Next.js can successfully generate static pages like GatsbyJS does and someone could ask:

“Can Next.js replace GatsbyJS?”

You can do all the things in Next.js that you do in GatsbyJS but it take much more time because you need to do everything by yourself.

GatsbyJS has a lot of plugins that help to solve many problems and optimize the page. More than that it has data fetching features built in (graphql available out of the box). So for now we will have to wait for Next.js ecosystem to grow and get more plugins so we can create static pages as fast as we do in GatsbyJS.

Keep in mind that Next.js has one big advantage over GatsbyJS:

you can create and app which is partially static and dynamic.

For example you can prerender first 10 posts from your blog and the rest can be rendered when the page is requested by user.

So for now Next.js is just a more flexible solution that requires more work and gives us some powerful extra features but in terms of development time GatsbyJS is still better.

React Native Code Review - A Checklist

Mariusz — Tue, 04 Aug 2020 13:34:47 +0000

Did you ever want to do a code review of React Native app by yourself?

If yes, let me guide you through the whole process, step-by-step with our own checklist.

But if you are quite new to the subject of code review, let's start from the basics.

What is Code Review?

Code review is a form of deep and profound analysis of the existing codebase. It comes with a set of specific activities and checklist points that leads you step-by-step through the process of identifying and uncovering current and potential bugs and problems.

When Should I Do a React Native Code Review?

Different React Native Developers face different scenarios, but it doesn't matter if:

you just took over an app from a different developer, or
someone asked you to improve the existing app, or
you just built an app and want to make sure it’s flawless…

…you need to have a deep understanding of what’s inside and where the potential source of errors may be hidden.

And if you think about it, there may be many areas that code review will appear to be highly recommended, if not absolutely necessary.

Improve Performance

First of all, code review is extremely important if it comes to app performance.

While talking about React Native and the cross-platform applications in general, their performance and user-interface is considered sometimes as the biggest challenge.

The goal is to make the final experience native-like. Which means performance has to be outstanding.

And this is when the code review is a great idea, as it is able to uncover many flaws and areas of improvement.

Scale Easier

Planning your future app improvement demands a deep understanding of its architecture.

The analysis of a fundamental app functionalities will help you plan how actually you can improve it later on.

After Changes and Improvements

As you know it’s almost impossible to build and release an app without few changes here and there. React Native apps are no different.

Keeping a code review checklist on your sight makes it easier to keep your app in shape despite the changes you have made.

React Native Bug Fixing

Even if you went through and passed many different tests, it doesn’t really mean your app is totally ready to hit the market.

Unfortunately many bugs are becoming visible only after a bit heavier usage by the final users.

Deep analysis of your code is able to spot them, before they arrive.

Detect Platform-based Functionalities

While building React Native applications, you will probably have things working on one platform (f.e. iOS), but not working on the other (Android).

Code audit helps you detect those “platform-based” features and functionalities, and fix them at an early stage.

Before Final Release

React Native code review is also a great way (and quite obvious) for a “final checkup”.

Before the release you may want to check if all works fine, and if the code is following the latest development standards.

Reasons Summary

To sum it up, React Native code review may be helpful to:

Find areas of improvement for your app performance
Get a deep understanding of the app architecture to scale it easier
Identify and uncover existing and potential bugs and problems
Identify “platform-based” functionalities
Keep your app in shape despite constant changes
Prepare your app to be released with no flaws
Making sure your app is following the latest development standards

How To Do a React Native Code Review?

If you want to do your code review well, I suggest to start going with the following order:

Primary audit - in this stage you go through the app structure and the fundamental functionalities.
Automatic analysis - in this stage you push the code through the most popular automatic test engines to uncover the most frequent issues and common violations.
In-depth analysis - this is the manual part, where you extensively go through our list to uncover bugs, performance issues, potential future problems, security vulnerabilities, etc.

React Native Code Review Checklist

Enough theory.

Let’s get to work. Here’s your React Native app Health Checklist, step-by-step:

1. Versions

First, check if:

React Native version is up to date.
All dependencies are up to date.
Dependencies (that use RN linking) are not deprecated and supporting latest RN version.
Dependencies in package.json are meeting the industry standards.

2. Development

Then, check if:

App is ejected/use Expo.
App got own native modules written (no support from npm).

3. Code Quality:

After that, check if:

Tests are written.
There is a typing solution implemented (TypeScript / Prop Types / Flow).
Code follow best practices.
Eslint and/or prettier is added.
Codebase has consistent code style.
Code is easy to understand (self describing) so we can make changes without trying to understand logic for a week.
Check imports through files (unused imports).
Check most common usage native files and code quality in it (MainApplication etc).

4. Test Run

Finally, check if:

Development tasks are running.
Build is working for any platform (Android, iOS).
There are no problems with putting apps in stores.
There are any CI/CD processes implemented.

Summary

React Native Code Review may appear an important step in your app development process.

It helps you understand the app taken over from another developer, helps you uncover the potential problems and bugs, and finally, makes your app ready for the market.

If you do it well, you can save yourself tons of work, and will make your app working well for a long time.

2020 Report: React in a Business Perspective - Key Takeaways

Mariusz — Thu, 25 Jun 2020 10:50:18 +0000

Many years ago, we chose React.js and React Native as the core of our technology stack.

The longer we were working with it, the more we were satisfied with our choice, and we quickly gathered a team of React developers totally dedicated to this library.

However, we started investigating if this love wasn’t just a quick affair.

A “halo effect”, or the BS talk we’ve been selling ourselves to help us believe we do the right thing, just because we are already doing it.

So, we took the laptop, and we’ve interviewed CTOs and Dev Team Leaders to check if choosing React and React Native somehow impacted their everyday work, and ultimately, their business outcomes.

What we have discovered?

TL;DR you probably guessed: most of them shared our enthusiasm.

In this article, I will show you the most important takeaways from 2020 React Report that will tell you:

Why did they choose React?
What actually changed since they made that choice?
And what are those business benefits they are taking the advantage of?

Sit back, relax, and learn how modern technology can help you make your business more efficient.

Or go directly to the Report.

What we knew and re-discovered about React

There are many benefits of using React.js, and benefits of using React Native, however, I will use the words of our survey Guests:

React saves you time and money

As every single web technology is trying to be more efficient (make things faster and easier to do), we asked CTOs if React development is going in that direction.

React boosts your team productivity

Since we started to work with React, we could experience a productivity boost. All the developers were more excited about the technology, as we could do much more with less effort.

However, we wanted to make sure it’s not only our delusion.

CTOs want to use React

We could see in other surveys, as well as we have received many signals from the market, that React became and is still on the top of the most wanted and loved libraries.

This time we asked if people are still interested in using React, after experiencing it in previous projects.

What were the reasons behind choosing React?

We wanted to go deeper and discover more reasoning behind choosing React as a core of the technology stack.

That was an open question, below the most interesting answers from our respondents:

Easy to learn and easy to use.
Performance and reusability.
Development time.
Code sharing between web, iOS, and Android. What used to be 3 distinct codebases is now basically one.
Choosing a stable and large developer ecosystem
Time to market and ability to solve (most) bugs from a single code base.
More in the 2020 React Report

Key Business Takeaways

React is making time to market shorter and allows solving (most) bugs from a single code base, which makes software delivery more efficient.
React has a stable, large developer ecosystem and a wide market of available talents.
Thanks to component-oriented approach and cross-platform features React is an easily scalable way of building large-scale web & mobile (sometimes also desktop) apps.

What were the doubts behind choosing React?

Just the same as in the previous question, we wanted to go deeper into reasoning, yet this time, we asked our respondents about the doubts they had before they made the choice.

Before trying React we were already using Backbone, Ember, and Angular. We were afraid that we might be spreading our skills too thin and we were not going to be actually experts in any of those technologies. Fair to say that from the above, React is the only one left in our stack.
Difficult to learn, adds a layer on top of native code. Often you end up having to know native fundamentals anyway.
Dependency management across platforms.
A massive change in the approach meant that there is a risk that we’re spending all the time trying to skill up for nothing. However, it turned out it was time well spent.
Is it stable enough?
More in the 2020 React Report

Key Business Takeaways

While implementing new technology to the company’s stack it’s important to check if:

This particular technology is stable enough.
Is it able to fulfill your company’s needs?
How to train your current dev team or hire new people with solid commercial experience?

The biggest advantages of React

Obviously, we couldn't skip this question.

Reusable components have benefited several recent projects that we’ve been involved in.
Ecosystem, dev tools, new frameworks based on React are amazing.
From a front end perspective, we have much more control over the performance and perceived loading times of any React site.
It allows us to add iOS and Android apps to our offering as we can now use React Native in-house.
Our web portals are very high quality in terms of visible user bugs.
Agility and ability to build new MVP features fast.
Increased speed and decreased cost.
Having one way of building front-ends, across mobile apps and web apps.
More in the 2020 React Report

Key Business Takeaways

While implementing new technology to the company’s stack it’s important to check if:

After implementing React, organizations can increase development speed and decrease development costs.
Thanks to React, a single team can manage multiple apps on different platforms.
React allows companies to build a shareable, reusable library of inhouse components that can be used in different projects, prototypes, and platforms.

And much more

This is just a small part of the whole 2020 React Report.

Now, we have a clear signal on the real impact of React on the business layer.

What you can learn more from the Report?

What is the future of React?
The best React alternatives?
What are the threats of React?
How hard it is to hire and onboard React developers?
What is still missing in React?

Enjoy, and don’t forget to share it with people that may benefit from it.

Also, send me your feedback, and if you want to take part in the next year’s survey, let me know!

React Native vs Flutter

Mariusz — Thu, 18 Jun 2020 13:05:33 +0000

Demand for cross-platform applications is increasing. People are constantly searching for more optimal solutions such as React Native or Flutter, where they can create iOS and Android apps using one codebase only.

While using a single codebase for two applications, you do not have to invest double time, effort, and amount to create one app which is to be implemented on two different operating systems.

Many solutions have been created to deal with these scenarios but two attracted most of the audience - React Native made by Facebook and Flutter made by Google.

These two platforms have their own pros and cons which gives them an edge over others.

Flutter and React Native allow developers to build cross-platform applications by using a single programming language. React Native has been in the market much longer. As compared to Flutter due to which this platform is a lot more matured and has developed its own community and fan base.

React Native by Facebook

Facebook's product, React Native is a lot more mature as compared to other choices such as Ionic, Xamarin, PhoneGap, etc. It has a strong community that provides solutions to all sorts of problems.

At this point in time, React Native is renowned as the world champion. This powerful Javascript framework is built using React library which allows you to develop iOS and Android apps using a single codebase.

People actively use it all over the world and most of the organizations made it their premium choice for their mobile applications.

Funny thing is that Facebook started as a hackathon project in 2013, but in 2015 it became public for the masses.

Flutter by Google

Flutter is the cross-platform framework that develops mobile applications by using Dart language.

Both the language and framework are developed by Google and a lot of efforts and time were invested so that desired applications can be created in the easiest way which serves their purpose completely.

In 2017, the initial alpha phase of Flutter was started which makes it a lot younger than React Native.

Though it is new, its features and competency made it a prominent choice in much less time.

Head to Head Comparison between React Native and Flutter

	React Native	Flutter
Programming Language	JavaScript	Dart
Created by	Facebook	Google
Main Structure	Flux and Redux	BLoC
Hot Reload	Supported	Supported
Release Date	Jan 2015	May 2017
Performance	Native-like	Native-like
Code Reusability	Up to 90%	Up to 90%
Major Use Cases	Facebook Pinterest Instagram	Alibaba Groupon Google Ads

Pros and Cons

We will be having a look on a few advantages and disadvantages which (I hope) allow you to make a wise and calculated decision.

Both the platforms are strong enough to be used, but there are certain features that may work better for you while others need to be considered before you will make your decision in that regard.

	React Native	Flutter
Pros	Having a hot reload feature allows it to have fast coding. One codebase for two mobile platforms Use known and widely used language - Javascript Facilitates to reuse the code and save cost Mature platform Supported by an active and vast community Easy to learn and adapt Less Testing Robust Performance	Hot reload which means fast coding Requires one codebase for two different platforms Requires 50% less testing User-friendly designs Faster app/product development Less Cod Ideal for MVPs
Cons	Limited freedom of choice for the developer UI is fragile Apps require additional coding than the native ones Abandoned packages and libraries Not native	The risk involved in the platform The limited size of the developer community Libraries and support is limited as compared to React Native Requires continuous integration support Size of the App

Performance of React Native and Flutter

While talking about cross-platform applications, their performance and User-interface is considered as the biggest challenge.

You have to provide a seamless experience which the user has while using the native application.

While working around the platform of your choice, developers need to make sure that their product provides quick performance, pixel perfect design, and intuitive navigation.

If you are using Google’s platform or Facebook’s you need to consider the efficiency of how you communicate with the native modules.

In the case of React Native development, the app’s performance slows down as JavaScript needs to bridge, in order to carry out the functions, while in Flutter, Dart is built with necessary components that give immediate access.

We can clearly see that Flutter has an edge in providing a sharp performance to its users.

UI and UX

Most of the effectiveness of these platforms depend upon their user interface design and how things are made easy for the users and developers with the additional features provided.

Flutter provides its own sets of widgets which allows it to implement the design of certain platforms or to customize them easily.

While React Native only uses native UI controllers, though it has an additional ReactJS library which is also rich in UI elements. If you remove this library from the platform then you leave React Native with almost zero UI elements at our disposal.

So, in the case of UI and UX, Flutter is surely winning the game.

Learning Curve

React Native is based on Javascript which is known by the masses whereas Flutter incorporates Dart which is relatively new and has a limited set of developers as compared to the former one.

Mobile developers can easily master JS and develop the desired product in a relatively less amount of time. Finding a programmer for the project would also be much easier as the talent pool is vast.

React Native also supports the massive collection of libraries and ready-made components which make the job a lot more easy. More than that, the reusability of React Native components makes you save a lot of time during the execution phase, and shorten your product time-to-market.

According to this aspect, RN scores the point.

Conclusion

It is clearly stated that React Native is more popular and widely used due to its feasibility and extensive support, but it does not mean that Flutter lags behind.

Flutter is new as compared to RN but soon it is may going to make the buzz due to its features and efficiency.

React Native is currently more stable but we can surely see the growth curve of Flutter too, it is simply a matter of time when both these platforms will have their own significant set of audiences.

These both are ideal choices to develop applications in a timely manner while being cost-effective solutions.

Every application requires different points to be considered, so the decision entirely depends upon the organization and the developer.

At this point of time, no one can predict the future regarding the winner but we can wait and watch how things turn and which platform provides more competent solutions to the problems.

What is Headless CMS? Advantages And Other FAQ

Mariusz — Thu, 28 May 2020 10:40:56 +0000

If you’ve entered the world of web development a while ago, it’s more than likely that you heard of or used a content management system before (CMS for short), yet you may still wonder what exactly is a headless CMS.

Perhaps, you know a traditional CMS like WordPress or Drupal, but recent years indicate the growing popularity of headless CMSes and it’s worth wrapping your head around it.

So if headless CMS doesn’t ring a bell, we will fix it.

First, let’s start with some definitions.

Traditional CMS vs Headless CMS

Let's start with traditional CMSes.

Traditional

Traditional CMS is a popular tool for web creation. In an easy manner, users can create and edit the content and store it on the back-end database. All those functionalities in one single system.

Choosing from multiple templates and themes, the appearance can be customized and the functionalities expanded with available plugins. Those CMSes often provide a “What You See Is What You Get” (WYSIWYG) experience, making them more user-friendly for non-technical people.

So typically, a traditional CMS consists of:

a database for storing the content,
an admin panel for management,
API that joins everything together,
a frontend layer for displaying the content.

What’s important to understand here is that the front-end and the back-end are coupled, they are linked together.

How is it different from headless CMS? Let’s find out.

Headless

In a nutshell - headless CMS is a back-end only content management system.

Remember that traditional CMS like Wordpress or Drupal had the front-end and back-end tightly linked, right?

Headless CMS is the opposite - it decouples content management from the presentation layer. If „head” is the presentation layer (or the frontend) and „body” is the content repository - we chop the head off the body and hence the name „headless”. What we’re left with is raw content that we can access through API calls. Our CMS is now a content-only data source.

And since we no longer have a default front-end, we’re free to create as many „heads” as we wish and deliver our content to any device. That also means no restrictions on what framework or tools you use.

In addition, this decoupled approach makes a perfect fit for JAMstack builds.

What is JAMStack?

What are the benefits of headless CMS?

Flexibility - you have full control over the appearance of your content and you can work with your favourite frameworks and tools
Enhanced security - since the content publishing platform is not bound to the database - the risk of malware attacks is lower
Reusability - you can reuse and repurpose your content to serve any digital channel
User-friendly - content delivered via API is easier to maintain and distribute, and it’s easier to edit for non-technical people
Future-proof - since the presentation and logic layers are separate you can structure your content and make it adaptable to future modifications

Should you go headless?
(or not)?

If you feel like traditional CMS is too limiting for you and you need a more flexible tool, then you should go headless.

If you want to create unique websites that can be displayed on any device, then you won’t profit from a predefined template.

Moreover, a traditional CMS offers you everything out-of-the-box, but as a side-effect, you’ll end up piling lots of unnecessary code.

That’s not the case with headless CMS where you can choose to integrate only the functionalities that you actually need.

And as mentioned before, it’s technology-agnostic, meaning you’re not restricted to a specific tech stack. It’s a developer-friendly solution. It’s perfect for use cases such as:

websites and apps based on any JavaScript framework (React, VueJS, AngularJS),
sites made with a static site generator ( i.e. Gatsby)
delivering content to multiple channels.

But if you don’t have the technical resources, or you don’t rely on developers to manage the content, it might make more sense to use a traditional CMS.

Especially if you’re working on a small project like a personal site or blog, it’d be easier and cheaper to use a template than build everything from scratch. So keep in mind that sometimes a traditional CMS might be the right choice for you.

Headless CMS platforms

Here’s a list of some of the most popular headless CMS platforms right now:

Strapi
DatoCMS
Contentful
Directus
GraphCMS
and many more…

Headless CMS in use - examples

Conclusion

The future is searching for more and more interesting ways to delight users with their experience and Headless is one that is definitely the most interesting one at the moment.

I hope I helped you got more familiar with this subject and you are now more ready to give it a try.

React Native FAQ for 2020

Mariusz — Fri, 22 May 2020 08:51:11 +0000

If you are familiar with the basics of React Native, and just wondering about business and development advantages for 2020, go to the bottom of the article with "Pros and Cons" and "Development advantages AD 2020".

If you are not, keep reading from the top.

What is React Native?

You probably know React Native development as an open-source mobile app platform created in JavaScript that is taking the mobile app development market by the storm.

It has a number of great advantages that are saving you many development costs and makes your app truly outstanding.

However, like any other platform, it has its cons as well.

So, before you add it to your tech stack, let's go over the FAQ that I think every developer should be familiar with.

Why we needed React Native?

Before React Native arrived at the market, people wanted to build mobile apps mostly in native platforms.

It was mainly related to the high performance, and great customized user experience.

But they had their limitations as well.

For instance, native development environments were only working for a certain OS. That means, in order to develop applications for different platforms, you need a help of different developers.

Thanks to React Native, developers could work around a single tool to develop cross-platform applications with a truly native experience.

More than that, cross-platform development and React community is constantly growing, Many functionalities we consider impossible few years ago, are now working perfectly without a need for native development.

What’s the difference between React and React Native?

The difference is quite simple.

We use React for web apps, and React Native to develop mobile apps.

Where React focuses more on improved UI (User Interface), React Native is sharing a common logic layer for all OS. That provides solutions to problems which were being dealt for quite a while now, such as development inefficiency, slower time to deployment and less developer productivity.

It is important to note that React is a library used for web development whereas React Native is a platform.

Another interesting thing is when you want to use React Native, you have everything you need to start a project. On the other hand, starting a new project with React means you have to select the bundler and figure out the modules which will work best.

Who is using React Native?

You may hear that big players are considering React Native as their development platform more often.

Here's only a small chunk of them:

The list goes long and probably will keep on increasing as React Native is delivering the features and support that is hard to find anywhere else.

Pros and Cons of React Native

The most important advantages of React Native are the ones regarding development efficiency and economy.

Although there are still some areas that native development is doing better, you may want to consider very carefully when React Native is a good choice for you specifically. You can read about it in another article.

Pros

Development speed (cost) - what developers love about React is that they’re able to reuse and recycle components developed before by them and wide React Native ecosystem. They can also share their codebase and make them work faster.
Works everywhere - Once you learn (hire) React Native, you can build apps for iOS, Android, and Windows.
User Experience - as long as you are not using extremely complicated designs and interactions, you are still able to build high-performance apps and deliver absolutely great user experience.
Faster time to market - you can arrive on the market much faster to test your MVP, get feedback and adapt changes accordingly without a need for a big investment.
Help on demand - React Native community is massive. Many problems that you may face during development, may already be fixed somewhere out there.
Maintenance cost - you only deal with one codebase.
React Native apps are visible - they get listed in AppStore and Play Store. Not like PWA.

Cons

Performance is still lower than native - React Native is not able to use all the blessings and potential of a specific platform. Native apps on the other hand, can really maximize functionalities and deliver the ultimate user experience in the result.
Not efficient design-wise - If you consider complicated designs or advanced interactions as a crucial part of your business advantage, you should definitely go for native development.
Custom modules - you can access many custom modules, yet, there may be a need for some specific components that you will have to build from scratch yourself.

Development advantages of React Native AD 2020

There are still few things you should know that may appear crucial in your teck stack decision:

Easy to work with – experienced developers will definitely appreciate the development experience. Meaningful error messages, time-saving and robust tools make it a premium choice over other platforms.
Changes preview – you don’t have to rebuild the application, again and again, to see changes. It saves a lot of time and makes things quick and efficient. Hit “Command+R” to refresh the application.
Quick iteration cycles – which just simply adds more value.
Intelligent debugging tools – and error reporting mechanisms. Give it an advantage over others and allows developers to focus more on the productive part.
Easier to debug – uses Flipper as default.
Keep things minimal and worthy – it doesn’t force you to work in Xcode or Android Studio for iOS or android apps respectively.
A large community of developers – who are contributing day in, day out.
Code reusability – developers can easily integrate 90% of the native framework and reuse the code for any platform. This feature not only saves time but also helps to cut down the cost of building two apps. Cool thing is that you can use the web app code (written in React) for mobile apps.
Pre-developed components – numerous open-source libraries are available to accelerate your work.
Live reloading feature – it helps to compile and read the file from the point where the developer made changes. Then a new file is offered to the stimulator which automatically reads the file from the beginning.
Compatible with third-party plugins – and does not require high memory to process. You don't need any specific web views functions and all native modules are linked with the plugin through the framework. Smoother running and faster loading are key features for it.
Transform web projects into mobile applications – work done on this platform is easy to understand, and anyone can work around it although they were not previously engaged in it. It increases flexibility and web updates become consistent.
Smoother and faster UI – as compared to classic hybrid ones. The interface created through React Native is highly responsive and feels fluid.

Summary

React Native is an exciting framework that enables web developers to create mobile applications that have knowledge in React and JavaScript.

It enables faster mobile development and efficient code sharing for all operating systems without compromising on the quality of the product.

High efficiency and low costing are also the attributes that make work exciting for armies of developers.

Supported by the biggest players on the market, this technology will probably stand a test of time and will only get better.

Pros And Cons of Using Gatsby in WordPress Projects

Mariusz — Thu, 30 Apr 2020 12:13:58 +0000

Merging Gatsby with WordPress became a really hot topic this year and

Thanks to many business advantages, more and more companies are adapting Gatsby as a part of their tech stack, which makes React and Gatsby developers in high demand as well.

As WordPress is one of the most popular CMS and website creator, the popularity of Gatsby raised a question in the content environment: “Is Gatsby better or worse than WordPress?”.

But my question is: “Does it have to be better or worse than WordPress?”

What if both technologies could work together and combine the best of them?

Does that relationship make sense?

Why using Gatsby with WordPress?

1. Modern performance

Using Gatsby Development means using all the blessings of React and GraphQL - the hottest modern frontend libraries.

It opens up many possibilities to create a truly outstanding and fully customized user experience, with additional website performance and speed boost.

GatsbyJS is a Static PWA Generator. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

2. Gatsby's Security

In the case of security, WordPress has a lot to catch up, and this is where Gatsby comes in as a hero.

Again, Static Site Generators are extremely safe, as there is no direct connection to the database, dependencies, user data or other sensitive information.

3. Plugin free

Having a look from a non-developer’s point of view, many people use WordPress, as it is quite easy to operate with.

If there is a need to take care of something simple, like content editing, or small layout changes, they can easily handle it themselves without the help of a developer.

However, if a non-developer want’s to adopt any custom functionalities, he is fully dependent on WordPress plugins, which makes it very limited in case of user experience and customization, so in order to get what they want, they just add plugins one after another.

What they often don’t know, is that running each plugin is like loading a new library.

So by using too many of them, and putting plugins one on top of another, it makes their website extremely heavy and hard to render, which ultimately means - VERY SLOW.

4. Development pleasure

Gatsby opens up many technological possibilities that can be highly beneficial for the project.

The developer has more freedom in choosing tools, which allows them to make a truly customized and outstanding both user and development experience.

5. Your content is already there

If you're thinking about migration to use new technologies to be able to do more, you don’t have to be afraid of your previous content as well.

With Gatsby, there is no need to migrate any content, as it’s already there, in your WordPress CMS.

6. More reasons why use Gatsby with WordPress:

Easy to manage and well-known WordPress admin panel
Ready to use user login system and authorization
Highly developed, yet easily customized WordPress API
With Gatsby and Gutenberg (new editor) you can build a drag’n’drop Gatsby site builder
Lower hosting costs

Why not using Gatsby with WordPress?

Like any relationship, this one also has its problems.

Most importantly, WordPress is a blogging platform and it doesn’t always find itself as a headless backend, mostly because it still uses “old” technologies, like PHP, and is slower than other backend platforms, like Strapi or Contentful.

Let’s dive a bit deeper.

1. New knowledge is required

If you want to work with Gatsby and WordPress at the same time, you ultimately need to be well familiar with both PHP and JS languages.

Gatsby is also a mix of React and GraphQL, so they are required to be known as well.

However, from other perspectives, it’s a great opportunity to start thinking React-wise and broaden development horizons.

Learning React and GraphQL may also appear a great idea, as both technologies are taking the fruits of technological boom and probably will stay on a higher shelf for a little longer.

However, we mentioned it earlier - non-devs will hate. Or simply they won’t be able to act.

2. Losing many WordPress abilities and functionalities

By mixing Gatsby with WordPress, WP is becoming backend only, which means we are losing a lot of its functionalities and abilities.

For example, you cannot use theme Hooks.

WooCommerce, for instance, is using native WP hooks but is also able to add his own hooks, which enables him to customize many actions. Actually, you can get into any phase of order and modify, or completely change the action (like checkout).

To make it possible with Gatsby, you need to write the connection with the API from scratch.

Another thing is the plugins.

If you want any plugin to work correctly, you have to program it yourself by using its API. The problem is, not every plugin is sharing his API, which means you won’t be able to make it compatible.

3. Content Changes

As I wrote already, Gatsby is a static site generator, which means it cannot be “just edited”, and any (even small text) change will require a new deployment.

So if you have a page that requires many daily content changes, you may find it both time-consuming and irritating.

Also, if your content is distributed through many channels, and has its own specific and very strict modeling, Gatsby may not be able to execute it correctly.

Wrap up

Combining Gatsby with WordPress is relatively fresh (or at least refreshed lately) topic, and I suppose the number of initiatives around it will just increase.

Gatsby is one of the hottest technologies at the moment, and just the same as React and GraphQL, he is gathering more and more fans around.

Yet, we still have to remember that WordPress powers 35% of the internet and surely doesn’t stop.

This is also why many new technologies are working and searching for possibilities and solutions to collaborate.

The future seems interesting, but as always, let’s see what happens.

When React Native Make Sense?

Mariusz — Fri, 24 Apr 2020 11:22:24 +0000

I wrote this article to answer one of the most frequently asked questions while talking about React Native on business meetings:

"What makes RN the best option for my app?"

I've decided to take a while and make research, together with our developers, to find out when React Native is an actual good technology choice.

React Native is an open-source framework to build mobile apps with React.

The whole aim of RN is to make it easier for cross-platform development, as you don’t have to develop iOS, Android and Windows separately.

All you need is one codebase to create an awesome app that works on all operating systems.

However, we all know cross-platform development has cons in comparison with native apps.

So, when does it make sense to use React Native?

When your app is following regular design principles

I have to admit that the great thing about native development is that it’s doing better with apps that are very demanding design-wise.

But let’s be honest. We don’t need any complex designs and extreme interactions, or animations to make things happen and make people click a purchase button.

We can be still great with a regular, minimalistic “look and feel”, as long as we fix our customers’ problem with the speed and efficiency they expect. No fancy design needed.

Of course, fun interactions can improve user-experience at some point, but in most cases, instead of spending money on two native developers that need a lot of time (and probably a help of designer) to make it happen, you can just use React Native and get a great user-minded interface, that will just make your app efficient.

More than that, thanks to a great community and modularity, you can easily use many ready-to-use projects or components that already has a proven record for being efficient.

Last, but not least, technology is constantly moving and changing. Don’t forget that many things we take for granted today, was considered impossible two years ago.

I personally believe that React Native is a great tool for 95% of B2B mobile apps and 60% B2C mobile apps.

When you want to release iOS and Android apps at the same time

Let’s get back to the moment I wrote: “instead of spending money on two native developers…”.

If you’re going to be releasing your app on both Android and iOS, React Native will prove helpful as you’ll be able to repurpose a lot of your code rather than having to start from scratch on each platform.

That’ll save you both time and money, and allows you to go out with a MVP sooner.

More than that, it’s going to be quicker to train iOS and Android (or any other) team in React than to train new iOS or Android developers separately.

When you want to cut development time

This is not related to the previous point.

I’m talking here about the overall development experience of creating apps with React Native. Big players already learned that development is just easier and more productive with it.

For example, Shopify went full gas with switching from native development to React Native.

What they discover?

"[…]in rewriting the Arrive app in React Native, the team felt that they were twice as productive than using native development—even just on one mobile platform."

When you don’t want to double or triple your dev team

Speaking of developer’s productivity, would you like one guy to make one app that works on both mobile and web?

Can do.

React Native is a subset of React, and as long as you are not using any modules that need typical native functionalities, you can build an app that will work on both mobile and web platforms with the similar UI.

When you don’t have many animations

React Native is there to help you create truly native experiences, as it allows JavaScript code to interact with native components via a mechanism known as the bridge.

Although, the bridge does cause issues when it comes to things like animations.

As React Native is open-source, it’s constantly improving as third parties are busy building solutions that benefit everyone. Plus, Facebook is working on changes to improve Bridge performance.

However, finally, someone has to do those animations, which means you need another person in your team, and it won’t be quick, nor cheap, but this you need to calculate yourself.

If animations are not crucial to run your business, there is just no one reason to go for native development.

Points for using React Native

If you’re still not sure if React Native makes sense, here are some benefits for you to keep in mind. If you’re looking for:

Quicker development times
Smaller development teams
Quicker regression tests
Bugs that get fixed easier
Easy and intuitive interface
Access to many ready-to-use templates and modules
Development cost-efficiency

…then, React Native makes sense to you.

Conclusion

In fact, there is not much to be added in the conclusion, as it seems to be very obvious:

If you are a big company, or a game, that has a wish to use complicated and demanding designs, or interactions, that can afford two different developers and a designer at the same time - go native.
Other - go for React Native. Your business will be more than fine.

Generics in Typescript – How To Type Reusable Parts of Code?

Mariusz — Mon, 30 Mar 2020 08:47:40 +0000

If you follow the DRY rule in writing your code in Typescript, the Generic Types are for you!

Thanks to Generic Types you can easily create reusable functions, interfaces or classes instead of writing single types for each one.

Generics allow you to use different types of providing parameters to one reusable part of code.

The <> syntax is reserved for describing generic type. Between the <> you can provide type which can also take default or static values.

interface User<T=string> {
  nick: T
}

const user1:User = { nick: 'User1'}
const user2:User<'User2'> = { nick: "User2"}

Let’s get some practice!

We would like to create a simple React App with TS which displays 3 titles of fetched posts with author name, loader if data is fetching and the error if we couldn't get data somehow.

To understand how it exactly works, let’s start with creating two custom hooks - one for fetching user data and the second one to get post data.

// First hook

interface User {
  id: number;
  username: string;
  email: string;
  name: string;
}

// Interface which describes data returned by useUsersFetch hook 
interface ReturnedUserData {
 data?: User[];
 error?: string;
 loading: boolean;
}

export const useUsersFetch = (): ReturnedUserData => {
 const [fetchedData, setFetchedData] = React.useState<
   ReturnedUserData>({
     loading: true
 });

 React.useEffect(() => {
   const fetchData = async (): Promise<void> => {
     try {
       const { data } = await axios.get(`${base}/users`);

       setFetchedData({ data, loading: false, error: undefined });
     } catch {
       setFetchedData({
         data: undefined,
         loading: false,
         error: "Sth went wrong."
       });
     }
   };

   fetchData();
 }, []);

 return fetchedData;
};

// Second hook

interface Post {
 id: number;
 title: string;
 body: string;
 userId: number;
}

// Interface which describes data returned by usePostsFetch hook 
interface ReturnedPostsData {
 data?: Post[];
 error?: string;
 loading: boolean;
}

export const usePostsFetch = (): ReturnedPostsData => {
 const [fetchedData, setFetchedData] = React.useState<ReturnedPostsData>({
   loading: true
 });

 React.useEffect(() => {
   const fetchData = async (): Promise<void> => {
     try {
       const { data } = await axios.get(`${base}/posts`);

       setFetchedData({ data, loading: false, error: undefined });
     } catch {
       setFetchedData({
         data: undefined,
         loading: false,
         error: "Sth went wrong."
       });
     }
   };

   fetchData();
 }, []);

 return fetchedData;
};

We have 2 separate hooks to get users and posts data.

It is not written with DRY rule, so how we can optimize our code to be more reusable if we want to make more requests in our app?

Let’s check the difference between following hooks and move them to arguments of our new reusable hook.

First of all, let's analyze the differences.

As we can see there are a few dissimilar things like url to the endpoint, returned type of data, and hook state type. So what we can do with it?

We need to create a custom hook that we will be calling useFetch with reusable logic. This hook will have one argument which is url.

But how we can pass specific type of returned data to our logic?

Well, our superheroes are GENERICS TYPES.

Let’s do it.

/* ReturnedData<T> is an interface which describes data returned by 
hook. Here we use previous interface body but we need to add generics 
type. Thanks to that it is more reusable and data can be any of type
passed as T.*/
interface ReturnedData<T> {
  data?: T;
  error?: string;
  loading: boolean;
}

// FetchedData is a type passed to useFetch during calling a hook.
export const useFetch = <FetchedData>(
  url: string
// ReturnedData<FetchedData> - We pass here data type to our generic
// interface.
): ReturnedData<FetchedData> => {
  const [fetchedData, setFetchedData] = React.useState<
    ReturnedData<FetchedData>
  >({
    loading: true
  });

  React.useEffect(() => {
    const fetchData = async (): Promise<void> => {
      try {
        // Static url replaced by dynamic param passed to hook 
        const { data } = await axios.get(`${base}${url}`);

        setFetchedData({ data, loading: false, error: undefined });
      } catch {
        setFetchedData({
          data: undefined,
          loading: false,
          error: "Sth went wrong."
        });
      }
    };

    fetchData();
  }, []);

  return fetchedData;
};

During invoking the hook we should pass a returned data type between <> syntax like <Users[]>.

const users = useFetch<User[]>("/users").
const posts = useFetch<Post[]>("/posts").

Finally, our code is clarified, reusable and well-typed.

You can review the created code on CodeSandbox.

Link here:
https://codesandbox.io/s/dreamy-cloud-oocxq?eslint=1&fontsize=14&hidenavigation=1&theme=dark

Summary

To sum up, using Generics in Typescript gives you the ability to pass a huge range of types to a component and add an additional abstraction layer to your code which makes it being written with DRY rule.

Remember that we can apply generics to functions, interfaces and classes in Typescript.

I hope this example helped you to understand what generics are, how we can use them and why.

What Is Strapi And How To Build Your First API?

Mariusz — Mon, 16 Mar 2020 15:30:43 +0000

Introduction

We can read in an official Strapi website- “The open-source Headless CMS Front-End Developers love”.

I wanted to experience this firsthand, so I had to get into Strapi world. In this article, I will share my insights about headless cms’, describe Strapi in detail, and few ways to connect it to any view layer.

What is Headless CMS?

A headless CMS is a content management system that allows you and members across your organization to manage and write content and access it across all your applications using an API.

The term “headless” comes from the concept of chopping the “head” (the frontend, i.e. the website) off the “body” (the back end, i.e. the content repository).

A headless CMS does not care about how and where your content gets displayed. It has only one focus: storing and delivering structured content.

Use cases for Headless CMS:

Build a website with a technology you are familiar with.
Websites and Web apps that use JavaScript frameworks (Vue, React, Angular)
Websites created with static site generators (Gatsby, Jekyll, etc.)
Native Mobile Apps (iOS, Android, Windows Phone, React Native …)
Enrich product information on e-commerce sites.

Reasons to adopt a headless CMS solution

Freedom from developing the legacy software of tomorrow
Ability to easily manage content on multiple channels.
Content management from a single place across the organization.
Prepared for growth and scalability.

What is Strapi?

Strapi is an open-source headless CMS front-end developers love. It's more than a Node.js Framework and more than a Headless CMS.

It saves API development time through a beautiful admin panel anyone can use.

Strapi most advantages

Open source - free and open-source, forever. The entire codebase is available on GitHub and is maintained by hundreds of contributors.
Self-hosted - security is crucial for companies. Host your data safely, on your own servers. GDPR compliant.
Customizable - each project requires specific requirements. Easily customize the admin panel as well as the API.
RESTful or GraphQL - consume the API from any client (React, Vue, Angular), mobile apps or even IoT, using REST or GraphQL.
100% JavaScript - one language to rule them all. Use JavaScript everywhere: both for your front-end and your Headless CMS.
Extensible by design - plugins system included. Install the auth system, content management, custom plugins, and more, in seconds.
Authentications & Permissions - secure your endpoints by allowing or not allowing users to access your API by role.

Alternatives to Strapi

There are quite a few alternatives to Strapi that you may be already familiar with.

Most interesting are:

Wordpress: an open-source software to build websites, blogs, and apps.
Contentful: a modern platform to manage content in web and mobile apps.
Netlify CMS: an open-source content management system with support for static site generators.
Firebase: cloud service for real-time working apps.
Drupal: an open-source content management platform for websites and apps.

How to create the first API in Strapi

Small introduction

To build a Strapi application I’ve used a tool called Docker.

I found a docker compose file which includes strapi application configuration with postgres database to store data.

Below you see a code that creates 2 containers - one with strapi app, and the second one with a database container (strapi app is using the database container).

To build an application and start developing, we only have to be in the directory where we got this docker-compose file and run a docker-compose up command in terminal.

version: '3'

services:
 strapi:
   container_name: strapi
   image: strapi/strapi
   environment:
     - DATABASE_CLIENT=postgres
     - DATABASE_HOST=db
     - DATABASE_PORT=5432
     - DATABASE_NAME=strapi
     - DATABASE_USERNAME=strapi
     - DATABASE_PASSWORD=strapi
   ports:
     - 1337:1337
   volumes:
     - ./app:/srv/app
   depends_on:
     - db

 db:
   container_name: postgres
   image: postgres
   restart: always
   volumes:
     - ./db:/var/lib/postgresql/data
   environment:
     POSTGRES_USER: strapi
     POSTGRES_PASSWORD: strapi
     POSTGRES_DB: strapi

If everything went good, we should see something like this:

For the first time you will be seeing a bit more info than you see on screen above, (I run that command already for the second time) so only run database and strapi container.

To start managing, we should go to http://localhost:1337/admin. Try to put that into your browser. It’s a sign up page. To start developing we have to create an admin account.

After successful login, we should be moved to the dashboard page.

Strapi has a very clear UX design and it is easy to navigate through the whole app.

There is a header where we can change language and our user settings. On left there is strapi navigation.

Starting from the top we got content types and our app models. Next to that, we can find plugins with content type builder to create new models. These are the two main things, we are going to use today.

Ok, let’s go to the first content type that was automatically created during build strapi app - Users

We can see an empty User table but it isn’t truth.

We have created admin user at the beginning but it doesn’t contain that record. From that view, we can add more users, so try to do that.

We have to click Add New User button:

After we click, we are going to create an entry page where we can create a new user record.

We can see username, email, password string fields and also confirmed and blocked boolean fields.

On the right side we see roles field which is a relation field. It is a select field with two values: public and authenticated. We will try to add new user, so fill all the fields and click the green Save button.

We are again on User table page, and we can see the latest added user.

From that view we can add new records or edit the existing one. It is very easy for non-technical people to manage the application. They don’t have to write the code like developers. Instead, they can create data shapes only by clicking in the dashboard.

Ok, we have added a new user to the existing content type.

Let’s create new content type. We can do that by using Content Type Builder.

There are 3 content types in our app for now. The User content type we saw in navigation menu, and two more - Permission and Role (every strapi app created from the scratch got these content types).

In this article we won’t go deeper into it.

Better option will be to create a new model.

Let’s assume we are creating a headless cms for blog, so we will try to add Post content type.

By clicking “create new content-type” we move to form:

We can see a modal where we can pick the type of field we want to add to our new model.

After we choose, for example, text field, the next step is adding the name to that field and choosing more specific text field type - short text or long text.

Every post got the title and in most cases it is short text.

So we added this field into our Post model. Next, I have also added content field as a rich text type, short description field as a long text, and User relation field, so any user can have many posts.

So our Post model looks like:

Then we can move to our Post model, which will appear at the top of navigation:

In the next step we will create an exemplary post that later can be displayed on our blog. Just like in the User model, we should hit the “Add New Posts” button.

We have to fill all the fields chosen when we built a post model.

So, add a post title, content, short description, and select a post’s author.

After that, let’s save our first post - it will be automatically added to the database. If everything went good, we will see our post on the list.

If we have any data in our strapi application (post assigned to user), we can use it to be displayed on the frontend - in our case Gatsby blog.

To make that happen, we need to do one more thing - We have to change permission to models, which we want to get by api.

In navigation, we should go to roles and permission page. We can see a content with some tabs. We need the first, displayed immediately after we enter the site. Try to edit the authenticated option by clicking on the pencil icon.

After moving to editing section, we can see a form with fields we can edit.

The one we need is Permission section. We have to allow developers fetch data about posts.

Mark the find checkbox related to the Post model. After that, save your choice.

We have to do the same thing for Public. Go to the edit and mark find option related to the Post model.

This is a basic example done for the article. In real application you have to be careful with permission settings (for example adding create or edit role only for authenticated users).

So I am creating a common classical Gatsby application, but I won’t be going too much into details, I will only show the things related to fetch our strapi data to gatsby and display it.

First, we have to add a gatsby plugin, which will magically connect strapi and gatsby together.

The plugin is called ‘gatsby-source-strapi’. We should use npm or yarn to install it like a normal npm package inside gatsby project directory.

After that, go to the gatsby-config.js file and add plugin.

There is a code below:

{
     resolve: 'gatsby-source-strapi',
     options: {
       apiURL: 'http://localhost:1337',
       contentTypes: [
         'post',
       ],
       queryLimit: 1000,
     },
   },

In options you need to add apiUrl (in our case it is http://localhost:1337), and contentTypes. There are models which we want use.

Run our Gatsby application and try to get data via graphQL. You should go to in-browser IDE and explore data and schema. I have built app on port 8000 so use url: http://localhost:8000/___graphql

We Need to create query to get posts and fields, that we need to display to all blog users.

This is an example of query and its response:

Let’s create a basic react components, in this case articles list:

import React from 'react'
import { graphql, Link } from 'gatsby'

import Layout from '../components/layout'
import PostsListStyled from '../components/styles/PostsListStyles'

const BlogPage = ({ data }) => {
 const { edges: posts } = data.allStrapiPost

 return (
   <Layout>
     <PostsListStyled>
       {posts.map(({ node: post }) => (
         <li key={post.id}>
           <Link to={`/blog/${post.id}`}>
             <h1>
               {post.created_at}: {post.title}
             </h1>
             <p>{post.short}</p>
             <p>by {post.user.username}</p>
           </Link>
         </li>
       ))}
     </PostsListStyled>
   </Layout>
 )
}

export default BlogPage

export const pageQuery = graphql`
 query {
   allStrapiPost {
     edges {
       node {
         id
         title
         content
         created_at(formatString: "YYYY-MM-DD")
         user {
           username
         }
         short
       }
     }
   }
 }
`

If everything went well, after running gatsby blog, we should see a listing. Let’s check it.

Everything seems to be working correctly.

It is exactly the same data we have saved in our strapi cms.

Next step will be creating an article page. That is an example of basic component page implementation:

import React from 'react'
import { graphql, Link } from 'gatsby'
import Layout from '../components/layout'

const Template = ({ data }) => {
 const { strapiPost: post } = data

 return (
   <Layout>
     <Link to="/blog">Back to the list</Link>
     <div>
       <h1>{post.title}</h1>
       <h2>{post.created_at}</h2>
       <h2>{post.user.username}</h2>
       <img src={post.image.childImageSharp.original.src} />
       <div dangerouslySetInnerHTML={{ __html: post.content }} />
     </div>
   </Layout>
 )
}

export default Template

export const query = graphql`
 query ArticleTemplate($id: String!) {
   strapiPost(id: { eq: $id }) {
     title
     content
     created_at(formatString: "YYYY-MM-DD")
     user {
       username
     }
     image {
       childImageSharp {
         original {
           src
         }
       }
     }
   }
 }
`

One more thing. Making createPages function in gatsby-node file.

It is necessary to our graphQL query for Template component to work correctly.

This is the code you have to add to gatsby-node:

exports.createPages = ({ actions, graphql }) => {
 const { createPage } = actions;

 const getArticles = makeRequest(graphql, `
   {
     allStrapiPost {
       edges {
         node {
           id
         }
       }
     }
   }
   `).then(result => {
   // Create pages for each article.
   result.data.allStrapiPost.edges.forEach(({ node }) => {
     createPage({
       path: `/blog/${node.id}`,
       component: path.resolve(`src/templates/post.js`),
       context: {
         id: node.id,
       },
     })
   })
 });

 // Query for articles nodes to use in creating pages.
 return getArticles;
};

Build Gatsby blog again and check results of our hard work:

Conclusion

Strapi is a fantastic powerful tool for creating CMS without a head to our applications.

Headless approach (thanks to the possibility of using data through many applications) makes us free from using one specific technology and enables us to use any of the newest ones.

We don’t need to know any backend language to write it. We can just click and use it in our business easily.

It is also a great tool for frontend devs, they can quickly make an API to their frontend applications and use it even to learn new technologies.

It provides us with a full range of other possibilities. I hope the above article will encourage you to try it out, and start the new adventure with strapi.