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

@vilvaathibanpb