Utopia? Echoes of Delphi and Dreamweaver in new visual editor for React
(2021/06/17)
- Reference: 1623926712
- News link: https://www.theregister.co.uk/2021/06/17/utopia_react_tool_alpha_release/
- Source link:
Looking for a design and coding tool for React? A new effort, Utopia, was released in alpha this week.
Facebook-sponsored React is the most popular JavaScript framework for building user interfaces – the [1]StackOverflow 2020 survey reported usage by 35.9 per cent of developers, ahead of Angular at 25.1 per cent – and is also used by other projects such as React Native, for desktop and mobile applications, and as the basis for other frameworks such as the Next.js server-side rendering framework and the Gatsby static site generator.
The usual way to design with JavaScript and HTML/CSS is to write some code and then run it to see what it looks like. There are also visual designers but it is hard to get the flexibility and control of pure code combined with the speed of a graphical design tool. Utopia, [2]just released in Alpha, claims "full two-way synchronisation," meaning that the design and the code update each other instantly.
[3]
Utopia: a new two-way code editor and designer for React.js
Developers with long memories will recall that Delphi did this (with great effect) for Windows applications, unlike the other rapid development tools at the time. There were also efforts to bring something similar to web development with tools like [4]Macromedia's Dreamweaver , acquired by Adobe, or even Microsoft's FrontPage, easy to use but notorious for generating bad code and/or requiring server-side extensions.
"Utopia founder here. Yep, I loved the idea of FrontPage, and learnt so much, and yet - it sucked so much in practice," [5]said Malte Nuhn in a discussion on Hacker News.
[6]
The idea of the project is that "it works with real code, in real projects", which enables prototypes built with actual React components rather than mocked up in Figma, and rapid visual design without compromising the code. "Whatever Utopia doesn't (yet) understand, it leaves as-is," claim the docs.
[7]
[8]
Another claim is that Utopia does not force developers or designers into any specific way of working. "Since 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 presuming use of the Utopia web application, the ability to share a preview with external users. A canvas section updates as you type, or can be switched into edit mode whereupon it becomes a graphical editing tool. This is synchronised, so that selecting a visual element also moves the cursor to that point in the code editor.
[9]
Other features include the ability to work with dynamic data, dynamic CSS layouts, and user interfaces that change according to variables set by code. One of the factors that makes visual JavaScript and CSS design challenging is that it typically adapts itself to different screen sizes and form factors (responsive design) as well as morphing according to dynamically generated content. There is also a storyboard feature, letting developers set up designs with multiple scenes.
Utopia is open source and hosted on GitHub, under the MIT license. "The design tool is still quite early," according to the team. What about trying it out on your own PC? This is a matter of cloning the project and building it locally.
Your intrepid correspondent attempted to follow the somewhat incomplete instructions using Windows Subsystem for Linux 2, with partial success after some messing around with Webpack (JavaScript build tool) and NixOS (shell and package manager), and a couple of tweaks to TypeScript code that did not compile.
[10]
That said, the VS Code part of the resulting local web application is broken on our build. Our hunch is that some developers will be keen to get this working rather than coding entirely in the cloud.
The intention of the team, however, is that developers will use the hosted version and not have to worry about self-build.
[11]JavaScript survey: React everywhere, Jest, Webpack on the up... if only it had static typing, sigh developers
[12]'Big updates' to Mac design app Sketch add real-time collaboration – but you'll need to fork out for a subscription
[13]But can it run Avid? The Reg hands shiny new M1 MacBook to video production pro, who beats it with Blender, Handbrake, and ... Hypercard?
[14]The Audacity of it all: Version 3.0 of open-source audio fave boasts new file format, 160+ bug fixes
What is the business model? "The idea is to keep this free for single player mode ("earn your time, trust, and usage, not lock you in") and charge for features that align with financial value creation. Initially those will very likely be team focused - but our priority for the remainder of the year is squarely on single-player mode," Nuhn told me on Discord.
Other common questions are whether it will work with React Native – "Not at the moment, sadly" – and whether it might work for HTML 5 web components and/or non-React JavaScript frameworks.
"Web standards are close to our heart… it's something we'll start to seriously look into once the product is a bit more mature," said Nuhn. "The same is true for other JS frameworks like Vue." ®
Get our [15]Tech Resources
[1] https://insights.stackoverflow.com/survey/2020#most-popular-technologies
[2] https://utopia.app/
[3] https://regmedia.co.uk/2021/06/16/utopia.jpg
[4] https://www.theregister.com/2005/12/05/adobe_completes_macromedia_acquisition/
[5] https://news.ycombinator.com/item?id=27526711
[6] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=2&c=2YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D2%26raptor%3Dcondor%26pos%3Dtop%26test%3D0
[7] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[8] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[9] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[10] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[11] https://www.theregister.com/2021/01/14/javascript_survey_jest_webpack_on/
[12] https://www.theregister.com/2021/05/12/sketch_mac_updates/
[13] https://www.theregister.com/2021/04/22/m1_review/
[14] https://www.theregister.com/2021/03/19/audacity_3/
[15] https://whitepapers.theregister.com/
Facebook-sponsored React is the most popular JavaScript framework for building user interfaces – the [1]StackOverflow 2020 survey reported usage by 35.9 per cent of developers, ahead of Angular at 25.1 per cent – and is also used by other projects such as React Native, for desktop and mobile applications, and as the basis for other frameworks such as the Next.js server-side rendering framework and the Gatsby static site generator.
The usual way to design with JavaScript and HTML/CSS is to write some code and then run it to see what it looks like. There are also visual designers but it is hard to get the flexibility and control of pure code combined with the speed of a graphical design tool. Utopia, [2]just released in Alpha, claims "full two-way synchronisation," meaning that the design and the code update each other instantly.
[3]
Utopia: a new two-way code editor and designer for React.js
Developers with long memories will recall that Delphi did this (with great effect) for Windows applications, unlike the other rapid development tools at the time. There were also efforts to bring something similar to web development with tools like [4]Macromedia's Dreamweaver , acquired by Adobe, or even Microsoft's FrontPage, easy to use but notorious for generating bad code and/or requiring server-side extensions.
"Utopia founder here. Yep, I loved the idea of FrontPage, and learnt so much, and yet - it sucked so much in practice," [5]said Malte Nuhn in a discussion on Hacker News.
[6]
The idea of the project is that "it works with real code, in real projects", which enables prototypes built with actual React components rather than mocked up in Figma, and rapid visual design without compromising the code. "Whatever Utopia doesn't (yet) understand, it leaves as-is," claim the docs.
[7]
[8]
Another claim is that Utopia does not force developers or designers into any specific way of working. "Since 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 presuming use of the Utopia web application, the ability to share a preview with external users. A canvas section updates as you type, or can be switched into edit mode whereupon it becomes a graphical editing tool. This is synchronised, so that selecting a visual element also moves the cursor to that point in the code editor.
[9]
Other features include the ability to work with dynamic data, dynamic CSS layouts, and user interfaces that change according to variables set by code. One of the factors that makes visual JavaScript and CSS design challenging is that it typically adapts itself to different screen sizes and form factors (responsive design) as well as morphing according to dynamically generated content. There is also a storyboard feature, letting developers set up designs with multiple scenes.
Utopia is open source and hosted on GitHub, under the MIT license. "The design tool is still quite early," according to the team. What about trying it out on your own PC? This is a matter of cloning the project and building it locally.
Your intrepid correspondent attempted to follow the somewhat incomplete instructions using Windows Subsystem for Linux 2, with partial success after some messing around with Webpack (JavaScript build tool) and NixOS (shell and package manager), and a couple of tweaks to TypeScript code that did not compile.
[10]
That said, the VS Code part of the resulting local web application is broken on our build. Our hunch is that some developers will be keen to get this working rather than coding entirely in the cloud.
The intention of the team, however, is that developers will use the hosted version and not have to worry about self-build.
[11]JavaScript survey: React everywhere, Jest, Webpack on the up... if only it had static typing, sigh developers
[12]'Big updates' to Mac design app Sketch add real-time collaboration – but you'll need to fork out for a subscription
[13]But can it run Avid? The Reg hands shiny new M1 MacBook to video production pro, who beats it with Blender, Handbrake, and ... Hypercard?
[14]The Audacity of it all: Version 3.0 of open-source audio fave boasts new file format, 160+ bug fixes
What is the business model? "The idea is to keep this free for single player mode ("earn your time, trust, and usage, not lock you in") and charge for features that align with financial value creation. Initially those will very likely be team focused - but our priority for the remainder of the year is squarely on single-player mode," Nuhn told me on Discord.
Other common questions are whether it will work with React Native – "Not at the moment, sadly" – and whether it might work for HTML 5 web components and/or non-React JavaScript frameworks.
"Web standards are close to our heart… it's something we'll start to seriously look into once the product is a bit more mature," said Nuhn. "The same is true for other JS frameworks like Vue." ®
Get our [15]Tech Resources
[1] https://insights.stackoverflow.com/survey/2020#most-popular-technologies
[2] https://utopia.app/
[3] https://regmedia.co.uk/2021/06/16/utopia.jpg
[4] https://www.theregister.com/2005/12/05/adobe_completes_macromedia_acquisition/
[5] https://news.ycombinator.com/item?id=27526711
[6] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=2&c=2YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D2%26raptor%3Dcondor%26pos%3Dtop%26test%3D0
[7] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[8] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[9] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[10] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33YMtxorbK47rfPH6kqsyoAgAAAIE&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[11] https://www.theregister.com/2021/01/14/javascript_survey_jest_webpack_on/
[12] https://www.theregister.com/2021/05/12/sketch_mac_updates/
[13] https://www.theregister.com/2021/04/22/m1_review/
[14] https://www.theregister.com/2021/03/19/audacity_3/
[15] https://whitepapers.theregister.com/
Re: It's 2021 ...
lotus123
Contrary to what Delphi has they do not have anything that takes data from the external source. For example to display the list they have code for each element of that list. So yeah. Do not hold your breath yet.
HoTMeTaL Pro
Lon24
Tish. Dreamweaver & Frontpage were pretty bad. Whereas HoTMetaL Pro (note the capitalisation) produced good code fast and you could slide between pure code, illustrated code and full preview at a mouseclick. So far ahead of its time it was a threat to all the wannabees.
Hence Corel bought it up and closed it down. It still lives on in a Win2K VM as I still have some customers running sites developed with HoTMetaL who refuse to pay me to redevelop them as 21C sites and now revel in the retro-glow of people who surf the interwebs to the sound of authentic vinyl music and dodgy cigars. And flares, don't forget the flares ...
One of the last pieces of software I paid good money for. Like all the other good software the developers would be bought out and your investment wiped out. Whereas if you stuck to FOSS then if it was any good software could survive death, debilitation or monetisation by some other good soul forking it. Better deal in the long run I found. Free isn't always about price.
Re: HoTMeTaL Pro
Charlie Clark
FrontPage was awful but I found some versions of Dreamweaver to be pretty okay for round tripping even with server templates like ZPT. But the major change was the widescale adoption of CSS for layout and the subsequent shift to responsive design, meaning you really only need to play around with the CSS.
I had managed...
Blitheringeejit
...to not think about Frontpage
Re: I had managed...
ClockworkOwl
I hear your Frontpage induced wailing, and leave you with the further torture of:
Cold Fusion!!!
(Runs away gibbering..>
It's 2021 ...
... and the recommended way of developing a UI is *still* to code it by hand.
Delphi, Visual Basic and WinForms were 99% drag-drop; everything else (MFC, WPF, HTML, JQueryUI, React, Angular, etc) was a pain.
Just hope this works but I'm not holding my breath.