evmar 5 years ago

I work in this space so I am curious how your library is different from its similar competitors. I read the docs, but I didn't find anything about the actual model for how it works, like whether the whole UI rerenders on any observable change or not. Maybe consider this paragraph a request for documentation.

PS: A minor suggestion: the word "blazing" is so overused in the JS world at this point, when I see it I always at first suspect the app is a parody. If it's fast, then the word "fast" suffices.

  • jazoom 5 years ago

    I've started learning Rust after many years of NodeJS. In the past 3 weeks I've seen more "blazing" in Rust library marketing than in all my years of NodeJS combined.

    • evmar 5 years ago

      I've noticed it too. It drives me mad.

Pmop 5 years ago

Kind off-topic but related: sometimes I wonder how web development would be if Lisp had somehow won as standard, since we can use to do everything the stack HTML+CSS+JS+Backend-language does, in addition to standardized syntax and standard everything.

Oh, standards. Standards.

  • TeMPOraL 5 years ago

    We were so close. Twice, JavaScript had a chance to be Scheme; both times marketing reasons prevailed (first, to capitalize on the marketing spending of Java; later, to compete against Microsoft's JScript).

    If Scheme was the language of the web, then HTML and CSS being represented as s-expressions would be the most obvious next steps, and we'd be like 15 years ahead in terms of progress.

    • seanmcdirmid 5 years ago

      Marketing and popularity aren’t unrelated.

      • Razengan 5 years ago

        Popularity can be faked through marketing.

        • TeMPOraL 5 years ago

          Popularity is created through marketing.

        • seanmcdirmid 5 years ago

          Popularity can only be faked via shills and poll rigging. Perhaps you mean something else?

          • buckminster 5 years ago

            You say that like marketing and shilling are two wholly distinct activities. Have you heard of Instagram?

            • seanmcdirmid 5 years ago

              One is people pretending to like something or wrongly saying people like something. The other is people liking something for the wrong reasons. These are completely two different concepts.

  • mhd 5 years ago

    Or PostScript.

_hardwaregeek 5 years ago

I kinda don't get the whole "put html in template literals". Wouldn't there be no syntax highlighting? And the framework is either putting the string into the DOM with some regex manipulations, which would lead to some very confusing error messages, or it's parsing the string into a tree, which means it needs to implement what's essentially XML parsing, which would come with an overhead. And for what? Avoiding JSX? If you don't like JSX, just desugar it to nested function calls. Or just use a templating language.

  • spankalee 5 years ago

    Of course you can write a syntax highlighter for HTML in template literals. The lit-plugin VS Code extension provides syntax highlighting plus type checking for bindings.

    lit-html works by passing the template strings to the built-in HTML parser, so it doesn't need to bring its own.

    The benefit isn't just avoiding JSX and build steps, but more importantly avoiding VDOM and expensive diffs. Template literals separate the static parts if a template from the dynamic and remove the need to diff the parts that never change. It's more efficient.

    • dmitriid 5 years ago

      > lit-html works by passing the template strings to the built-in HTML parser, so it doesn't need to bring its own.

      What do you call this then: https://github.com/Polymer/lit-html/blob/master/src/lib/temp... ? For example, used here: https://github.com/Polymer/lit-html/blob/master/src/lib/temp...

      lit-html parses strings with regexps, does an ungodly amount of string concatenation, and only then dumps the resulting string blob into the DOM.

      • spankalee 5 years ago

        The preprocessing is far from an HTML parser. It just helps pick what marker to join template fragments with before passing to the built-in parser.

        You seem to think this is enough of a problem to comment on every time I mention lit-html, but you never back it up with any reasoning. Why should it be bad to do some string processing? What's "ungodly" about joining the template fragments?

        The fact is, lit-html is very fast, and allows embedding parameterized, updatable markup in standard JavaScript. You don't have to use it.

  • dmitriid 5 years ago

    My personal opinion is that tagged template literals are the worst addition to Javascript [1]

    As HN user stevebmark said [2]:

    --- start quote ---

    …we’ve learned not to write code in strings. You’d think this would be a fundamental law of software engineering

    Writing code, not strings, means you can do everything to it that you can do to code. You can type check code. You can lint it. You can optimize it, compile it, validate it, syntax highlight it, format it with tools like Prettier, tree shake it…

    --- end quote ---

    [1] https://dmitriid.com/blog/2019/03/tagged-template-literals/

    [2] https://news.ycombinator.com/item?id=18511943

    • TeMPOraL 5 years ago

      > You’d think this would be a fundamental law of software engineering

      Agreed, but not for the reasons you quoted.

      It should be a law of software engineering because when you're writing code, you aren't writing strings, you're writing a serialized and prettified form of a tree. So when you have two pieces of code you want to join together, you should join trees, not strings.

      Breaking this law is precisely why things like SQL Injection even exist in the first place.

    • tobr 5 years ago

      I think your blog post misses an important aspect of tagged template literals, which is that the first argument is an immutable object that is unique to the source location of the template. That doesn’t necessarily invalidate the rest of your argument, but it is a very powerful feature that is not really equivalent to anything else in JavaScript.

      • rounce 5 years ago

        What do you mean by 'source location'? Why does this matter? I'm intrigued (and also suffering from conjunctivitis so excuse me if I'm being a bit dense and totally missed your point).

        • tobr 5 years ago

          If you put a tagged template literal on line 42 in foo.js, every time the tagging function is called from there, the array of strings passed as the first argument is the same object. It’s unique for the source location of the template literal, so even if you paste the exact same code into bar.js, it will have a different object. So, the function can recognize that it is being called from the same location in the source. This has some interesting implications for meta programming and debugging.

          I’m not sure that it matters so much to the discussion, but it is a completely unique feature, and really has to be mentioned when discussing what tagged template literals offer.

          EDIT: Looked for a good reference - best detailed description I could find was here: https://exploringjs.com/es6/ch_template-literals.html#sec_im...

          • dmitriid 5 years ago

            Never knew about this, and completely missed it when reading about them on exploringjs.

            Thank you for the explanation!

  • brandonmenc 5 years ago

    > Wouldn't there be no syntax highlighting?

    Are there major IDEs that don't support language injections?

