Where the design community meets.
co-founder of hadronapp.com Joined almost 4 years ago
Congrats on the release Eden!
Hi Dexter! thanks for following Hadron :) We're working full-time on it since we started a little bit more than 2 years ago. You're right that we could be going faster, but we're not worried about timing. We want to make an impact in the industry. Because of that, we don't hesitate to change whatever it takes. Our last 0.13 release affected ~40% of the project (which is 110k lines of front code ATM)
Also, consider that these tools take a tremendous amount of effort to be done right! Figma, for instance, took 3 years to release a preview version. We did that in 1.
It means that your design isn't stored internally as a big JSON that need to be converted to code when you export it. There is no export phase where that JSON is converted to code. Instead, Hadron edits the actual code everytime you touch something in the UI, like changing a color. (Take a look at the video titled "Hadron edits your own code" at hadron.app)
This makes possible a total integration of your designs with the development environment.
What are the advantages of this approach?
You could work on production files themselves.
You can edit the code manually, so if you have some HTML or CSS knowledge, you can modify the design code, avoiding the limitations of the tool. Our developer mode is only possible this way. And you can use it to learn HTML/CSS too!
You could design in Hadron while a developer teammate is coding in their preferred code-editor outside of Hadron and be synced through git.
You could import an existing web project into Hadron.
We've many requests and we're sending them gradually so we can talk to users and iterate while keeping things easier for us at the moment.
We're probably implementing importing from Sketch as it's something few people have requested and it'd be very useful. As for React, yes there'll be integration with React, it's been developed around the idea that we could add any framework easily. Although, there are few things before that I'm sure people will love.
wow 2012, that was so ahead of its time!
Hadron, unlike those tools, is more like a visual code editor because you can go back and forth between code and design.
The reason for this is that they all store the design in an internal data structure, that they later translate into images or code when you request it. This means that there is a new exported object created every time.
In contrast, Hadron edits code on the fly while you are working. Each of your actions on the UI is translated into an operation to update the code. We don't have an internal data structure. This is huge because it allows files to be shared for real.
We'll expand this more on another post in the future.
Hello designers! We've been working very hard on reshaping Hadron for the past months. Thanks to everyone that has given us feedback!
After this update, you can also design without writing code using the UI, but despite that, you're actually generating your own code because Hadron edits code on the fly.
I'm here to answer all your questions and hear any feedback you might have.
It's not tied to Polymer, we have built it so it's easy to add any other library. We'll add Vue and React in the future although with no ETA right now.
The good thing about Polymer, and it's the reason we started with it, is that's just a tiny library that helps to build Web Components, which is native to the Web. And Web Components are great for Hadron because they encapsulate styles, HTML and JS, so your styles won't collide between elements.
Hello Mike! thank you for taking the time to question those things!
The point of Hadron is not seeing how the code output is being generated, but to help you generate it yourself. A way to see it is that we simplify development so much in making it visual that it can be used for designing too.
This is a different approach from Webflow which is more like mocking the Web Platform (CSS & HTML) in a complex UI that makes it easy for them to transform it into a web of their choice behind the scenes.
One example: Hadron lets you pick up a library or framework of your choice (currently only Polymer 2) and you can explore, modify and export the whole project. Whereas WebFlow only lets you export to an auto-generated web they control, in which they choose the dependencies (like a webflow library or jquery I think). And it's only for paid accounts.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.