30 / 07 / 2021

At the front end of trends

Author

Andrew Chubb

Category

Insights

Share

Javascript Frameworks

JavaScript usage continues to grow in the front-end world and although JavaScript itself has been with us since the mid-90s, we are still seeing the continued development of new frameworks and new ways of using JavaScript to build web applications. In the last year or so, we have started to see the JavaScript framework space fragment a little. The big players such as React, Angular, and Vue continue to hold a decent share of the market. These frameworks are constantly being updated and are supported by large communities.

However, we are also starting to see the emergence of some smaller, more niche, JavaScript frameworks that are increasing in popularity. In some cases, these are a reaction to the perceived over-complexity of the big frameworks, or they are authored by teams who really don’t require everything that React/Angular/Vue offers, and they would like something more light-weight. These are frameworks such as Svelte, which takes a completely different approach than the big frameworks by removing the virtual DOM, doing all its work at compilation time, which is claimed to offer a significant performance boost over the virtual DOM approach. There is also Preact, which is essentially a minimal version of React. Its small footprint makes it very appealing performance-wise, but also useful where it would be difficult to bundle in a larger JS library. Also worth a mention is Alpine, which is a very lightweight framework, aimed at bare-bones, basic interactivity. It markets itself as a modern replacement for jQuery, making it easy to compose basic app behaviour.

While I don’t expect the big frameworks to go anywhere any time soon, it’s interesting to see new, smaller frameworks being introduced. If anything, this highlights the widening range of use cases in the world of front-end development.

Headless Architecture 

Another trend that has continued to grow is headless architecture. We are already seeing many new projects in the headless CMS world. A headless CMS (Content Management System) is essentially a separate back-end, which is where users would administer content. This content is made accessible via an API (Application Protocol Interface). The advantages of a headless architecture include:

  • Making content available for more channels (i.e Mobile Apps, IOT Devices, etc).
  • Fewer restrictions for the front-end of the application, as there is now no direct link to the CMS software.
  • As the content is managed from one single source, this allows for easier scaling solutions.
  • Headless solutions usually offer better security due to the separation of the front and back ends, meaning a smaller area of attack.

Headless CMS solutions are popular among high-performing websites, as they require less server headroom. We are also seeing more e-commerce and inventory management integration solutions such as Shopify and SAP Commerce Cloud, that are designed to work with headless platforms.

Among the main benefits of a headless solution are the cost savings over a traditional CMS, both in terms of server hardware and also cross-platform development. So I’m expecting to see more growth in this sector in the future from high-growth tech companies.

Micro Frontends

We are starting to see large development teams break away from the typical “monolith” approach to building front-end web applications. This is an approach that is adapted from the way a lot of back-end services are built.

Particularly useful in environments with large teams working on a large codebase. The micro frontend approach splits up the application into several smaller functional elements. These elements are treated as separate, mini-projects. Each one can have its own feature set and can be built and tested independently. Ultimately, all of these elements are brought together to work cohesively in the main application. IKEA was one of the first companies who adopted the micro frontend approach, seeking a way for different teams to work on separate parts of their applications. We’ve also seen the concept used by Spotify and DAZN, where they are using micro frontends to create User Interfaces for their products.

The main advantages of this approach are to break up and simplify large codebases to make them easier to work on and navigate around. It can also make scaling aspects of the application easier, as separate parts of the application can be developed independently. There are however some disadvantages to this approach, mainly concerning the re-use of code and avoiding code duplication. Projects using a micro frontend architecture need more careful planning and management and there are still a lot of opinions flying back and forth as to whether the micro frontend architecture is the right approach, so watch this space.

UI Animation

More of a general trend that we are seeing increase is the usage of animation and motion in user interfaces. We’ve seen a lot of focus on performance and security, but it’s important to consider the less measurable aspects of the application, the aesthetics. We are in an era when front-end design has matured to the point where we see the same patterns and styles repeated everywhere, and the reasoning for this is that they work. People are familiar with them, and it makes the application intuitive and easy to use.

However, companies are looking for ways to make their application stand out from the crowd and have its own identity, as well as improving the user experience and increase the click-through rate. Many companies are incorporating more motion and animation into their websites and applications as means of achieving this.

Animation can be used to highlight user actions, draw attention to brand elements and overall introduce some personality to the user interface. Often these animations can be quite subtle and understated but can lead to a smoother, more pleasing user experience. For example transitioning between pages, making user interactions like logins and form submissions, and even introducing little animations when the application is working or awaiting some data, such as waiting for search results to load or processing a payment. Not only are the animations more aesthetically pleasing, but they also convey important information to the user to let them know what the application or website is doing.

We can see these types of UI animations in many of the apps we use every day including Spotify, Google Maps, Uber, Netflix, Facebook, and many more. We’re looking forward to this trend continuing and seeing more vibrant and interactive user interfaces.

GraphQL

GraphQL was introduced by Facebook back in 2018 as an alternative to the common REST API, aimed at providing a more accurate and precise way of requesting data from the server. In particular, acting as a single point where all data is requested from, rather than different API routes. So ultimately this reduces the overall number of requests to the server.

The advantages of GraphQL are mainly performance-related, and since its inception, we’ve seen several large tech companies such as Github, PayPal, and Airbnb adopt it for their mobile apps, websites, and APIs.

It will be interesting to see more if more SaaS (Software as a Service) companies adopt GraphQL to serve their APIs. As we are seeing more and more websites relying on these services for underlying functionality such as authentication and payment processing functionality. In this case, we could see GraphQL becoming a much more prominent technology.

Summary

There are plenty of exciting developments on the horizon for developing unique front-end solutions and if you are looking to implement new digital solutions to help improve user experience and site performance, or you want to integrate your website with your existing platforms and services then get in touch with us today. Explore our range of services and see our latest work to see how we grow and develop brands as a digital marketing agency.

If you enjoyed reading this article or found it useful, consider sharing on Facebook, Twitter or LinkedIn. To stay tuned to more creative and digital insights follow us on @absoluteagency.