Front-End Engineering Complexity Overview

TODO: collapasable, copyable, download, etc

What is the best place on the internet (blog post, infographic, etc) to share with someone who doesn't understand that frontend engineering is a real discipline and the different costs for building simple things versus complex things. An example would be using form inputs versus creating a new type of input from scratch that handles keyboard input, ARIA, touch, etc.search("best resources to explain frontend engineering complexity")# 【0†Best Online Front-End Software Engineering Courses & Programs - edX†www.edx.org】 On a day-to-day basis, a front-end engineer may: 2. Use HTML, CSS, and JavaScript to develop user-friendly interfaces. Maintain and enhance existing programs and applications. Identify, mitigate, and prevent future errors, bugs, and other issues. Partner with UX/UI designers and other software engineers to align expectations.

【1†Front End Interviews — Definitive Overview and Preparation Guide†www.greatfrontend.com】

Learn important front end concepts and techniques that apply to all question types. Prepare for the most common front end interview question types (coding, system design, quiz, behavioral). Practice questions across the most common front end interview formats along with high quality solutions written by ex-FAANG Senior Engineers.

【2†Front-End Development: The Complete Guide - Cloudinary†cloudinary.com】

Users cannot access the back end. Front-end development is the process of building components that interact with users. Examples are the user interface, buttons, user-entered data, websites, and user experience (UX) features. The front end aims at meeting user requirements and delivering a positive user experience.

【3†The Best Way to Learn Frontend Web Development - freeCodeCamp.org†www.freecodecamp.org】

There are two approaches when you learn web development – go wide or go deep. Going wide means you start learning many things together. This might work for some people, but not for others. You might overwhelm yourself with tutorials, exercises, videos, and blogs, then eventually give up. Going deep means you start learning one thing and try ...

【4†What is Front-End Development? Necessary Web Development Job Skills ...†www.freecodecamp.org】

Adam Naor. A front-end developer is someone who works on software, like desktop or mobile websites, that users interact with. Specifically, a front-end developer spends time on the side of technology that the user touches and sees. The front end is also commonly referred to as the client side, or more broadly speaking, the user interface.

【5†Front-end Developer Handbook 2019 - Frontend Masters†frontendmasters.com】

What is in this Handbook:. Chapter 0 provides a lite recap of the year in front-end development and what may be to come. Chapter 1 & 2 aim to give a brief overview of the discipline and practice of front-end development. Chapters 3 & 4 organize and recommend learning paths and resources. Chapter 5 organizes and list the tools used by front-end developers and Chapter 6 highlights front-end ...

【6†Part 1: How Grammarly Tackles Hidden Complexity in Front-End ...†www.grammarly.com】

People tend to be optimistic, which can be an admirable trait in everyday life but a disastrous one in software engineering. For example, opening a window is a straightforward action for the user, so if we receive a requirement to create a window in the product, we may think it’s a pretty straightforward component to add.

【7†11 Key Principles to Build Scalable Frontend Projects - Simform†www.simform.com】

To give you a complete overview of the practices used by industry experts, we have included both traditional and modern approaches to scaling front-ends: 1. Separation of Concerns. The principle of Separation of Concerns (SoC) states that each layer in the application must be broken down into smaller sections.

【8†Front-end project management, flexibility - project success†www.pmi.org】

The project management approach (1) is to spend additional resources on planning in order to avoid cost overrun and delays in producing project outputs. More significant in terms of improving long-term utility (2) would probably be to spend additional resources front-end in selecting the most feasible project concept.

【9†Micro Frontend Benefits, Advantages & When to Use Them - Ionic†ionic.io】

With smaller codebases offered by a micro frontend, developers can be more agile and efficient when building out new capabilities and integrating applications. The resulting frontend is much easier to scale and requires less maintenance, reducing ongoing costs while reducing barriers to revenue generation. Application Interdependence.

【10†A Beginner’s Guide to the Micro Frontend Architecture†www.sitepoint.com】

