DEV Community: Wing

Applying publisher subscriber design pattern in javascript

Wing — Sun, 30 Jan 2022 16:01:45 +0000

Problem

MeowLand is ruled by King Whiskers. Recently, MeowLand has experiencing rapid growth. One night, King Whiskers decide that he needs to upgrade the knowledge and skills of the catizens of MeowLand in order to improve the CDP and sustain the growth of the population. He aims to do that by regularly disseminating information from the palace library.

However, he knows that his catizens are busy cats and he does not want to overwhelm them with irrelavant news.

The catizens are largely distributed across this industry:

Mouse hunter
Bird hunter
Comedian
Glam Vloggers
Daredevils

Solution

Looking at the problem, we can form a few premises.

Information that needs to be pushed
Catizens will receive the information
Information will be disperse based on the topic of interest relevant to the catizen
Catizens can have more than one topic of interest
Catizens can change interest and stop update from a particular topic

For this problem, we will look at the publisher/subscriber pattern

Publisher/Subscriber Pattern

The Publisher/Subscriber pattern or the PubSub pattern for short, is a behavioral design pattern. As it's name suggest, it is a design pattern for a subject (Publisher) to notify changes to a list of observers (Subscriber).

Perhaps, you have use the RxJS library, and the term Observer seems familiar. You are right, the PubSub design pattern is a variation of of the Observer pattern and RxJS utilises this pattern. Another common implementation of the observer pattern will be the connect method in Redux.

Observer pattern define by GoF Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. -- Design Patterns: Elements of Reusable Object-Oriented Software

The benefit of implementing an Observer pattern is that two objects are loosely coupled and minimize interdependency between objects. However, because of decoupling, it can sometimes become difficult to ensure that the various parts of the application is working as part of the application can crash without affecting other part of the system.

There is a small difference between the two patterns. For the PubSub pattern, there is a topic/event channel that sits between the publisher and the subscriber. This event system allows the subscriber to be notify of specific events.

Code

Now that we have the overview of this design pattern, we will create the code for King Whisksers.

Firstly, we will create the Publisher class, which will register the subscribers and publish events to the subscribers. For the method subscribe, the argument event will be the key that the subscribers is listening to. In our case, a bird hunter will need to listen to climb trees events.

When King Whiskers will like to publish a climb trees news, we will find the climb trees key in subscribers and invoke the callback register during subscription.

To simplify unsubscription, we will pass the unsubscribe method to be register with the subscribers. In a perfect world, we will create an advanced PubSub which will handle the unsubscripton through the event and the topic but that will introduce a more abstracted code.

To understand how to implement a PubSub with nested arguments, check out Jack Lawson's Mediator.js. Read: Mediator.js

PubSub.js

class PubSub {
  constructor() {
    this.subscribers = {};
  }

  subscribe(event, callback) {
    if (!this.subscribers[event]) {
      this.subscribers[event] = [];
    }
    const index = this.subscribers[event].push(callback) - 1;
    const { subscribers } = this;

    return {
      unsubscribe: function() {
        subscribers[event].splice(index, 1);
      },
    };
  }

  publish(event, data) {
    if (!this.subscribers[event]) {
      return;
    }
    this.subscribers[event].forEach(subscriberCallback =&gt;
      subscriberCallback(data)
    );
  }
}

Next, we will create our Cat class. Do note that, as mention above, in the perfect world, our Cat class will not need to handle subscription.

Cat.js

class Cat {
  constructor(name, interests) {
    this.name = name;
    this.interests = interests;
    this.unsubscribe = {};
  }

  addUnsubscription(keyName, method) {
    this.unsubscribe[keyName] = method;
  }
}

Then, we will set up the PubSub and test if everything is working based on the 5 premises mention above.

catDomPubSub.js

const catDomPubSub = new PubSub();

const cat1 = new Cat('Midnight', ['climb trees', 'hunt', 'weather']);
const cat2 = new Cat('Bear', ['humour', 'weather', 'camera skills']);
const cat3 = new Cat('Smokey', ['hunt', 'camera skills']);
const allCat = [cat1, cat2, cat3];

allCat.forEach((singleCat, idx) => {
  const { name, interests } = singleCat;
  interests.forEach(interest => {
    const { unsubscribe } = catDomPubSub.subscribe(interest, data =>
      printInterestReceived(name, interest, data)
    );
    allCat[idx].addUnsubscription(interest, unsubscribe);
  });
});

