Hi, I'm Josh Tynjala — the creator of Feathers UI, an open source library of cross-platform, user interface components for creative projects like games, interactive data visualizations, and other rich, multimedia experiences.
I've been working on the Feathers UI codebase for about 10 years now, and let me tell you: Feathers wouldn't have succeeded without the amazing community of supportive developers building so many incredible projects. Whether they're small, indie developers or big-name studios, like Ubisoft and 2K games, they've chosen Feathers UI for its customizibility, performance, and cross-platform reach.
The technology landscape has changed quite a bit since I first started building Feathers. The web is now plugin-free and there are more platforms than ever to target with native apps. It's time for Feathers UI to be rebuilt on a stronger, new foundation to ensure that developers continue to have the same kind of powerful (and fun!) development platform to build creative apps and games for the next 10 years.
Here's the plan: I'm building a new version of Feathers UI using the Haxe programming language and OpenFL. For existing Feathers developers, these technologies feel both familiar + filled with a variety of cool, new capabilities to discover. Haxe couldn't be easier for ActionScript developers to learn because it offers very familiar syntax, but it also includes powerful, new features like generics, pattern matching, and macros. Additionally, the Haxelib package manager provides a robust ecosystem of tools and libraries. Finally, with OpenFL, not only can you deploy native apps to Windows, macOS, iOS, and Android, but you also gain access to Linux, web browsers (without any plugins!), and game consoles like the Nintendo Switch, PlayStation 4, and Xbox One.
A better Feathers development experience
As part of the migration to Haxe and OpenFL, I'm planning to make some strategic improvements to Feathers UI along the way to create an even better developer experience. In particular, the skinning/styling system is getting an overhaul with a number of improvements.
- A new, default theme with both light and dark modes (that's easy to customize or replace)
- New skins that support vector graphics with fills, borders, and gradients (you can still mix and match with bitmaps too, of course!)
- Easily switch between multiple, different themes at runtime without conflicts
- Apply a separate theme to a specific containers only
Let's take a little peek at an early version of the new default theme. The following design is not final, and it will probably change before version 1.0 is released:
Similarly, here's the same default theme with "dark mode" enabled:
The purpose for the default theme is to get something up and running quickly when you first create a new project. The default theme is meant to be pretty basic and generic, and it will have a limited number of customization options. The idea is that you'll be able to create your own custom theme based on your designer's work, and you can use the default theme as a fallback. In other words, inside your custom theme, you can skin each component one by one — without losing the default styles for any components that you haven't skinned yet.
Next, let's take a look at a quick code example that shows how to use the new vector graphics skins:
Here, we use the new RectangleSkin class, which allows us to specify fill and border, both of which may be a solid color, a gradient, or a tiled bitmap. These options are defined on new FillStyle and LineStyle enums. We can customize both fill and border based on the current state of the parent component too. As you can see, we're skinning a Button component, and we want a different fill color for the down state. And, of course, you can have rounded corners on the rectangle.
You'll be able to use RectangleSkin, CircleSkin, and EllipseSkin out of the box. However, any OpenFL display object can be used as a skin for a Feathers UI component, so if you need some kind of complex custom skin that Feathers UI doesn't have built-in, you won't be limited by overly strict APIs.
Another improvement that can be expected is in the redesigned StackNavigator component. Let's take a look at its intuitive API for mapping events from a view into navigation actions:
In the code above, we create a StackItem for our custom CheckoutScreen class (we also have StackItem.withFunction() and StackItem.withDisplayObject() available as other ways of adding views to a StackNavigator). The second argument passed to withClass() is a Map<String,StackAction> that tells the StackNavigator which action to perform when the screen dispatches an event. In the example, we use Push, Pop, PopToRoot, and Replace from the StackAction enum. Not pictured are Listener and NewAction, which provide more advanced options that allow you to do things more dynamically based on the event's properties and any other application state.
The APIs for both skins and the StackNavigator component are improved compared to the previous version thanks to language features provided by Haxe. Enum instances, in particular, make is super easy to limit what values can be passed into a property while keeping it configurable at the same time. As I go through the other Feathers UI components and convert them from ActionScript/Starling to Haxe/OpenFL, I'll be looking for more strategic places that Haxe can make existing APIs more concise, more type safe, and easier to use.
Feathers UI: The Business
Going forward, I'd like for Feathers UI to become its own sustainable business that can fund itself instead of raising funds only through sponsorship. This Kickstarter will help me to rebuild the core, open source library on top of Haxe and OpenFL. However, while I'm working on that, I'd like to create a new source of revenue where developers can buy premium add-ons and directly support the project.
Many projects need more advanced or specialized components — like charts and graphs, bar codes and QR codes, calendars, etc. Some developers want super-detailed, in-depth learning materials like ebooks + screencasts that cover one specific subject at a very low level. Some projects need a clean and simple design, but they don't have a designer, so they want to choose a pre-made theme that they can drop in to make their app look professional. The plan is to make these things available to purchase as a way for the community get useful new additions to their toolbox while simultaneously funding future development.
Let me be clear: the core, open source Feathers UI library will continue to grow with new components and features. These premium add-ons will be more specialized to fit the needs of developers that need a little something extra for their project.
As a Kickstarter backer, if you pledge at certain levels, you will be able to download one or more of these premium add-ons, as soon as they become available.
Developers in the community love how well Feathers UI helps them build cross-platform apps quickly.
"Very short development times" —Luis Guajardo Diaz, Software Developer
Feathers UI components can be customized to fit the specialized needs of creative projects, while performing at the level expected of modern apps.
"Runs very smoothly on all platforms" —Elefantz, Feathers UI forum member
When a product is ready, it's not just developers that enjoy the benefits of Feathers UI.
"My client was really impressed" —Olaf Wempe, Developer and Designer
It's these kinds of messages that keep me inspired to continue working on Feathers UI. That's why I'm kickstarting this new version of Feathers built on Haxe and OpenFL. I want to keep bringing the best components that I know how to build to my fellow developers because it's so cool seeing what astonishing and unanticipated projects the community creates with my little library... it seriously goes way beyond what I ever expected.
I hope that you'll join me in this new journey for Feathers UI by becoming a backer. Thank you.
—Josh Tynjala, Feathers UI
Update (June 26, 2019): I've released the pre-alpha source code for Feathers UI for Haxe and OpenFL on Github. It includes a work-in-progress "components explorer" example app, and you can see an online demo of the example on the Feathers UI website.
Update (July 15, 2019): Over the weekend, I received a message from the Moonshine IDE team. They're looking to rebuild their IDE using Haxe, and they want to use Feathers UI too. If we can reach $10K, the Moonshine IDE team guarantees to pledge the remaining $15K to reach the Kickstarter goal. That would be amazing! With Moonshine's help, we're over 80% of the way to the goal. Folks, we can do this!
Risks and challenges
The core architecture of Feathers UI is already running on Haxe and OpenFL. Things like the component lifecycle, the validation system, how styles work, and how containers communicate with layouts are implemented with many passing unit tests. Several real components are ported to further validate that the core architecture is solid, but the majority of the existing components still need to be converted.
In my opinion, the most difficult part of the process is out of the way, but working through each of the remaining components (to convert each one to Haxe and handle the differences between Starling and OpenFL) requires a hefty time commitment. If things take longer than expected, I have other income as a freelance developer that will keep the bills paid until I can catch up and complete the rest.
For the premium add-ons, development will be from scratch, since these will be new things that didn't already exist in the ActionScript/Starling version of Feathers UI. However, after ten years of development on Feathers UI, I have an established track-record for successfully creating new, polished components. If a premium add-on contains bugs when it is released, updates will be available at no extra charge to you.
Finally, I will need to set up an online shop and an order fulfillment system so that developers can download the premium add-ons that they've purchased (or are rewarded as a Kickstarter backer). I have experience selling desktop apps on the web, and I know how to set up payments for that sort of thing. While I haven't sold a developer-focused library commercially before, my combined experience of selling apps and releasing open source libraries should provide enough overlap to cover my bases. If I have any unexpected trouble here, I have contacts who have sold native extensions for Adobe AIR that I can ask for advice, if needed.Learn about accountability on Kickstarter
- (30 days)