A micro frontend is an architecture pattern for building a scalable web application that grows with your development team and allows you to scale user interactions. We can relate this to our ...

【11†influence of front-end management - project complexity on success†www.pmi.org】

In this study the relationships between project complexity, activities performed in the front-end development (FED) phase, and project success were investigated. A survey was distributed to project managers in the member companies of the NAP network, a competence network of the Dutch process industry. The survey contained questions on the interviewees’ most recent finished project and was ...

【12†Part 2: How Grammarly Tackles Hidden Complexity in Front-End ...†www.grammarly.com】

In our last post, we examined some of Grammarly engineering’s process-based methods of reducing complexity, derived from research, experience, and classic computer science guidelines.In this post, we’ll look at how we reduce complexity in the code itself, starting with our complexity pyramid, which informs our choices throughout the front-end development process and helps ensure that ...

【13†Comparing Front-End and Back-End Coding - Berkeley Boot Camps†bootcamp.berkeley.edu】

This dichotomy differentiates front-end coding —including JavaScript, HTML, CSS and more—from the back-end—those like Python, PHP, and SQL. Because of the always-shifting levels of complexity in the technological climate, the need for more specialists in each direction is omnipresent. This pushes the differentiation of the two types even ...

【14†The Front-End Design Process in 12 Steps | DISHER†www.disher.com】

3. Conduct Primary Research. During step three, DISHER and our client gain firsthand information on our client’s end users through surveys, interviews, observations, and focus groups. Primary research is foundational to human-centered design because it allows us to better align our understanding of the user.

【15†FEED: Front-End Engineering Design - Assai†www.assai-software.com】

FEED in a nutshell. The FEED or FEE stage (Front-End Engineering Design) – sometimes Basic Engineering, ‘Define’ or ‘FEL-3’ phase – usually follows after the pre-FEED stage (or the ‘Select’ / ‘FEL-2’ phase). Based on the pre-FEED deliverables (mainly the Basis of Design and FEED Scope of Work), Basic Engineering will be completed with the “FEED Package” as a final result.

【16†What Is Front-End Engineering? - Forage†www.theforage.com】

Front-end engineering is a type of software engineering that involves what users see and how they interact with an application. This type of engineering requires technical expertise to plan, build, develop, and test software, and collaboration and creativity to work with the product team and ensure the software looks and functions as it should.

【17†Evaluating the complexity of engineered systems: A framework informed ...†incose.onlinelibrary.wiley.com】

1 INTRODUCTION. Increasingly, organizations are confronted with the challenge of engineering a complex System-of-Systems (SoS), or engineering a system that operates in a complex SoS context. 1-5 System complexity poses several challenges to such organizations as complex systems are generally made up of a large number of diverse subsystems and components, interconnected and interdependent via ...

【18†What Is a Front-End Engineer? - Forage†www.theforage.com】

Front-End Engineer Defined. A front-end engineer works on the part of the software that users and clients see. “Front-end” refers to the user-facing side of an application, which means they’re focused on things like functionality, layout, speed, and user experience. They want to create platforms that are visually appealing, easy to use ...

【19†Front-end engineering and design: your best estimate†www.engineerlive.com】

Advantages of the streamlined approach to front end engineering and design. The primary benefit of the streamlined approach is it provides the information required for an investment decision at a fraction of the cost of conventional FEED. Instead of spending 2%-3% of TIC expect to spend around 0.5% using the streamlined approach. Visible: 0% - 100%mclick(["6", "12", "2"]) [Image 9]

Grammarly Editor search function

People tend to be optimistic, which can be an admirable trait in everyday life but a disastrous one in software engineering. For example, opening a window is a straightforward action for the user, so if we receive a requirement to create a window in the product, we may think it’s a pretty straightforward component to add. But how many different types of windows are there? And how many functions can they perform?

As a user, one doesn’t think, “I’m going to open a window of type 17, and clicking this button needs to update three database entries.” It just opens. But as engineers, trying to encode this as a program involves different methods of pulling the handle, updating handle state, and other details. Before we start working with complexity at the code level, we need to understand the task more fully. Without doing so, the process might look like this:

