This talk is about how to get into the contribution world with Servo.

1. The Hitchhiker’s Guide to
Servo Contributor
@_cybai, HERP, Inc.
COSCUP 2020

2. whoami
● 🇹🇼 Haku
● @CYBAI
● @_cybai
● Software Engineer @ HERP, Inc.
● Contribute to Servo from Aug 2017
2

3. ● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
3

4. ● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
4

5. ● 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

6. What is Servo? (Cont.)
● Two successful components have been migrated into
Firefox, e.g. Stylo and WebRender
6

7. Demo
7

8. What is Rust, in short?
8

9. Ownership &
Borrow Checker
9

10. Rust: Ownership
10
Ref: What is Ownership?

11. Rust: Ownership (Cont.)
11

12. Rust: Borrow Checker
12

13. Rust: Borrow Checker (Cont.)
13

14. 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.

15. ● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
15

16. Workflow
16
Find
issue
Implementation
Test related
WPT locally
Send /
Update
PR
Review
PR merged
Run
CI
passed with r+
Check
Failures
: Sucess
: Failure

17. 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

18. 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. 19
The first issue I fixed

20. 20
From WHATWG DOM spec

21. 21

22. 22
But, how can I confirm my
implementation is correct? 🤔

23. ● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
23

24. 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

25. “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

26. Brief introduction to WPT metadata
26

27. How to run tests with Servo CI?
27
Ask @bors-servo to trigger “try” tests

28. 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

29. How to run tests with Servo CI? (Cont.)
29
But wait! Let’s see what @jdm said!
🤔

30. How to run tests with Servo CI? (Cont.)
30

31. WPT Synchronization
31
Sync new /
fixed tests
Contribute new
/ fixed tests

32. 32
After upstream tests synced
and try again, finally got
unexpected PASS!

33. 33
Approved by @jdm after the tests marked as PASS

34. But wait! Why not just merge the PR? and what exactly is
@bors-servo and r+?
34
��

35. ● What is Servo?
● How to contribute?
● How to run tests?
● How Servo CI works?
Agenda
35

36. 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

37. 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

38. Homu: The Not Rocket Science™
38
Screenshot from Homu Queue

39. 39
@bors-servo with r+ merged PR after
CI passed

40. Recap
40

41. Recap
41
Write
spec
compliant
tests
👉
Implement
existing
/
new
spec
👉
👈 Contribute new / fixed tests

42. Recap
42
👈
Add
/
fix
tests
while
changed
👈
Contribute
spec
bugfix
or
new
feature
Sync new / fixed tests 👉

43. 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. 44
https://blog.cybai.dev/
References

45. Q & A ?
45
We’re hiring!

46. Thank you!
@_cybai
46