Launch HN: Haiku (YC W18) – Build and Design Cross-Platform UIs and Animations
We are a remote, international team of six. We've all spent years in various design/development roles, and we've all run into the same problem: When building software, teams waste too much effort creating designs in design tools, then reimplementing those designs in code.
Here's how we're working to solve that:
1. Create a common tongue for design tools and codebases to communicate. We're starting with a simple JavaScript file format that can capture both how designs look and how components behave, where animation is a first-class citizen. We call this format Haiku Core and we've open sourced it under the MIT license, along with a standards-driven interpreter/renderer for that format on the Web. We'd love to hear from the community about how to improve our format or Web renderer.
2. Create a design tool that speaks that language. Our desktop app, Haiku for Mac [2], brings a familiar visual design/animation experience to designers, while remaining connected to the world of code. Haiku tracks designs with Git and delivers versioned components to developers. Haiku automatically sets up and hosts Git infrastructure and npm registration for your components. (This infrastructure is optional. Your files always sit on your computer, and you own them.)
3. Integrate with the tools that design/development teams already use. If you like to draw, you can keep designing in Sketch and see changes sync on stage. If you like to code, you can edit Haiku source files directly in your favorite text editor. Out of the box, Haiku components are compatible with vanilla web codebases, React, and Vue. Haiku also supports exporting to Airbnb's Lottie format, allowing native animation authoring for iOS, Android, or React Native.
Thanks for reading, HN. We know this subject is close to many people's hearts here — we'd love to hear what you'd like to see in a UI-building & collaboration tool like Haiku.
[1]: http://github.com/HaikuTeam/core
[2]: https://www.haiku.ai
53 comments
[ 4.2 ms ] story [ 139 ms ] threadThe tool seems nice and would be lovely to have on linux. There is not a lot of tools that support my choice of platform, but if the aim is explicitly to support a lot of platforms, having support for the three major OSes would be nice.
We agree with you that for cross-platform dev, multi-OS authoring support is important. Windows support is expected mid-2018; I hesitate to put a date on Linux yet since we haven't deeply scoped it out, e.g. which distros we can easily support.
Very glad to hear and looking forward to hearing news in the future.
Haiku is meant to be "component-first," so you can add it to existing codebases without committing your entire tech stack. Our React+Gatsby website is an example of that.
We're almost ready to ship support for multi-component composition inside Haiku, which will enable features like reusable form controls, layouts, and more (see https://www.haiku.ai/features/ for more 'coming-soons') — in the meantime, think of Haiku as a discrete-component & animation builder.
Through the thousands of users who went through our private beta last year and the feedback they've shared, we understand that many modern "product teams" need a better solution for collaboration between design and development — because in these teams, design is a living breathing part of the product. Waterfall style "design hand-off"s are a huge pain point.
As a bit of empirical proof for this kind of workflow: consider Unity. Unity uses a workflow very much like Haiku's to connect design and development, through common data formats and pipelines of interoperating tools. Unity works great for building incredibly complex UIs and software—or to repurpose your words, Unity is suitable for production purposes.
We believe that if somebody gets this right for apps outside of games — on a more open platform than Unity — that we'll start seeing big steps forward in creativity and team efficiency.
Many have tried this before (anyone remember XAML/Blend?) but it always falls down for the same reason that they don't really capture what designers really do (despite of what their managers and developer colleagues think they do!), which has nothing much to do with helping developers write code. Tools like these are more apt for UI developers.
We can probably also agree than a data-driven approach is more powerful than individual opinions, even from smart folks. It sounds like we could intellectually debate how connected design and code should be for days—I'm certainly passionate about this subject, and I sense you are too.
So here's some data. From the >10k users who went through our private beta, over 10% responded to our requests for feedback. A representative sample:
(and on... and on.)We're confident that we're building something people want. Not everyone! Sounds like not you. But plenty of folks. So we're chasing our passion, and chasing the opportunity, while listening to our users and doing our best to continue learning from both past and present.
Sketch is great as a design tool because it doesn't try to be a production tool (unlike say Illustrator which is more of a production tool than a design one). That difference is super important, as you don't want to limit design iteration with production requirements, nor do you want unpolished design assets making it into production (same with code actually).
Cool software though.
2 questions 1) what's your take on https://coherent-labs.com/hummingbird/ 2) are you hiring
1. Hummingbird looks like it's tackling a similar problem with a similar approach, though it seems focused on games (where this problem & solution are pretty well cornered by Unity.) We're currently focused on non-game web & mobile apps.
2. We're always on the lookout. Are you interested in chatting? Please email jobs@haiku.ai with a quick bit about yourself.
However, the process of building the svg animation asset library still required I use Adobe After Affects to design/animate then use the Bodymovin After Affect plugin to export to the lottie-friendly json format. With Haiku I might be able to replace After Effects with Bodymovin and have a cleaner, version-controlled process!
Awesome product idea, I hope to give it a try soon!
I'd love to see the project you made, if publicly available, as we're always looking for use-cases to drive our development. (You can mail zack@haiku.ai)
Oh, and my colleague Taylor wrote some more thoughts about "Lottie without After Effects" from a designer's perspective, if you're interested: https://medium.com/haiku-blog/lottie-without-after-effects-9...
Looking at the Github page, it seems to me that the answer would be that Haiku-created animation assets are stored in JavaScript objects so that it's easy to edit and store them as part of code. Is that the right impression?
How much does the Haiku Core player weigh on a webpage? Just curious to know. (I like following this space and it's always great to see new entrants!)
Yes, that's the "core" of it! "Design-as-code" is how we've described this foundation, and it lets Haiku play nicely with dev tools like git & package managers (yarn/npm today, Gradle + CocoaPods planned for the future.) You couldn't hack on a Flash .swf or .fla file with your code editor, but Haiku was designed for hacking.
And unlike Flash or most of its successors, Haiku's renderer is open-source and standards-based. "Closedness" was the death stroke for both Flash and Silverlight, and open source is table stakes for modern-day development.
Re: footprint, Haiku Core currently weighs in at 51kb gzipped. A little heavier than React, for reference. That said, we've barely begun to optimize footprint. Much of the current file size comes from enumerated svg/css style properties as strings, which we're working to refactor to tighter wire format for runtime (similarly to what Lottie and FB Keyframes do.) Rough estimate: we should be able to cut that footprint in half or better.
I've actually made a couple of apps in this space over the years. Radi [1] was an HTML5 canvas+video animation app with a Flash-style timeline released back in 2010, though long since defunct. Neonto Studio [2] is a design environment for native mobile apps. React Studio [3] is an offshoot from the Neonto Studio product for making web apps, it's free.
My experience is that designers are not a great target market for this kind of product because their influence and competence is fundamentally limited. They just don't have the sway within a team or organization to push developers to make use of anything that looks like code coming from the design side. To make the sales pitch even more complicated, most designers are pretty happy with this state of affairs – they already have plenty of work and don't really want the extra responsibility and learning curve involved in making anything production-ready.
There's a reason why Sketch is so popular among designers: it's because it does so little. It doesn't try to model anything or actually represent anything about what makes user interfaces tick, it's just a pared-down Illustrator.
You seem to be working up from animations towards UI components in general. I hope that approach works out for you.
[1] http://web.archive.org/web/20120509083927/http://radiapp.com... [2] http://neonto.com/nativestudio [3] https://reactstudio.com
There are so many great tools out there that bring together development and design tasks... it's about time someone went after the mantle of interactive UI building from Adobe — years after the demise of Flash!
https://www.haiku-os.org/
Though I have to admit that the name strongly reminds me of the Haiku Operating System I very much want this project to succeed.
I've seen designers with almost zero coding skills build incredibly immersive and creative web pieces. There was a whole generation and genre of web content that has vanished and never been replaced - praystation, flight404, Hi-ReS! and so on. Processing is similar in spirit but has only filled part of the niche.
I really hope Haiku revives experimental, interactive motion design on the web. While Flash was inappropriate for delivering marketing text content, I see the genre's value as being a standalone artform.
Unfortunately, Flash got such a bad rap through performance/security issues and the wrath of Steve Jobs that the "baby" (the authoring tool & connected approach to design+code) got thrown out with the "bathwater" (namely, the plugin, Flash Player.)
We also really hope that Haiku helps empower experimentation and drives a new generation to explore the boundaries of design and code — the way several on our team were inspired by Flash many years ago. This is the crux of the name Haiku — we believe the artistic/creative spirit behind writing a minimal poem like a haiku is really similar to that which goes into crafting UIs.
My 2¢: I think you may be romanticizing the ratio of "interactive experiences" to intrusive ads, bad games (but in bulk, to make up for the quality) and (eventually) video.
But if you like the brutally-effective tool, it still exists[1] and has seen regular improvements, but now emits standards-based content that works as well or better than Flash did.
[1] https://en.wikipedia.org/wiki/Adobe_Animate
What is the ratio of poo HTML websites to awesome ones? Probably worse :) Anyway I don't care about ratio, I care about the best examples - and I really haven't seen any JavaScript showcase websites that really inspire me. Processing is the only experimental stuff that sparks any interest.
(Please, do hit me with awesome JavaScript arty links to change my mind! ... remember hell.com?)
We planning to build our own drawing tools in time — probably more Flash-style, e.g. with vector-fill paintbrushes and paint-buckets: lower barrier to entry, easier to be silly + creative, and they'd be more complementary rather than competitive with the precision-drawing tools of Illustrator/Figma/Sketch and co.
To get good performance out of interactive web animations, you need the code that handles input to be in a really tight loop with the value that's eventually painted to the screen. The CSS Animations API really destroyed interactive design on the web for a long time. The reason is that they were fully declarative and had very few hooks for interacting with JS code, it's difficult or sometimes impossible to do things like chain/interrupt/restart them. Developers could work around that with hacks like using the style property on a div to override the animation classes when being interacted with, and then relying on the animations defined in classes for everything else. I've tried to write code like this, it's brittle across platforms and very hard to maintain. In addition, the global flat document structure of HTML makes it very hard to ensure that other code doesn't interfere with yours. My point is, you can't write a good animations editor for the old web because it just wasn't possible to do them well enough using the old API's.
Newer API's (CSS Variables, Web Animations, CSS Flex Box) and better component abstractions (React / Web Components) make it a lot easier to do something like Haiku. My tool just takes an intermediate JSON structure and generates React or Web components. The animations for React are handled by React Natives Animated library, and the Web Animations API for Web Components. Flexbox + CSS Transforms are leaned on for keeping the structure or the generated components consistent. Generating performant animations on the web really isn't that hard anymore.
The really hard part is defining a common set of API boundaries to make the generated components reusable and composable. Doing this is complicated because of the lack of proper module loader in JS, its dynamic types don't help either.
From the video it looks like Haiku is using a library from AirBnB called Lottie to handle the animations. Then they turn around and wrap that in a React component + others forthcoming. I wish I'd known about Lottie before starting my project, it probably would have saved time. I'm not sure that Haiku can pull of component re-usability with Lottie though, depending on how much of a black box it is, good luck to them on that front.
> From the video it looks like Haiku is using a library from AirBnB called Lottie to handle the animations. Then they turn around and wrap that in a React component + others forthcoming.
For the Web, Haiku Core is our renderer. We don't use lottie-web; we use Lottie only to export Haiku Core for rendering on iOS and Android.
Haiku Core uses "the fastest parts" of SVG + CSS + JavaScript to render its animations. Nothing magical here, it's just using web standards, though it was important for us to build around SVG+DOM instead of canvas so that you can still use the Web for what it's best at: rendering documents.
Haiku Core is a component format explicitly defined for reusability — and hackability. Haiku components for the Web aren't 'generated' or 'exported'; the design source file is the code source file. And due to the way that Haiku handles state (strictly internally) and data flow (strictly message-passing,) they work in any codebase, as polite and predictable guests.
EDIT: P.S. tuchsen, I'd love to chat with you some more. Can you email me zack@haiku.ai ?