localvoid 5 years ago

All "top ranked" libraries that use fine-grained observables graph in this benchmark are actually "broken"[1].

1. https://github.com/ryansolid/solid/issues/46

  • luwes 5 years ago

    @localvoid thanks for the investigation, Sinuous can get around this with the template module I believe.

    Also Sinuous doesn't use the same library as Solid or S.js for tracking dependencies. I'll do some investigating if it has the same issue that you posted.

codegladiator 5 years ago

> import { o, h } from 'sinuous';

really recommend you to use proper names instead of single letter variables.

  • ezekg 5 years ago

    I second this. Also, this example on GitHub doesn't work since html is not defined.

  • luwes 5 years ago

    Thanks for the feedback!

    `o` is an alias for `observable`. `observable` can be used as well.

    `h` is the pragma, comes from hyperscript. it's used by a lot of libraries as the createElement function name so I didn't think this needed a more descriptive name.

ezekg 5 years ago

I took it for a super simple test run and behavior seems very… weird and incorrect: https://codesandbox.io/s/7o92r. Perhaps I'm just using it wrong, but it's not very clear why this example's state fails to update as you would expect. And I found a few examples of rendering that don't behave as expected.

theprotocol 5 years ago

I've toyed around with the template-strings-to-markup approach before, but couldn't quite figure out how using `map` to generate dynamic lists avoided doing a full O(n) loop upon each update without some kind of diffing engine (other than the browser's own markup diffing).

  • luwes 5 years ago

    it's indeed not possible, that's why there is a `map` module for rendering lists.

azangru 5 years ago

Is anyone else bothered by the two different meanings of the word "observable" (data streams vs getter/setter/proxy), when you are never sure which one was meant until you read the code?

Introduction of D3 observable notebooks didn't help :-(

aitchnyu 5 years ago

This brings Svelte to my mind with mere kbs of code free of a virtual-dom runtime. What should I know more?

  • luwes 5 years ago

    @aitchnyu it is similar to Svelte, a lot simpler, early stages, less features though.

    I think one of the upsides of Sinuous is that stays much closer to plain JS and to the web standards.