A few days ago, I saw this video circulating Twitter highlighting a piece of software from https://teleporthq.io/, which shows a person drawing the design for a web-page on a whiteboard. There is a camera pointed at the board and a screen to the side showing the same design as the one being drawn; as the person draws more, the on-screen design develops alongside it, with placeholder text and images reflecting what had been drawn. From what I can tell in the video, the output of the image recognition is a React JS file.
Straight from the off this seems like a revolutionary breakthrough and the thing that’ll be replacing everyone’s jobs in the near, however, on further consideration I’m not quite sure that’s the case.
This seems like an incredibly useful tool, yet, not quite for creating full blown websites (for reasons I’ll speak about shortly) but possibly absolutely outstanding for smaller tasks. Due to its ease of use and rapid production of visuals, it could potentially be a great tool for developing prototypes – it would not only allow for non-techies to show their own ideas created before their eyes simply by just drawing a few shapes on a board, but it will also produce something which will be able to be used to some limited extent. This could have a huge positive impact on understanding usability prior to building sites by seeing how the user will want to use it and changing the design within seconds.
As previously mentioned, I personally don’t feel (at least from the limited amount I’ve seen) that this software would actually be that useful for creating an entire website. There are a number of reasons for this.
First off, functionality. From my understanding this software is aiming to make digital user interface designs codeless. Yet there doesn’t appear to be any way to even add actions to buttons or add links between pages; something that should be a given seeing as it’s producing React JS; these would have to added manually into the code – something made all the more daunting by my next point.
Maintainability. Someone is going to have to maintain all these pages. From the video, you can see that the view is created by a single render of a whole bunch of components inside a <Page> wrapper – for more complex designs this could become a monolith of a file which someone would have to manually go through to add classes, ids or alternate functionality.
And whilst I’m mentioning classes and ids, in this video there is nothing shown on how the CSS is complied, or what the final CSS file looks like. In another video from their blog page, it shows that the CSS is actually complied as a react constant within the produced React file. It’s extremely verbose and uses absolute positioning almost everywhere which frankly is pretty bad practice and again would make maintenance a real pain.
Furthermore, what happens when an update is needed on the page? If this is meant to be codeless, would you have to redraw out the whole design again and hope that it infers that the design is the same as it was previously? And on top of this, would you then have to go through and make all the manually added functionality again, as it’s essentially a rebuild?
One of the largest issues I feel may come of people using this however, is not to do with the system, but actually in fact to do with human laziness. If people use this as a low fidelity prototyping tool and then customise it over time in order to make it look, or work, a little more like they expect it to, then it could slowly mutate into a horrific bastardisation of part auto-generated, part customised code in a single behemoth of a file. But as I say, this is not an issue with the program, but to do with human nature.
A few other things to think about would be code conciseness. As I previously said, the output of this is overly verbose on first glance. But I’d be intrigued to know how it would react (pun intended) to the creation and/or grouping of common parts into reusable components if there are sections of the pages which are similar in nature; especially if they’re on separate pages.
However, these flaws could all just be due to the infancy of this technology and I look forward to seeing how this kind of software grows. Nevertheless, it’s showing something promising and even if it goes no further, it still provides an amazing tool for simple prototyping.