• Perform some planning and resource allocation
• Choose the approach, architecture, and tools
• Write code
• Test
• Deploy

None of this is technically incorrect; the problems come when we follow those steps and begin to think that we’re at the point of having production-ready software—and only then take into account edge cases and requirements.

So for the search problem: we needed to ask the right questions while planning. In our case, we learned that the function should be able to search all documents, not only the visible ones. (For context, clients only have access to their first 100 documents, which is something we engineers thought was widely understood.) But uploading all the documents to memory would take too much time, so we realized we would need to perform a search on the server.

Once that aspect of the request was understood, more requirements appeared. We’d need to make sure the server search was fast enough. And perhaps the search would even need to work differently than initially assumed. Here’s our solution, which unearthed even more complexity:

• If the user has fewer than 100 documents, then we’d perform a front-end-only search.
• Otherwise, we’d make two parallel searches—both client- and server-side—and show the server results as soon as they were available.
• However, this solution creates an interesting edge case: a front-end search might show zero results, but then the user may suddenly see more results once the ones from the server are populated. To make this more user-friendly, we decided that if the front-end results are empty, we’d show a spinner until the server results appear.

These snowballing requirements help our user, but they bring additional complexity to our architecture—particularly because we didn’t account for them from the beginning.

[Image 10]

Example of a spaghetti code diagram

Let’s walk back through these steps and call out some of the problems that arose. In the next section, we’ll explain each avoidable problem and how to prevent it.

Our realization that accessing more documents would require a server-side search and that this search would be too slow for our purposes was an example of incorrect initial assessment. Our plan to respond by searching on both the client and server sides, then merging them in real time, was underestimating technological complexity. The result—spaghetti code and a bloated timeline—would increase costs across time: underestimating project complexity.

These can all be catastrophic to a team striving for good software engineering practices. Fortunately, they’re all also avoidable with awareness and good process.

Avoiding complexity catastrophe

[Image 11]Before we write a single line of code, we try to describe the problem with as much detail as possible. We talk to colleagues, specialists, and non-specialists—and to the debug duck [see right]. Then we run requirements testing with engineers, ask how to break a feature, and brainstorm edge cases. We think about life cycles and how a feature will develop in a month or a year or more from now. We also look at how competitors do similar features and learn from their approaches. This helps avoid incorrect initial assessment. We ask questions until no new answers turn up. David Hogue’s talk 【9†“Simplicity Is Not Simple”†www.youtube.com】 offers more ways to dig into a situation to uncover, categorize, and address hidden complexity, with examples of successful complexity reduction from his work.

To complement our questions, we use a variety of tools. Our designers not only draw but also make interactive product prototypes to ease implementation. In very complicated cases, we build real models, using prototype-quality code to simulate full functionality.

We’ve also had success using a large mindmap. When we were completely rewriting the Grammarly Editor, we gathered all of its features this way, which made iteration much simpler and ensured that we didn’t miss a single requirement. It also helps us to avoid underestimating project complexity.

[Image 12]

Example of a product mindmap

If the product’s components use logic that is particularly complex, we typically also draw a state diagram (or statechart) with events and transitions. Here is an example of a state diagram of a standard alarm clock.

[Image 13]

State diagram of a standard alarm clock

Though the step seems deceptively simple, creating a state diagram is an effective exercise in understanding that state is anything but straightforward. We’ve found this to be a great way to avoid underestimating technological complexity—by not only documenting this area of complexity but also by ensuring that any lack of clarity or detail is deliberately and clearly eliminated before valuable engineering hours are allocated and used up.

We found these through research and experimentation, which we recommend you do within your team when creating your process.

Let’s look at these steps in action.

Real-world example: the Grammarly Editor sidebar

Before we begin coding, and after the intense research we do with SMEs and other stakeholders, we’ve typically created and abandoned about five different designs for the UI. There are two general categories of abandoned designs:

