A couple of weeks ago, I posted about how I’m porting a Flex app to JS/HTML/CSS. It’s a pretty complex app that I’ve been working on for a number of years, and it’s sure to require many months to complete. I know that I’ll learn a lot in the process, and I hope to share what I can.
Right now, it looks like my technology stack will be mainly React, TypeScript, and Semantic UI. Obviously, I’m sure to eventually pull in some additional libraries, like React Router for URL routing, but those first three are the basic foundation.
I recently created a semantic-ui-react-typescript-examples repository on Github. I wanted a place to store some of the smaller scale UI prototypes that I’m building while I figure everything out.
I won’t go into detail about every example here, but let’s take a moment to look at the Todos example.
This one, in particular, shows many of the things that you’d expect to find in a framework/library that you’re evaluating when porting a Flex app.
It displays data in a list, and items can be dynamically added and removed from the data provider.
The items in the list are rendered with a custom component, similar to how lists in Flex support custom item renderers.
The number of items is displayed as text, and it gets updated dynamically. This is similar to Flex’s data binding feature.
Right now, you’ll find five examples in this repository. Mostly I’ve been trying out some layouts, but my most recent example hooks up React Router to some tabs to support browser history with the back button. I still have a lot to explore, so I’m sure that I’ll be filling this repository with more examples in the future.