The Hitchhiker’s Guide to
Servo Contributor
@_cybai, HERP, Inc.
COSCUP 2020
whoami
● 🇹🇼 Haku
● @CYBAI
● @_cybai
● Software Engineer @ HERP, Inc.
● Contribute to Servo from Aug 2017
2
● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
3
● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
4
● A modern, high-performance greenfield browser
engine designed for both application and
embedded use
● Written in Rust
● Aim to achieve parallel and concurrency
computing and layout
● Derived memory safety and security from Rust
What is Servo?
5
What is Servo? (Cont.)
● Two successful components have been migrated into
Firefox, e.g. Stylo and WebRender
6
Demo
7
What is Rust, in short?
8
Ownership &
Borrow Checker
9
Rust: Ownership
10
Ref: What is Ownership?
Rust: Ownership (Cont.)
11
Rust: Borrow Checker
12
Rust: Borrow Checker (Cont.)
13
What is Rust, in short? (Cont.)
14
● Derived many good features from functional languages
(e.g. Algebraic Data Types, trait, etc.)
● You can Hack Without Fear due to borrow checker!
● The "most loved programming language" in the Stack
Overflow Developer Survey in 2016, 2017, 2018, 2019
and 2020.
● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
15
Workflow
16
Find
issue
Implementation
Test related
WPT locally
Send /
Update
PR
Review
PR merged
Run
CI
passed with r+
Check
Failures
: Sucess
: Failure
How to get involved?
● Check E-* labels
○ E stands for Effort here.
○ E-easy and E-less easy are good for new contributors.
○ E-candidate-for-mentoring means it might be an easy
issue because members didn’t check it carefully. But, they
will mentor you to finish the issue.
○ E-hard means challenging tasks.
17
Ref: Tag label names and definitions
How to get involved? (Cont.)
● Check the Servo starter page.
● Find any Web API you’re interested in and it’s missing
or implemented incorrectly in Servo!
18
19
The first issue I fixed
20
From WHATWG DOM spec
21
22
But, how can I confirm my
implementation is correct? 🤔
● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
23
WPT
● In Software Engineering, writing tests to
verify our business logic is indispensable.
● So do the web platforms!
● Here comes the Web Platform Tests a.k.a
wpt.
24
“The web-platform-tests project is a W3C-coordinated
attempt to build a cross-browser test suite for the
Web-platform stack.”
-- web-platform-tests.org
What is wpt?
25
Brief introduction to WPT metadata
26
How to run tests with Servo CI?
27
Ask @bors-servo to trigger “try” tests
How to run tests with Servo CI? (Cont.)
28
CI tests triggered by try will report tests result
when all tests passed instead of merging PR
How to run tests with Servo CI? (Cont.)
29
But wait! Let’s see what @jdm said!
🤔
How to run tests with Servo CI? (Cont.)
30
WPT Synchronization
31
Sync new /
fixed tests
Contribute new
/ fixed tests
32
After upstream tests synced
and try again, finally got
unexpected PASS!
33
Approved by @jdm after the tests marked as PASS
But wait! Why not just merge the PR? and what exactly is
@bors-servo and r+?
34
��
● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
35
Homu: The Not Rocket Science™
bors is first introduced by Graydon Hoare who is Rust’s original
creator and mainly applied Ben Elliston’s “not rocket science”
rule to the bot:
36
The Not Rocket Science Rule Of Software Engineering:
automatically maintain a repository of code that always passes all the tests
-- Ben Elliston
Homu: The Not Rocket Science™
37
Rename fn foo → fn bar
✅ CI Pass
Call fn foo in somewhere
✅ CI Pass
☠ Function foo doesn’t exist
❌ Broken master branch
A B
Homu: The Not Rocket Science™
38
Screenshot from Homu Queue
39
@bors-servo with r+ merged PR after
CI passed
Recap
40
Recap
41
Write
spec
compliant
tests
👉
Implement
existing
/
new
spec
👉
👈 Contribute new / fixed tests
Recap
42
👈
Add
/
fix
tests
while
changed
👈
Contribute
spec
bugfix
or
new
feature
Sync new / fixed tests 👉
References
● Experience Report: Developing the Servo Web Browser Engine
using Rust
● technicalities: "not rocket science" (the story of monotone and bors)
● Rust infrastructure can be your infrastructure
● Servo: Designing and Implementing a Parallel Browser
● Servo and YOU: A beginner's guide
● Inside a super fast CSS engine: Quantum CSS (aka Stylo)
● The whole web at maximum FPS: How WebRender gets rid of jank
43
44
https://blog.cybai.dev/
References
Q & A ?
45
We’re hiring!
Thank you!
@_cybai
46

The Hitchhiker's Guide to Servo Contributor [COSCUP 2020]