• Designs rejected by our UI designers or product managers
• Designs that passed those reviews but were problematic to implement from an engineering point of view. Some are hard to implement in general, and some have just a few difficult edge cases with no UX solution

After we have two ideas that are good enough to prototype, we use the 【10†80/20 principle†en.wikipedia.org】: How can we make 80 percent of a product in 20 percent of the time without architecting or testing? We then iterate until we as a team are happy with the result. In the case of the Grammarly Editor sidebar, we decided to use the sixth design as the basis for our product.

We then designed the architecture on a whiteboard and made an initial version of the feature to show a small number of real users. We did this four times, collecting and implementing feedback, and showing the new version to users to ensure we were on the right track.

Once we landed on a relatively stable version of the sidebar design, we began to create the animation, keeping in mind that smooth animation is critical for this feature to work. Our designer created an interactive prototype that covered 80 percent of our predicted uses, but we couldn’t implement the other 20 percent of edge-case uses without a real prototype.

We decided to use paper prototypes as seen below. The feedback we got from those helped us to finally implement the animation. But then we got feedback from our users: the motions in our 3D animation made them feel queasy—so we backed off and made everything much simpler and in 2D.

[Image 14]

Physical prototyping of the Grammarly Editor sidebar

All of this happened before we wrote a single line of code meant for production. Since then, we’ve implemented and released the sidebar. We continue to get feedback, and we’re still actively working on improving it. However, by asking questions, gathering feedback, and collecting requirements beyond the obvious early ideas, we were able to work through a lot of the feature’s needs before using expensive coding hours and without forcing our users to become beta testers. The process was still complex, but it remained organized—and our code reflects that.

Making friends with necessary complexity

Programming essentially consists of composition and some work with complexity. With the use of basic math and logical operations, you can build any software system—if you can cope with the complexity. No matter what programming language you are using, you’re just combining smaller blocks into bigger ones until you get a program. It sounds simple, but complexity lurks even in that stripped-down description.

So no one can avoid all complexity—but it is possible to understand and account for it before diving into code. At Grammarly, we use some classic ideas from computer science to guide the planning and iteration we described above, which help us have an idea of how much complexity we can reasonably expect to reduce through that process. We can’t cover the entirety of the vast field of complexity in one post, but we can describe our view of the issue and detail a few high-level practices that have been effective for us in reducing unnecessary complexity in our engineering organization.

One way to define complexity is as a measure of the interaction of the components and the level of entropy in the software—i.e., how disorganized things are. In his 1987 Computer magazine essay 【11†“No Silver Bullet—Essence and Accident of Software Engineering,”†www.cs.nott.ac.uk】 Fred Brooks wrote that complexity comes from two places:

• From the task itself: the so-called essential complexity, which depends on the input and output of your task, and is caused by the outside world so cannot disappear or be reduced. We can only be How does this language switch relate to functional programming and our journey to limit complexity? JavaScript has all the necessary attributes to be an effective functional language: first-class functions, lambda functions, and closures. But functions in JavaScript are not pure, and data is not immutable. Furthermore, the lack of static typing makes it harder to compose neat functions because composition requires some contracts to be respected, and there are some other 【20†advantages of types in FP†dev.to】. For this reason, TypeScript is a better option for FP—especially now that we have such FP libraries as 【21†FP-TS†github.com】 and 【22†Funfix†github.com】—and thereby a better ally for limiting complexity.

So even though there is no one fix to eliminate complexity entirely, we agree with Mark Seeman’s points in 【23†“Yes Silver Bullet”†blog.ploeh.dk】: Statically typed functional programming is as close to a silver bullet as we’ve found.

Structural Complexity

Now that we’ve discussed functional programming and the benefit of using types, we can return to our pyramid fully outfitted for success. Let’s address complexity from the bottom up, starting at the level of statements.

Statements: Unchanging variables and handling predictable exceptions

[Image 9]

Some of functional programming’s most helpful characteristics come from some pretty elemental guidelines. To start: When possible, we use readonly variables, which keep the changes created by our functions compact and predictable, and our parameters unchanged.

