DEV Community: Robrecht Meersman

React Native is here to stay

Robrecht Meersman — Tue, 09 Apr 2024 09:42:48 +0000

This post originally appeared on our ITP website

React Native is one of many cross-platform frameworks aiming to bridge the gap between iOS and Android app development. However, React Native is not like any other cross-platform framework. With a growing number of top-ranking apps built using React Native and the backing of major companies, it's clear that this framework is not just a passing trend but a significant player in the mobile development landscape.

If you’re not already sold, this article should convince you to embrace React Native and show you how we utilise it at In The Pocket to create top-notch mobile experiences.

(For clarity: this article is NOT sponsored by React Native 🥲)

Built on solid ecosystems

React Native builds upon solid foundations: JavaScript and React. Foundations many developers are skilled in and that have big and active communities. The "Learn once, write anywhere" slogan of React Native really holds true, empowering developers to utilise their existing coding skills to write code for both iOS and Android platforms with minimal learning curve.

Apart from leveraging these foundations, React Native still retains the ability to fully access and utilise the native capabilities of the underlying iOS and Android platforms. This means that developers can tap into the performance and accessibility functionalities of the devices seamlessly, without compromise, even though they're primarily working with JavaScript and React.

Backed by big companies

The open source landscape can be the Wild West, often relying on the goodwill of solo developers who can pull the plug at anytime. React Native distinguishes itself with backing from major players like Meta, Microsoft, and Shopify. Their active involvement ensures the continuous growth and improvement of React Native. Moreover, companies such as Software Mansion and Callstack contribute valuable libraries and host yearly conferences, enlarging the community.

Another big asset is Expo, a major player in simplifying React Native development with a suite of tools and services. By getting rid of native complexities, Expo allows developers to focus on building features rather than dealing with technical cross-platform intricacies. Through open-source libraries and tools, Expo streamlines development.

Next to that, Expo Application Services (EAS) is a cloud-based solution for building, signing, distributing, and updating apps, reducing setup time and continuous integration workflows. And Expo Updates, a feature of EAS, enables over-the-air updates, ensuring users have access to the latest features and bug fixes, facilitating rapid app iteration and improvement.

Bright future ahead

The future of React Native looks promising, as the React Native team plans a significant overhaul of its core internals, called the New Architecture, aimed at improving its performance and scalability. Additionally, Expo continues to evolve, enhancing developer experience with new features and keeping an exciting roadmap.

Expo promises to release an update to their SDK each quarter, so apps will always be able to target the latest iOS and Android versions. These advancements make it easier than ever to build, deploy, and manage React Native applications, ensuring the framework remains at the forefront of mobile development.

React Native in practice

Izimi mobile app

At In The Pocket, React Native has enabled us to create robust and future-proof applications like the Izimi mobile app: a sturdy and future-proof digital vault, also available as a web portal. Harnessing React Native's native capabilities and seamlessly integrating Itsme e-ID authentication, Izimi ensures a secure and user-friendly authentication experience. By sharing JavaScript code between web and app, we've accelerated our development process while minimising code duplication.

Multipharma app

For Multipharma, React Native facilitated the rapid development of a new mobile app in just five months. The same developers could work on the mobile app and web portal, keeping feature parity high. Because React Native is just native, we could leverage on-device security measures like biometrics and encryption, ensuring end-to-end application security.

Colruyt Xtra app

These security features also play a role in the Xtra app we help develop for Colruyt Group. Native integrations allow the user to use biometrics to securely pay your groceries right from the app. Thanks to the large open source community, these native integrations often already exist, helping us gain speed by not reinventing the wheel. The modularity of React allows us to collaborate with multiple feature teams in parallel while maintaining a consistent look and feel through the use of a centralised design system. The design system used in Xtra enforces accessibility by default, and using TypeScript strengthens the ability to ensure accessibility in the application.

React Native at In The Pocket

At In The Pocket we’ve had React Native on our tech radar since its early stages and we have seen it grow and mature. We have seen that React Native can create just as high-quality, performant, innovative apps as native ones. At In The Pocket, we fully embrace React Native and we are actively contributing to its open source landscape. We adopt Expo's ecosystem to accelerate our development even further.

