Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

What if we'd had better HTML-in-JS syntax all along?

leontrolski.github.io

Post reply on HN
Print view View original

111–120 of 170 posts

Re: What if we'd had better HTML-in-JS syntax all along?

#111

Post by masswerk »

sergeykish wrote: post #108
masswerk wrote: post #40

Earlier quoted context omitted.

So, if initially there were no Array nor Object constructors (there were arrays and objects, but only prepopulated ones, representing anchors, forms, etc, found in the document), how were arrays done in a script? function MyArray() { this.length = 0; } function arrayPush( value ) { return this[this.length++] = value; } function arrayPop() { return this[--this.length]; } MyArray.prototype.push = arrayPush; MyArray.pro…

There was no `prototype` and `constructor` properties o = new Object o.foo = 'bar' a = new Array a[0] = 'baz' But functions were constructors function hello() { return this.name } function Person(name) { this.name = name this.hello = hello } new Person('James') Array push var length = 0 a[length++] = 'foo' a[length++] = 'bar' Actually it was not bad for scripting language , no WAT: new Object + new Array //null is no…

> There was no `prototype` and `constructor` properties

You are correct. The prototype property was yet another JavaSript1.1 (NS3) feature. (Totally forgot about that.) So, ignore '.prototype' in my example. But you could assign properties and methods to objects. Therefor it was more like,

  var a = new MyArray();
  a.pop = arrayPop();
  a.push = arrayPush();
> No `typeof` (so no `typeof null`), better `parseInt`

Fun fact: also no `isNAN()`. This was, once again, introduced with JS1.1/NS3 and still nonfunctional in IE3 – yes, IE3 had a few of those nonfunctional implementations.

(`isNAN()` was actually available in the Unix implementation of Netscape 2, but this was of lesser concern for the public Web.)

On the positive side, the access to forms and the various form elements was pretty sound and mature, right from the beginning, since this was what JS was pretty much all about.

Re: What if we'd had better HTML-in-JS syntax all along?

#113

Post by sergeykish »

What if we had better JS in HTML?
What if we made function and it was called with target as `this`?

    ...
    
      function commentOnSubmit(comment) {
        event.preventDefault()
        comment.output.textContent = comment.email.value
      }
I've heard it's possible now with React

    const email = React.useRef(null)
    return (

Re: What if we'd had better HTML-in-JS syntax all along?

#115

Post by sergeykish »

masswerk wrote: post #111
sergeykish wrote: post #108

Earlier quoted context omitted.

There was no `prototype` and `constructor` properties o = new Object o.foo = 'bar' a = new Array a[0] = 'baz' But functions were constructors function hello() { return this.name } function Person(name) { this.name = name this.hello = hello } new Person('James') Array push var length = 0 a[length++] = 'foo' a[length++] = 'bar' Actually it was not bad for scripting language , no WAT: new Object + new Array //null is no…

> There was no `prototype` and `constructor` properties You are correct. The prototype property was yet another JavaSript1.1 (NS3) feature. (Totally forgot about that.) So, ignore '.prototype' in my example. But you could assign properties and methods to objects. Therefor it was more like, var a = new MyArray(); a.pop = arrayPop(); a.push = arrayPush(); > No `typeof` (so no `typeof null`), better `parseInt` Fun fact:…

Sorry, NN2 does not agree, it overwrites `length`:

  function MyArray() {
     this.length = 0;
  }
  var a = new MyArray();
  alert(a[0]) // 0
  ...

  alert( a[0] );     // "frist"
  alert( a.length ); // "frist"
  alert( a.pop() );  // JavaScript Error: length is not a numeric literal.
  alert( a.length );
How clever - https://www.javaworld.com/article/2077150/using-javascript-s... - all you have to do is count from 1

Re: What if we'd had better HTML-in-JS syntax all along?

#116

Post by masswerk »

sergeykish wrote: post #115
masswerk wrote: post #111

Earlier quoted context omitted.

> There was no `prototype` and `constructor` properties You are correct. The prototype property was yet another JavaSript1.1 (NS3) feature. (Totally forgot about that.) So, ignore '.prototype' in my example. But you could assign properties and methods to objects. Therefor it was more like, var a = new MyArray(); a.pop = arrayPop(); a.push = arrayPush(); > No `typeof` (so no `typeof null`), better `parseInt` Fun fact:…

Sorry, NN2 does not agree, it overwrites `length`: function MyArray() { this.length = 0; } var a = new MyArray(); alert(a[0]) // 0 ... alert( a[0] ); // "frist" alert( a.length ); // "frist" alert( a.pop() ); // JavaScript Error: length is not a numeric literal. alert( a.length ); How clever - https://www.javaworld.com/article/2077150/using-javascript-s... - all you have to do is count from 1

You are correct, once again, all properties were available both by property name (if used in an associative context) and by numeric index. Since we assigned 'length' already in the constructor, we would have to accommodate for this, i.e., start counting at 1.

Turns out, my recollections are a bit on the rosy side… :-)

