Simple Made Easy — Convert XUL to HTML
From the title of this blog, some of you guys might have guessed what is the theme of this blog. In this blog, I will be talking about decomposition of dialogs components and introduction of Redux.
A few weeks back, I was talking about the react dialogs architecture with Yulia(devtools developer at Mozilla) and after a brief discussion, I quickly realized that I need to make the existing react dialogs simpler. Earlier I was thinking that react dialogs were simple enough to avoid Redux but after the discussion, I decided to use it in the react dialogs.
Decomposing React Dialogs
Some of the components of dialogs were handling too many things and that was making them hard to read. I took a step back from code and reworked on the component architecture on paper. I tried to make each component do only a single work.
I was little afraid to break components into too many sub components since, with every new script tag, dialog loading time increases. We aren’t using any bundling tool so I have to make sure that I am decomposing the components in the right amount.
Introduction of Redux
Using React state and having a good decomposed app structure at the same time sometimes increases the complexity of the app. Passing state and methods via props is cumbersome and it also makes code hard to read. Although Redux comes with a lot of boilerplate but the convenience that it provided worth the initial setup efforts. Using Redux, I was able to separate the acceptDialog method logic from React which was something Phillip(Mentor) was also asking for. I think that the dialog components are now a lot more readable and less complex.
New Dialogs — Event Dialog and Task Dialog
I have also created two more dialogs and added redux as well. These dialogs are probably the biggest of all the lightning dialogs. They need a few custom components like date-picker etc. For the time being, we are using the input[type=”date”] element. In Firefox, we can turn on the date input popup by changing a few settings in about:config. Below are the screenshots of Event and Task dialog.
Feel free to comment and share your views. You can view all these dialogs here. Thanks for reading!
Check out other blogs of Convert XUL to HTML project series —
Part 1: First Steps — Convert XUL to HTML
