Simple Functional Hypothetical React Example

simple-functional-hypothetical-react-example.js

import { Box } from 'respond'

export function Items(props) {
  return Box({
    style: { margin: 20, padding: 10 }, 
    children: [
      Item({ name: 'svelte' }),
      Item({ name: 'react' }),
      Item({ name: 'vue' }),
    ],
  })
}

function Item(props) {
  let color = 'blue'
  
  function toggleColor() {
    if (color === 'blue') {
      color = 'red'   // yea, the reactive "assignment" Evan You was apprehensive about in October
    }
    else {
      color = 'blue'  // re: https://twitter.com/Rich_Harris/status/1057290365395451905
    }
  }
  
  return Box({
    style: { padding: 5, background: color },
    onClick: toggleColor,
    children: [
      props.name,
    ],
  })
}

Intentionally for learners, there is none of the following:

• destructuring
• object value shorthands
• arrow functions assigned to variables/const
• passing children as a 2nd argument, or not in array form

The only skills required to generate the corresponding reactive html and styles is:

• function definitions, function calls, passing arguments
• variables, assignments, if/else logic, comparisons
• object literals, object property access, array literals
• a feel for the box model (i.e. how nested function calls leads to nested boxes)
• awareness of the following styles: margin, padding, background
• importing/exporting

It's not the original focus of this gist, but to take this concept to its logical conclusion, toggleColor shows a concept for fully transparent state changes. I.e. just using the language features of assignment. They can basically build full apps with this and establish a high level of confidence. The only thing missing is retrieving dynamic data, which is what phase 2 along this track would be about.

---

So, to me, if this could be achieved, we have the holy grail of the easiest possible thing to teach programmers on the first day, while getting them the absolute most mileage. In other words the "golden ratio" of learning app development.

They are one step away from adding a dynamic data source for that list of elements. They already have reactivity. There's zero cruft I'm aware of that remains to be removed. And it only requires learning the very basic most important aspects of JS, which are required learning where we're going anyway.

In essence, we're starting with the most important thing, functions, rather than a lesser important thing, visual elements. They're one in the same. You don't have to learn that functions create instances of components and therefore elements, etc etc. You don't have to learn the even less important thing of external stylesheets, selectors, cascading, specificity, etc. You don't have to juggle css property key/vals and html attribute key/vals. Collapsing that concept just into objects is a solid win in itself. You also dont even have to learn about different types of elements--it's all Box, which again is just a function. The concept of different tags with different pre-built styles (and semantic meanings) is near worthless at this stage. So we drop that baggage too. ..There's also no lowercased components vs. uppercased components; they all start with capitals. The list goes on.

Learning HTML + CSS provides far less value at this stage (and possibly ever) compared to learning to call functions with objects. And perhaps most importantly, all this naturally flows into learning more programming (rather than idiosyncracies of 2 styling/layout languages).

Next you ask: what about the chrome devtools? Answer: build new ones that show function calls instead of angle bracketed tags.

---

Overall the concept is to lead with the interface (the ideal interface), and the rest will follow. Rather than lead with what one thinks is possible. This interface is so clean and powerful that it's quite possibly worth leaping the highest hurdles to achieve it. It basically makes it so the next graduating class of developers can be the largest class size ever.

These are people who might never move past HTML and remain self-classifying as a "web designer" for their whole career, or perhaps ADHD types that lost interest because HTML/CSS was too static, but would have gotten hooked if they could easily do something dynamic. Once getting this far into application development is this easy, the flood gates open to all sorts of people who otherwise would simply be scared off. This lowers the barrier for reactive GUI app development far lower than its ever been before. Perhaps most importantly it removes the stigma that coding is hard, which is what's preventing so many from joining this industry in the first place. Finally nailing it like this is great for marketing to these would-be developers--there's nothing they should be afraid of, and we will find ourselves no longer signaling as such (i.e. we will stop signaling our own doubts and fears). The message is: COME ON IN, THIS IS EASY, PROGRAMMING HAS ARRIVED FOR THE MASSES!

At the very least, the above makes clear that HTML + CSS is not something the developer has to think about. Styles, sure, but not concepts like selectors, specificity, cascading, etc, etc. And you only need to know a few styles to start; picking a few more as needed is very natural. In conclusion, there is no HTML + CSS to a learner starting off with this system. And if we can figure out reactivity via assignment we get these novices a very long way.

Implementation

While I'd love to see this built in Svelte, I've since been informed that templates are here to stay. And that's not to say I haven't been thinking about this in terms of React for a very long time.

Accordingly, a prototype could be built with React + Babel where all usages of let are transpiled into useState and assignments to setXyz; and developers are instructed to use const if such reactivity is not needed. For non reactive transformations, they can assign from one const variable to another. Even with transpilation edge cases a simple babel plugin can't address, this would make for an excellent playground for novices to build confidence.

Lastly, don't underestimate the importance of this juncture for learners. It's getting over this juncture that's equivalent to the White Walkers breaking through The Wall. This is where everyone gives up. If they can get their fiddle on at this stage, they will be hooked and continue with the challenging, yet rewarding, craft of programming. That's the premise at least.

Reactivity is a great way to learn programming. Way better than rendering HTML on a server and spitting out it to the browser in days of old. The instant feedback it provides is paramount. So if it can become easy to do this, my hunch is it's more addicting (and confidence building) than just being able to turn angle bracketed tags into things on a page. In other words, change is the lynchpin, not drawing. The drawing can be minimal. Re-Activity is higher value.

But with traditional variable assignment, the magic of programming isn't immediately clear. It runs so fast, all you initially see is what you assigned it to, or what math you did in your first practice functions. Being able to easily see those values change (as represented on the page) via your own actions (clicks and taps) makes it far more real the work you have done in those assignments. In essence, variables aren't recognized as variable until they actually change. And variables and functions are the cornerstones of programming.

So being able to setup as quickly as possible a GUI to toggle a variable perhaps is the most important aim. That's the hook of the song.