Let's dive into Babel:

How everything works

/haskellcamargo

GET

/whoami

  • Core dev on Rung
  • Creator of Quack
  • Open source enthusiast

And creator of the famous...

TOC

  • Understand your environment
  • JSX Internals

Understand your environment

ES6

  • ECMAScript 2015
  • Not fully implemented across all platforms

Babel

  • Implementation of ES6
  • Compiles JavaScript to... JavaScript! (ES5)
  • Supports plugins and presets

JSX

  • Specification of JS + XML
  • It is not React!
  • Compiles down to plain JavaScript

JSX Internals

<Text>
</Text>
Hi, Lorena
JSXElement
    JSXOpeningElement
        JSXIdentifier (name) 'Text'
    (children) JSXText (value) 'Hi, Lorena'
    JSXClosingElement
        JSXIdentifier: (name) 'Text'
<Text>
</Text>
Hi, Lorena
React.createElement(
    'Text',
    null,
    'Hi, Lorena'
)

JSX is not restricted to React

  • The JSX Babel plugin receives a pragma
  • React uses react.createElement
  • Preact uses h
  • ...and you can pass your own renderer!

So, you can transform...

Runtime

Compilation

function compile(tag, props, ...children) {
  return React.createElement(
    tag.split('').reverse().join(''),
    props,
    children
  );
}
export default ({ t }) => ({
  visitor: {
    JSXIdentifier({ node }) {
      node.name = node.name
      	.split('')
        .reverse()
        .join('');
    }
  }
});

The compiler is your friend

  • Every new language construct is a plugin
  • You can override operators
  • A good challenge is to reimplement React!
  • Port to other platforms

Let's dive into Babel: How everything works

By Marcelo Camargo

Made with Slides.com

Let's dive into Babel: How everything works

  • 1,906

More from Marcelo Camargo