React core: JSX is a mistake

In a recent discussion about JSX, React core member Sebastian Markbage (author of Hooks) stated:

He prefers SwiftUI syntax and thinks JSX is a mistake.

JSX was first proposed and popularized by Facebook, and was widely used in React to describe view state.

As a JS syntactic sugar for XML, JSX has two advantages:

`XML`Excellent representation of tree structures

Both nesting and attributes are described naturally by JSX.

We can easily deduce the actual view from the following JSX structure:

<div style={{color: '#f00'}}>
  i am <span>Ka Song</span>
</div>
Copy the code

`JS`Flexibility at run time

Someone once said:

JSX is HTML with superpowers

JSX is a JS syntax sugar that can be used to describe view state flexibly.

function App({children}) {
  return (
    <div>
      {children || 'i am empty'}
    </div>
  )
}
Copy the code

In contrast, the Vue template syntax is much less expressive.

But my honey is the devil’s arsenic:

by`JS`Syntactically limited`XML`

For example, class belongs to the JS syntax keyword, while class represents the class name in HTML.

So it gets confusing when JSX uses className as props for class names.

<div className="container"></div>
Copy the code

Depend on the compile

JSX needs to be compiled into JS before it can be executed in the host environment, so frameworks that use JSX to describe views (such as React) rely on compilation tools.

This adds complexity to the configuration of the project environment.

Which DSL is better?

There are three criteria for judging a DSL:

Whether the view state can be described visually
Have flexible programming skills
Native support is still compiled

Let’s weigh DSLS for several different platforms in terms of these three dimensions:

HTML

View Description Capability: 🌟🌟🌟

Programming ability: 🌟

No compilation required: 🌟

HTML describes views best (because of their one-to-one correspondence with DOM nodes), but lacks programming capabilities.

Pug, Vue, JSX

View Description Capability: 🌟🌟🌟

Programming ability: 🌟🌟 to 🌟🌟🌟

Both are syntactic sugars that evolve from XML and have powerful descriptive view capabilities.

The difference is between programming ability and the constraints of template syntax.

Flutter

View description ability: 🌟

Programming ability: 🌟🌟🌟🌟

Using function calls to describe views is very programmatic.

But function calls are not as powerful as XML descriptions when describing nested component tree structures.

For example, the following HTML structure:

<div>
  <p>Hello</p>
  <p>I am</p>
  <p>Ka Song</p>
</div>
Copy the code

Describe with Flutter syntax:

Stack(
  children: <Widget>[
     Text("Hello"),
     Text("I am"),
     Text("Ka Song") ",Copy the code

SwiftUI and React

SwiftUI is a DSL that Apple hopes will rule the IOS platform.

While maintaining strong programming capabilities, we also want to do better in view expressiveness.

Here we compare React and SwiftUI syntax with a simple increment counter:

React uses the class syntax:

class Counter extends React.Component {
  state = {
    counter: 0
  }
  increment: () = > {
    const {counter} = this.state;
    this.setState({counter: counter + 1})}render() {
    const {counter} = this.state;
    return (
      <>
        <p>The Numbers:} {counter</p>
        <button onClick={this.increment}>I add a point</button>
      </>)}}Copy the code

SwiftUI:

struct Counter : View {
    @State var counter = 0

    func increment () {
        counter += 1
    }

    var body: some View {
        VStack {
            Text("Number: \(counter)")
            Button(action: increment) {
                Text("Click me plus one.")}}}}Copy the code

As you can see, despite the syntax differences, the two frameworks are written similarly.

Meanwhile, SwiftUI uses its powerful programming capabilities to implement features not currently supported by React:

For example, in React, a child component changes the state of its parent component by requiring the parent component to pass the state and the method to change the state to the child component.

The child component calls the state-changing method to notify the parent of the state change, which in turn passes the changed state to the child component.

This approach is called a controlled component in React.

In SwiftUI, the child component only needs to declare the state passed by the parent component as @binding to achieve the effect of bidirectional Binding with the parent component.

For example, counter:

/ / from
@State var counter = 0
/ / to
@Binding var counter
Copy the code

Then the counter accepts the counter state passed by the parent component, and the change of the child component’s counter state will act on the parent component’s counter state.

Which DSL do you prefer

React was born on May 29, 2013.

After eight years of education, most React developers have embraced JSX.

However, alternatives to JSX have been proposed throughout this period.

Such as the react – hyperscript.

With SwiftUI gaining popularity, it has been proposed as an alternative to JSX in React:

There are also models of experimental-React-like framework

Do you like JSX? Who do you think will replace him in the future? Or who will he replace?

XMLExcellent representation of tree structures

JSFlexibility at run time

byJSSyntactically limitedXML