For almost ten years, I’ve worked on one of my side projects, an app named Logicly. It’s an educational tool for teaching computer architecture and digital logic. It started out as a little SWF demo on my blog that I built because I remembered one of my professors in college wishing for a better way to demonstrate how logic gates work. He had been using some random Java applet that he found on the web, and he was looking for something with drag and drop and more bells and whistles. Eventually, I realized that there was enough interest in this basic version of this logic gate simulator that I had made for fun, and I could actually make it into a real product for students, teachers, and schools. Today, Logicly is used in classrooms around the world, and it earns me a modest supplementary income.
Logicly is currently built with Apache Flex and Adobe AIR. It also has an online demo that runs on Adobe Flash Player that you can try in your browser. With the official end-of-life for Flash Player approaching in 2020, it’s time to migrate Logicly to something else. While I could continue to provide Logicly as an Adobe AIR application beyond 2020 (and even if Adobe decides to discontinue AIR too, captive runtime could keep it going much longer), there are good reasons to go with some other technology for Logicly.
The online demo is the best way for potential customers to try Logicly. There’s nothing to install, and they don’t need to leave their web browser. I could get by with only the free trial download, but I’d rather avoid adding any extra friction in the process, if I don’t need to.
With my goal to provide an Electron application for desktop and an online demo that continues to run in the browser, I now need to look into my options for which language to use and the libraries and frameworks necessary to build my application.
First, let me get this out of the way: Even though Logicly was originally built with Flex, I won’t be using Apache FlexJS.
Over the last couple of years, I put in hundreds of hours contributing to FlexJS and promoting it. I believe ActionScript and MXML are wonderful languages that could have evolved and thrived on the web without being tied to a browser plug-in.
However, considering everything I put into it, I’ve reached a point where this work only makes me feel tired. With my other projects, like Feathers, I get these boosts of motivation and endurance as I see people build cool projects and push things beyond where I ever imagined. That’s what keeps me going for the long haul! With FlexJS, I don’t really get that feeling anymore, so I think that means that it’s time for me to move on.
It’s been quite an experience, though, and I learned a ton about compilers, video editing, marketing, and more. I wish my fellow contributors well on their continued journey!
let keyword for proper block-level scope, and arrow functions to propagate
this are among my favorites.
I’ve looked at many UI libraries for JS/HTML/CSS. A lot of them don’t offer the vast number of UI controls and layout options that I want in my toolbox. Here are some of the better options, in my opinion. I’ve tried to focus on libraries that aren’t tied to a specific framework, but will integrate well.
If you don’t need a ton of UI controls, and want something that’s well-supported and widely regarded, the latest version of Bootstrap is pretty nice. While I called out Bootstrap above for not having everything I need, it’s still very easy to use and it’s popularity means that you can find a ton of useful, real-world information on the web. Finally, since Bootstrap components are created directly in HTML, they should work well with React and other frameworks.
If you like the polish of Google’s Material Design aesthetic, Material Design Lite (MDL) is a good option. In a personal project, I found that it works pretty well with React, but it does some dynamic DOM manipulation that can make it tricky for some advanced customization. If you’re using React or another framework, I’d recommend looking at MDL’s successor, Material Components for the Web. Think of MDC as version 2.0 of MDL, with special consideration for frameworks like React, more UI controls, and a better architecture. It’s still undergoing some evolution, so you might hit the occasional breaking change, but I think they’re getting very close to finalizing things.
One thing with any Material Design library is that they’re definitely going to fit in best on Google platforms, like Android. Personally, I think Material Design works just fine on iOS too, and most people are used to seeing Material Design on Google’s web properties, regardless of platform. However, I know not everyone has that same opinion. For my app, I’d prefer something that doesn’t lean to heavily in the direction of any particular platform. It shouldn’t feel out of place, but it also shouldn’t look like it belongs more on Android than iOS (or vice versa).
ExtJS has been around for years, and it has a ton of components and layouts. Even though it’s technically an older UI library, I think that it has been evolving with the times pretty well. For instance, you can use ExtJS with React thanks to their new ExtReact library. ExtJS is extremely expensive for a solo developer like me, though. They’re clearly going after the deep pockets of enterprise market. I would have seriously considered this option, if the price were more reasonable. I don’t mind paying for quality.
Most recently, I’ve been looking at Semantic UI. This library reminds me a lot of Bootstrap, but with more components and more variations of individual components. I’ve been playing around with the React version of Semantic UI for a few days, and I’m really enjoying it. I haven’t found myself getting stuck at all (just a few minor delays where I need to figure out exactly which component to use in some situations). This one is definitely a contender.
Another UI control library that I haven’t tried yet, but I think is worth mentioning is Ant Design. This is another React library, and it seems to have even more components than Semantic UI.
More to come!
I’ve started putting together these pieces to see what feels most natural to me. I’m building little prototypes, and I’m going to share some of my code in the near future. I’ll write a little bit about each of my small prototype projects here, with links to Github.
This all sounds too familiar 😉 – have recently done similar. As our web app was more “app-ish” (Legal document management system) I ended up using Angular 2/4 with a Redux architecture. There was some performance concerns going in, but in the end it worked out amazingly well. I would have to say using the Redux architecture (Ngrx Store) saved the day as there is a lot of data moving around in this app.
Angular feels incredibly familiar to Flex with me, and Typescript is the icing. Really enjoyed the entire experience.
I think you definitely made the right choice with React for the type of system you’re working on however. I’m looking forward however to spending time with React in the future.
With all that said, as soon as I went back to a work-in-progress Flex/AIR desktop app, I really felt happy again haha.
Cheers Josh, thanks for sharing.
Nice to see you on a new path!! Did you try React Native? Do you think is it possible to have a good cross-platform experience on web (react js), desktop (react js with electron) and mobile app (react native) like we’ve with Flash Player & Adobe AIR (95% of shared code)?
Hi Aymeric, I haven’t had a chance to play around with React Native yet, but it’s certainly something I plan to look into more when I have a chance. I feel that it would be hard to share code with a web app when you’re using React Native, though. As I understand, React Native has its own component primitives, and it doesn’t use the HTML DOM, so you’re going to need to create a couple different versions of your views. I remember seeing React Native Web, though, and that might what you’d need to bridge this gap.
For the best code sharing experience, I think you need to go with Cordova on mobile. I haven’t had much time to play with Cordova either. For this project, mobile isn’t a huge priority, and I’ll probably just make sure that the web demo has some basic responsiveness to support phone screen sizes.
Give Angular an opportunity, it is written 100% in typescript and its directives are very similar to Beads in flexjs, angular is the flex of the future
Caution with React:
I think the React licensing concerns have been blown out of proportion.
Interesting post Josh! Thanks for sharing. Could you mention what you dislike with haxe? Good to know.
Thank you mate, I am in a similar situation you saved me a lot of research 🙂
When you said you wouldn’t be working in FlexJS you said it was because, “I’ve reached a point where this work only makes me feel tired. …I get these boosts of motivation and endurance as I see people build cool projects and push things beyond where I ever imagined. That’s what keeps me going…”
I understand that and working on an SDK and compiler and doing community support on top of your own or client projects is a lot to handle. Who can keep that up? But if you weren’t doing all of those things would you use FlexJS for your project(s)? Could you explain why or why not?
I ask because other developers right now are dealing with the same issue. Should I migrate to FlexJS or some other SDK? If you can provide some reasons then they know if they can live without them or help fix them.
This post has been very helpful to me. And I will follow the same path that you have chosen. Thank you
I went through a similar transition. I’m settled on react / redux / styled-components and looking forward to framerX. Combined it all feels very familiar, almost identical to the early versions of flex which had the design view ( 10 years ago ? ).
Yeah, Dan Ambramov’s recent tweetstorm about Framer X got me excited to check it out. Looks pretty cool!
I stumbled upon your article in an effort to find a way to transfer my website, which was build with Flash catalyst (and the underlying Flex Framework), to html5 …
Best case scenario would be a connection to CMS – any ideas or recommendations?
Well, it depends on what kind of website you have. If it’s more “site” and less “app”, then I think that Gatsby is really nice. It’s built on the same technology as React, but it’s really well-optimized for “sites”. For apps, I really only have experience in React right now, so I can’t really give any kind of comparison to other frameworks.