We also try to contain unexpected effects by using for/while loops only in performance-sensitive places. for/while loops are powerful tools but are notorious for creating problems (there’s a reason Apple headquarters’ original address was 1 Infinite Loop). We use them judiciously and only when we know they’re the best option.

Finally, we try to perform idiomatic handling for empty values and errors with Try and Option. 【10†Option†gcanti.github.io】 is an object type that may or may not have a value; this type is used to prevent undefined and null objects and their resulting errors. Try is an object that can be completed either successfully or unsuccessfully, without the need to catch exceptions in your application. By using these, you can be less defensive in your programming.

[Image 10]

Idiomatic handling of empty values and incorrect data

In the code above, we get an Option—that is, an optional parameter—and try to parse it with Try. First, we do it in one way, and if that doesn’t work, we try to recover in another way, which can enable your code to support two different formats of stored app configuration (in the case of json.parse, a JSON string). Then we try to validate it; if the validation worked, we merge it with our basic config and return it. If at some point the values we needed to proceed through the entire function are not there, we return the default value. And as we discussed with readonly variables the original variables supplied as parameters are unchanged and still available to other functions as needed.

Functions: Clear, pure, and SOLID

[Image 11]

When possible, we prefer 【24†pure functions†medium.com】, and we try to avoid conditional if statements for switching behavior.

For instance, we have a function that writes logs, and when we run it in the local environment, it writes to the console. Instead of making one function with conditional checks, we make it 【25†polymorphic†dev.to】 with two different implementations. The correct one will be used depending on the parameters supplied. Here’s an example:

[Image 12]

We prefer polymorphism over if statements

For polymorphism, it is important to respect two important principles from 【26†SOLID†khalilstemmler.com】—a classic set of computer science principles that we keep in mind throughout our work. First, the single responsibility principle states that each function or method should be responsible for just one thing. This makes our code more deliberate, clear, and predictable. Second, the 【27†Liskov substitution principle†www.tomdalling.com】 states that we should be able to easily switch from one function implementation to another.

Another way of ensuring clarity is to avoid class methods that can leave the class in a disassembled state. For example, when we create an alert in the user’s text (an object that stores information about a specific error or an issue, including its position in text and possible ways to fix the error or issue), we must register this alert with the positionManager, which is an entity that controls the absolute position of the alert in text.

If we haven’t registered the alert, we can’t do anything with it, so if an operation happens without registering the alert, we’ll get an exception. To avoid this, we should design our system so the object is provided what it needs from the start.

[Image 13]

Don’t break invariants

The composition is critical, and we use it frequently with functions, classes, and objects. When used with functions, it opens up a whole stream of possibilities in the form of 【28†memoization†scotch.io】, 【29†piping†dev.to】, and other useful perks. We can also use composition to divide function logic from error recovery—e.g., to isolate handling JSON parsing errors from the actual usage of the parsing result. This then empowers us to use and combine different error-handling strategies inside a function without rewriting its logic.

Finally, it’s essential to write functions with a clear and easy-to-use interface. In the example below, the parse function takes a data parameter, and what it does internally may not be immediately evident in its twenty lines of code (to say nothing of much longer functions). If you specify that the function returns Try, engineers using your function later will be grateful, and future engineers will find it much easier to maintain the codebase.

[Image 14]

Make self-explaining signatures

Modules and classes

[Image 15]

Although types bring considerable benefits at each level of the complexity pyramid, their utility becomes most evident at the class and module level. At this level, engineers start to think in terms of software architecture. We think through the design of our modules, how they interact, and their APIs, using types to describe these aspects. Then we implement our architecture, integrating work from other Grammarly engineers that might use different libraries or frameworks. Having clear types in place ensures that we can manage these different sources of complexity for this commit—and future ones too.

Invariance in types