We're excited to see how React Native continues to evolve and how it will shape the future of mobile development. As we continue to build and innovate, one thing remains clear—React Native is not just here to stay but to lead the way in mobile development.

From Figma to React Native using Specify

Robrecht Meersman — Fri, 11 Mar 2022 14:20:19 +0000

This post originally appeared on our ITP Dev blog

We all know the benefit of design systems. As a designer we want to have a consistent UI over web, mobile and any other platform the brand is present. As a developer we do not want to spend time exporting assets and colors from Figma, importing them into the code and repeating this process every time something changes.

Luckily there exists a tool to automate this process. Specify is a cloud platform which stores a single source of truth for your design tokens (text styles, colors, icons, imagery, etc.) and distributes them to the different platforms. Specify allows you to import your tokens from a source like Figma (and soon other sources like Google Drive or Dropbox) and keep them in sync while you make changes to the source. You can view the tokens in the web app and export them to GitHub or to your project using the CLI.

In this blogpost we will focus on syncing the design tokens from Figma to React Native.

Figma to Specify

Syncing design tokens from Figma to Specify is just a matter of clicking a few buttons. The Specify team has written a clear guide on how to set it up, and Specify will automatically sync any new changes made to the Figma file.
I recommend taking a look at the example Figma file to see how each design token should be delivered.

Specify to React Native

To pull design tokens into a project, Specify offers a CLI with a pull and sync command. The pull command will import all design tokens, where the sync command will only update the ones that are already present.
The CLI uses a .specifyrc config file (JS or JSON) in which you can write rules, which are different jobs to run in parallel.

// .specifyrc.js
module.exports = {
  repository: '@my_organization/my-repository',
  personalAccessToken: 'my_personal_access_token',
  rules: [
    // different jobs in parallel
  ],
};

For each rule we can use a different filter, such that the rule only applies to certain types of design tokens. Next to filters, we can also use parsers, which will manipulate the raw design tokens (which are in JSON format) and output a format that suits the programming language and platform more. Parsers behave like a pipeline, where each parser receives the input of the previous one. There are a lot of parsers to choose from, some perform very low level transformations such as round-number and camelcasify, but also full-blown parsers to a single technology such as to-tailwind and to-react-native.

Downloading fonts & assets

If we filter on assets ('vector', 'bitmap' and 'font'), Specify will download the assets themselves instead of the JSON describing them. They will be placed under the given folder (here src/common/assets).

For SVG's, we can use the svgo parser, which optimizes the SVG code and outputs a minified result. The default svgo settings are pretty good, but we add removeDimensions to make them responsive and replace the hard coded colors with "currentColor" such that we can color them with React Native styles.

// .specifyrc.js
  ...
  rules: [
    {
      name: "🖊 Download Vector Assets",
      path: "src/common/assets/vector",
      filter: {
        types: ["vector"],
      },
      parsers: [
        { name: "camelcasify" },
        {
          name: "svgo",
          options: {
            svgo: {
              plugins: [
                { removeDimensions: true },
                { convertColors: { currentColor: true } },
              ],
            },
          },
        },
      ],
    },
    {
      name: "🏞 Download Bitmap Assets",
      path: "src/common/assets/bitmap",
      filter: { types: ["bitmap"] },
      parsers: [
        { name: 'camelcasify' },
        {
          // This parser will give @2x and @3x variants their correct file name
          name: 'name-assets-files-by-pattern',
          options: {
            pattern: '{{name}}{{#dimension}}@{{dimension}}x{{/dimension}}.{{format}}',
          },
        },
      ],
    },
    {
      name: "🔡 Download Fonts",
      path: "src/common/assets/fonts",
      filter: { types: ["font"] },
    },
  ],
  ...

Syncing desing tokens

Now that assets and fonts are downloaded, we are ready to import the rest of the design system. For this we will use the to-react-native parser. It will generate a JavaScript (or TypeScript) theme object with all the design tokens in the correct format for React Native to understand.

