|||

The Web Platform

Written by Cody Lindley updated

The Front-End Developer Roadmap from Frontend Masters - Advance your skills with in-depth, modern front-end engineering courses.

Overview:

Learning resources and tools.

Definitions:

Web Platform: The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as The Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International.
Web Runtime: Anywhere web platform technologies run, e.g., browser or webview
Web Browser: A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and maybe a web page, image, video or another piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.

Contribute content, suggestions, and fixes on github:

https://github.com/FrontendMasters/learning-roadmap

Web Platform APIs

The BOM (Browser Object Model) and the DOM (Document Object Model) are not the only web APIs that are made available on the web platform. Everything that is not specifically the DOM or BOM but an interface for programming the web runtime could be considered a web or browser API.

MDN has a great deal of information about web/browser APIs.

Keep in mind that not every API is specified by the W3C or WHATWG.

In addition to MDN, you might find the following resources helpful for learning about all the web/browser APIs:

Web Runtimes

Generally speaking, front-end technologies have the following run time scenarios:

A web browser (examples: Chrome, Edge, Safari, Firefox)
A headless browser (examples: Headless Chromium)
A WebView/browser tab (think iframe) embedded within a native application as a runtime with a bridge to native APIs. WebView applications typically contain a UI constructed from web technologies. WebViews are commonly leverage to create cross-platform applications from a single code base (e.g. Electron)

Web to Native

A native application built from web technologies (as opposed to running web APIs at runtime) is considered a Web to Native application. Web technologies are used to define the application but the APIs get translated to native APIs. This allows the UI to make use of native UI parts and native performance gains (e.g., iOS native controls). (examples: NativeScript, React Native)

Developing for Browsers

In the past, front-end developers spent a lot of time making code work in several different browsers. This was once a bigger issue than it is today. Today, abstractions (e.g., React, Webpack, Post-CSS, Babel etc.) combined with modern browsers make browser development fairly easy. The new challenge is not which browser the user will use but on which device they will run the browser.

The latest versions of most modern browsers are considered evergreen browsers. That is, in theory, they are supposed to automatically update themselves silently without prompting the user. In reality, most users just update the browser when prompted. This move towards self-updating browsers has been in reaction to the slow process of eliminating older browsers that do not auto-update.

As of today, most front-end developers use Chrome and "Chrome Dev Tools" to develop front-end code. However, the most used modern browsers all offer a flavor of developer tools. Picking one to use for development is a subjective choice. The more important issue is knowing which browsers, on which devices, you have to support and then testing appropriately.