In general, when constructing types, it’s best to ensure that they cannot express an incorrect or somehow contradictory state. Let’s imagine, for instance, that we are implementing an interface for a bulb switcher. We might inadvertently create an unpredictable state, like trying to switch off a bulb that’s not on. The solution would be creating a specialized bulb interface that does not allow such behavior. Consider the code sample below.

[Image 16]

Use types to prevent incorrect state of an app

In some languages, such a design can be achieved with the help of algebraic data types.

Algebraic data types

This principle dictates that we cannot read data from a state that is incorrect according to the type system. By avoiding contradictory states, we can avoid complexity.

[Image 17]

Algebraic data types in action

Correct data structures for better performance

Strong types help ensure that you’re using the right data structures and not defaulting to simple arrays and objects, which can be suboptimal. A few examples:

• Set vs. Array: If you need only unique values, use set instead of array, as it provides a quick uniqueness check.
• Prefix tree vs. Hash table: This is an important distinction for search functionality. For instance, if you needed to create an English-language dictionary that will be frequently searched but rarely modified, then you might use a prefix tree. Looking up data will be faster, even in a worst-case scenario, compared to an imperfect hash table that contains many key collisions. Moreover, using a hash table for this would require a huge amount of allocated memory, which is especially important to consider for front-end apps.

Data heading/encapsulation

This classic software engineering principle dictates that our variables, functions, and classes should have the smallest possible scope. Avoid exporting or importing unnecessary artifacts. Hide nonessential variables inside closures instead of storing them inside a class. Try not to clutter your namespaces.

Separation of concerns

This principle dictates that responsibilities are distinctly separated. For example, imagine that you need to implement functionality for bank-transaction processing. In addition to the core business logic, this task also requires authorization, logging, tracking, and other functions. You will want to isolate all these concerns into separate modules. Mixing them all into a single function or class risks turning into unsupportable spaghetti code.

Composition over inheritance

Inheritance is one of the ways to implement polymorphism. When we use it for composition, however, we end up with highly coupled, inflexible, and fragile architectures. Composition is usually 【30†preferable†medium.com】.

Applications and subsystems

[Image 18]

Before we move on from discussing the structural complexity of building an app, we wanted to talk about complexity at the level of the application itself. This can sit between the code level—which we just discussed—and the behavioral areas. There are some shared principles that can help a project move cleanly from discussion through to implementation.

To start, we try not to reinvent the wheel when writing code, because less new code means less

Front-End Development Versus Back-End Development

Hardware, computer programs, and websites comprise many components: code, databases, user interfaces (UI). Those that interact with users are in the front end; those that operate the technology are situated in the back end, also called the data-access layer. The back end provides the resources to support the front end.

While front-end development is focused on what happens in the user interface, back-end development deals with what goes on behind the scenes. It is often perceived that front-end development is technically easier compared to the complexities of back-end development, which requires a solid command over programming languages, Data Structures and Algorithms (DSA), and data management skills.

Here are the key differences between software development in the front end and back end:

• Back-end development is the process of building the components for running the application behind the scenes. Examples are components for data storage, infrastructure, integration with external systems, and code written in one or more programming languages. Users cannot access the back end.
• Front-end development is the process of building components that interact with users. Examples are the user interface, buttons, user-entered data, websites, and user experience (UX) features. The front end aims at meeting user requirements and delivering a positive user experience.

An emerging concept in front-end development is the use of micro-frontends. This approach involves breaking down front-end app development into smaller, more manageable pieces for better scalability and maintainability. Moreover, front-end developers also need to be adept with tools for testing and code analysis to ensure the quality and performance of the application.

As part of career development, aspiring front-end developers should focus on building an online portfolio to showcase their skills and projects. Additionally, cultivating soft skills like communication and teamwork is as important as technical proficiency.

Programming Languages for Front-End Development

Below are the most common programming languages for developing the front end.

HTML

The HyperText Markup Language (HTML) programming language, which defines the structure and meaning of web content, is a building block for front-end development. Through HTML, browsers display text or load elements, rendering webpages, which contain hyperlinks and links to other webpages, for users.

CSS

