20 Years of Websites Evolution: Part 6 – Web & Mobile Applications

This is part 6 in the series: 20 Years of Websites Evolution.
Previous part: Part 5 – User Interactivity.

Web & Mobile Applications

In the past 20 years, there was a big shift in focus: programs which were originally developed as desktop applications moved to the web and now they are moving to mobile devices. This change in focus brought many new requirements for website development and caused a big increase in their complexity. In this chapter, we will found out how that process has happened.

Web Applications

In the past, the most complicated operation a user could have done is submitting a form with a couple of fields. But as browsers improved and server-side technologies became more capable, websites started to offer more and more functionality until they have become more similar to the native desktop application. Those websites are now known as Web Applications.

The most significant development that allowed to create web applications is called AJAX, which allowed sending data between the page and the server without having to reload the page. This method allowed fast native-like user experience when interacting with the site. The first major site which was based on AJAX was Google’s Gmail in 2005, which made it the first Web application in the world.

As time on went JavaScript power increased as a result of engine improvement and the fact that home users computers become faster, which allowed building more powerful web applications. But the next major development in web application technology was the advancement to HTML 5, which allowed JS to perform advanced OS interactions, like drag &drop, client storage, 2D/3D graphics, and more which made it behave more like desktop application then a publishing web site.

In modern web application AJAX was replaced with WebSockets which allows full-duplex fast server-browser communication. They are also built on SPA(Single-page application) JS frameworks which brings UI(User Interface) performance to native-like capabilities. Some popular SPA framework are AngularJS, Ember.js, Meteor, Vue.js, and React.

Besides their main business offering, web application share several common characteristics:
– They offer the ability to login (with external identity support sometimes) and contain user management support.
– They offer site customization features such as changing theme elements, configuring privacy and security policies or adjusting the way the site communicate with them via emails. This is called Adaptivity and adaptability.

Business Impact

The ability to offer rich user experience over the web allowed many businesses to move their operation from the physical world to the digital world. Commerce was one of the first industry types to embrace the digital transformation, and E-commerce sites enabled doing many operations digitally:

  • Online shopping websites for retail sales direct to consumers
  • Providing or participating in online marketplaces, which process third-party business-to-consumer or consumer-to-consumer sales
  • Business-to-business buying and selling;
  • Marketing to prospective and established customers by e-mail or fax (for example, with newsletters)
  • Engaging in pre-tail for launching new products and services
  • Online financial exchanges for currency exchanges or trading purposes
  • Point-of-sale

Today all commerce operations are done over the internet – if it’s for marketing, selling or offering services.

E-commerce sites are usually very complicated and require special software to operate them, like big on-premise products Microsoft Dynamics AX, integrated Shopping Cart Software or even cloud-based retail solution Microsoft Dynamic for Retail, Salesforce and many more.

Besides e-commerce, today almost all industries use web applications as part of their business. For example, these application types were once offered as a desktop software and now are offered in a browser:

  • Office software: word processors, online spreadsheets, presentation tools, diagram tools, publishing tools
  • Communication: webmail, instant messaging, online collaboration
  • Business operation: payroll processing software, accounting, customer relationship management (CRM), Management Information Systems (MIS), enterprise resource planning (ERP), invoicing, human resource management (HRM), talent acquisition, content management (CM), service desk management, project management
  • Design: photo & video editing, CAD software, site design, print design
  • Development: DBMS software, CMS, ESB, Source Control, Cloud Management, API management, development software, browser games

and many more. In the near future, the browser will replace all native desktop & mobile apps, even the OS itself.

Building those web applications require complicated user interaction, complex data schema, and many server-side components and usually take years to mature. There are many companies that are entirely built on providing a single web application, which is now called Software-as-a-Service (SaaS) offerings.

 

Mobile Applications

It is not an overstatement to say that smartphones are one of the most important inventions of the last decade (1, 2). Mobile devices disrupted many fields, and one area they had a huge impact was the Web.

October 2016 was the first time that more users around the world were accessing the internet from mobile devices than from desktop computers. Currently only 43% of browsing is done from desktop browsers, and for the last couple of years Google is increasingly taking into account the site mobile friendliness. All this means that websites design had to adapt in order to support a wide variety of devices.

Responsive Design

