Utopia? Echoes of Delphi and Dreamweaver in the new visual editor for React • The Register


Are you looking for a design and coding tool for React? A new attempt, Utopia, was released in Alpha this week.

The Facebook-sponsored React is the most popular JavaScript framework for creating user interfaces – the StackOverflow 2020 survey found a usage of 35.9 percent of developers, ahead of Angular with 25.1 percent – and is also used by other projects such as React Used natively for desktops and mobile applications and as the basis for other frameworks such as the server-side rendering framework Next.js and Gatsby’s static site generator.

The common way to design with JavaScript and HTML / CSS is to write code and then run it to see what it looks like. Visual designers exist, too, but it’s hard to combine the flexibility and control of plain code with the speed of a graphical design tool. Utopia, just released in Alpha, claims “full two-way sync,” which means the design and code update each other instantly.

Utopia: a new two-way code editor and designer for React.js

Long-remembered developers will recall that Delphi did this (to great effect) for Windows applications, unlike the other fast development tools at the time. There have also been efforts to do something similar to web development with tools like Macromedia’s Dreamweaver, which was acquired by Adobe, or even Microsoft’s FrontPage, which are easy to use but notorious for generating bad code and / or requiring server-side extensions develop.

“Utopia founder here. Yes, I loved the idea of ​​FrontPage and learned so much, and yet – it sucked so much in practice,” said Malte Nuhn in a discussion at Hacker News.

The idea of ​​the project is that “it works with real code in real projects,” which enables prototypes built with real React components instead of being modeled in Figma, and quick visual design without compromising code. “Whatever Utopia does not (yet) understand, it leaves it as it is,” claim the documents.

Another claim is that Utopia doesn’t force developers or designers to work in a particular way. “Because Utopia is an editor – not a library, not a framework – you can use (and learn!) Vanilla JavaScript and React,” the team said.

The editor is based on Visual Studio Code and includes ESLint (static analysis for JavaScript) and Prettier (code formatter). The tool also includes a debug console and the ability to share previews with external users as long as the Utopia web application is used. A canvas area is updated as you type or can be switched to edit mode, turning it into a graphical editing tool. This is synchronized so that selecting a visual also moves the cursor to that location in the code editor.

Other features include the ability to work with dynamic data, dynamic CSS layouts, and user interfaces that change according to the variables set by the code. One of the factors that makes visual JavaScript and CSS design a challenge is that it typically adapts to different screen sizes and form factors (responsive design) as well as morphs to dynamically generated content. There is also a storyboard feature that developers can use to set up designs with multiple scenes.

Utopia is open source and hosted on GitHub under the MIT license. “The design tool is pretty early on,” the team said. How about trying it out on your own PC? It’s about cloning the project and building it locally.

Your intrepid correspondent has tried following the somewhat incomplete instructions with the Windows Subsystem for Linux 2, with partial success after playing around with Webpack (JavaScript build tool) and NixOS (shell and package manager), and a few Optimizations to the TypeScript code that did not compile.

However, the VS Code part of the resulting local web application is broken in our build. Our guess is that some developers will be interested in getting this to work instead of programming entirely in the cloud.

However, the team’s intention is for developers to use the hosted version and not have to worry about building it yourself.

What is the business model? “The idea is to keep this free for single player (“ earn your time, trust, and usage, don’t lock up ”) and charge fees for features that are in line with financial value. At first these will very likely be team-oriented – but our priority for the rest of the year is clearly single-player, “Nuhn told me on Discord.

Other common questions are whether it will work with React Native – “unfortunately not at the moment” – and whether it could work for HTML 5 web components and / or JavaScript frameworks without React.

“Web standards are important to us … we will look at them seriously once the product is a little more mature,” said Nuhn. “The same goes for other JS frameworks like Vue.” ®


About Willie Ash

Check Also

Linux Laptop Crew Tuxedo Releases Stellaris AMD Gen 4 • The Register

review Tuxedo Computers offers an unusual machine: a Linux-based laptop with a mechanical keyboard, of …

Leave a Reply

Your email address will not be published.