Issue #3 – React Web/Native – Server Driven UI

Issue #3 – React Web/Native – Server-Driven UI – Cloud Gaming

<1/> React Web vs. React Native

This week, we look at an article that explores the differences and similarities that React Native and Web have with each other—touching on the point that the transition from Web to Mobile may be a low friction one “but should not be considered frictionless.”

‍

Let’s first get into the differences:

‍

• Underlying Platforms. React for the web will render your elements to HTML (Div). React Native will render to whatever elements are native to the device (UI Views). Same with the APIs made available for each framework (LocalStorage vs. AsyncStorage).
• Different Styling mechanism. While React Web uses CSS for styling, React Native provides a styling API that transforms your styles into native styling calls.
• Different navigation paradigms. Each treats what you consider a page differently (stacks vs. routes).
• Different Gesture and Animation Tools. DOM events like onclick or mousedown aren’t made available to you in a React Native application.
• Different Deployment Strategies. While publishing to the web is relatively easy, mobile deployments are a more regulated process, requiring you to either go through Apple or Google.

‍

With the differences, you know what to expect when making the transition. However, it’s the similarities that make React Native & Web a solid relationship when building cross-platform apps:

‍

• React. The best of React is made available on both frameworks (JSX, components, lifecycles, etc).
• JS. Including everything, the ecosystem has to offer, like React Query, date-fns, etc.
• Bundling and Tool. Metro (the React Native Bundler) offers a lot of what makes developing on the web does (Like hot reloading). Both frameworks allow you to add linting, static typing and test runners.
• Flex-Based Styling. Although they might use different styling APIs, with React Native adopting Yoga Layout, Flexbox works pretty much the same for both Web and Native.

‍

The conclusion is “React Web and React Native are not the same.” They may be React and JS under the hood, which gives them that incredible dev experience. But in the end, they differ in several ways, which gives each “a different set of constraints.”

<2/> Airbnb’s Server-Driven UI approach

With over 150 million users and 5.6 million active listings worldwide, Airbnb can boast having a world-class engineering team. In this post issued by their engineering team you can read about how they have built a Server Driven UI system that makes shipping out features across web, IOS and Android a lot faster.

‍

Airbnb avoids implementing unique complex logic across each of its clients. Instead, relying on a single backend response to drive UI updates and make it a unified process. The platform that manages it all was given the name The Ghost Platform (GP) which is a unified UI system that enables developers to serve server-driven features to their native applications.

‍

• A single Graphql schema makes it possible to share logic across all its platforms and is the reason why an architecture like this works.
• GP responses are split into sections and screens. Where sections define the more detailed components of a page and screens defining the general layout.
• Bringing it all together, a GP response which is basically a JSON body containing rules and actions is handled by the client and rendered uniformly across each platform.

‍

The Airbnb team has been able to focus most of their attention in one area. Bringing a unified frontend experience across all its platforms for all its users. A lot of the concepts that make up GP can be used in solving problems on the applications you build.

<3/> Inside the console

It turns out the benefits of the cloud also extend themselves to game developers. GameLift is a managed service on AWS that gives developers scalable session-based multiplayer game servers in the cloud.

‍

GameLift takes your game client (Unity, Unreal, etc.), connects it with your backend, then puts it into a matchmaker. Which automatically scales and connects your system with a fleet of other servers hosted around the world.

<4/> Geeking it up

DoorDash’s move to CockroachDB

Watch a lead engineer from DoorDash explain how and why the company now uses CockroachDB to deliver last-mile logistics at scale.

Serverless Stack

If you’ve ever looked at Terraform, you see how this service is like the Terraform for Serverless apps. Serverless Stack is a collection of npm packages that allow you to configure permissions, add patterns, and deploy serverless apps a lot faster and easier.

Google’s VRP

Ten years after launching the program, Google has launched a new platform that makes it easier for researchers to report bugs, get rewarded, and contribute to the community.