The web has gone a long way since it was merely a set of static HTML pages connected together. Flash once powered interactive web pages, games, ads, etc., has well receded as nearly the entire internet has been completely powered by JavaScript today.

So far, a typical web development project normally entails a Web Designer to sketch the layout and then specific elements of the website on visual graphic tools, such as Photoshop, Figma, Invision, Sketch, etc.; after that a web developer is responsible for converting the mockup into HTML webpages and handling the data logic behind.  Does that sound familiar for you?

Well… the process as we know it (or, as we USED to know it) is no longer prevailing. Artificial Intelligence (AI) has massively invaded the space of web development, imposing serious threat to put web designers and developers out of their jobs. Let’s explore the capabilities AI has obtained that could put multiple manual processes, which were once believed to be very “human”, to be at the verge of being completely automated.

AI to replace web developers

Sometimes a web developer also creates the UI for the website, but normally web developers are mostly responsible for two categories of work, depending on the role classification:

• Front-end developers: manages everything that users visually see in their browsers or applications.
• Back-end developers: handles the communication between the server (database) and the browser.

Front-end developers are ironically at the front line of being replaced by machine. The idea of code being automatically generated from a GUI screenshot or wireframe, without the labor from developers, has emerged in recent years. This concept is believed to have rooted from a 2017 Cornell University paper pix2code by Tony Beltramelli. Also in this period, AirBnB went a step further by developing sketch2code, an AI that convert hand-drawing sketches with low fidelity into fully responsive front-end code. The former claimed an accuracy of over 77% while the latter is being widely in use already. Many other platforms have been emerging subsequently.

These AI systems are built on the same philosophy: Machine learning. Basically, a machine’s learning algorithm enables it to identify patterns in a set of observed data, build models that explain the world, and predict things without having explicit pre-programmed rules and models.

In the case of the aforementioned AI systems, the training data would be:

• Visuals representing a rendered website, such as mockups/wireframes in the case of pix2code, and hand-drawn sketches for sketch2code
• The code built by human corresponding to those visuals

With millions of websites that have already been built across the internet, the learning data is abundant. Machine learning enables these AI systems to predict patterns in which images feed is translated into code, and apply these patterns for future cases not yet included in the learning data. After these build, train, and deploy steps, coding the front-end of websites is now confined within 3 steps:

• Provide the design visuals to the trained neural network, whether it be hand sketches, wireframes, or mockups, depending on what the network used as the learning data
• The neural network automatically converts the visual into code
• Output is rendered

(Readmore: Will AI Become The End Of Code?) 

AI to replace web designers

Converting designs into a batch of HTML and CSS code is only the latter half of the web development cycle. Now AI is also taking over the former half. Or the entire web development.

Website building tools requiring no more than the website content have already come into practice. For years, a person who does not have the capability to write a single line of code could set up their own website, in their own preferences, error-free. However, the underlying problem with these tools is that, the website templates are limited to some extent, resulting in many websites sharing relatively similar appearance.

This is where AI comes into play. Based on the user’s style and preference inputs, the systems usually predict matching patterns in terms of color palette, web layout, element styles, etc., and mix up to create limitless permutations. One-stop-shop web building platforms such as Wix or Bookmark have rendered both web developers and designers nonessential, thanks to the ability to set up websites in few minutes with various customization options. This kind of technology is regularly referred to as “Artificial design intelligence”.

All that is left to you cracks down into providing the website content and uploading the visuals. (but who knows, AI is already able of composing music, creating paintings, and responding to human beyond recognition – maybe someday AI will handle these).

What now?

It is no doubt that AI is benefiting web development in multiple ways:

• It saves developers the tedious job of converting designs into code
• It can build up websites in much shorter timespans than traditional development
• It is a highly economical option for those who need a website. The costs for mentioned platforms such as Wix is $11 - $35, compared to a traditional development project involving multiple parties that range somewhere between a few hundreds to thousands.
• It minimizes human errors, such as front-end bugs or responsive bugs which have been inevitable in most development projects
• It can be mass applied

However, whether to delegate everything to AI is still a controversial matter, as Stephen Hawking has anticipated: “It could be the best thing to happen to our society or the worst. We just don’t know! It could be the worst event in the history of our civilization”.

Interested in more technology readings? Click here to explore!

Reference

1. Turning Design Mockups Into Code With Deep Learning [Link]
2. pix2code: Generating Code from a Graphical User Interface Screenshot [Link]
3. Application of Deep Learning in Front-end Web Development (HTML + CSS) [Link]
4. What Is Deep Learning? 3 things you need to know [Link]
5. Machine Learning for Humans [Link]
6. The Role Of Artificial Intelligence In Web Development [Link]
7. AI is Taking Peoples’ Jobs - Are Developers Next? [Link]