Many Web applications are built on outdated technologies, which as you can imagine, creates a series of technical challenges. This blog series will describe why a company needs modern technologies, and highlight areas where dated technologies hinder successful projects.
In the first installment, I talk about web technology history. That will allow us to better understand where the current landscape came from and set up forthcoming installments of the series.
So, let’s get started.
INTRODUCTION
Web applications are comprised of well-known technologies like HTML, CSS, JavaScript, etc. Many Web apps were conceived and implemented when browser technologies did not readily lend themselves to updating solely the data displayed. In those days, a server-side technology was necessary to apply changes to the content of a given HTML page. The first pass at building applications usually contained a static header HTML partial, a static footer HTML partial, and a bunch of code to render a given page. Pages in these applications reloaded every time the user interacted with the application, and the client-side application was ephemeral. In other words, the pages were created at the time that a user needed them, then were sent to the user’s browser and never stored anywhere, resulting in every page load being unique to the user. Many of today’s Web apps still use this type of technology. However, those Web apps are not modern ones, and have not been modern for some time.
As companies look for ways to differentiate themselves from their competitors, many find themselves looking at their own digital properties (websites, Web apps, mobile apps, etc.) and thinking about how they can drive more business through those platforms. Many of those companies begin to think about modernizing their properties. Once a company decides to take the initiative of modernizing its digital platforms, the question morphs from “What?” to “How?” Specifically, “How do we modernize our digital properties and avoid as much risk as possible?”
In order to answer this question and to understand the opportunities in modernizing any given Web application, stakeholders need to understand the road travelled by the various components of their apps– how Web technology and development tools have evolved.
HISTORICAL PERSPECTIVE
Why do we need to look at the history of these technologies? The technologies and techniques used in an application’s development inform how far the application must go to meet user expectations of modern application implementation.
In most older Web applications, some kind of server-side HTML markup (JSP, PHP pages, ASP.NET, etc.) rendered the data into an HTML template or page. The server-side application ran the business logic and interacted with the persistence layer, then fed results of those interactions to a view-rendering mechanism.
The beginnings of modern Web apps began around the time that the term AJAX became popular with the release of Gmail in 2004, and was furthered in 2005 with the publication of the article “Ajax: A New Approach to Web Applications” by Jesse Garrett. AJAX was the label for the concept of the browser loading data apart from the UI layout, meaning the code running in the browser did not need to reload. The browser then became the platform running the software.
Below are some of the tools that appeared after the dawn of AJAX. These tools spurred the development of the browser as a platform.
These libraries and frameworks provide a significant amount of boilerplate code that engineers had to write every time they built a new Web app.
The emergence of these JavaScript tools enabled developers to begin thinking about the Web application in much the same way that they thought about applications on the server. The main difference here was that the platform was the browser, not a server.
Alongside the rise of JavaScript libraries came the rise of CSS preprocessors.
In today’s Web world, CSS is not simply something that developers write — they generate it. In doing so, developers eliminate tedious tasks like repeatedly typing the CSS selectors and color strings. While that may seem like a small improvement, in the grand scheme of Web development it means that changes to a given Web application happen quicker due to significantly fewer CSS changes.
Further, preprocessors like LESS and SASS also allow for inheritance and variables; the ability to perform mathematical operations in the processing phase; and the ability to decompose the styling so the code is readable, concise and more maintainable.
I hope with this overview, there is a better understanding behind the history of development technologies. Looking forward, my second installment will dive into how to best transmit data.
For more, download my full white paper: “Why Your UI Needs the Full Monty.”
About the Author
Tim Gosnell spends his time helping his clients and coworkers achieve great thing, from providing functional software to supporting their needs to helping them level up. Tim has produced software on many platforms and stacks including Java, NodeJS, Ruby, and Go — but always kept browser based technologies at the forefront of his point of view.
About EffectiveUI
This article first appeared on the EffectiveUI blog.
EffectiveUI is the go-to UX partner for high-technology companies, including industry leaders within aerospace and aviation, biotech and healthcare, consumer and industrial electronics, defense, energy, financial services, software and telecom. In making technology more useful, useable and desirable, we help our clients reinvent significant aspects of their business, from the experience they provide to customers, to the tools used to streamline operations, to the products brought to market. We work collaboratively with clients to solve complex business problems and drive transformation through four tightly integrated areas of expertise: user research and insight, digital strategy, UX design and UI development and integration. Learn more at effectiveui.com.
