When you open a webpage or app, the most important thing is that the application behaves as expected. You want to be able to successfully post the gorgeous sunrise photo you took, make a purchase, or find the answer to a question. Alongside the functionality, it is important that the user interface--the screen, buttons, and search bars--presented is at least pleasant and, hopefully, even delightful to look at and interact with. When the design makes the process of completing a task more enjoyable, you have frontend developers to thank.
Technopedia defines a "frontend developer" as "a type of computer programmer that codes and creates the visual front-end elements of a software, application or website." Frontend development is rooted in HTML, CSS, and JavaScript/TypeScript.
The Birth of Frontend
Some rightly credit Steve Jobs with being the most prominent figure in recent history to place a high valuation on the frontend of software products. Apple phones and computers have incorporated clean, easy-to-understand user interfaces from day one. This attention to detail has allowed users to not only accomplish his/her daily tasks, but also feel joy doing them. Even though frontend has always been important--people simply like things that are aesthetically pleasing and intuitive--it has experienced a bit of a rebirth in the past few years.
The Rebirth of Frontend
Rounded Edges
Material Design and theming is one framework pushing the limits of frontend development. As defined on the Material Design website, "Material is a...system of guidelines, components, and tools that support the best practices of user interface design. Material...helps teams quickly build beautiful products."
Material Design incorporates greater interactivity and feedback for the user. One other defining feature of the interfaces it helps build are the rounded edges, and it turns out there is an evolutionary basis to the change from sharp to curved corners. Think about the statement you've likely heard uttered to a child, "Don't run with scissors." The sharp edges pose a much greater hazard than the soft, curved ones of a toy ball. Harsh edges put us on alert, while rounded edges put our minds at ease.
Not only are rounded edges more soothing, they are also easier to understand. The human eye has been shown to more readily follow curved arrows in a flow chart than sharp ones. A more calming, easier-to-follow user interface? Sounds like a plus to me.
Image courtesy of Pixabay.
More than Meets the Eye
For those less focused on design and more invested in developing efficient backend code in C++ and Java, it can be initially difficult to appreciate frontend development. Although styling is immensely important to the user experience, frontend development is much more than this. Especially with the more widespread proliferation of web components, frontend development can unlock new ways for users to interact with tools that were previously locked into monolithic environments.
What Are Web Components?
Images courtesy of Wikimedia Commons.
Web components are modular, context-agnostic widgets that can be backed by different technologies, such as Polymer or Angular Elements.
For a better understanding of web components, consider the following example:
Assume that users of a shopping list creator can only go to one specific website to create a shopping list. The site creator wants to allow users to access the full functionality of the website anywhere, such as a user's own personal website. The site creator wants a user, for instance, to be able to wire up some HTML as follows:
<html>
<h1>Personal Website</h1>
</html>
and then add in the shopping list with a simple additional HTML element:
<html>
<h1>Personal Website</h1>
<shopping-list></shopping-list>
</html>
Through the development of web components like this one, developers can save users of their products time and resources, in addition to allowing greater flexibility in the users' interactions with their products. To see the TypeScript, HTML, and CSS that would be necessary to achieve a result similar to what is outlined above, this Stackblitz example implements a similar list web component.
Frontend development is what wraps up and presents the functionality of the sites, apps, and devices we interact with . It is especially powerful because even small changes can make a significant impact in relation to the user experience. If you're interested in trying your hand at frontend development and want a way to instantly visualize the changes you are making when working in Angular or React, Stackblitz is an online code editor that provides a visual representation of your app alongside your source code. Happy developing!