Tara Vancil

Developer at Glitch

glitch.com
online code editor
instant deployments
friendly community

BUILD REACT INTO THE BROWSER YOU COWARDS

— Laurie Voss @ Web Directions (@seldo) June 2, 2019

Ignoring @seldo's intemperate, self-owning ad-homenim, let's consider what it might mean...there are many versions! A few:

1.) *literally do exactly this*
2.) add building blocks
3.) start from syntax https://t.co/B8YniqmhLd

— Alex Russell (@slightlylate) June 3, 2019

JavaScript.#UseThePlatform

— Horse JS (@horse_js) May 19, 2016
The Polymer App Toolbox is a set of loosely-coupled components and tools to make it easy to create a Progressive Web Application using the modern platform

#UseThePlatform

This is a talk about people talking past each other on Twitter

Why put React in the browser?

Isn't it working just fine as a userland framework?

BUILD REACT INTO THE BROWSER YOU COWARDS

— Laurie Voss @ Web Directions (@seldo) June 2, 2019

People install React a lot

Maybe this is how the Web should work?

class HelloMessage extends React.Component {
  render() {
    return <p>uSe THe PLaTfORm yOu {this.props.name}</p>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="cOWarDs" />,
  document.getElementById('hello-example')
);
      

Our JavaScript bundles are BIG

How much less code could we send down the wire? How much could we cut down on JavaScript parsing if React were built in?

The economics of open source by C J Silverio | JSConf EU 2019

npm pays when you install React

How much does it cost to supply 5,101,516 downloads of React every week?

Bundle size is not the only consideration

What do you mean put React in the browser?

JSX?
no

React-flavored JSX is not HTML and would require major updates to be integrated into the Web. And we'd all have to rewrite our applications. No thanks.

Synthetic Events?
nope

I mean why? It's a pretty big wrapper and not everybody needs it.

Virtual DOM + diffing?
nah

One way to do updates + diffing. Fast enough for many applications. Too slow for others! Not the only or "best" way.

Take this side-by-side comparison. With just 200 moving elements, React's update mechanism completely shits the bed. You have to bypass the virtual DOM and do it yourself — it's nice that you *can*, but it's pretty unfortunate. https://t.co/MzcB9gbTG2

— Rich Harris (@Rich_Harris) June 5, 2019

Which version of React?
who knows

The one with Hooks? An older version? What happens to unmaintained React apps? Do they just break?

It ain't gonna happen

(We've been here before)

Why didn't we put jQuery in the browser?

What do you mean put jQuery in the browser? Which version? Which pieces?

We put some jQuery in the browser

should we #UseThePlatform?

Translation: use lit-html, LitElement, and Google's other tools for building "Web Components"

I don't know, I'm tired

Framework fatique is a real concern. We can't probably shouldn't re-write our apps every year.

https://t.co/g3X3XMrmRz

— Rich Harris (@Rich_Harris) June 20, 2019

Elevating the Web Platform with the JavaScript Framework Community (Google I/O ’19), Shubhie Panicker and Nicole Sullivan

Our JavaScript bundles are BIG

(but React is not 100% to blame)

Shubhie and Nicole's research:

Application code is one small part of the equation

Shubhie and Nicole's approach: go for low-hanging fruit

Lots of work to do that is easier and more impactful than putting React in the browser or reinventing the Web platform

Focused on making PRs to frameworks:

Low-level missing pieces:

Shubhie is leading efforts to improve how scheduling works in the browser, so that all framework authors can take advantage of better performance when updating the DOM

Whether you use Ember, React, Svelte, Vue, or whatever, there is an opportunity for you to see the benefits of these optimizations

Extensible Web Manifesto

Focus on standardizing new low-level capabilities in order to:

Extensible Web Manifesto

The Web is sometimes a mess, but it's our mess

Thanks and cheers