// .specifyrc.js
...
{
  name: '⚛️ Import tokens',
  path: 'src/common/theme/theme.js',
  parsers: [
    {
      name: 'to-react-native',
      options: {
        assetsFolderPath: {
          bitmap: 'src/common/assets/bitmap',
          vector: 'src/common/assets/vector',
        },
      },
    },
  ],
},
...

If you have questions or notice any issues with the to-react-native parser, feel free to contribute or talk to me about it 🙏

An example of a full .specifyrc.js file can be found here. The output file will look something like this:

// src/common/theme/theme.js
import assetChevronRight from '../assets/vector/chevronRight.svg';
import assetLogo from '../assets/bitmap/logo.png';

const theme = {
  bitmap: {
    logo: assetLogo,
  },
  vector: {
    chevronRight: assetChevronRight,
  },
  textStyle: {
    body: {
      fontWeight: '500',
      fontSize: 16,
      lineHeight: 24,
      fontFamily: 'Montserrat-Medium',
      color: 'rgb(0, 0, 0)',
    },
  },
  measurement: {
    grid: 8,
  },
  color: {
    primary500: 'rgb(0, 0, 153)',
  },
  gradient: {
    sunset: [
      {
        angle: 90,
        colors: ['rgb(245, 72, 63)', 'rgb(255, 142, 5)'],
        locations: [0, 1],
      },
    ],
  },
  opacity: {
    dimmed: 0.6,
  },
  font: {
    montserratMedium: 'Montserrat-Medium',
  },
};

export default theme;

As a final step we will add an npm script in our package.json:

// package.json
  "scripts": {
    ...
    "specify:pull": "specify pull -C .specifyrc.js",
  },

Now we have our Figma project synced with React Native 🎉. Every time the designer changes a color or adds an icon, we can run npm run specify:pull and see the changes in our app!

Using the theme object

Making use of the design tokens is fairly straighforward for most types.

Bitmaps

Simple as that!

import { Image } from 'react-native';
import theme from 'common/theme';

const App = () => <Image source={theme.bitmap.logo} />;

Vectors

All vector assets in theme.js are imported directly. If you are not using Expo, you will need to install and configure react-native-svg-transformer to resolve the import statements.

Unlike bitmaps, the imported assets are React elements. We create a Vector component to make the usage look more like regular images:

const Vector = ({ source: SVGElement, ...props }) => <SVGElement {...props} />;

const App = () => (
  <>
    {/* a bit weird */}
    <theme.vector.chevronRight />
    {/* much better! */}
    <Vector source={theme.vector.chevronRight} />
  </>
);

Fonts

This part is specific to non-Expo projects. For Expo apps, it could be different.

In the "Download Fonts" rule above, the downloaded .ttf files will be under src/common/assets/fonts/, but they should also be imported in the native projects as well. This can be done by creating a react-native.config.js

// react-native.config.js
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['src/common/assets/fonts/'],
  dependencies: {
    // Optionally.
    // Prevent `react-native-vector-icons`
    // from linking all fonts
    'react-native-vector-icons': {
      assets: [],
    },
  },
};

Running react-native link will link all fonts under that path automatically to the Android and iOS project! We can run it after every specify pull job:

// package.json
  "scripts": {
    ...
-    "specify:pull": "specify pull -C .specifyrc.js",
+    "specify:pull": "specify pull -C .specifyrc.js && react-native link",
  },

Gradients

The to-react-native parser transforms gradients into a format which is easy to use with react-native-linear-gradient.
Example usage:

const App = () => (
  <LinearGradient
    colors={theme.gradients.myGradient.colors}
    locations={theme.gradients.myGradient.locations}
    useAngle
    angle={theme.gradients.myGradient.angle}
  />
);

Conclusion

Specify is a young but promising tool to sync Figma files to all you different platforms. If you feel like there is a parser missing or want to add some options, feel free to contribute to the project. The Specify team is very responsive and is open to suggestions.

Dynamic Open Graph images with Next.js

Robrecht Meersman — Thu, 10 Mar 2022 13:10:07 +0000

Update 2022-10: Vercel release a new OG Image Generation library, which does the same thing except 5x faster and at the edge!

This post originally appeared on our ITP Dev blog

