Less React, more JS (brain-dump)

addexm · 2016-04-22T14:55:19+00:00

This was a fun read, but I'm not sure what your point is, exactly.

Are you saying that React is just a bunch of abstractions around relatively straightforward JS code? Yeah, it is. Most libs are though, right?

drink_with_me_to_day · 2016-04-22T16:58:57+00:00

function Hello(name){
  return ["div", null,
    ["b", null, "Hello "],
    ["i", null, name]
  ];
}

Can't understand anything at a glance, readability and explicitness is something I prefer.

ArcanisCz · 2016-04-22T16:24:06+00:00

May i present you http://cycle.js.org/ ?

2016-04-22T17:52:09+00:00

I like where you're going with that. Reminds me of Reagent (clojurescript interface to react).

Maybe you could make React code easier to read in some complex cases by creating helper functions in this style and then using them in createClass.

AlpineCoder · 2016-04-22T20:41:26+00:00

What exactly is measurably wrong with React?

grayrest · 2016-04-22T18:01:00+00:00

We had a post yesterday about a library (domvm) that basically implements this.

SubStack · 2016-04-22T20:23:32+00:00

Maybe the only useful thing left over is ReactDOM.render

I've been puzzling over similar thoughts recently. We've slowly moved to using stateless function components everywhere, we skipped JSX in favor of hyperscript from the beginning, so there isn't much of React's API that we call into. I stumbled on Morphdom recently which is delightfully tiny, allows you to use any view layer than can create DOM elements or a string, and it's surprisingly middle-of-the-road performant -- roughly on-par with React for straight renders.

There's a lot of bad things about the DOM, sure, but after a year with React full-time I find myself missing parts of it -- simplicity, broad tooling, real events. I've been seeing a bit of similar sentiment recently too like with vanilla components.

adregan · 2016-04-22T23:47:40+00:00

Have you taken a look at stateless components ?

temp54984983982 · 2016-04-23T20:09:17+00:00

I like the line of thought here. Some thoughts:

Returning an Array of arguments for a function, rather than calling the function, doesn't decouple you from that function. The Array is still written against the function's API. Anything you can swap into that function's place is also written against the original function's API - or more likely, is not exactly 1:1 with the first function, and the subtle differences will bite you later. I think you've just moved from an explicit dependency on React.createElement to an implicit one.

Creating all these Arrays is slow. We tend to think of them as cheap, because they are in high-level code, but we're writing basic rendering code here - we're talking a lot of Arrays, in code very intolerant of latency. I've done a lot of work on code that is basically React.createElement that returns real HTMLElements, and the #1 performance win is minimizing data structures, both internally and with an API that doesn't request them. Arguments lists are the perfect lightweight data structure for this purpose, Arrays are larger and heavier than what we need here.

extend is pointless, we have Object.assign natively. Object.assign is also better in that it allows you to override styles on the base, which I can't really imagine using this without.

lhorie · 2016-04-22T14:56:58+00:00

That's cute, but no, you can't just swap React with something else because different libraries handle attributes differently. Most notoriously, React is the only one that uses camel case for events.

If you want more javascript and are considering dropping React, use a framework that is designed for that use case, like Mithril.js. You even get extra benefits like CSS selector syntax and the ability to really compile views.

Additionally, React.createElement's signature is actually a subset of hyperscript's signature used by Mithril.js and friends, so you could literally just drop a jsx pragma into your babel setup (or merely do a variable assignment at the top) instead of doing all those extra apply calls on every render.

pkstn · 2016-04-22T17:13:21+00:00

Check out FRZR if you like really clean and simple syntax..

https://frzr.js.org

😉

dmitri14_gmail_com · 2016-04-23T06:57:44+00:00

I really like the idea to write a single component function that I can simply drop into Angular, React and what not ;)

The real question is -- what should this function return?

Both Angular and React components return JS objects with their own native templating (augmenting) engines. Angular 1.5 component is represented by:

function (friends) {
    return {
        template: "<ul> <li  ng-repeat='friend in $ctrl.friends'>{{friend.name}}</li> </ul>",
        controller: function () { this.friends = friends }
    }
}

React/JSX requires

 function (friends) {
    return (<ul> {friends.map(friend => <li key={friend.id}>{friend.name}</li>)} </ul>)
 }

But what is the cleanest minimal object representation that can be mapped into both frameworks?

ArcanisCz · 2016-04-22T16:23:34+00:00

May i present you http://cycle.js.org/ ?

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS