Communicating with frontend developers is crucial for designers because they are the ones who turn your design into actual experiences. Designers need to bring their partners up to date with business objectives and explain the design and business justifications, even just to set up context for developers to provide constructive feedback.
However, as any designer can attest, communication with developers is not easy due to the different perspectives they each hold. Moreover, the fact that they operate within different technical bubbles with their own sets of jargon does not help matters. So it is no surprise that designers often wonder if it is possible to reduce reliance on frontend developers.
Indeed, products like Webflow are designed to enable designers to spend less time explaining and more time creating experiences. This prompts conversation designers to wonder: if it’s possible for GUI applications, what about chatbots? To answer this question, let start with what is frontend developer in the first place.
What is frontend developer?
Modern applications are typically separated into frontend and backend development. Frontend developers concentrate on creating the user interface (UI) and enhancing user experience, while backend developers focus on implementing business logic, managing data, and ensuring system stability.
For web applications, a frontend developer is responsible for creating the user interface and experience of a website or application. They transform designs created by UI/UX designers into interactive digital experiences using HTML, CSS, and JavaScript. Frontend developers must address various technical considerations, such as performance, cross-site behavior, and cross-browser compatibility issues. They often collaborate closely with backend developers to integrate frontend interfaces with backend systems and databases.
What do they do?
Developers program. Programming, also known as coding, is the process of creating instructions for a computer to follow in order to perform specific tasks or achieve certain objectives. It involves writing sequences of commands using a programming language that the computer can understand and execute.
Coding needs programming language. A programming language is a formal language comprising a set of rules and symbols used to write instructions for computers to execute tasks and solve problems. It serves as a means of communication between humans and machines, allowing programmers to create software, develop algorithms, and control the behavior of computer systems.
Why can’t we use natural language like English to code? There are many reasons, but one of the main ones is that every instruction in a programming language has well-defined semantics. This means we can predict the outcome of an instruction without executing it, and the same instruction will always produce the same result when executed, regardless of the runtime version being used. This consistency is crucial for delivering consistent and reproducible experiences.
Two paradigms of programming
A common misconception about programming is that a sufficient background in computer science topics such as computer architecture, operating systems, and networks is a prerequisite. This misconception often arises from not realizing there are two types of programming.
Imperative programming is a programming paradigm where the focus is on describing a sequence of steps or control flow to achieve a desired outcome. Using imperative programming to make a reservation:
#1: Get User Input: Prompt you to enter a preferred date and time.
#2: Check Availability: Access the calendar system and loop through
available time slots to see there is a match. If not go back to step #1.
#3: Confirm Appointment: Once a valid slot is chosen, prompt user to confirm.
If user does not confirm, go back to step #1.
#4: Record Appointment: write the appointment details to the calendar and
potentially send a confirmation email.Of course, this is only a high-level step-by-step instruction. There are many other details that need attention in reality. For example, how to access the calendar system, and what happens if the access fails. Imperative programming are important for system or infrastructure development. Taking advantage of the hardware, and developing better algorithms is thus worthy is effort since the investment at this level can be reused by many business applications built on top of it.
Declarative programming, on the other hand, is a programming paradigm that emphasizes expressing the desired result without explicitly specifying the control flow or steps to achieve it. To make a reservation using declarative programming:
Specify Constrants and Desired Appointment: Focus only what you need.Clearly, for computer to help user with just description of what they want, the declarative programming language need to provide the higher level instructions and runtime that is smart enough to convert these higher level requirement into lower level instruction to actually help users. Declarative programming is best for developing business applications, where efficiency is not as important as the flexibility, in order to survive in the ever-changing business conditions.
Chatbot frontend is so much easier
All programming requires a conceptual model of the solution. For web frontend, a couple conceptual models are required.
- Cascading Style Sheets (CSS) Box Model: The CSS box model describes how elements on a webpage are rendered as rectangular boxes, consisting of content, padding, border, and margin. Frontend developers use the box model to control the layout of a web page, including position, size and spacing of elements on the page.
- Document Object Model (DOM): The DOM is a programming interface for web documents that represents the structure of HTML or XML documents as a tree of nodes. Frontend developers use the DOM to manipulate the content, structure, and style of web pages dynamically using JavaScript.
- Responsive Web Design: Responsive web design is an approach to designing and building websites that ensures optimal viewing and interaction experiences across a wide range of devices and screen sizes. Frontend developers use techniques such as flexible grids, media queries, and fluid layouts to create responsive web designs.
Getting familiar with these conceptual models is not easy. Not only because of the complexity involved, but more importantly, they are not something that one will use in their everyday life, so mastering them requires lengthy special training.
Fortunately for chatbots, many look and feel considerations are eliminated. Major platforms such as Messenger, WhatsApp, iMessage, and RCS offer limited controls, primarily buttons, and manage the look and feel entirely. Here, the main expressive power lies in the messages sent by chatbots to users. Additionally, in voice channels, buttons are not even supported.
One conceptual model that might still be useful for chatbot is event-driven programming. Event-driven programming is a programming paradigm where the flow of the program is determined by events such as user intent (semantic meaning embedded in user’s utterance), system notifications (a timer expiring), or other external inputs. Developer only need to specify how to respond to these events by pairing the events with as event handlers or listeners. These event handlers are designed to react to specific events and execute appropriate actions in response. This is equivalent to if-this-then-that rule, and that is all we really need to define the chatbot behavior.
Then there is also text-to-code.
“It is our job to create computing technology such that nobody has to program, and that the programming language is human. Everybody in the world is now a programmer. This is the miracle of AI,” Jensen Huang said.
The confidence that Nvidia’s CEO has in the replacement of traditional programming with LLMs is not without evidence. There is a huge amount of code accompanied by natural language comments explaining its functionality. Trained on these code datasets, as well as other natural language texts, LLMs have already begun to show utility in text-to-code tasks, where they are instructed to generate code based on natural language descriptions of desired functionality. While blind trust in the generated code may not be advisable, under use cases like Copilot, where designers can inspect and test the code before committing to it, LLMs are already proving to be useful.
For example, when asked to: Define a function named ‘calculateSum’ that takes two parameters: ‘num1’ and ‘num2’, ChatGPT generates the following code in JavaScript:
function calculateSum(num1, num2) {
// Add 'num1' and 'num2' together and return the result
return num1 + num2;
}Which is pretty darn usable. For designers who do not code for a living on a daily basis, this capability can help them quickly get something they can improve upon. After all, improving a more or less working code skeleton is much easier than starting from scratch without any assistance. At least you do not need to memorize the syntax.
Parting words
Without the need to worry about the layout of elements and how they behave under different screen sizes and user interactions, the primary task for chatbot frontend development is to construct interaction logic by integrating various software components. Particularly, the key responsibility for frontend developers is to interface with other languages, libraries, or APIs, enabling interoperability with the backend systems.
“The ‘gluing’ or integration usually just requires the invocation of backend APIs with the correct timing, which is easier for LLMs to get right. Furthermore, with a platform that provides enough high-level instructions, LLMs can more easily provide sufficient assistance so that anyone with a good understanding of business objectives and application logic can morph the generated code into something usable.
With fewer things to worry about and the power of LLM, along with declarative platforms providing an easy way to describe dependencies (many modern languages can do a good job there), it is very possible that we may not ever need dedicated frontend developers when building chatbots. However, it’s worth noting that this argument assumes the backend is already in place; if not, we might still need backend developers, but that is a different topic.
Reference:
