PROJECT
React + TypeScript
July 22 2019
Love at first site
As our organization moves away from old discontinued web frameworks like YUI and Model-Glue, adopting React for newer front-end projects was an obvious choice. For one of these projects I had to rewrite a single view app using React. The application is fairly simple. it visualizes real time circuit data for a bunch of our customer networks. It’s a convenient tool to detect if any circuits are down at any point in the day and it looks awesome on a big screen. I absolutely enjoyed learning React while rewriting this page. The official documentation is amazing and Dan Abramov’s explainer blogs are just..
I love the framework because it flows so nicely. The DOM elements are in close proximity with their interactive logic and state which makes handling events easier by an order of magnitude. Here is a before and after of the webpage:
Old Worldview made using YUI and Model-Glue 🥶
New Worldview made with just ReactJS 🥳
Moving Forward
I definitely want to improve on how I can manage state between components more efficiently. Looking at how well TypeScript works with React. It is time I finally start learning it in tandem with intermediate React concepts. For now, I will create some simple UI components from the ground up using TypeScript and React and eventually will start adding complexity by integrating state management libraries like Redux, MobX, etc.
Date-Picker Component
While rewriting worldview, I found out how difficult it is to get a consistent date-picker input across different browsers. Safari still doesn’t even have a native date picker input element for MacOS in 2021 😱. For worldview, I chose a third party react component package to quickly ship the new site to prod but I wanted to create a date picker myself. So here is my attempt at it. For state management, I just created a Calendar model class that keeps track of the current month in the view, the selected date and a list of Day objects that need to be shown in the current month’s view.
Design Credits: Jakub Antalik on Dribbble