MY DIGITAL GARDEN WITH REACT
Make React Apps More Dynamic
Write your frontend app in a more flexible and configurable manner. So you can reuse lots of components without changing the codebase.
I want to share my experiences in my Digital Garden in these articles. You can also read the first article (Design Extensible React Application Architecture)
This blog is about dynamicity. Dynamicity means the result business codes and components generate deferred. When someone uses the app, code files load dynamically and combine with meta-data and build application and business logic.
For clarity, I will give the following static, dynamic usage examples;
Function Calls
Static Function Calls
import confetti from canvas-confetti
confetti()Dynamic Function Calls
(async () => {
const { default: confetti } = await import('https://cdn.skypack.dev/canvas-confetti');
confetti();
})();Component Render
Static Component Usage
import Calculator from awesome-react-calculatorreturn (
<>
<Calculator />
</>
Dynamic Component Usage
const Calculator = React.lazy(() => import('https://cdn.skypack.dev/awesome-react-calculator'));
return (
<>
<React.Suspense fallback={<div>Loading...</div>}>
<Calculator />
</React.Suspense>
</>
);As seen above, static code development is more straightforward and readable. We download npm packages to local, then build and bundle with webpack.
tada application ready for usage.
Question: If static code is so successful in Web Application development, why should we build a dynamic infrastructure?
Answer: We sometimes need more flexibility at runtime. And want to automatize the generation of UI and business logic.
- Less Code: Because we can handle different use cases without coding with configuration
- More Reusable: Dynamic code with the structure you can automatize generation of components and code without developer (No-Code)
- More Flexible: You can give some editors, so Domain Experts designs their system quickly.
- Future Tech: Web technologies are more distributed and available for remote use every day. Cloud, SaaS, CDN, Authentication Services, DB Services, Workflow Services, Mail Services, Billing Services are all available online.
We can improve the developer's environment to be more flexible. In the future, maybe Web Application developments will be similar to game development editors such as Unity, Unreal, etc.
Like many game developers, web developers do not need HTML, CSS, JS, React, etc. For example, many Unity or Unreal Editor users don't know 3D engine details; they focus on editor usage and game design.
I convert my infrastructure to Static → Dynamic structures whenever possible in my digital garden.
I apply these transformations in different areas
- Page Management & Routing
- State Management & Messaging
- Component Generation
- Backend Integration
- Layout Management
- Component Styling
- etc.
The below picture displays WebApp basics parts which we try to build dynamic.
A. Page Management And Routing
In Web App development, we first design pages and URLs, then we think about transitions.
In the following application, you can see the creation of dynamic pages and dynamically assigning redirect buttons.
Demo: https://onurdayibasi.dev/dynamic-route2
You can see the links between the pages and these pages on the Storyboard in real-time and see the application structure you have made from a bird's eye view.
As you can see from the image above, we enable them to do the following skills without developing any code (for citizen developers)
- Dynamic Page Generation
- Dynamic Routing
- Dynamic Navigation Button Generation
So how do we perform this Routing phase? What is the structure of the routing mechanism?
Demo Samples;
- Suspense, Dynamic Loader: https://onurdayibasi.dev/simple-calculator
- Error Boundaries: https://onurdayibasi.dev/error-boundary
- Main Navigation: https://onurdayibasi.dev/
- Not Found 404 Error: https://onurdayibasi.dev/abcde
App Routing: holds the dynamic URL paths and routing configurations
routes.barchart: {
path: '/barchart',
title: 'Bar Chart',
publishDate: '2021.10.25',
moduleName: 'vis/chart/BarChartPage',
},- Routing Suspense: During Loading State, when a React Component load Lazy, the Screen displays fallback component
<React.Suspense fallback={<div>Loading...</div>}>- Error Boundary: When page or component rendering fails, ErrorBoundary handles throw an error, and the Screen displays fallback component
<ErrorBoundary fallback={<p>Page Rendering Exception</p>}>- Switch. It is unique in that it renders a route exclusively. In contrast, every
<Route>that matches the location renders inclusively. Consider these routes:
<Switch>- MainNavigation: Home Page navigation. Root path generates MainNavigationPage and its static.
<Route exact path={'/'} key={'main-navigation-page'}>
<MainNavigationPage />
</Route>- DynamicLoader and LazyLoad: It loads pages dynamically
{Object.values(routes).map(el => (
<Route exact={!el.nested}
path={el.path}
key={el.path}
component={React.lazy(() => import(`...`))} />
))}- 404 Error Page Handling
<Route path={'*'} key={'404-page'}>
<NotFound404Page />
</Route>B. State Management and Dynamic Stores
I use Redux for State management in Digital Garden. Redux-Thunk, Redux-Saga, Redux-Promise, etc., middleware exists.
Get Onur Dayıbaşı’s stories in your inbox
Join Medium for free to get updates from this writer.
Flux Architecture
Add Middleware(Redux Thunk, Promise, Persister, Websocket.) to Redux
Below components are wrapped by Container (HoC- High Order Component structures for communication Redux Store, History, and WebAPI.
Let's take a closer look at how the components in this structure communicate with their surroundings. around a component
- DOM updates
- URL updates
- Backend Integration
- etc.
We use containers to reusable components in existing projects and keep them away from business logic. So we have options to use the same elements in different areas.
As a reflection, we need to create one or more static containers for each component. So we must manage lots of container component which holds different business logic.
To decrease container component codes. How can we make it configurable and dynamic?
Below DynamicContainer will automatically run the business logic according to assigned props, stylings, and events metadata
In the example below, you can see how we can create Store linked components on the fly with DynamicCounter and DynamicForm structures.
Demo: https://onurdayibasi.dev/dynamic-counter3
D. Dynamic Backend Integration
If we want our application to integrate with the backend and pull data dynamically, we need Backend Services, but I don't want to deal with Cloud and Backend, so I use MSW (Mock Service Worker) to mock the backend.
I want to give two examples about this topic.
- Extracting city, district, and neighborhood data with API and assigning the desired Dropdown components as a source
- Binding fetched user information to the DataTable.
Fill Dropdown With Cities, Districts, Neighborhood
Fill DataTable With Users Data and Hide Some Column
Demo: https://onurdayibasi.dev/dynamic-data-table-binding
We need many dynamically generated components, editors, and code units to create such a structure.
BindedFactory: We need to create dynamic features, so we write BindedFactory type to create business logic connected with common mechanisms such as Redux Store and React Router. For Example, CounterFactory, PageFactory, RoutingFactory, FormFactory
DynamicStore (Container+Comp): DynamicStore components created by BindedFactory consist of 3 layers.
- Dynamic Store (Blue Layer): It provides an integrated structure with Store and History components.
- Programmable (Yellow Layer): The layer knows how to use the 3rd Party Components according to its metadata.
- 3rd Party UI Component Lib (Green Layer): 3rd Party UI Component library layer. (PrimeReact, Material UI, Ant Design, Semantic, etc.)
Editor: These are the editing screens with the config parameters where the developer can define the business logic and component-related configurations from the UI.
E. Dynamic Layouts
Web Application pages may have different layout requirements. In Dynamic Layout, our goal is to implement reusable and configurable Layout structures with minimal effort.
Make Your Own Layout
- SimplePageLayout: https://onurdayibasi.dev/
- DemoInfoPageLayout: https://onurdayibasi.dev/option-selector
- DraggableSideBarLayout: https://onurdayibasi.dev/rerender-with-use-memo
SideMenuLayout
Dashboard Layout
Game Layouts
Classic Game Boards: Every game has a layout. Some of them are great layouts like (Tetris), and others are small(tic tac toe). All the old-style 80s 90s games use pixels for designs. In this example, I tried to build different games layouts.
Demo: https://onurdayibasi.dev/classic-game-board
Scrollable Game Boards: Some of the game layout slides are x-axis or y-axis. We define this kind of games Side Scrolling Games (For example, Super Mario) or Vertical Scrolling Games (River Raid)
Demo: https://onurdayibasi.dev/scrollable-game-board
Smart Layout
SmartLayout is a flexbox that users design on the runtime and persist for later use. It also assists users in creating beautiful page designs.
Demo: https://onurdayibasi.dev/smart-layout
Let's continue reading 😃
You can find similar samples and writings at this link if you like this story, please 👏👏 and share.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.
