Simple Made Easy — Convert XUL to HTML

Arshad Khan
Jul 28, 2017 · 3 min read
Image for post
Image for post
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

Part 2: There is a lot to see — Convert XUL to HTML

Part 3: Simple Made Easy — Convert XUL to HTML

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store