Front-end technology enabling stellar growth in 2021

What are we going to continue seeing?

Many of the technologies and techniques covered below aren’t anything new. They’ve been around for a while, many times for years. They’re on the list though because I see them as critical enablers for a productive 2021. You may have already implemented some of these or are on the path to rolling them out. This is a great position in which to be! For organizations looking to gain a competitive advantage in the coming year though, this list is a great place to start.

What do I look for in a trending item?

My daily focus is evaluating technologies and techniques which are going to enable my teams to efficiently deliver sustainable solutions. I apply this same concept to reviewing emerging technologies and evaluating trends for the upcoming year. As a developer at heart, there are many new technologies out there about which I find myself remarking, “That’s pretty neat.” Just because we find something interesting though, does not mean it will be sustainable or a solution. 

 

As important of a consideration as sustainability is the question, “Does it actually solve a problem you have?” Developers love new technology and it’s a major selling point for attracting top talent. Organizations should be passionate about embracing new technologies but should only engage with technologies they believe will deliver a strong ROI to their product. When discussing proposed technologies with your teams, it’s important to clearly define what problem it solves. If you can’t answer that question, the technology most likely isn’t right for you, however interesting it may be.

 

When evaluating sustainable solutions, I find myself considering several key aspects:

  • Community Support - Is there a supporting community of developers working with this technology? If it’s open source, has there been a steady trend of pull requests from the internal team and developer community over a significant period of time?
  • Developer Support - Coinciding with point one, can I find developers experienced in this technology? If there isn’t a talented pool of developers working with this technology, it exposes me to single points of failure and places premiums on those developers with experience. While niche technologies are sometimes needed, I find it to be a pretty rare occasion.
  • Market Share - Is this technology gaining ground and projected to stay there? Many great technologies have come and gone. They were solving big problems, but someone came along and did it better. Leveraging research from points one and two has provided me with solid insights, but it’s not always perfectly indicative. This point is certainly more subjective and my focus here is on mitigating risk.

 

With that being said, let’s take a look at some technologies I’m excited about leveraging in my solutions to deliver a fun and productive 2021!

Progressive Web Applications (PWAs)

six company logos arranged on a black background (medium, uber, starbucks, spotify, weather channel, and forbes)
Publishing applications to respective app stores carries a barrier to entry at some level. There are fees associated with licensing and the application review process can be lengthy - especially now during COVID-19 where staffing has been reduced. While most app stores offer a streamlined experience, the simple fact of the matter is that it is hard to rapidly provide updates to an application housed here. Depending on your development strategy, it can also be costly if you’re maintaining several unnecessary code bases to support multiple device types.

For many organizations, they believe that hosting an application in app stores promotes confidence - there’s a vetting process involved with your application and consumers trust this. For other organizations it was a matter of creating a critically-performant application, for which you may have been forced into writing a native application (see Wasm for a prospective alternative) and consequently hosting it in app stores. Regardless of how your application ended up there, it’s there and it’s carrying a barrier of its own - extra steps to getting it into the hands of users. In modern times where UX reigns supreme, we’re looking for ways to make life more pleasant for our users. Forcing them to break from the experience to go and download an application may not seem like much, but it’s jarring to your experience. PWAs afford users the ability to quickly “install” your application without breaking the stride of your experience and it’s something to which more and more organizations are turning as users demand pleasant experiences and become more educated on the use of PWAs.

For those of you just venturing out into the PWA world, a PWA is a JavaScript-based web application with several key differentiators allowing it to deliver a near-native experience without the app store hassle.

  • Installed locally: With native support from mobile browsers and devices, a PWA can easily be installed on users’ devices following a simple prompt from the browser, right from your current website or web application.
  • Offline support: One of the biggest features to come for PWAs is the ability to orchestrate offline experiences. Similar to native applications, PWAs can cache data for later and expose functionality, even while the user is offline.
  • Push notifications and update support: PWAs afford the ability to bring push notifications to a user’s device just as expected from a natively-installed application. Application updates can also be easily rolled out without the app store hassles.

WebAssembly (Wasm)

a man facing a computer with various programming languages floating around him
Rarely do I recommend a native application approach when speaking with clients. With options such as React Native or Apache’s Cordova to name a few, I believe expedited solutions can be delivered with the added bonus of maintaining a single source of truth i.e. a single code base. This benefit alone often easily outweighs the potential performance gained by developing a native application across platforms and can easily provide for device inclusivity, even for less-developed devices such as Windows. For some organizations though, performance is critical - think media editing or playback for example. These performance-critical products most likely turned to a native development approach.

 

This is becoming less and less of a concern with the rollout and now unanimous browser support for WebAssembly. With this new assembly-like language, developers are empowered to leverage JavaScript interspersed with high performance snippets of code written in their favorite low-level language such as C++ or Rust, compiled into WebAssembly. Building in this manner is opening the doors to easy-to-access web applications which would otherwise be relegated to the app store or a native desktop application. WebAssembly is lowering the barrier to entry for those organizations looking to easily deliver high performance applications to their customers.

AI Chat

a robot conducting ai chat
Almost every advancement in technology can be attributed to our desire to create more pleasant experiences for end users. AI chat carries along in exactly the same vein. We’ve moved from a simple FAQ page to the ability to conduct advanced searches in hopes of putting information at the fingertips of our users. What we’ve seen instead is that users don’t want to fiddle around with search parameters - they simply want the information they want, and now. AI chat is the enabler. 

 