Introduction

Let me start of with a question: which link are you more likely to click on, the left or the right?

Obviously, adding a social media preview image is an great way to improve the professional look of your website and increase your click through rate (though I have no data on this). These social media images are specified using the Open Graph Protocol, which is a spec introduced by Facebook and now supported by any software that previews URLs for you. The OG image is specified in the document's head:

<head>
  <meta property="og:image" content="https://url-to-your-image.png" />
</head>

This can be hooked up to a CMS so editors can choose a picture which suits their landing page, blog post, news article… the most. It is important that the preview gives the user a clear idea of what to expect on the webpage, similar to a thumbnail on a YouTube video.

But what if the content of the page is not visual at all, and no photo really suits the contents of the page? And what if we have a lot of these pages, with dynamically generated content? Luckily we are not limited to photography, we can use text! The prime example of this is how GitHub generates previews for issue URLs: they generate an image containing enough info such that users know what they will click on. These images are generated on-demand, as storing an image for every GitHub pull request or issue would be unfeasable. Another example is Vercel, which even open sourced their Open Graph Image as a Service that they occasionally use on blog posts or announcements.

In this article we will find out how we can create these dynamic Open Graph images in Next.js. We will use our In The Pocket Tech Radar as an example. Our Tech Radar reflects our current view on software engineering technologies. It includes the technology choices we’ve made and motivates why we’ve made them. It also shows which technologies are “on our radar”, and why we consider adopting them.

Each technology has its own webpage, and we have more than 100 technologies on our radar. Manually creating an OG image for each technology would be a boring, repeating task.

TL;DR

Don't care about the details? Here's a small tutorial on how to add an API route to your Next.js app that generates the images on demand.

First, install next-api-og-image.

yarn add next-api-og-image

Then configure an API route

// pages/api/og-image.ts
import { withOGImage } from 'next-api-og-image';

interface QueryParams {
  stage: string;
  name: string;
}

export default withOGImage<'query', QueryParams>({
  template: {
                                // include HTML template here
    html: ({ name, stage }) =>  `<h1>${name} - ${stage}</h1>`,
  },
  cacheControl: 'public, max-age=604800, immutable',
  dev: {
    inspectHtml: false,
  },
});

And call the route from the web page:

// pages/technology/[slug].ts
<Head>
  <title>Next.js | Tech Radar</title>
  <meta 
    property="og:image" 
    content="https://inthepocket.tech/api/og-image?name=Next.js&stage=adopt" 
  />
</Head>

and done!

Behind the scenes

As you see in the code above, we are using the next-api-og-image library with almost no configuration required to generate the images. Super easy! The interesting part however is what the library does under the hood.

The withOGImage method exposes a GET /api/og-image?name=Next.js&stage=adopt API route with some query parameters we can define ourselves. In the case of our Tech Radar, we use the name and stage parameters. The API route returns an image containing the name and stage we provided:

When requesting the API route, the Next.js serverless function will actually spin up a web browser on the server (a headless instance of Chromium, using chrome-aws-lambda). Next, a webpage will be generated with HTML we can define ourselves. This HTML will be used to construct the image. That means that as a developer we can generate images using HTML and CSS, technologies we are already familiar with!

  template: {
    html: ({ name, stage }) =>  `<h1>${name} - ${stage}</h1>`,
  },

Of course we are not limited to a simple h1 tag, this can be a full HTML document with styles, images and custom fonts.

Finally, a screenshot of the webpage is taken using puppeteer and sent to the client-side.

We add some aggressive caching (public, max-age=604800, immutable) to prevent generating the same image too many times, because the image generation is quite slow and computationally intensive. The way we set up caching is also the reason we pass the query parameters and not just the technology's ID. You might think it is cleaner to fetch the technology's stage and name from the CMS inside the API route, but this makes caching more tricky. By adding all variable elements as query parameters, one URL will always return the same image and we can use the immutable setting on the caching. If the stage or the name of a technology would change on the Tech Radar, we will update the URL, and not update the image behind the URL.

Conclusion

Adding dynamic Open Graph images in Next.js is very low effort, but makes your site feel 10x more professional!