My Digital Garden with React
Design Extensible React Application Architecture
I started to build a digital garden for my learning journey. I try different components, layouts, algorithms, stylings to improve my front-end skills. Making a digital garden has some difficulties and challenges. Every experiment (plant in my digital garden) must be abstracted and encapsulated, and also reusable.
In the digital garden (https://onurdayibasi.dev/), I build different UI experiments and improve in time. How are experiments (plants) will independent and expandable?
Before telling architecture, I want to explain some terms;
Digital Garden
The phrase “digital garden” is a metaphor for thinking about writing and creating that focuses less on the resulting “showpiece” and more on the process, care, and craft it takes to get there. (Joel Hooks)
Extensibility
Extensibility is a software engineering and systems design principle that provides for future growth. Extensibility is a measure of the ability to extend a system and the level of effort required to implement the extension. (Wikipedia)
Quick Look
In the digital garden, I develop lots of experimental mini-apps which can reuse in other mini-apps. For example, the below image is the first page of my digital garden. We need two types of components to build this page: "NavigationCard" and "FilteringButtons."
I don't start to develop this page directly. First, I ask some questions.
- Is NavigationCard and Filtering buttons are reusable components?
- How can I store their states?
- How can I develop generic?
After answering these questions, for example, if I answer that these components should be reusable, I write a story/use-case. First, I open an experimental sandbox for the NavigationCard mini-app, which abstracts other apps. Then I write a story.
I need a NavigationCard which holds title, tags and published date. When user holds mouse on it. It can be hover. When user clicks this navigation card it will redirect user to an internal or external page.
First, I prepare test data and render with react component and generate a simple NavigationCard result.
In our abstracted sandbox, I try all possibilities and cases of components. In the below image, you can see internal links and external link cards
We apply the same technique to FilteringComponent. First, we create our sandbox and think about how to make an example.
After all, we can use NavigationCard and MultipleOptionSelector on our Main Page. We should think of every component separately. The Main Page only knows all the logic.
And before NavigationCards render, they are sorted and filtered according to OptionSelector states.
Above part, I tried to tell how I'm thinking when developing something new. But in the background, we need some architecture that provides us with an abstracted sandbox.
In Background (Architecture)
We need an abstracted sandbox, so our mini-applications don't affect each other. Below, architecture tells how I develop my dynamic environment.
Dynamic Module Loader
Every module(mini-app/experiment/plant) should load lazily when the user clicks the navigation cards, and redirect the modules will load after that time. But How?
React Lazy provides to load components Lazy with Suspense wrapping. So first, define your routing with React Lazy.
First, we define routes data and give all routes to the app. I change the routing code with lazy import. After changing lazy, there is no need to define pages static because Route can also take components programmatically. Apps render details when users click navigation cards with related mini-apps
Routing Space
Evey mini-app needs its own routing space. This space is only known and managed by mini-app. But How?
Get Onur Dayıbaşı’s stories in your inbox
Join Medium for free to get updates from this writer.
For these, I developed a Dynamic Nested Page and Route Generation example to create your pages.
I use React-Router v5 routing match. Path and Route. Capability to define sub-routes in mini-apps.
Store Space
I use redux to manage client-side app states. In our case, we need to separate all modules stored with each other. For example, last month, I developed 4 or 5 different GitHub Explorer mini-apps and their needs to store GitHub repo information. When we look at the Redux Store, all modules will separate.
When a user clicks a navigation card, the related module loads the GitHub tree to GithubRepoMap.
For identifying RepoMap, we need to pass module identifier to reducers. I use redux "action. meta" to give identifiers to reducers.
In Plain English 🚀
Thank you for being a part of the In Plain English community! Before you go:
- Be sure to clap and follow the writer ️👏️️
- Follow us: X | LinkedIn | YouTube | Discord | Newsletter
- Visit our other platforms: Stackademic | CoFeed | Venture
- More content at PlainEnglish.io
- Submit content to In Plain English