Instead of forcing humans to adapt to technology, we’re adapting technology to suit the behaviors of humans. Unstructured, informal conversation is how we communicate as humans, and AI chat aims to mimic this by allowing users to quickly uncover their desired information through an informal chat exchange. AI chat is always online, there’s never a queue, and it never needs to “go do some research”. Reduce customer service call volume, drive higher conversion rates, and improve customer satisfaction - it’s all possible through this simple integration. AI chat doesn’t aim to solve every problem, but it’s a powerful tool at your disposal, typically with a relatively smooth integration process.

Versioned and Flagged Features (Micro Front Ends)

a team of developers working together to create various features
The development ecosystem is thankfully making great progress in moving away from huge monolithic applications. With the advent of headless solutions and modern front-end frameworks, it has never been easier. Moving towards these “componentized” approaches enables organizations to abstract reusable styling and components into libraries which are then consumed across their suite of applications, delivering a competitive advantage to their designers and developers while remaining adherent to brand identity. 

 

Just like an npm package though, subscribing to specific versions is critical to prevent the introduction of breaking changes. Not everyone is moving at the same pace and that’s why we apply techniques such as semantic versioning to mitigate the unexpected consumption of breaking changes. We can wrap this same approach around entire component libraries or applications, but what if we want to apply this to each individual component or feature? Why would we even want to follow such an approach? Have you ever faced a production problem which required a deployment rollback to remove the breaking code? You probably pulled out more than you wanted. Depending on your deployment frequency, you may have several features in any given production deployment. The ability to isolate and individually version these features or components is game changing and I believe this is the most important trend of 2021. Not only can you isolate components and features, but you can create feature-specific deployments driven by a CI/CD pipeline.

 

Enabling isolated feature and component development signifies a shift to true micro front ends. You’ll find the ability to easily swap features in and out of production, simultaneously develop complex features without code conflicts, collaborate across platforms, and A/B test near-infinite combinations without the overhead otherwise associated with this. There are many solutions and frameworks out there which aim to solve for this both at build time and runtime but the two I’m most excited about are Bit and webpack’s Module Federation. I still feel wary about Bit because they’ve been pushing their advertising campaign incredibly hard. I find it nearly impossible to go a day without reading an article that does not have some connection to the organization. That said, Bit provides the workings for something incredible! The functionality of Bit can be liken to an individual, semantically-versioned npm package for every component or feature you build. 

 

Shipped with webpack 5, Module Federation provides “native” support for runtime importation of features and components. Module Federation provides similar functionality to many existing frameworks, but for me it’s important to note that I now have that power within webpack - the bundler that most of your projects already use.

 

While Bit does boast about its ability to integrate well into existing code bases, these isolated micro front ends may not be for everyone. For small applications, the ROI probably isn’t there. Sometimes a simple semantically-versioned component library is also sufficient. I’m still very excited about these solutions and the development opportunities they deliver to larger organizations!

Search Engine Optimization (SEO) Experts

a team of experts analyzing various parts of application for search performance
Everywhere you look, direct-to-consumer (DTC/D2C) models are popping up driven hard by the strange year we’ve had in 2020. With modern e-commerce platforms and low-code solutions, it has never been easier to go after your very own market share. Many of these products aren’t reinventing the wheel nor are they offering significant price reductions. What we’re left with is a multitude of brands selling nearly-identical products or solutions, all of which are looking to differentiate themselves and build brand recognition. A major factor in this is simply showing up. When I search for a given product, who shows up first and who shows up the most? Consumers are educated and product reviews play a significant role in this process, but if I’m looking to buy toilet paper then I’m not planning to spend the day researching brands. This is where your SEO ranking can play an incredible role of driving more potential customers into your conversion funnel.

 

Ask any developer about SEO and they’ll bang off something about semantic HTML or the use of metadata, but rarely are developers focused on the niche of SEO - they’re more worried about building out pixel-perfect features or providing cross-browser support. Padding your team with an SEO expert can be worth its weight in gold. If nothing else, performing a third-party SEO audit can provide a great list of action items to capture high-ROI initiatives.

Framework Agnostic Development

a developer coding various aspects of an application
Adhering to a front-end framework provides two major benefits in my experience - neatly packaging and exposing complex or difficult functionality in simple syntax and typically, some sort of guidance for application hierarchy. Due to these benefits, I’m not ready to give up frameworks just yet in 2021, but what I am prepared to do is generate components and features in such a way that they may be consumed, regardless of the consuming framework (or lack of) chosen by the project. If you’ve had your eye on building out that shiny new component library but have projects leveraging different frameworks, a framework-agnostic approach may be your answer. Taking this approach allows teams to elect whatever framework they most enjoy, while maintaining compatibility of components across applications.

 

As I mentioned, I’m not yet aligned with entirely foregoing a front-end framework in the development process. I believe the benefits of simplified development still outweigh any negative considerations, but if you’re looking to go it alone then writing pure web components might be your answer as browser support is growing. For me though, I’m looking at solutions like Direflow which allows me to stand up a React-based component library which in turn is compiled into easily-consumable web components.

 

Regardless of where you’re at in the maturity model, web components should be a consideration. The development community has proven that componentized development makes sense, and governing bodies have agreed. Pairing this approach with micro front ends can bring you even closer to the goal of framework-agnostic development.

Moments of Delight

metallic gold and silver confetti on a black background
Regardless of what you sell or offer to your customers, the goal is the same - to keep users coming back. The majority of this obviously resides in your pricing model and quality of products. That said, an emerging group of surveys indicate that users are willing to pay more for a better experience. The first step in this process is ensuring an intuitive experience through diligent UX research. This alone could easily lead to very dry experiences for users if left unchecked. This is where well-placed moments of delight shine - a pleasant little ripple effect after clicking a button or an exciting congratulatory animation after a successful purchase. These little moments of delight are a great opportunity to express empathy and gratitude for you users.

This website powered by Gatsby, NetlifyCMS, and clever coding.