Geekly Articles each Day
📜 ⬆️ ⬇️

Newtoo - development of a full browser engine from scratch in 2018?

image

Hello! My name is Dmitry Kozichev.

Today I will tell you about my attempt to create my own modern web browser engine from scratch.
')
My engine is called Newtoo.

What the newtoo


So, Newtoo. Why did I create it?

It so happens that there are only 4 popular browser engines in the world that are so complex that the developers themselves do not know even half of their code base, and so advanced in technology that it is a waste of time to start catching up with them.

Is it really so? My project was created to repeat the exploits of modern browser engines and to check whether it is realistic to create a worthy alternative to large projects whose history begins in the nineties. My new engine is created from scratch, which means its story begins - today.

Ideology Newtoo - show the page faster than others.

How Newtoo Works Faster


As I said earlier, the main browser engines have been developing not for the first year. Those errors that were made in the initial stages of development remain in the project to the end. The clearest example of this is that smart pointers in C ++ are an even more complex syntax, a big overhead when working, creating and deleting smart pointers. In addition, there are so many types of smart pointers and you need to know which one to use, because each has its own nuances of surprises . Look at this file from webkit. When you see such code, the syntax of smart pointers, you try to calm down and breathe evenly, but this kind of code is the whole webkit from head to toe. There are no such flaws in my engine.

What's in the box


Let's see what Newtoo is made of.

At the moment, the following parts of the project have been implemented:


The remaining parts of the project that are not yet implemented:


HTML parser


My HTML parser can be called modern. Let's start with the fact that it is built on the standard HTML5 . It takes into account any of your mistakes.

For example, you forgot to put quotes by typing the attribute

<article id=hello></article>

,

,


<div>
   <p>First line
   <p>Second line
   <img src="ru/images/2019.png" alt="  !">
   <p>Third line <br> Last line
</div>





<myprefix:span>Hello, world!</myprefix:span>

, , HTML. , , .

HTML


html .

:


<!doctype html><html><head><title>Lorem ipsum</title></head></html>

:


<!doctype html>   - doctype token
<html>            - tag token
<head>            - tag token
<title>           - tag token
Lorem ipsum       - text token
</title>          - close tag token
</head>           - close tag token
</html>           - close tag token

.

6 :



. .

, ( ), , .

, , , , , , ( ). , , . , .

, <p> .

CSS


css , :

.flex[alignment="right"] { font-weight: light; color: #999 }

, - .

, Newtoo '//' css css javascript.

CSS


, html css, . .

, , , , , .

:

TagName
#Id
.Class
[attr=value]
[attr|=value]
[attr$=value]
[attr~=value]
[attr^=value]
[attr*=value]
.Multi.Class
#Mix#ed.Selec[tor=s]
"Quotes"
'Alternative quotes'
#descedant #child
#parent < #child
#previous + #this
#other ~ #this
.multi, .selectors
#element:hover
#element:active
#element:...

, , .

DOM API


HTML , (DOM). DOM , — , , . C DOM JavaScript c DOM API.

DOM. , html :

document.getElementById("article").innerHTML = " . <b>!</b>";

, , , , , !

JavaScript , API .


, .
, .

Newtoo GitHub

Source: https://habr.com/ru/post/424881/

More articles:


All Articles