Intro to Rust (Building a Browser Engine: DOM and HTML Parser)

in #utopian-io8 years ago (edited)

It makes sense that a toy browser engine would eventually be a project for the Rust tutorial series. Rust is a language that was created by Mozilla and it's largest project on Github is an open source browser engine called Servo (Written in Rust). Servo is an engine that Mozilla is developing to one day replace their fairly old but well optimized Gecko engine. In fact, this year, Mozilla recently modified their Firefox browser with a part of Servo for rendering CSS and saw a drastic increase in performance.

While our browser engine is much smaller then a project like Servo or Gecko, the basic concepts are the same. In this video, we build out our DOM (Document Object Model) tree data structures and the HTML parser which takes the HTML document strings and converts them into DOM nodes. Our DOM and HTML parser might be basic but they can cover a rather large subset of HTML.

Going forward, we will be building out the CSS modules, the style tree, the layout engine, the box model and our block layout to create a full browser engine. This exercise will help us understand how browsers work "under the hood" and will help us better understand the motivations for some of the more unique features of the Rust programming language.

Full Github Source Code is here

If you enjoy the video, feel free to follow me on Steemit or on YouTube to get updates on the channel as well as more content.

If you like what I do, tips and upvotes are welcome:
ETH: 0xE448a8DDA5886C49d35B191B2F20630c103024c8
LTC: LXsKxF5JhmMtKgqfcUFdvcXVwiaSqxN9cP

Also, feel free to check out my channel for videos on Go, Elixir and Elm



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Hey @tensor I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Your content is amazing, hope I can spend some of my time viewing through your content.

I'm really glad you enjoy it. I also hope you have time to view it ; ).

After this project is finished (or maybe after another few), I will be moving on to another language. Though I'm not sure which one since the community has to vote on it. I will probably do a bunch of Elm, Go and Elixir tutorials before moving into that new language and then again ill come back to Rust. You'll have plenty of time to watch my content at some point.

When WebAssembly is released, I might try out Rust. haha

I've already got a tutorial that uses WASM with Rust so its definitely usable right now if you'd like to get into it. Granted, I was using a framework called Yew which is sort of cheating... You can still setup a basic WASM/Rust build fairly easily with Webpack or any other bundling tool that supports WASM.

Alright, thank you.

I may do a pure WASM setup tutorial to clarify things for people who still don't know what it really is and how to use it; we will see.

No problem.

I just read through this, the syntax really looks like Elm

Yeah I believe that was the idea. I did the tutorial building a Todo App which I had already done in Elm in another video. The two pieces of code are almost identical in syntax and features which is pretty cool. Granted with Rust's borrowing system, its a bit more difficult and the Rust structures are not immutable like they are in Elm. Its still a very cool framework.

Right now, I still dun see too much value using it in production with this Framework, but I think in future, where performance matters, this could be the solutions.

I agree with you. The framework is literally weeks old if that. Also, the WASM conversion from rust isn't as fast as Elm (nor is its dom diffing), still its a cool novelty atm.

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Wow! This is amazing. I've watched the whole video. Can't wait to see the next parts. Good job!

Thank you, I am glad you enjoyed it.

Congratulations @tensor! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of posts published
Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

great post, as usual!

Thank you, I'm doing the CSS engine video right now actually.

You have collected your daily Power Up! This post received an upvote worth of 0.27$.
Learn how to Power Up Smart here!

The @OriginalWorks bot has determined this post by @tensor to be original material and upvoted it!

ezgif.com-resize.gif

To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!

Coin Marketplace

STEEM 0.13
TRX 0.34
JST 0.033
BTC 116555.50
ETH 4489.25
SBD 0.86