Rationalizing the Tension Between User Experience and Technology (part 2 of 3)

Today’s CIO is challenged in ways unforeseen in the past.

Key concerns include:

·      Leading the company’s digital transformation, not just facilitating it

·      Staying customer centric by prioritizing user experience

·      Balancing sometimes competing priorities of reducing cost, improving security and analytics and embracing cloud technologies all while eliminating data centers

·      Continually moving faster while maximizing flexibility

·      Anticipating change and being forward friendly

·      All of the above, while on a flat budget prioritizing support over innovation

A Brief History of Modern Web Applications

Front end experiences entered a new age of challenges with the introduction and proliferation of mobile devices. The nature of what defined “user experience” changed as native apps and browser-based interfaces took off. Customers began to demand rich and interactive experiences that, regardless of platform, provided a native-like feel.  At the same time, designers grew a more empathic approach to design user journeys in their own right, rather than simply as data entry steps in a system.

As the nature of these interfaces became more complex and the need for rapid iteration increased, the long-used strategy of server side rendering interfaces became inadequate. Where views had been rendered on the server side and merely decorated by client interfaces with dynamic interactions, the client side now took over a lot of the flow of the application.

Not only views, but now validation, routing, data persistence, and core business logic found their way to the front end. This trend continued with the advent of new browser based platform integrations and capabilities that further improved the native feel of applications.

As more functionality was written on the front end it gave rise to new frameworks that defined better patterns, abstracted browser specific differences, and facilitated leveraging community developed software. The front end stack sprouted the rich complexity and infrastructure that had grown up around the server side.

Smooth empowered interactions on the front end have meant a focus on asynchronous patterns, where the greatest complexity lies in how to coordinate responses to delayed requests. Scalability and performance have both driven the same direction on the server side, and users have come to expect capabilities that have big data implications.

The Challenges of the Present

Front end applications provide richer experiences than they ever have across a wide range of devices and browsers. This has led to several outcomes:

·      Web applications require serving large assets, to the detriment of page load times

·      Front end code complexity has increased substantially, requiring more specialized expertise to maintain and develop

·      Interface design trends continue to evolve, often outpacing widespread best practices on how to most robustly implement

·      The device landscape continues to evolve requiring entirely new interfaces and interaction paradigms (VR, AR)

·      Performance suffers for applications running overtop large data sets

·      The rapid evolution of front end frameworks and difficulty in upgrading leads to fragmented application ecosystems

·      Business logic has tended to leak into client device code, a problem made worse by there being multiple devices to support

The Future of Front End Experiences

The reality is that the need for customers to access experiences in new ways on more devices is going to increase. We are on the verge of entirely new modes of user experience with the rise in virtual reality, augmented reality, and virtual assistants. These new platforms will demand new interfaces, interaction patterns, and native integrations. The bottom line is that your teams and applications will always need to evolve to keep pace.

Key Technologies & Strategies

You must find ways to mitigate risk, maximize flexibility and maintain productivity. You need to maintain a focus on using the right tool for the right job, separating concerns, and creating intuitive usable abstractions that progressively simplify and enable your application architectures. In pursuit of this, you should:

·      Remember the front end’s first priority: user experience. Unify business logic implementation across platforms by consolidating it to a middle tier or back end

·      Leverage the back end or database for data intensive tasks slimming down the data sent to the front end. Reduce front end data flow and state management, where possible

·      Minimize use of view-centric back end services and favor front end agnosticism

Angular & React – Frameworks and Patterns

Modern frameworks such as Angular and React have grown to meet some of these challenges. Both Angular and React embrace the idea of dividing your front end interfaces into components. This results in cleanly isolated markup, styling, and interaction logic. In addition, components can also offer a vehicle for more organic state flow throughout your application in ways more relevant to the interface being presented. In some cases, where more complicated state management is required, libraries like Redux can be leveraged, but this should be the exception rather than the rule. Components cleanly separate the concepts in your interface more clearly leading to a maintainable and extensible front end application.

The fit will be different for different organizations. Angular provides a larger framework to build with, and React begins with a smaller building block to build upon more freely.  The most essential aspect is that both present patterns which should be adhered to where possible for a clean extensible platform. Deviating will be necessary at times, but should be done with great discipline and with appreciation for the technical impact.

Componentized CSS / Sass / LESS

