MonoComponent

One Design System for both React and React Native

@vilvaathibanpb

- Vilva Athiban P B

Javascript Developer @ Omio (GoEuro), ex-Sixt

I teach @ JsFactory.in

Passionate about Browser

Open Source is

I code on JS, React, GraphQL

About Me

Are you a Startup?

It's 2019 already, and Online presence has become almost mandatory for any and every business

Online Presence - Website (Optimized for mobile), Android App and iOS app

Problems in Online Presence...

As a startup, you need things moving fast

As a new Product, there could be so many changes in terms of features

It's challenging to build separate teams for Web, Android, and iOS and maintaining consistency in the product across platforms in a startup environment

These cost a lot to the company in terms of money and reputation, especially during early stages.

Solution?

Mono Components

What is Mono Component?

Mono Component is an ideology where we build a single component and reuse it both for React (Web) and React - Native (iOS & Android) without changing a single line of code.

We will see how to build one in a while...

How does it solve the Problems?

A single code base for Web, iOS, and Android, thereby enabling easy maintenance and consistency across platforms

A slim and quality team (Javascript) will do the job. No need to worry about hiring many people to build three different teams.

This makes the development faster, thereby pushing your product ahead

Live Coding - Fingers crossed

Steps to build MonoComponent Application

Setup React native application with `expo`
Setup React application using CRA
Install styled-components in React native application
Merge React Application to React native application
Test their working before proceeding
Change the main entry point and group App into `src`
Create the Design system
Implement MonoComponent
Enjoy your life

( For my reference, have a bad memory )

Cons of MonoComponent

UX Design has to be made to satisfy all platforms
React Native doesn't support CSS yet
All the basic components have to be created and used from the Design system
Create multiple versions of a component in a few edge-cases
Few CSS properties cant be used in React Native

Conclusion

Though there are few minor cons with this approach, Mono components are highly useful and profitable for scaling startups with small teams. The learning curve for developers are also very low in this approach.

Thank you

Any questions, Reach out to me

Feedbacks are much appreciated to develop myself