Share this project

Done

Share this project

Done
Build user interfaces for games, interactive visualizations, and rich multimedia experiences on mobile, desktop, web, and game consoles
94 backers pledged $26,682 to help bring this project to life.
Last updated

About

Feathers UI: Cross-platform components for Haxe and OpenFL project video thumbnail
Replay with sound
Play with
sound
  • Off
    • English

$26,682

94

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.

Community Testimonials

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
Questions about this project? Check out the FAQ

Support

  1. Select this reward

    Pledge US$ 5 or more About US$ 5

    Backer badge on forums

    All Kickstarter backers will be able to add special badge/flair to their avatar/profile in the official Feathers UI forums. Show the world that you were among the first to support the new version of Feathers UI for Haxe and OpenFL.

    Less
    Estimated delivery
    16 backers
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  2. Select this reward

    Pledge US$ 25 or more About US$ 25

    1 premium add-on

    While the core Feathers UI library will remain open source, premium add-ons will help keep the project funded going forward. As a Kickstarter backer, you'll get to download one premium add-on when it becomes available.

    All premium UI components and themes will include complete source code, original design files, documentation and tutorials, and usage examples.

    You'll also get a KS backer badge in the official forums.

    Less
    Estimated delivery
    28 backers
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  3. Select this reward

    Pledge US$ 100 or more About US$ 100

    3 premium add-ons

    Premium add-ons will include specialized components that more advanced projects might need. As a Kickstarter backer, you'll get to download the first THREE premium add-ons when they becomes available.

    All premium UI components and themes will include complete source code, original design files, documentation and tutorials, and usage examples.

    You'll also get a KS backer badge in the official forums.

    Less
    Estimated delivery
    24 backers
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  4. Select this reward

    Pledge US$ 250 or more About US$ 250

    3 premium add-ons + 1 ebook

    Get the first ebook that dives into Feathers UI internals. Each ebook is expected to provide insights beyond the core documentation while focusing on one specific topic, such as the component lifecycle, effects and animation, or the custom layouts.

    You'll also get to download the first THREE premium add-ons when they becomes available.

    All premium UI components and themes will include complete source code, original design files, documentation and tutorials, and usage examples.

    You'll also get a KS backer badge in the official forums.

    Less
    Estimated delivery
    8 backers
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  5. Select this reward

    Pledge US$ 500 or more About US$ 500

    Private VIP chatroom

    Josh will set up a private Slack or Discord server for VIP backers. Chat with Josh and fellow VIPs about all things Feathers UI.

    You'll also get 3 premium add-ons, and a KS backer badge in the official forums.

    Less
    Estimated delivery
    6 backers
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  6. Select this reward

    Pledge US$ 1,000 or more About US$ 1,000

    Sponsor logo on feathersui.com

    Your company, game, or other product logo will appear on feathersui.com as an official sponsor.

    You'll also gain entry to the private VIP chat, 3 premium add-ons, and a KS backer badge in the official forums.

    Less
    Estimated delivery
    2 backers
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  7. Select this reward

    Pledge US$ 5,000 or more About US$ 5,000

    Public thanks on social media/newsletter

    The @feathersui will follow you on social media and send out a public thank you. Plus, your company, game, or product will get featured in a future issue of the Feathers UI email newsletter. The newletter will include an image/screenshot, a short description, and a link to your website.

    Additionally, your logo will appear on feathersui.com, you'll gain entry to the private VIP chat, 3 premium add-ons, and you'll get a KS backer badge in the official forums.

    Less
    Estimated delivery
    1 backer
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  8. Select this reward

    Pledge US$ 10,000 About US$ 10,000

    All future premium add-ons

    Download all future official Feathers UI premium add-ons as they get released. That includes premium UI components, themes, ebooks, and screencasts — as a very special thank you for your generosity as an early backer!

    All premium UI components and themes will include complete source code, original design files, documentation and tutorials, and usage examples.

    Additionally, you'll get featured in the newsletter and on social media, your logo will appear on feathersui.com, you'll gain entry to the private VIP chat, and a KS backer badge in the official forums.

    Less
    Estimated delivery
    1 backer
    $

    By pledging you agree to Kickstarter's Terms of Use, Privacy Policy, and Cookie Policy.

    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.

Funding period

- (30 days)