function printInterestReceived(name, interest, data) {
  console.log(`${name} has received information for ${interest}: ${data}`);
}

catDomPubSub.publish('climb trees', 'Learn coordination');
catDomPubSub.publish('weather', 'Might rain tomorrow, stay indoors!');
catDomPubSub.publish(
  'hunt',
  'Predicted migration of house rats tomorrow, stay alert'
);

cat1.unsubscribe.hunt();

catDomPubSub.publish('hunt', 'Sharpen your claws');

If we run this code, we will see the following.

Midnight has received information for climb trees: Learn coordination

Midnight has received information for weather: Might rain tomorrow, stay indoors!
Bear has received information for weather: Might rain tomorrow, stay indoors!

Midnight has received information for hunt: Predicted migration of house rats tomorrow, stay alert
Smokey has received information for hunt: Predicted migration of house rats tomorrow, stay alert

Smokey has received information for hunt: Predicted migration of house rats tomorrow, stay alert

Because Midnight unsubscribes from hunt, the last publish of hunt will not show Midnight.

Finally, we can show our product to King Whiskers.

This is the gist of a simple example of the PubSub model.

Is this consider completed? No, because we did not store the notifications in each individual Cat. For example, the cat could be a level of each skillsets that you are keeping track of based on the publications they receive. Upon each update, they will improve their experience require to level up. Till next time, we will explore more alternatives with the Observer and PubSub design pattern.

Cheat sheet to common React terms

Wing — Sun, 30 Jan 2022 16:00:35 +0000

React.js is a Javsacript library that is created by Facebook. The benefits of using react is enabling code reusability, faster development time and higher web performance. If you remember the days of implementing AJAX for page components update, you will find that react makes creating dynamic UI a breeze.

The popularity of React among developers and enterprise as the top frontend framework remains almost unchallenged by other popular frontend framework like angular and vue.

If you are just starting to venture into frontend web development, React is a good place to look onto of your Javascript toolbox. Here is a quick cheat sheet to introduce you to the world of React.

Components

To understand any React codebase, you need to think in terms of components. Think of the web as many rectangles. Even for irregular shapes, you can draw rectangles around them. These rectangles might overlap each other, have a certain padding or margin around them, but they are all certainly derive from a rectangle.

If you want to see the components in actions, the React documentation has a great breakdown on components-based thinking. Next, we will look at the two common types of React components.

Read: Thinking in React -- React documentation

Class

Previously, a class component in React is one of the few way that you can hold state in your components. In a class component, there will be lifecycle methods to determine if the component should update the rendered elements.

Commonly used lifecycle methods are: componentDidMount: invoked when the component is mounted on to the tree componentDidUpdate: invoked immediately after the update occur componentWillUnmount: invoked immediately before the component is unmounted. Invalidating timeres, canceling network request or cleaning up subscription is done in this method

A class component with state, props (more on that later) and methods will look something like this.

class CatFeeder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      batteryLife: 93,
    };
  }

  componentDidMount() {
    this.feedCats();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.state.batteryLife !== prevState.batteryLife &&
      this.state.batteryLife === 0
    ) {
      this.props.switchOff();
    }
  }

  feedCats() {
    this.setState(state => {
      return { batteryLife: state.batteryLife - 5 };
    });
  }

  render() {
    const { catToFeed } = this.props;

    return (
      <div>
        <h1>The ultimate cat feeder</h1>
        <p>Currently feeding: {catToFeed}</p>
      </div>
    );
  }
}

Functional components

As we can see from above, a class component of React can become verbose quickly with a lot of boilerplate code. Another type of component, we can write is functional components.

As the name suggest, we will write functional components as a function declaration or a fat arrow function. Previously, functional components are pure presentational components that do not hold state. However, since the introduction of React hooks (e.g. useState & useEffect in the example below), we are now able to hold state in the functional components. The community at large, seems to have move to favour more in functional components and hooks over class components.

A function compoennt with state, props, will look something like this.

const CatFeeder = props => {
  const { switchOff, catToFeed } = props;
  const [batteryLife, setBatteryLife] = useState(null);

  useEffect(() => {
    feedCats();
  }, []);

  function feedCats() {
    setBatteryLife(prevBatteryLife => prevBatteryLife - 5);
  }

  useEffect(() => {
    if (batteryLife === 0) {
      switchOff();
    }
  }, [batteryLife]);

  return (
    <div>
      <h1>The ultimate cat feeder</h1>
      <p>Currently feeding: {catToFeed}</p>
    </div>
  );
};

