January 11, 2024

Incremental adoption in gluestack-ui: Build at your own pace

rohits@geekyants.com
Rohit Singh
Software Engineer

Incremental adoption is introducing changes gradually instead of all at once. Think of it as changing the wings of a Lego spaceship to make it look more appealing. Only here do you replace parts of your project with components.
This concept was a major principle behind @gluestack-ui/themed
It would give users the flexibility to adopt specific library components selectively based on their immediate requirements. They could gradually incorporate additional components in a phased and iterative manner if needed.

Incremental adoption in gluestack

Incremental adoption is the one approach that makes a library particularly useful for complex projects or when there is resistance to change. Let's see how gluestack-ui/themed allows for incremental adoption in its architecture.
Tree shakablility
This term refers to the ability to selectively keep only the necessary code, minimizing the bundle overhead of unused code. In the context of gluestack-ui, this is particularly powerful as it allows bundlers to cherry-pick code from the gluestack-ui/themed module, making the library light and tailoring it to suit specific project requirements.
Low-level API of individual components Each component in gluestack-ui comes with a low-level API allowing developers to fine-tune its behaviour and appearance. This level of granular control is invaluable when integrating components into existing projects or adhering to specific design guidelines.

How to adopt gluestack-ui incrementally in your projects?

If you are building a Web-only app:
  • Install React Native Web
  • If it’s a typescript project, install React Native types as well -  npm i @types/react-native
  • Install  @gluestack-ui/themed  and follow the steps mentioned in the  Docs  according to your use case.
If you are building a universal app:
  • Install  @gluestack-ui/themed
Suppose you have a project already deployed on production, and you are using a component library named X-Components.
Since your app/website is becoming popular, you want to provide a smooth and fast experience to all your users, but you want to start today and gradually update by improving your app.
All you need to get started is four steps:
  • Install all the prerequisites (Which most probably you already did).
  • Create a config file named  gluestack-ui.config.ts  and export your config from there or you can use config from @gluestack-ui/config .
  • Use  GluestackUIProvider  and wrap the root of your app.
  • Now you can replace the components that you were importing from  X-Components with components from  @gluestack-ui/themed
That’s it!
Similarly, when necessary, you can replace the components from X-Componentswith components from @gluestack-ui/themed.

What if you had some customizations in older components?

If you had made customizations to the older components from X-Componentsor the design from X-Componentsis completely different from @gluestack-ui/themed, you can still incorporate those customizations into the new components from @gluestack-ui/themed. The theming capabilities of @gluestack-ui/themedallow you to customize the appearance of the components to match your specific requirements.

Overcoming challenges in incremental adoption with gluestack-ui

Matching existing design while styling

Challenge: One of the primary concerns during incremental adoption is seamlessly integrating new components without disrupting the existing design language, since ensuring consistency in the user interface is crucial to maintaining a polished and professional look.
Solution with gluestack-ui:
  • Themed styling:
  • Style overrides:

API changes

Challenge: As libraries and frameworks evolve, API changes are inevitable. Adapting to these changes while maintaining the functionality of an existing project can be a delicate balancing act.
Solution with gluestack-ui:
  • Versioned releases:
  • Migration guides:

Join the conversation

With tons of new features added to gluestack-ui, the library is improving daily. However, rest assured that our roadmap's upcoming features will align seamlessly with the library's incremental adoption principle.
We want to know if you’ve integrated gluestack-ui into your projects. What has been your experience with incremental adoption? Did you face any challenges while adopting gluestack-ui?
You can head to our community forums and social media channels or drop an email (support@gluestack.io) to start the conversation. Your voice is integral to the gluestack narrative, and we can't wait to hear from you.

ui logo
Made with gluestack-ui