A short guide to emerging website architectures

It’s no secret that mobile applications and games have upped the ante on the kinds of interactive experiences that customers have come to expect.

Several years ago that front- end experience was limited to relatively static websites that, while rendering useful information and some connectivity, were dull for the customer and tedious for the architect or developer to maintain and update. That has all changed over the past few years, and today’s organizations face intense pressure to create websites and mobile apps that are not only useful but also are intuitive, engaging and interactive. These kinds of experiences for customers – and potential customers – are becoming core to many organizations’ customer service and retention approach, as well as to their branding and messaging appeal. The experiences that a consumer has with an organization’s technological front door are quickly becoming one of the key aspects of acquiring and keeping a customer. With this change in mind a new architecture has been created called MVVM (Model-view-viewmodel):

Image 1 Sallans

MVVM makes the website’s user experience comparable to that of a mobile application by increasing the speed of navigation and business logic by ten times. This increase is possible because MVVM moves the business logic that previously was coded on the server to the front-end, as shown below. With the majority of the codebase moving to the front-end, architectural tools are being developed to organize large front-end code bases to help maintain code quality. The following illustration highlights the way in which MVVM enables improved user experiences:

Image 2 Sallans

The rest of this article focuses on two of the architectural frameworks currently available – Angular from Google and React from Facebook – as a way to highlight these front-end technology trends.

The good news is that both Angular and React produce great front-end experiences for customers. However, both frameworks accomplish that differently. That’s important to project managers, tech leads, architects and developers who may be responsible for putting together the best UIX team for their organization.

The Angular framework is better organized for development, despite requiring more coding by the architects and developers. Google has prefabricated the architecture so that most of the work of naming and defining architectural elements for consistency is already done. While there are tradeoffs when it comes to coding versus having to create and define a set of naming conventions, Angular is a more practical and ready-to-use framework in general.

The React framework is less prefabricated, so that means it is better suited for talented developers and architects who don’t mind coding the architectural infrastructure. That work enables more design flexibility and granularity when using React, along with advantages in testing and overall performance. For instance, using React allows the decoupling of the business logic layer from its - or some other subsequent - UI framework. React accomplishes testing through its virtual document object module that helps to make user experience modeling and testing much easier to perform. That said, React is still more of a “framework of a framework” that requires some up-front work than Angular. The following illustration visualizes the capabilities and differences of these new front-ends, and what Angular and React bring to the party respectively:

Image 3 Sallans

In both cases, there are additional considerations--not the least of which is a learning curve if these frameworks are new to the organization. Both frameworks require practice and patience when it comes to coding and testing to find the best fit for the organization. Both frameworks also require updated infrastructure that might not be in place. Potential new tools and libraries for managing smaller and more numerous bits of JavaScript are but one example.

In the end, most organizations will only need one of these frameworks. If there are already strong architectural skills in place, then React might be the better choice. The depth and breadth of its user experience capabilities, along with a more efficient and effective experience modeling and testing approach, makes React a stronger framework overall. It provides all the necessary tools and capabilities required to create responsive, flexible, and hopefully, retentive front-end customer experiences.

Jeff Sallans is a senior consultant at X by 2 with a proven track record of designing and delivering enterprise applications in the Insurance, Retail and Financial Services industries. He has successfully led teams in every phase of the software development life cycle. Sallans holds a BS in Engineering and Computer Science Engineering, graduating magna cum laude from the University of Michigan, Ann Arbor.

The views, opinions and positions expressed within these guest posts are those of the author alone and do not represent those of Becker's Hospital Review/Becker's Healthcare. The accuracy, completeness and validity of any statements made within this article are not guaranteed. We accept no liability for any errors, omissions or representations. The copyright of this content belongs to the author and any liability with regards to infringement of intellectual property rights remains with them.

© Copyright ASC COMMUNICATIONS 2017. Interested in LINKING to or REPRINTING this content? View our policies by clicking here.

 

Top 40 Articles from the Past 6 Months