Hooks, state, and props

At this point, you might be wondering, what exactly is the difference among hooks, state and props. These are the fundamental building block of React. In fact, I will go further to say that, on most web app, besides building the interface, you are mainly managing the browser state, either persistent (browser storage) or non persistent (web memory).

State and props

As the name mention, state is a piece of state held by the component. It is seen in this.state in the class component and useState in the functional components. React employs a unidirectional data flow. A state in a parent component can be passed down as props in the child component.

Let's imagine that we composite our CatFeeder as part of the component of the whole CatFeederMachine. The parent component CatFeederMachine will holds the isOn state. The methods to control the isOn state is defined in the parent component and pass down to the child components as props.

Hooks

Now that you understand the difference between state and props, we can start to grasp the concept of hooks.

Hooks greatly simplify our component logic and promote reusability of the stateful logic.

Commonly used hooks are useState: store state. As seen above, a useState hook destruct to [state, setState] useEffect: trigger sideEffect when there is a change. Setting state in useEffect might sometimes cause some rendering issue. useReducer: store state and return state with a dispatch method. Is usually used for more complex methods. useContext: a context object that allows the value to be passed around components that are children of the context

Besides the hooks api, you can also define your own custom to share logic between components. More will be shared on a separate tutorial.

These are what I think are good for dipping your toes into React ecosystem. There are many more topics that we have not covered, like folder structure, flux system and common practices and models in React. If you enjoy this tutorial, stay tuned to my future articles on more advanced React concepts.

Enrolling into SUSS at 30 revives my love for programming

Wing — Sun, 30 Jan 2022 15:59:32 +0000

I'm not a full believer of the utility of a university degree. I'm still not. I always wonder how many university graduates are underemployed. And I'm wondering about the percentage of the underemployed who utilises existing government programs to upskill in verticals unrelated to their studies.

How many of your friends still work in a field related to their studies, be it poly or university?

Regardless, I'm now pursuing my part-time BSc Information and Communication Technology (ICT) in SUSS. There are various motivations behind my decisions. One is the fact that we as a society are still very much paper-crazed. Yes, even though we are moving away from that.

The curriculum at SUSS intrigues me because of the practicality of it. Web application development, object-oriented programming, application analysis and project management, to name a few.

I am at a crossroad in my life. I am grateful for the stability of my current job. Still, there is a nagging feeling that there is something out there more dynamic and more fulfilling. Something that makes me eager to start my day, again.

There are still many pathways that I could grow as a frontend developer, like OWASP, PWA, GraphQL, service workers, typescript.

But I can't recall the last time that I sit in anticipation in front of my laptop.

I used to.

I used to love wrangling with the syntax of Javascript.

I used to spend hours on FreeCodeCamp, going through lessons after lessons.

I used to imagine the possibilities of the web.

I used to. That joy of opening up my IDE, and producing lines and lines of codes and marvel at my creation, it is missing.

I don't know why and when it happens. Maybe it's burnout. Perhaps, it's the stark reality in comparison with what I imagine in my mind. I've been working in tech for a good 2-3 years. I still am amazed at how fast technology is advancing. I still love a good read on how technology and algorithms solve problems and improve people lives.

It's human to crave progression. Some people set their goals to build a family. While others set their sights on financial goals. In preparation and in hope for something bigger than what I am today, I make a target to get a degree before I'm 35.

I have usually enjoyed the acquirement of knowledge. Still, I'm pleasantly surprised how working on the assignments give me joy. Even though there is a deadline to meet, even though some fellow coursemates feel stressed out, I rejoice in my refound passion for playing around code.

I am fortunate to find the pace of the modules manageable as I have some background knowledge. I love the vibrancy of the chat group when people in it discuss programming even when I don't always fully participate in it. I guess I miss the feeling of being in a community, though programming is a lonely task to undertake.

December will mark the end of my Year 1, Sem 1 and I look forward to more advance classes in future.

Mathematics: My system and foundation learning journey [Day 1-3]

Wing — Sun, 30 Jan 2022 15:28:07 +0000

This week, my year 2.2 has finally started. The 2 modules that started this week are:

Basic Mathematical Optimsation (2 lessons)
Mathematical foundations for data science (1 lesson)