Responsive design means that the site looks good in all screen sizes. Since there are hundreds of combinations, targeting only couple of them is not a viable option. Responsive design requires joint effort of HTML, CSS (and sometimes JS) techniques that allow page content to fit different layouts, such as fluid grid, CSS3 media queries, image scaling, bootstrap, Modernizr, Progressive enhancement, Unobtrusive JavaScript, and Feature detection. Beside all the work in the client-side, the chosen server side web framework and CMS also need to be able to support responsive designs.

A major part of responsive design is overcoming different devices compatibility issues, which are not hard to find. In the old days, we used to complain when we needed to support 2 or 3 browser versions (IE6, IE7 and maybe Firefox). Today not only we need to support multiple browsers (IE10, IE11, Edge, Chrome, Firefox, Safari, Opera, UC) but also multiple desktop Operating Systems (Windows, macOS, different Linux distributions) and mobile OS (Android, iOS, Windows Phone, Windows 10 Mobile). In many cases, there are breaking changes between differences versions of the same browser (even in Safari and Chrome), and because browsers that are shipped with mobile devices are almost never updated, it forces website developers to support old browser version with all of their bugs.

Native Apps

Sometimes users prefer to use native mobile apps instead of a responsive site, usually because it allows greater integration with the device.

Native apps or “mobile apps” run directly on a mobile device, just as a conventional software application runs directly on a desktop computer, without a web browser (and potentially without the need for Internet connectivity); these are typically written in Java (for Android devices) or Objective C or Swift (for iOS devices). Recently, frameworks like React Native, Monaca, Xamarin and others allow the development of native apps for different platforms using languages other than the standard native language.

Still, the native app needs to be able to receive data from the site (for example a list of the company offices) in order to not manage duplicated content (this is especially true for complementary native apps which are offered as a “lighter” and more “mobile friendly” version of the site). This has brought the need for sites to support WebAPI, which is the primary way mobile native apps can communicate with external sources.

Adding WebAPI support to a site is usually done with plugins or 3rd party applications; more advanced CMS comes with it integrated. Besides the technical challenge comes also the culture shift since authoring public API requires completely different mindset than normal CMS data binding. In the operation space there is also a change since WebAPI requires newer WAF types which are called API Management.

Besides content, many native apps offer the option to login, usually with the same login credentials they use on the main site. Since native apps have restriction on the kind of requests they can make (for example they cant send custom POST body and there is no cookie support), site are required to support two new protocols which were created for that purpose: OpenID for authentication and OAuth for authorization and session management.

Hybrid Apps

While native apps offered great user experience and the full use of device capabilities, developing multiple version of the same app for different devices (and their version) is not cheap. Compared to responsive websites they require much greater time and effort investment. In an attempt to lower their cost, companies started to use Hybrid apps as an alternative to pure native apps.

Hybrid apps are the merge of native mobile applications with a responsive web application. This is achieved by embedding the site inside the native app using a WebView component (which is like having a mini-browser inside the native app). This allows development using web technologies (and possibly directly copying the code from an existing web site) while also retaining certain advantages of native apps (e.g. direct access to device hardware, offline operation, app store visibility). In this way, we achieve the good of both worlds: cross-device support and full access to the device capabilities (although not without their disadvantages).

Hybrid apps are usually built on dedicated frameworks like Apache Cordova (formerly PhoneGap), Ionic, Telerik NativeScript, and many others. Building hybrid apps usually require the combined effort of both the mobile team and the web team.

Modern hybrid apps which know both how to use the newest device capabilities and have fallback are called Progressive web app. But since browsers are allowing more and more uniform access their capabilities in some cases hybrid app is not required anymore and even web applications can be called “progressive”. In the near future, the advancement in browser specification will make hybrid apps not needed since the browser will offer full access to the device features.

 

Conclusion

The huge growth in website technology in the last 20 years (both client side and server side) have shifted application development from the desktop into web & mobile apps. This trend will continue to evolve and soon even desktop apps will be replaced with web apps, by using modern packaging systems like Electron which allows writing cross-OS (windows/mac/Linux) apps by using web technologies.

Diving Deeper

If you want to find out more about the topics discussed in the User Interactivity chapter, I’ve created the following table where each topic is broken down to the requirements developers need to know in order to be able to fulfill it.

In the next chapter, we will learn how marketing requirements affected web site design.

Next part: Part 7 – Marketing

What do you think?