Web Cross-platform

Cross-platform in the Web

Web applications are typically described as cross-platform because, ideally, they are accessible from any of various web browsers within different operating systems. Such applications generally employ a client–server system architecture, and vary widely in complexity and functionality. This wide variability significantly complicates the goal of cross-platform capability, which is routinely at odds with the goal of advanced functionality.

1 Design strategies
    1.1 Graceful degradation
    1.2 Multiple codebases
    1.3 Single codebase
    1.4 Third-party libraries
    1.5 Responsive Web design
2 Testing strategies

Basic web applications perform all or most processing from a stateless server, and pass the result to the client web browser. All user interaction with the application consists of simple exchanges of data requests and server responses. These types of applications were the norm in the early phases of World Wide Web application development. Such applications follow a simple transaction model, identical to that of serving static web pages. Today, they are still relatively common, especially where cross-platform compatibility and simplicity are deemed more critical than advanced functionalities.

Prominent examples of advanced web applications include the Web interface to Gmail, A9.com, and the maps.live.com website, part of the Live Search service from Microsoft. Such advanced applications routinely depend on additional features found only in the more recent versions of popular web browsers. These dependencies include Ajax, JavaScript, Dynamic HTML, SVG, and other components of rich Internet applications. Older versions of popular web browsers tend to lack support for certain features.

Design strategies for Web cross-platform

Because of the competing interests of cross-platform compatibility and advanced functionality, numerous alternative web application design strategies have emerged. Such strategies include graceful degradation, single and multiple codebases, third-party libraries, and RWD responsive wed design.

Graceful degradation

Graceful degradation attempts to provide the same or similar functionality to all users and platforms, while diminishing that functionality to a least common denominator for more limited client browsers. For example, a user attempting to use a limited-feature browser to access Gmail may notice that Gmail switches to basic mode, with reduced functionality. This differs from other cross-platform techniques, which attempt to provide equivalent functionality, not just adequate functionality, across platforms.

Multiple codebases

Multiple codebase applications maintain distinct codebases for different (hardware and OS) platforms, with equivalent functionality. This obviously requires a duplication of effort in maintaining the code, but can be worthwhile where the amount of platform-specific code is high.

Single codebase

This strategy relies on having one codebase that may be compiled to multiple platform-specific formats. One technique is conditional compilation. With this technique, code that is common to all platforms is not repeated. Blocks of code that are only relevant to certain platforms are made conditional, so that they are only interpreted or compiled when needed. Another technique is separation of functionality, which disables functionality not supported by client browsers or operating systems, while still delivering a complete application to the user. This technique is used in web development where interpreted code (as in scripting languages) can query the platform it is running on to execute different blocks conditionally.

Third-party libraries

Third-party libraries attempt to simplify cross-platform capability by hiding the complexities of client differentiation behind a single, unified API.

Responsive Web design

Responsive web design (RWD) is a Web design approach aimed at crafting the visual layout of sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices, from mobile phones to desktop computer monitors. Little or no platform-specific code is used with this technique.

Testing strategies for Web cross-platform

One complicated aspect of cross-platform web application design is the need for software testing. In addition to the complications mentioned previously, there is the additional restriction that some web browsers prohibit installation of different versions of the same browser on the same operating system. Techniques such as full virtualization are sometimes used as a workaround for this problem.

Using tools such as the Page Object Model, cross platform tests can be scripted in such a way that one test case is usable for multiple versions of an app. So long as the different versions have similar user interfaces, both versions can be tested at one time, with one test case.