51–60 of 175 posts
I feel like the thing that would really make this over-the-top powerful is deep integration with a component library, either a company's in-house one or an open-source library. It would allow for super fast UI prototyping that would also serve as scaffolding for the full-featured product.
Looks amazing, I will definitely check it out, any information in supporting other forms of styling, like CSS modules or styled components?
I had the same thought about styled components. In the meantime I'll just use emacs to convert the default style objects to styled components when I'm done using Utopia. I imagine I will use Utopia and then tailor the code afterwards with a code-editor to add my own idiosyncrasies. Still pretty darn efficient to design UIs this way honestly. I'm pretty stoked!
This looks promising! I’ve been waiting for something like this. Will give it a try. How would you hydrate the app with data while you dev? Feels like adding some storybook like features to test components could be useful.
This is precisely what the scenes are for in the storyboard.js file - it allows you to create multiple scenes that render your components with different data / props.
Like many others, I think this is super cool, and something that I think has been missing in the ecosystem for a long time. I feel like the thing that would really make this over-the-top powerful is deep integration with a component library, either a company's in-house one or an open-source library. It would allow for super fast UI prototyping that would also serve as scaffolding for the full-featured product.
It outputs React code as well. But the approach is more similar to Figma. You can create components with variants etc.
It can automatically sync changes to your local repo or create a pull request on GitHub.
As soon as I resize the code menu this[0] happens. Everything shifts up and I cannot scroll it down or get it back to normal without refreshing. [0] https://imgur.com/a/N82Zutz
Earlier quoted context omitted.
I totally agree. I'm not sure why they fell out of popularity. I would've never learned HTML/CSS/JS had it not been for my 9-year-old self messing with FrontPage.
They fell out of favour because you couldn't realistically build a dynamic site that didn't generate spaghetti code. They were fine for static sites, but the moment you needed to make things _happen_ they become unmaintainable, unversioned messes.
We believe the answer is that one-way code generation is a trap: if you export code from a tool which cannot be edited by a human and then read back into the tool, it is going to end up being edited by a human anyways, but the tool will be abandoned for that file / project.
So we made it our number one priority that Utopia must work with any valid javascript/React code. There is a happy path where we can understand a lot of that code and populate the inspector and enable editing on the Canvas, but even if you veer off the happy path, Utopia is still going to be able to parse/preserve all of your code, and render it on the Canvas as well.
This means that if an application gets complex and a team of people start working on it, making refactors to the code, write complex components, add any kind of state management, etc, people on the team who use Utopia will still be able to open the code and make changes to the design.
One thing hugely working in our favor is React and its functional reactive component paradigm. If you look at an individual component, the JSX part is just about parseable enough for us to be able to reason about it and update it while preserving the javascript code that surrounds it. This means we can avoid printing ugly machine-generated code around them to be able to track the changes. ( for example we don't need to litter the code with markers like ) Plus, as React applications grow in size and complexity, most of the individual components remain small and simple. This means that if you open a real produciton React app in Utopia, there is a good chance you will find leaf components that are used for the actual content rendering, and you will be able to make changes to those without creating a mess.
Nice work anyways.