Whether using straight CSS or a preprocessor, styles need to be organized as components. CSS has constraints, often arising from what is efficient for the browser to interpret and apply. The cascading nature often causes applications to become tightly coupled and hard to unravel in their styling. When not properly isolated or namespaced, an application’s CSS can become brittle and inflexible to change.

CSS preprocessors have become extremely popular to help proper organization of styles and to re-use design elements simply. The reduced constraints compared to CSS can actually tend towards large chaotic rule sets which become hard to prune and organize. Establishing a direction and strategy for organizing styles will pay off greatly.

Minimal Semantic HTML

In either case, the goal should be to write the absolute minimum amount of HTML necessary to serve the needs of an interface, and ideally in components. That is often best served by leveraging semantic HTML, or HTML that represents expressively the data or interface that it is presenting. This serves to not only make styling simpler and more intuitive but aids in future development by improving maintainability and extensibility.

Modern JavaScript and TypeScript

While functional and flexible, JavaScript has previously been a fairly anemic language feature wise. It has lacked the classical object-oriented programming paradigms and type checking that other back end languages have afforded. The good news is that the newer JavaScript standards that support these features, while not yet completely supported by all browsers, are accessible by leveraging transpiling via libraries like Babel or superset languages like TypeScript.

By leveraging tools like these to write the most modern front end applications possible, you can mitigate the risk of runtime errors, improve readability, maintainability and extensibility of your code. In addition, you can maximize reuse since the code written can be simultaneously leveraged server side via Node.js, offering the prospect of unifying our front ends and back ends in a single stack.

Maintain A Performant Single Business Source of Truth

Business logic must exist in the back end, if only for security and data integrity reasons. The more it exists solely in the back end, the better protected an architecture is from overinflation of front ends. Where different front end client applications exist, having a single business API unifies the application and minimizes the logic necessary in the front end to focus on user experience.

Not only does this single business layer implementation facilitate thinner clients that are more focused and use less code, it also allows for optimizing data services closer to where the data resides. As front ends have grown, data concerns have been second class citizens leading to performance compromises. A new evolved business layer can specialize in consolidation and performance, and help to address choke points involving large data sets or algorithms.

Microservices and Embracing a Truly N-Tiered Architecture

Microservices have become a successful strategy to mitigate challenges with performance, scalability and maintainability of application code. By breaking the application problem up into smaller pieces, the complexity and risk of each piece can be kept down. Microservices give you the ability to compartmentalize different bodies of functionality and to engineer and scale them individually. 

However, the messaging domain of microservices is a complex problem that demands a documented strategy and adherence. The lowering of risk in the big picture is dependent upon the boundaries of responsibility between services being identified carefully, as these divisions become resistant to change.

It is important not to allow the wider messaging domain of microservices to overcomplicate the decoupling between server and client. Good decoupling as well as security considerations point toward tightly controlling where client interfaces will communicate with the larger system. With the increased popularity of Node.js, this connection is sometimes becoming a complex layer in its own right. This requires careful and disciplined thinking rather than becoming a nebulous zone where architectural misses are papered over.

Adhere To a Blueprint

From the top down it is imperative to document the technical strategy formed by the collaboration between the CMO and CIO. Documentation of technology architecture should pervade the organization so that known problems are tackled in accordance with existing answers, and new conversations begin at the right point.

As client side applications have matured into true user experiences, the flows through them have become increasingly unique. It is important to resist the temptation to see these novel situations as exceptions to an overarching strategy. New challenges represent the time to evolve the technical strategy; novel situations are likely to repeat, and these situations are where it is most important to follow a coherent approach.

Let the strategic blueprint help guide those responsible for more tactical decisions and encourage engineering team documentation to evolve over time and not become stagnant.

Technology Takeaways

Despite the exponential increase in expertise of web application creation, the challenges faced make it a harder time than ever to make the right choices related to a clean architecture that lends itself to cost effective development. With increased overhead due to more devices consuming your products, the costs involved in making the wrong choices are higher.

With this raising of the stakes, you must balance the following priorities:

·      Always consider the technical architecture in a holistic way; all parts are interlinked and can impact your own organization and the end user experience.

·      Create and maintain a blueprint, and make sure it becomes part of development culture.

·      Understand deviations from the desired approach as potentially valid tradeoffs with associated costs and consequences.

·      Find maximum alignment between frameworks, patterns and best practices and your own unique challenges.