Prior to the start of the lessons, we are given access to our notes and assignments. Having only the knowledge of O-level Additional Mathematics, mathematics modules are the ones that I fear most for the whole of my university life, at least for the modules that I have taken so far.

Looking through the notes, I'm not sure if they are full of cryptic wording or it's just me, I couldn't quite grasp the concepts simply by reading it. Still, the assignments seem pretty straight forward, the type of questions in which there are definitive ways of solving. It's straight forward on the premise that one has already grasp the methods of application.

Honestly, I am looking forward to a module that will teach us the concepts of proofing and deriving solutions. Though I appreciate the applicability of how these courses are structured.

Both the foundations and optimisation course starts off with linear algebra. The foundations course seem to also venture more into the programming side of thing.

I'm glad that I've taken the foundations with the optimisation course as it does help me to fill up the gap that the optimisation course assumes knowledge on.

We start off nice and easy, with the following topics:

Vectors and matrix
Various operations on vectors and matrix
Programmatic way of dealing with vectors and matrix

These are the overlapping topics covered by both of the courses. Almost at the end of the last 2 of the 3 lessons, I am attacked by the z monster. I wonder if it is my brain working hard to absorb the concept or if it is just a tired day for me. Anyway, side note for me to drink more caffeine when I have to attend these classes.

While the foundations course take 1 lesson to cover the above, albeit in greater detail, the optimisation course squeezes in more concept for the past 2 lessons.

In the first session, the additional topics are being covered:

Gauss Elimination method
LU decomposition
Matrix iterative method

We are only taught how the methods work. While novel to me, I'm pretty sure these just take a few practices to get the gist of it. The good thing about SUSS is that all of our modules come with accompanying textbook, be it e-textbook or physical textbook. It could be interesting to delve into more details to understand the why/proofs of these methods.

To be honest, it is not until the second lecture of optimisation course and the first lecture of foundations course that I see a good reason to learn these concepts. I have a vague idea that these concepts are applicable in machine learning and also in solving linear programming problems. Though, there is nothing too concrete in my mind yet.

In the second session, we are given a glimpse of the application of linear algebra via linear programming. It touches briefly on

Linear programming model
Expressing the model in canonical and standard form
Solving the model graphically
Various terminology related to linear programming

The main motivation of taking a data science minor and taking up mathematics elective is that I want to trade better. I want to be able to understand the derivatives analytics book that is full of mathematics and python. The python portion is easy to understand, but for the mathematics portion, I'm pretty much stuck to googling each symbol that I come across.

According to my notes, this optimisation process can be model a range of problems from airline scheduling, to least-cost manufacturing to distribution of goods. Perhaps, as a starter, I could formulate a risk-reward problem. Or most probably, I should read more into linear models and finish these modules first.

5 difficult things about being a self-taught developer

Wing — Sat, 28 Mar 2020 10:14:18 +0000

Over the years, there has been a huge interest in learning programming. Tech jobs remain as one of the top-paying jobs in the world. And in Singapore, technological skills shortage remains a major issue for Singapore employers.

If you have the relevant technical skills and portfolio, you could enter the technological industry. As a self-taught developer myself, I find that there are many channels to look for jobs. Demand for IT professional continues as Singapore is position at the frontier of the technological frontier. With the increase in demand for skilled IT professional, many companies are fighting for a limited amount of talents. In an interview conducted by Asian Correspondent, it is reported that nearly 9 in 10 Chief Information Officers find it difficult to find qualified IT professionals.

My formal academic background is in aviation management and services. However, throughout my decade of working life, my choices of career have mostly been a result of being self-taught. Personal training, group fitness coaching and web development. While having the time and autonomy to explore my directions in my early twenties, the self-taught journey could have been smoother. Here are 5 things that I wish someone has told me when I first started my self-taught journey.

5. Learn to manage time

Chances are when you first decide to embark on the self-taught journey, you are probably doing it alongside your full-time job. If your end goal is to find a job as a developer, it can take anywhere from months to years.While learning, it could be tempting to put the notion of learning programming on the back burner and spend time relaxing. When I freelance, sometimes I tend to spend my day watching Netflix during standard office hours.

We are born to move away from pain and towards pleasure. Programming can be sometimes an agonizing endeavour. Sometimes what seems to be an easy problem turns out consuming half of the day. One of the productive tools that I enjoy using is the Pomodoro Technique. The technique uses a timer to break down the work into intervals. For example. you could set your working time to 25 minutes interspersed with 3-5 minutes break. After 4 rounds of 25 minutes, you could take a longer break. Understanding your energy level throughout the day and matching that to the work you allocate for yourself in that period of time help to boost efficiency as well.

