Image for post
Image for post

What is a web engine?

After choosing a WebKit as a big project for DPS911 course I started to go deep into a WebKit. But, I did a mistake at the start of my journey. I read code and issues of WebKit without a complete picture about WebKit in my mind, and the result was wasting lots of my time. And then I decided to start from the very beginning — from the definition of WebKit.

Let’s look what Apple says about WebKit:

“WebKit is the web browser engine used by Safari, Mail, App Store, and many other apps on macOS, iOS, and Linux … WebKit is an open source Web content engine for browsers and other applications … The project’s primary focus is content deployed on the World Wide Web, using standards-based technologies such as HTML, CSS, JavaScript and the DOM. However, we also want to make it possible to embed WebKit in other applications, and to use it as a general-purpose display and interaction engine.”

In order to be a good contributor and actually understand which things to do and how they will affect the project, I need to know and understand every single word in the quote above.

A big confusion on the very beginning

When I was reading the blog post of my course professor — David Humphrey about his contributions to WebKit I was really confused why he was writing about WebKit in the context of Google Chrome bugs. WebKit is an Apple’s engine, right? Right. Chrome is Google’s browser, right? Right. Hmmm… That was a time when I needed to go 18 years back in the history of Apple.

In November 2000, several vacancies appeared on the Apple website in the “Wanted” section. Applicants were required to have a good knowledge of Internet technologies, experience in developing web-engines. In other words, at the start of 2000, Apple decided to develop its own browser. After examining the available options, the company’s engineers chose the open source engine KHTML / KJS, which, in their opinion, was the best.

In 2001, Apple engineers created their own branch of the KHTML and KJS project, renamed their version of the libraries to WebCore and JavaScriptCore, and, retaining all the advantages of the original, completely rewritten them.

In January 2003, at Macworld Expo, Steve Jobs announced the Safari web browser, developed on the basis of WebKit.

September 2, 2008 — Google announced the release of its own Chrome browser based on the WebKit engine. Chrome was originally released under Microsoft Windows, then versions for the GNU and Mac OS X operating systems became available.

On February 13, 2013, Opera Software joined the development.

In April 2013, Google and Opera Software announced the transition to the Blink engine.

Well, after researching the history it makes more sense how WebKit affected the whole history of web engines, and why David was talking about WebKit while solving Google Chrome’s bug:

… I was seeing the bug in Chrome it’s Chrome’s bug, right? No. After filing bugs in both WebKit’s bugzilla and Chrome’s issue tracker, I found that it did indeed belong with WebKit …

And now I needed to understand what is the web engine, what does it do and how does it work.

How web engines power the Internet?

After hours of googling and watching YouTube videos, I found out some description and images about web browser engines (rendering engines) on Coursera.

Image for post
Image for post
Different browsers use different web engines
Image for post
Image for post
Set of modules for rendering. Comparison of rendering schemas of Google Chrome and Mozilla Firefox. As you can see names can be different but the flow is almost the same.
Image for post
Image for post
How browser analyses the document.
Image for post
Image for post
Example of how browser engine processes the HTML. HTML Parsing Tolerance — closing <a> tag
Image for post
Image for post
HTML Parsing Tolerance — ignoring the inner form
HTML Parsing Tolerance — browser ignores accidental closing <html> and <body> tags.
Image for post
Image for post
How HTML and CSSOM are translated by web engine into a Render Tree

Now, with basic knowledge about web engines and what they do we can continue going deep into WebKit engine.

What is a WebKit and how it works?

As we remember a WebKit is a web engine for rendering a DOM. On Apple’s website company prevents us from the wrong understanding of WebKit:

What WebKit is Not

There are a few points that arise occasionally which we consider out of scope for the project.

WebKit is an engine, not a browser.

We do not plan to develop or host a full-featured web browser based on WebKit. Others are welcome to do so, of course.

WebKit is an engineering project not a science project.

For new features to be adopted into WebKit, we strongly prefer for the technology or at least the use case for it to be proven.

WebKit is not a bundle of maximally general and reusable code.

We build some general-purpose parts, but only to the degree needed to be a good web content engine.

WebKit is not the solution to every problem.

We focus on web content, not complete solutions to every imaginable technology need.

Image for post
Image for post
Major Componets of WebKit


The WebKit Open Source Project

Assessing the familiar by means of the unfamiliar…

Как браузер читает HTML и CSS? — Браузеры | Coursera

WebKit для разработчиков

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store