Cascading style sheets (CSS) is the standard language that specifies how to display HTML content: fonts, foreground and background colors, etc. With CSS, you can control the design layout and its components for various devices like desktops, tablets, and smartphones. Examples of the components are the header, body, footer, content, asides, and sections.

[Image 9: “Front]

For more details, see 【105†Working With CSS Images】.

JavaScript

JavaScript (JS) extends the functionality of websites beyond HTML and CSS. Through JS:

• Webpages can refresh themselves dynamically and respond to user actions without page reloads or other changes.
• You can model animated UI components, such as pop-ups, image sliders, and extensive navigation menus.

Front-End Development Frameworks

Front-end frameworks accord you ready-made code and components, such as prewritten standard functions packaged as libraries, with no need to build common functionality and components from scratch.

These tools often include drag-and-drop elements, enabling developers to build attractive layouts and applications with various built-in features efficiently.

Angular

With Angular, a popular, open-source JavaScript framework initially created by Google, you can deliver highly dynamic results through the HTML syntax. Angular adopts an efficient modular approach and follows the MVC architecture, which divides the website structure into three parts: model, view, and controller (MVC). In particular, Angular facilitates cleaner code through TypeScript and leverages the dependency-injection design pattern.

React

Introduced in 2011 by Meta and now supported by a large community, React is an open-source, declarative JavaScript framework whose component-based approach enables code reuse. React facilitates more efficient updates of views with the virtual Document Object Model (VDOM), a lightweight JavaScript representation of the DOM, enhancing performance. You can use React to develop single-page applications (SPAs).

jQuery

Widely used and supported by many user-created plugins, jQuery is an open-source JavaScript library that simplifies the development of web applications. For example, jQuery edits CSS properties by incorporating JavaScript functionalities and applies effects, such as fade-in and fade-out, to website elements. With jQuery, you can also simplify the processes of implementing HTML DOM changes, event handling, and Asynchronous JavaScript and XML (Ajax).

Vue.Js

Written in JavaScript, Vue.js is a core library that focuses on the view layer only, enabling the development of distinct web interfaces and single-page applications. You can integrate this library with other tools and libraries for the desired output.

Bootstrap

A popular, open-source framework for developing responsive and mobile-first websites, Bootstrap offers CSS-based and JavaScript-based templates that include components like navigation bars, progress bars, thumbnails, and dropdowns, all of which you can incorporate into webpages.

Bootstrap implements responsive images through built-in code that automatically resizes them according to the current screen size. Also, with the JQuery plugins in Bootstrap, you can build and deliver interactive solutions for modal popups, image carousels, and transitions.

Semantic UI

A well-documented development framework for creating responsive layouts with HTML, Semantic UI relies on the semantic language to facilitate development and offers components for various features. You can integrate Semantic UI with many third-party applications and tools.

Svelte

Svelte is a compiler that converts declarative components into highly optimized vanilla JavaScript that surgically updates the DOM during the build phase of the development process. That’s a different approach from that in frameworks like Vue and React, which work in users’ browsers while the applications are running.

Preact

Preact offers a thin VDOM abstraction, registers real event handlers, builds on stable platform features, and integrates with other libraries. You can use Preact directly in browsers without transpilations.

Preact is so light that developer code is the largest part of the application. As a result, there’s less JavaScript to download, parse, and execute, freeing you up for other tasks.

Ember.js

Ember.js is an open-source JavaScript framework for developing large client-side web applications with structured and organized code according to the MVC model. This framework uses route as a model and a handlebar template for views, as well as employs controllers to edit the data in the model.

Responsive Web Development

Here’s a frequently asked question: “What Is responsive web development?” RWD, also known as responsive design, is a web-design approach that emphasizes user experience. The objective is to ensure consistent rendering of webpages on various devices, screens and windows of different shapes and sizes, etc. Such an approach has become important given the rise of mobile devices, with most web traffic coming from mobile-device users. Real-world implementations of RWD abound, which most users, who focus on only the convenience and appeal of websites, rarely notice.