4. Not knowing how to start

"What language should I learn?" is not the question to start off asking. I know I use to ask this question when I first start out.

The question is not what language but what do you hope to achieve. Essentially, certain concepts of programming cross over to various programming languages. If you are just trying out programming, ask yourself, what do you enjoy doing. Do you prefer to design? Do you like to build things that you can see? Do you like logic? Do you like working with data? Essentially, you will narrow down your preference to front-end development, back-end development or database development, for a start.

From there, personally, I will choose to find out what are the easier languages to initially pick up. The idea here is to learn the fundamentals and basic concepts of programming. In the beginning, it is about enjoying the process of solving a problem. One website that I use is www.freecodecamp.com. Once you have more confidence in programming, you can proceed to learn other frameworks, computer science fundamentals, data structure and algorithms, etc.

3. Lack of structured system

This is similar to the point above. It is very easy to find basic programming courses online. But you don't know what you don't know. When I was working in the fitness industry, I thought I have gained a good basic understanding of the intricacies of the human body: the anatomy, physiology and biomechanics. It isn't until I enrol into a Sports Science bridging course to realise that the scope of Sports Science goes deeper into how the movement begins from chemical and electrical impulses.

I enjoy the classes. And I love the social setting. But I prefer to learn as per my own pace online. In order to ensure there is enough coverage, you can look into the curriculum of a program and structure your own learning plan. It will help to validate this with an industry mentor to make sure that you are on the right track. In fact, nowadays, technology is moving so fast that people ended up needing to be self-taught in one way or another. But with the internet, there are many good online courses, which could even provide you support with an experienced mentor. One of them being Codecademy.

2. Lack of feedback loop

Probably, the main fallback of being self-taught is that there are no immediate reliable sources of feedback loops. If you stand on the giant of the shoulders, you could achieve much more faster. Even as a front-end developer, sometimes I find it confusing to navigate through the various tutorials all trying to achieve the same thing. Honestly, why are there so many ways to write webpack with React.js? And we haven't even gone into server-side rendering, which, the last time I try, the code shatters into a blitsy allure.

However, there is a web solution for this as well. Codementor is an on-demand marketplace to connect with expert mentors. If you prefer face-to-face, I find the developers in the developers meetup group are usually more than willing to help. And chances are the coding dojo and coding group usually have senior developers around to help you out.

1. Maintaining self discipline

Perhaps the hardest of it all is having the motivation and willpower to show up on the desk day after day, consistently. There are going to be days that are going to be difficult. There will be days when you feel like this is all going no where. But you will only get to know the results if you work on it consistently for months and even years. But like what the late Steve Jobs says, "You can't connect the dots looking forward; you can only connect them looking backwards."

There is no hard and fast rule when it comes to maintaining self-discipline. For me, I work best when I know there is a deadline. Or when there is a structure to follow. I also find out that I work well when I'm not at home.

Conclusion

These are the 5 difficult things that I encounter during my self taught journey. Learning programming can be a lonely endeavour. At times, it can seem like there is no progress made. For the past 3 months, I take a break from learning front end development and reevaluate my path. One year back, my goal is firm, find a job as a front end web developer and move onto a full stack developer role.

When I quit my previous full-time job, I start weighing in on my skillsets: communication and coordination definitely top the chart. While there are jobs that are approaching me for that role, I find myself missing the analytical work of employing design thinking and programming during these 3 months of programming hiatus. After going for a few rounds of interview, contemplating my goals in 5 years' time, researching for alternatives and asking for answers that I would probably never get, I'm back on track again.

Handle data heavy application development on frontend

Wing — Sun, 15 Mar 2020 09:11:35 +0000

Are you frustrated by changing data structure? Or upset about deeply nested data that increases the complexity of frontend development? Don't. Don't be emotional over code.

Jokes aside, modern day applications usually have to deal with data that is nested or relational in nature. For instance, when we use Redux, we could use normalizr to store a normalized state structure.

The increase complexity of data structure makes it tedious to develop. It will also cause bloat to the client devices. Frontend is meant to be light-weight and fast. Especially since we have to cater to mobile devices, we want to be careful in handling our data. The expensive rendering and computation should be delegated to the backend servers, which is a more controlled and scalable environment.

Read: Backend-in-the-frontend: a pattern for cleaner code -- Hackernoon

Even so, due to business requirements, we as frontend developers might have no choice but to parse complex data structure or data structure that is not optimised for the UI.

We'll be using contrived example to get the point across. Let's take a look at the following JSON object.

The requirements

Imagine if you have to create a data table for a list of dogs showing their favorite food and the supplier. Why that will be required, I don't know. Maybe, the software users are pet shop owners and they want to have an overview of the suppliers whom they could order the most items from and possibly negotiate a better deal.

So back to the data. Let's say you are using a datatable plugin. The API of the datatable requires you to specify the dataKey for each column.

Then comes the product owner, he has requested an additional requirement to show all the suppliers in one column.

So right now, you have a few things to solve:

You need to be able to access a nested dataKey, favourites.food.
You will need to access all the supplier.name in the array and concatenate them into a string for the data column.

If your table is just simple presentational logic, and if the datatable allows dataKey definition with dot notation, i.e. favourites.food, it will be fine to simply use the dataKey as it is. I believe in keeping things simple as it is, until proven otherwise.

What if, throughout the app, there are multiple logic that needs to access this data? Are you going to get the dot notation in each cases, even if they might be deeply nested?

Or because of fast changing business requirements, the data structure from the API changes frequently? What will you do to minimise the disruption of the data object?

For me, I will transform the data object for use throughout my frontend code, so that the data integrity of the object in the frontend could remain even when the data structure from the API changes.

Learning from the giants

I have been using react-jsonschema-form by Mozilla and react BaseTable by Autodesk. I love how easy it is to define the data fields and data columns respectively. Using JSON object simplifies the parsing of the data and make it obvious to change the dataKey if the data structure changes. Both of the plugins also keep the data parsing logic loosely coupled to the UI rendering logic.

If you have not used the plugins before, here is a sample code of how it is being used.

React-jsonschema-form

React BaseTable

My take is, you can roughly guess what each the plugin API do.

The key formData and data is used to feed the data into the plugin. The schema and columns instruct the plugin on the dataKey to look for the data. The uiSchema and cellRenderer is where you could define any customisation to the UI rendering portion.

Back to the drawing block

With the above inspriations, I decide to contain all my data transformation through a json object. For lack of a better term, we will refer to this data object as schema.

Using the requirements stated above, we determine that we need to build the following columns in the data table:

Id of the dog
Name of dog
Type of dog
Cost of dog
Supplier

For us to be able to work with datatable easily, we want to transform our data to a single layer data object that we could pass into our datatable easily.

This is my desired input for the datatable.

This is what I want to define for my schema in order to achieve the input above. Note, in simple cases, it is easier to parse the data directly. However, if we want to conditionally render the schema and combine different schema, I find that having a data schema like below make it easy to read and extend my data structure.

./schema.js

All I have to do to transform the backend data to my desired input is this.

./feData.js

More interested in the code? Find it here

Breakdown

There are a few premise that this data adapter is designed on.

We can extend the schema easily.
We can define a default return value.
If the schema cannot find a dataKey, it will return the full data.
If the schema did not find a key, it will assume the usage of dataKey as key.

The concept of the dataKey and key is similar to the one used in base table. A renderer will allow you to compute any relevant data. If you need to build a data that are in different levels, you just have to get to the highest level of the data structure and parse it accordingly.

What makes react json-schema-form a powerful plugin is that the templates, widgets and plugins of the form are stored in an object and parse accordingly. With that principle in mind, I created a buildSchema helper function that will return the whole schema with the data and user-defined value.

The schema output will map the schema with the existing data.

While it might look trivial, by defining a defaultSchema parameter, you can add any uiRenderer or extra key, value pair to be added to the schema. Returning a schema object will also help if you have custom UI rendering logic for different key. In your application, you will be able to define the UI rendering logic in the json schema. To use it in your UI component, you just have to map through the schema like this

Conclusion

That's it. This is how I handle nested data and introduce a data adapter to a data intensive application. Having a schema thaat I could quickly refer to contributes to making my data easy to reason about. This reduces the cognitive load for me when I'm developing. The added benefit of easily adding a uiRenderer allows me to build flexible custom UI. Want to render it as row? Want to give it a different font size? With this structure, it is easy to pinpoint the exact dataKey to update.

What are some techniques that you use to reduce the complexity of your project? Share with me below.