Edit: This should work:

  function MyArray() {
     this.length = 0;
  }
  function arrayPop() {
     return this[this.length--];
  }
  function arrayPush( value ) {
     return this[++this.length] = value;
  }

  var a = new MyArray();
  a.pop = arrayPop;
  a.push = arrayPush;
  a.push('a');
  a.push('b');
  alert( a[1] ); // 'a'
  for (var i = 1; i
at which point it is much simpler to do:

  function MyArray() {};

  var a = new MyArray(), aLength = 0;
  a[aLength++] = 'a';
  a[aLength++] = 'b';
  for (var i = 0; i
which is also, what was actually used.

Re: What if we'd had better HTML-in-JS syntax all along?

#117

Post by tolmasky »

> What about .jsx though?

I think it's a fine enough solution, but the fact that it's a different syntax from your standard js objects encourages people to consider the VDOM objects as "not normal data", but they are. Notation as a tool of thought innit.

This is incidental. JSX can be extended beyond just representing HTML nodes, and IMO has far cooler consequences as first class .bind() notation vs. its current use as an alternate call notation (which already has a notation of course in the form of appending parenthesis to an identifier). Namely, you can begin to curry JSX nodes. For the purposes of discussing HTML specifically, you can do things like:

    const myPre = ;

    hi
You can actually then take this and end up with a more powerful object notation too (especially for representing tree-like data). I discuss this extensively in my blog post here: http://tolmasky.com/2016/03/24/generalizing-jsx/

Re: What if we'd had better HTML-in-JS syntax all along?

#119

Post by db48x »

ahupp wrote: post #75
db48x wrote: post #2

Don't forget E4X: https://developer.mozilla.org/en-US/docs/Archive/Web/E4X_tut... It never really caught on.

The problem with E4X is that it's only data; you can't define a new tag that reduces to new primitives. This kind of composability is why XHP (in PHP) and JSX are so useful.

Javascript already has the ability to define new abstractions. They're called functions.

Imagine you want a new "tag" for defining a Widget. Make yourself a Widget function which takes some arguments, maybe the name of the widget, the mass, and the price. Those arguments can themselves be HTML, created either using E4X or any other means you like. This lets you compose things together. For example, perhaps the price could just be a number today, but tomorrow you want to let the user do currency conversions and so you make it a more complicated AJAX thing that lets the user view the price in any currency they want. Today you would have Widget("Plumbus", kg(1.1), 49.99), but tomorrow you could change it to Widget("Plumbus", kg(1.1), Currency(USD, 49.99)). No new inventions required.

Re: What if we'd had better HTML-in-JS syntax all along?

#120

Post by db48x »

leovander wrote: post #66
db48x wrote: post #2

Don't forget E4X: https://developer.mozilla.org/en-US/docs/Archive/Web/E4X_tut... It never really caught on.

We use it in healthcare, at least in NextGen Connect, formerly Mirth Connect[0]. It uses Rhino[1] as its scripting engine which still supports E4X. [0] https://en.wikipedia.org/wiki/NextGen_Connect [1] https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Rh...

That is really cool. I had no idea anyone was still using it.
Post reply on HN