class: center, middle ##How it feels like to be a #Browser Hacker ### 2016/10/19 ### 呂 行 Shing Lyu ??? top, middle, botto left, center, right --- name: toc ###Agenda 1. My Story 1. From student to programmer 1. What I'm doing everyday 1. What you can do now? --- ### Who Am I * 呂 行 Shing Lyu * Software Engineer at Mozilla Research .float-right-half[] * The only Servo team member in Taiwan * Focus: * Servo layout * Servo/Rust Evangelist --- ### My Education * 建中 * 台大電機 B97 * 數量財務學程 * 台大電機所 R01 * 指導老師: 鄭士康教授 * 電腦音樂 * (大三) 中研院王鈺強老師 RA * Computer vision --- ### My idea about programming in college * Programming is hard * I can't estimate the time * I only learn new languages from courses/textbooks * I'm weak because I don't do programming contests * C++, Matlab, Python --- ### Internship * 大三升大四暑假 => 聯發科 * Built MIDI wavetables for feature phones * Terrible interview * 園區生活 * IBM, 資策會 * (大四=>碩二) Intel --- class: center, middle  --- class: center, middle  --- ### My idea about programming in grad school * Matlab => Python (SciPy, NumPy) + R * A Programmer's time frame is different from a student's * You can learn anything given enough time * Automate everything * Fast prototyping --- class:center  --- ##... mathematical computing doesn’t exist in a vacuum; there’s always other stuff to do. ### - John D. Cook ([ref](http://www.johndcook.com/blog/2012/10/24/python-for-data-analysis/)) --- ### Scientific computing in Python & R .float-right-half[] * SciPy, NumPy * scikit-learn * R for statistics * Test Driven Development (TDD) * Parsers * Formatters * Math * Rust? .footnote[photo credit: http://certik.github.io/scipy-in-13/keynote/Certik%20Keynote.slides.html#/] --- ### Interviews * Referral * Resume: HR & Manager * Coding interview * Be prepared for behavioral interview questions * 腦筋急轉彎... * It's not the end of the world --- ### RDSS at Mozilla .float-right-half[] * Firefox OS QA * MozIlluminate * Automations * English name? * Contributing to open source * Servo team --- ### My idea about programming now * Influence != programming skill * You don't need permission to do the right thing * Optimize your workflow * Fast prototyping * Project come and go, don't cling on a project forever * Business goal > architectural purity * Manage your energy instead of time --- ### Building your influence * Self-promotion * Help your colleague * cc your manager .float-right-half[] * sharings, brownbags * Contribute to open source * Portfolio, Blog * Talk in confs * Networking * Connect people --- ### Optimize your workflow * Improve the tool and process * Raise the upper-bound of your productivity * Share with others * Take notes --- ### Take notes * Write down the _exact_ steps to install/setup anything * Push your code/script/config files to GitHub * Maintain lists * technologies/topics you want to learn * side project ideas --- ### Manage your energy .float-right-half[] * [The Willpower Instinct](https://www.amazon.com/Willpower-Instinct-Self-Control-Works-Matters/dp/1583335080) by Kell McGonigal --- ### Manager your energy (cont'd) * 7 Habits of Highly Effective People by Steven Covey | | Not urgent | Urgent| |------------|:-------------:|:---------:| | Important | Q2 | Q1 | | Not important | Q3 | Q4 | --- ### My ordinary workday * Morning: * Plan the day/week/quarter * Long term bug/feature * Afternoon: * Meetings * Paperwork * Prepare sharings * Home: * Humanities * (Non-work-related) CS stuff * (Natural) Language --- ### Time allocation * Coding: 50% * Sharings, talks: 20% * Side project, tools: 20% * Other: 10% --- ### What I do .float-right-half[] * Servo browser engine * Layout * Style * Evangelism * Rust programming language evangelism --- ##What is Servo
* Parallel __browser engine__ developed by __Mozilla Research__ * Written in __Rust__ * https://servo.org/ --- ### Why a new browser engine? * Performance * Parallelism * GPU (WebRender) * Memory safety * Embedding * Modularity --- ### Architecture  .footnote[photo credit: larsberg] --- ### Modern CPU & GPU  .footnote[photo credit: http://wccftech.com] //http://www.pcmag.com/article2/0,2817,1782101,00.asp --- class: center ### Parallel Layout  --- ### Working on Layout .float-right-half[] * Read the spec * Implement * Reftest * Real-world benchmarking * Fix --- ### WebRender * Draw web content like a modern __game engine__ * On __GPU__ instead of CPU * immediate mode v.s. retained mode * Batching --- ### Top Security Issues
* In Chrome's top 50 security bug * Use-after-free: 12 * Double-free: 1 * Overflow: 4 * Race condition: 4 .footnote[(Data retrieved: July 2016)] ### Solved (for free!) by Rust --- ## Rust
### is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety. ### -- the Rust Official Site --- ### System programming language problems * C/C++ * Segmentation faults! * Memory security bugs * Multi-threading chaos --- ### Memory Safety * No null pointer dereference * No dangling pointer (use-after-free) * No buffer overrun .footnote[The following Rust slides are inspired by: https://speakerdeck.com/dbrgn/intro-to-rust] --- ### No more null pointer * `if (!ptr) { something_is_wrong() }` * `Result` enum and pattern matching ```rust let result = read_from_internet(); //May fail! match result { Ok(val) => println!("We got the value: {}", val), Err(msg) => println!("Error: {}", msg) } ``` --- ### Dangling pointers ```rust let y: &i32; // -----+ { // | y let x = 5; // -+ | y = &x; // | x | } // -+ | // | println!("{}", y); // -----+ ``` ```bash error: `x` does not live long enough y = &x; ^ ``` --- ### Three Rules 1. Every value has a single owner at any given time (__Ownership__) 2. You can borrow a reference (&T) to a value, so long as the reference doesn't outlive the value (__Lifetime__) 3. You can only modify a value (&mut T) when you have exclusive access to it --- ### Ownership ```rust let s = "Hello Rust!".to_string(); some_method(s); // `s` moved into the function // You don't know what some_method // will do to the `s` println!("{}", s); // error: use of moved value: `s` ``` --- ### Borrow ```rust // Borrow (read-only) let s = "Hello Rust!".to_string(); some_method(&s); // borrow // Other people can borrow // at the same time println!("{}", s); // OK ``` ```rust //Mutable borrow (read-write) let mut s = "Hello Rust!".to_string(); some_method(&mut s); // mutable borrow // Other people can NOT borrow // at the same time println!("{}", s); // OK ``` --- ### Thread Safety ```rust let data = Arc::new(Mutex::new(0)); // Arc: automic reference count // clone() will create a shared ref and (ref count++) let data1 = data.clone(); let data2 = data.clone(); let t1 = thread::spawn(move || { let mut guard = data1.lock().unwrap(); * guard += 19 }) let t2 = thread::spawn(move || { let mut guard = data2.lock().unwrap(); * guard += 23 }) ``` --- ### Thread Safety (cont'd) ```rust t1.join().unwrap(); t2.join().unwrap(); let guard = data.lock().unwrap(); assert_eq!(*guard, 42); ``` * There are also `channel`s for safe messaging across threads --- class: center, middle ### Check at compile time # No runtime overhead! --- class: bleed background-image: url(pic/community.jpg) ### Powered by Community!
.float-right-half[.footnote[photo: Marcia Knous @ Mozilla Summit 2013]] --- ### Open Source * Both Servo and Rust are open source projects * Largely driven by the community * Supported by Mozilla --- ### GitHub Workflow  --- background-image: url('pic/map.png') class: bleed
The Servo Community
--- ### Working remotely * Do things asynchronously * GitHub issues > IRC > conference call * Work from home? * 1:1s & face-to-face meetings --- class: bleed background-image: url(pic/biz_trips.png) --- class: bleed background-image: url(pic/wws/ww1.jpg) --- background-image: url(pic/wws/ww2.jpg) --- background-image: url(pic/wws/ww3.jpg) --- background-image: url(pic/wws/ww3-1.jpg) --- class: bleed background-image: url(pic/wws/ww4.jpg) --- class: bleed background-image: url(pic/wws/ww5.jpg) --- class: bleed background-image: url(pic/wws/ww6.jpg) --- class: bleed background-image: url(pic/wws/ww8.jpg) --- class: bleed background-image: url(pic/wws/ww9.jpg) --- class: bleed background-image: url(pic/wws/ww10.jpg) --- class: bleed background-image: url(pic/wws/ww11.jpg) --- background-image: url(pic/wws/ww12.jpg) --- class: bleed background-image: url(pic/wws/ww13.jpg) --- class: bleed background-image: url(pic/wws/ww14.jpg) --- class: bleed background-image: url(pic/wws/ww15.jpg) --- class: bleed background-image: url(pic/wws/ww16.jpg) --- class: bleed background-image: url(pic/wws/ww17.jpg) --- class: bleed background-image: url(pic/wws/ww18.jpg) --- class: bleed background-image: url(pic/wws/ww19.jpg) --- background-image: url(pic/wws/ww20.jpg) --- class: bleed background-image: url(pic/wws/ww21.jpg) --- class: bleed background-image: url(pic/wws/ww22.jpg) --- background-image: url(pic/wws/ww23.jpg) --- class: bleed background-image: url(pic/wws/ww24.jpg) --- class: bleed background-image: url(pic/wws/ww25.jpg) --- class: bleed background-image: url(pic/wws/ww26.jpg) --- background-image: url(pic/wws/ww27.jpg) --- class: bleed background-image: url(pic/wws/ww28.jpg) --- ### Your turn * Expand your knowledge * Use modern tools and languages * Increase your visibility --- ### Expand your knowledge * 7 Languages in 7 Weeks * Clean Code (Code Complete is too much!) * The Mythical Man-Month * Perfect Software: and other illusions about testing * The Lean Startup --- class: center, middle
--- class: center, middle
--- class: center, middle
--- class: center, middle
--- class: center, middle
--- ### Use modern tools and languages
* vim, emacs, sublime * git (+ github, bitbucket or gitlab) * A general-purpose scripting language * Python, Ruby * Learn one compiled language * Rust, C++ --- class:middle, center  .footnote[image credit: backstage.spotlight.com] --- ### Learn new frameworks * Don't get carried away * Learn 1 most popular one, get familiar with it * Read a lot of tutorial/intro articles or videos * Project idea list + framework list * Key points: * How the API feels like * What is the key benefit? * Ecosystem --- ### Increase your visibility * Do side projects * Contribute to open source * Build your online profile * Attend conferences * Talk at conferences --- class: middle, center  --- class: middle, center  --- class: middle, center  --- ### Contribute to Open Source * The easiest way to be seen * Enrich your GitHub profile * Write world-class code * Get internship/hire --- ## Get Involved * Servo * Download the [servo nightly](https://download.servo.org/)! * Good 1st Bug: [Servo Starters](http://servo.github.io/servo-starters/) * https://github.com/servo/servo * Rust * https://www.rust-lang.org * https://github.com/rust-lang/rust --- class: center, middle # Thank You ### shing.lyu@gmail.com ### https://shinglyu.github.io ### @shinglyu [:shinglyu]