Following are several techniques with which to make websites responsive to various conditions:

• Flexible grids. Grids are a standard design tool for building websites. Responsive websites require a flexible grid that can load in different ways, depending on the screen or window size.
• Breakpoints. Similar to flexible grids, breakpoints are dots on a page that identify cut-off points so that information can move on the screen. Most websites have numerous breakpoints, but a minimum should be three to correspond to the three most common device types.
• Prioritization. Effective designs usually place the most important images and information higher up on the webpage, ensuring that visitors see them first. This visual hierarchy is especially crucial for responsive websites because smaller screens display less of a page at a given time. Prioritizing the important elements keeps mobile-device users engaged.
• Flexible images. Images are often harder to fit into different screen sizes than plain text. Web designers use various techniques to ensure that web pages display images appropriately on different screens. For example, the display might crop parts of an image for a better fit. In the case of multiple image versions for a site, select the version to render based on the device type or screen size.
• Responsive media queries. These are coding commands that set the maximum and minimum dimensions for media assets and that specify their orientation. As a result, all media assets on a webpage load at the appropriate size.
• Mouse and touchscreen-friendly elements. Desktop users are adept with their mouse device, but some actions are less intuitive on mobile devices. Responsive websites must accommodate smartphones by ensuring that every action is easily accessible through a touchscreen. Links must be large and obvious on small screens, and scrolling must be easy across device types. Be sure to test the user experience to ensure that all the elements work well on different devices.

For more details, see:

• 【106†How to Create Images for Responsive Web Design】.
• 【107†What Are Responsive Images and 6 Useful Techniques】

Business Benefits of Front-End Development

The importance of front-end development goes beyond merely aesthetics and user experience. It holds substantial potential to impact a business’s profitability in multiple ways. Here are some key benefits of investing in quality front-end development.

Improved User Experience

Front-end development plays a pivotal role in enhancing user experience. Websites that are well-crafted, functional, and visually appealing on any device tend to attract and retain more visitors. Easy navigation and intuitive interaction encourage users to explore your content, ultimately increasing the chance of conversion into customers.

For instance, websites with poor front-end design may cause difficulties for mobile users, potentially leading to a high bounce rate. However, high-quality front-end development ensures that the website adjusts itself to fit the device’s screen, providing a comfortable and intuitive user experience. This enhanced user experience can lead to increased engagement and satisfaction, which directly impacts your business’s success.

For more details, see the detailed guide to 【108†Customer JourneyTo illustrate the real discipline behind front-end engineering and the varying complexities in building simple versus complex elements, several resources stand out.

Grammarly's Engineering Blog provides an in-depth look at the hidden complexities in front-end applications through a two-part series. The first part discusses the optimistic assumptions in software engineering and how these can lead to oversimplified planning and underestimation of project complexity. It highlights the iterative process of asking the right questions, using tools like mind maps for organization, and embracing detailed problem-solving before writing code【5†source】. The second part delves into reducing complexity through functional programming, using TypeScript, and applying principles like avoiding mutable state and embracing pure functions. It also emphasizes the importance of structuring code to manage complexity effectively, using types to ensure correct data handling, and adopting composition over inheritance【6†source】.

For a broader understanding of front-end development, Cloudinary's Complete Guide to Front-End Development provides a comprehensive overview. It contrasts front-end development with back-end development, explaining the distinct responsibilities and highlighting the technical skills required for each. The guide covers essential programming languages like HTML, CSS, and JavaScript, along with frameworks and practices that make front-end development a critical discipline for creating responsive, user-friendly interfaces【7†source】.

These resources offer a thorough understanding of the complexities and technicalities involved in front-end development, making them excellent materials to share with someone unfamiliar with the discipline. They underscore the importance of considering both the user experience and the underlying technical challenges, thereby showcasing the real expertise required in front-end engineering.

Front-End Engineering Complexity Overview created at Tue Jan 20 1970 19:07:21 GMT+0000 (Coordinated Universal Time)