Lightening Talk | Frontend Conference Fukuoka 2018

Rails Girls Summer of Code

3 months journey of

contributing to babel.js

Sujin Lee @sujinleeme

Rails Girls Summer of Code (#RGSoC)

  • Award-winning global fellowship program aimed at bringing more diversity into Open Source. (only 11% of OSS contributors identify as women)
  • Contribute to an overall of 67 Open Source projects such as Babel, Bundler, Rails, Discourse, Tessel, NextCloud and more.
  • Make a team with OSS maintainers/mentors, RGSoC supervisor local coaches and students working together.
  • Get more info from https://railsgirlssummerofcode.org/

What is

https://babeljs.io/

"A JavaScript compiler a toolchain that is mainly used to convert ES 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments". - Babel Website

"A compiler, an open source project community, part of the JavaScript community." - Henry Zhu

Babel as a compiler

babylon
JSX transform
babel-generator & prettier
Parser
Code → AST
Transformer(s)
AST → AST
(Plugins/Presets)
Generator
AST → Code
String(input.js)
<br />
ASTs(JSON)
{ "type": "JSXElement",}
String(output.js)
h("br")
📚 More Info

What's Good for Babel contribution?

  • A open-sourced JavaScript compiler that tech leading companies and countless others adopt to ship software for the web.
  • A great position to be an educational tool for programmers so they can continue to learn how JavaScript works.
  • The warmth of welcome to Babel open source community.
  • Learn many other concepts such as ASTs, compilers, language specification, and more.

🤷‍♀️ How to start contribution?

Repl, 'A playground for Babel'

https://babeljs.io/repl

Our works for Repl

  • Show a different view of complied code: AST, output code, and time travel.
  • Learning existing codebase of references: ASTExplorer, Redux Devtools, CodeSandbox and JSON tree view libraries.
  • Some UI Improvements

babel-time-travel

https://github.com/babel/babel-time-travel

Empower to be able to make changes, even small ones!

  • Time travel slides through babel transformations one by one created by Boopathi Rajaa
  • Change babili to minify in available presets (#3)
  • Show the size in bytes of the code (#4)

🎉 The first PR: Time Travel

One challenge: A team from 6 different time zones

Then, How to get involved in OSS?

巨人の肩の上にのる

If I have seen further, it is by standing upon the shoulders of giants. - Isaac Newton

📚 More Info

ありがとうございました

Lightening Talk | Frontend Conference Fukuoka 2018

Sujin Lee @sujinleeme