14 ms·

_hyperscript: A jQuery and JavaScript Alternative

tompazourek 6y ago
What's the debugging experience like? If some _hyperscript code I wrote doesn't do what I want it to do, what do I do? Is there some browser extension of some sorts or some IDE-like tool?
- recursivedoubts 6y ago
  We have a debugger: https://hyperscript.org/docs/#debugging https://hyperscript.org/docs/#debugging
bshimmin 6y ago
In case you never knew you wanted AppleScript in the browser, here it (sort of) is!
- nmcfarl 6y ago
  Looks like it's supposed to be more like HyperTalk in the browser: > It is based on an older and somewhat obscure (today) family of programming languages that originated in HyperTalk... - https://hypescript.org/docs/#syntax https://hypescript.org/docs/#syntax
gnrlst 6y ago
I guess it could be useful for simple DOM manipulation. The issue with it is, despite how great co-locality of concerns is, is that it can't EVER be separated. So I would use something like this if I wasn't using any framework at all. As soon as you use a framework (e.g. svelte/react/vue), the need for manual jQuery/dom manipulation drops to near 0.
- Cthulhu_ 6y ago
  'guess' indeed, it probably doesn't take long to run into a situation where you have to go back to regular JS. I'm confident the examples given can be simplified as well. The vanilla JS and jQuery examples are not equivalent for example, the vanilla one is (intentionally?) inline JS whereas the jquery one separates it out. It also doesn't use ES6 arrow functions (neither vanilla nor native), which would remove the need to rebind `this` to `self`. The vanilla one also sets style via JS, which isn't how you should do things. Transitions can be set in CSS beforehand. The one used sets the animation to 'all' properties as well, instead of just 'opacity' which is the only property changed. TL;DR the article is making vanilla look more difficult than it is. The jquery example seems lifted off of Stack Overflow.
- mrozbarry 6y ago
  I think this should expose something like `_hyperscript.on(domElementHere, 'your hyperscript string')` and that could resolve the co-locality concern.
  - recursivedoubts 6y ago
    we are working on supporting _hs files and you can write event handlers against other elements: on click from #some-btn log 'The button was clicked' end However, we really lean towards directly embedding the scripts on HTML elements for Locality of Behaviour https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/
- dsego 6y ago
  You wouldn't use a framework like react/vue with this. It is a companion project of htmx (1) which takes a different approach than your typical JS framework. There is a recent JS Party podcast (2) with the author if you want to learn more and have a better understanding of the motivation behind these approaches. 1 https://htmx.org/ https://htmx.org/ 2 https://www.youtube.com/watch?v=hJdxR6qoUOE https://www.youtube.com/watch?v=hJdxR6qoUOE
  - brianzelip 6y ago
    > recent JS Party podcast (2) See also https://changelog.com/jsparty/171 https://changelog.com/jsparty/171
k__ 6y ago
Not to be confused with HyperScript [0], a popular JS templating library. [0] https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript
SamBam 6y ago
It seems that the strings in the _ attribute aren't actually being read at runtime. E.g. if you edit them in the DOM it doesn't change anything. I assume this means it's compiled once on DOM load?
- deniz-a 6y ago
  You're pretty much right. Modifying the code at runtime is useful for devtools fun, but not much else. If you'd like to play around, open the console and try calling the `_hyperscript` function: _hyperscript(`get the first <button/> transition its background-color to 'red' over 2s log ':]' `)
- recursivedoubts 6y ago
  We have a (hidden) playground here: https://hyperscript.org/playground/ https://hyperscript.org/playground/ Still a work in progress, but you can play around w/ the language.
klibertp 6y ago
It looks interesting. There is a lot of complexity that can be hidden behind a well-crafted DSL. REBOL's View dialect and TCL's TK are examples of DSLs which make developing UIs much simpler than it would be with a full language. It might work with web frontends, too. It's also quite safe to use, in that it has an escape hatch and allows embedding JavaScript in it, and allows extension with JS code. The drastic simplification of the build process (and the reduction of the amount of code needed to do something useful) makes it attractive to people who don't work on the frontend often. I'll definitely give it a try.
codingdave 6y ago
My gut feeling is that this won't scale to work well in a non-trivial app, but I don't want to jump to conclusions, either. If the author is really trying to be a better jQuery without long chains of callbacks, then I'd like to see an example that shows exactly that. Show us an AJAX call that GETs data, add elements to the DOM based on that data, then binds events to those elements that call some existing functions. Maybe an example fetching data to build a draggable/droppable list with separate handlers for click vs. drag, or something along those lines?
- klibertp 6y ago
  > Show us an AJAX call that GETs data <button class='btn primary' _="on click fetch /clickedMessage put the result into me wait 2s put 'Click Me!' into me"> Click Me! </button> More here: https://hyperscript.org/docs/ https://hyperscript.org/docs/
  - notjustanymike 6y ago
    I saw that, it leaves out a lot. In production you'll need something that formats the response and handles errors, which means defining a custom Event Source. It seems like the functionality quickly returns to traditional javascript when any normal amount of complexity is required.
    - klibertp 6y ago
      Apparently when the fetch fails, it triggers an `fetch:error` event[1], which can (probably) be handled somewhere. No idea about formatting the response, though. I think it's quite natural for there to be large gaps in functionality provided: it looks like a rather young and unpopular project, so the additional code needed to handle more situations from within the language still needs to get written. jQuery also didn't have a whole universe of plugins from day 1, but was useful enough anyway. Not saying this project has a chance to become another jquery, just that it too can be useful even in a far-from-complete state. [1] https://github.com/bigskysoftware/_hyperscript/blob/master/src/lib/core.js#L4577-L4579 https://github.com/bigskysoftware/_hyperscript/blob/master/s...
ape4 6y ago
Looks like jQuery without punctuation.
Grieving 6y ago
I really like hyperscript et al. They seem to apply the 'everything-in-one-place' approach from modern JS development to HTML itself, extending hypertext without papering over it.
vladde 6y ago
I wouldn't implement this in any larger projects. Reading through the syntax it seems to fluctuate between choppy flow and fluent English. Possibly for smaller personal projects, but maybe that is what the library is for.
TheRealPomax 6y ago
The first example is already bizarre: use CSS and a transition listener on the JS side, why would you still implement it with a 1998 onclick, and a setTimeout? This isn't modern "vanilla JS", this is "ancient nonsense" =/ Add a CSS class "hide-animated" tied to your transition, add a transition end listener on the document (not once, perpemtual), with evt => evt.target.remove() (That's right, ".remove()", not "element.parentNode.removeChild(element)". Actually looking up modern JS is a good idea if you're going to knock it). And then the only other JS thing you need for your element is a click listener that adds "classList.add(`hide-animated`)". Is "addEventListener(`click`, evt => evt.target.remove())" overly verbose and cumbersome? Sure is, I have no love for it, but if you want to show that your library is better than vanilla JS, show vanilla JS, not code from 20 years ago.
- recursivedoubts 6y ago
  I would love a pull request with improvements. I'd like to be as fair as possible in these comparisons.
  - suction 6y ago
    Wait, you're looking for people to do the work you claim you did?
    - recursivedoubts 6y ago
      For htmx I have to stay in es5 to preserve IE11 compatibility, so there are modern features in the language I don't use on a regular basis. I appreciate any help from people who are better at the language, but of course understand if people aren't interested.
      - deleted 6y ago
        [deleted]
- liquidise 6y ago
  Do you push arrow functions to production? IE still accounts for 2.5% [0] of browser share and has no support [1] for them. My guess is that most of us have Babel in the mix of a production deployment, in which case I think the “20 year old code isn’t vanilla” loses some of it’s effect. 0: https://www.statista.com/statistics/272697/market-share-desktop-internet-browser-usa/ https://www.statista.com/statistics/272697/market-share-desk... 1: https://www.caniuse.com/arrow-functions https://www.caniuse.com/arrow-functions
jamestothejimmy 6y ago
Looks useful for a lot of the mini sites or landing pages we need to do, would make it much easier to add some basic interactivity with potentially less debug time
jeffreyrogers 6y ago
I have a small marketing webpage I am working on and I could see this being useful for that. Most of what I want to use JS on for that is relatively straightforward and this seems like a simpler approach than using a full framework or writing everything from scratch in normal Javascript.
Tade0 6y ago
It's libraries like these which remind me that even today most of the web front-end consists of static pages with JS sprinkled on top. Yes, there's Facebook with React and whatnot, but for every shared news article there you'll find an URL which leads to a WP site with jQuery added for interactivity.
- Sharlin 6y ago
  The real problem is all the pages that could be static HTML with some JS on top, but are instead SPAs with a dozen layers of abstraction taking half a gig of RAM and five seconds to render.
  - Tade0 6y ago
    I've thought about this a lot and my position is that it all boils down to how bad is the result when you apply any of these approaches wrongly. Turns out static pages with JS on top can be even worse than badly done SPAs - especially when the server infrastructure is lacking and a single request takes a significant amount of time.
    - ljm 6y ago
      Surely all of the money invested into that SPA could be redirected into a simpler full-stack app, with sprinkles of progressive JS? On the one hand you have a shared-nothing architecture that serves HTML and can enjoy varying forms of caching. On the other you have an application that still depends on a server, but replaces all of that simplicity with a stateful client-server architecture that requires _more_ infra to manage, at a greater expense.
      - Tade0 6y ago
        There's one important factor you're missing: for lack of a better word - "staffability". Just about every programming language has also a web framework implemented in it, so if you want to create a full-stack web app, the range of options is just dazzling, which results in a highly fragmented ecosystem. Meanwhile on the front-end there's essentially one language(with different flavours) and 3-4 leading frameworks, so once a developer has these covered, they can be hired to do anything in this part of the stack. The overall result is that it's easier to scale work if you offload it to the front-end, because by the time you found your <insert highly specific language/framework combination>, your front-end developers would have done most of the work twice over. There are many more reasons why you would want a SPA instead of a full-stack app, but this is one of the strongest.
fouric 6y ago
The symbol-light, kind-of-English-looking syntax initially reminded me of Common Lisp's LOOP DSL[1] before I made the connection to HyperTalk/HyperCard. [1] http://www.gigamonkeys.com/book/loop-for-black-belts.html http://www.gigamonkeys.com/book/loop-for-black-belts.html
cortexio 6y ago
This is bad, very bad. I get the idea, it's cool and all, but it's very limiting, let alone all the parsing your pc has to do. U know, people talk about the environment so much and how much they care, yet they create stuff like this. Not that the creator of this project cares about this, but i've seen to many devs doing it.. so called "caring" about the environment but then wasting electricity like it's nothing.
gmaster1440 6y ago
Neat, appears to occupy a similar niche as Alpine: https://github.com/alpinejs/alpine https://github.com/alpinejs/alpine
- recursivedoubts 6y ago
  yep, very similar goals (although _hyperscript, sadly, requires a lot more code...)
goto11 6y ago
Seems cool in general. I like their point about "locality of behavior". Some of the syntax give me unfortunate flashbacks to AppleScript. Expressions like "the location of window" looks cool at first glance, but in reality "window.location" is easier to both read and write, especially when you start to compose more complex expressions.
- klibertp 6y ago
  > but in reality "window.location" is easier to both read and write No, it's not easier to read. Really. You think it is, but that's only because you're used to it. If you take a step back and look at the "window.location" expression objectively, while forgetting all that you know about programming (but retaining your knowledge of English), you won't be able to tell what is it about, not with any kind of certainty. Or, if you have experience with some other programming languages, you might read it as "a composition of function window and function location". On the other hand, "the location of window", even if it's not 100% correct English, tells you all that you need to know to understand what is happening. It is easier to write, but only because it has less characters. The docs state pretty clearly that they are optimizing for ease of reading, not writing, so this is expected.
  - kayodelycaon 6y ago
    Natural-language programming comes up from time to time and it rarely sticks around. For myself, I can't parse them without my brain trying to read it as actual English. Having programming languages look distinctly different from human communication keeps my mental overhead low. I find Applescript impossible to use. NLP also has a major issue with rapid comprehension. It's far harder to see the structure of code at a glance if everything is just keywords. While this is an issue with every type of communication, NLP has a significantly lower upper limit to almost every other language I work in. SQL is a middle ground. If you format it properly, it's really easy to scan and see what's happening. Applescript? Not so much.
    - recursivedoubts 6y ago
      I agree, applescript is a warning to anyone going down the hypertalk-derived road I am adding things like CSS literals: https://hyperscript.org/expressions/#css https://hyperscript.org/expressions/#css in the hope that we can increase the expressiveness (and distinctness between different elements) that we don't fall into the wall-of-text nature of applescript. It's a speculative project, we'll see how it works out.
devilduck 6y ago
We don't need this
epr 6y ago
Several years back, when I was learning my first web stack, I got some very good advice from a seasoned developer. "Focus on the fundamentals of HTML, CSS and JS. Everything else is ephemeral." I don't mean to pick on whomever wrote these examples, but the ~7 lines of JS for the first example (fading out) shows either a lack of basic understanding or intentional complication to make hyperscript appear better in comparison. A more reasonable solution is 3 lines of code. .fade { transition: opacity 500ms ease-out; } <div class="fade" onclick=" this.style.opacity=0; this.addEventListener('transitionend', () => this.remove()); ">Remove Me</div>
- supakeen 6y ago
  This doesn't remove the object from the DOM after the animation is over, which the example on the website does. You'll need to add something that removes the element after the transition is over which would be a bunch more code (the eventlistener for transitionend) :)
  - epr 6y ago
    Thanks for the heads up before the Hacker News edit window closed. +1 LOC
    - jolux 6y ago
      FYI you can set a "delay" in your profile of up to 10 minutes before your comments are shown, giving you more time to edit. May not have helped in this case but it's a cool feature.
      - SebastianKra 6y ago
        thats's a nice tip. Thanks
        jolux 6y ago
        one can learn a lot from reading the FAQ: https://news.ycombinator.com/newsfaq.html https://news.ycombinator.com/newsfaq.html :)
racl101 6y ago
This could be nice for new people but as a person well versed in jQuery and CSS selectors it would be more work for me to learn this than to continue using jQuery.
- recursivedoubts 6y ago
  hyperscript has built in CSS literals, which can make code pretty tight: https://hyperscript.org/expressions/#css https://hyperscript.org/expressions/#css Not suggesting you give up jQuery, but a lot of your knowledge should transfer if you ever want to play with the language.
megous 6y ago
So say you want to start a fetch and some animation at the same time to indicate progress. Both run in parallel. Not very unusual use case. How?
- recursivedoubts 6y ago
  There is an example using event-driven control flow that could be used as a basis for this: https://hyperscript.org/docs/#event-control-flow https://hyperscript.org/docs/#event-control-flow Coupled with an async command: https://hyperscript.org/commands/async/ https://hyperscript.org/commands/async/ The language is very young, so we are still building out the docs and examples. For something like htmx, where there is already a rich event model around requests, I would instead listen for htmx:beforeRequest and htmx:afterRequest events: https://htmx.org/reference/#events https://htmx.org/reference/#events And use that event-driven control flow technique to smoothly end the animation.
  - megous 6y ago
    I see, async command would solve that. Thanks.
SPBS 6y ago
My first reaction was that "this sucks, who would want to use some non-established DSL over universally understood JavaScript". But thinking about it more, this is just like functional CSS libraries (e.g. Tailwind CSS) that allow you to compose behavior from strings that you bake into the HTML. I don't agree with the syntax here or the use of `_` instead `data-*`, but I think it's worth looking into encoding common UI behavior into HTML classes or a custom data-* attribute.
- purerandomness 6y ago
  From the docs: > While the underscore (_) attribute is where the hyperscript runtime looks for hyperscript on an element by default, you may also use script or data-script attribute, or configure a different attribute name if you don't like any of those.
graderjs 6y ago
Not to be confused with hyperscript[0] hyperscript[1] hyperscript[2] hyperapp[3] [0]: https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript [1]: https://cycle.js.org/api/dom.html#api-h https://cycle.js.org/api/dom.html#api-h [2]: https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/6#issuecomment-232994673 https://github.com/vuejs/babel-plugin-transform-vue-jsx/issu... [3]: https://github.com/jorgebucaran/hyperapp https://github.com/jorgebucaran/hyperapp
- tobr 6y ago
  I read this too late and was already confused. Since the author is here, I’d like to take the opportunity to suggest they change it.
- lhorie 6y ago
  See also: preact, mithril.js, etc I mentioned this before[0] but it seems the author is committed to the name, despite the potential confusion downsides </shrug> [0] https://news.ycombinator.com/item?id=26744932 https://news.ycombinator.com/item?id=26744932
- simplify 6y ago
  Yes, hyperscript is a well-established term, and is still in use today. An unfortunate name clash.
recursivedoubts 6y ago
Hi there, I'm the creator of _hyperscript and htmx, happy to answer questions. _hyperscript is much more speculative than htmx, but it is working out pretty nicely. One aspect of the language that HN readers might find interesting is that it is async-transparent: the distinction between synchronous and asynchronous code is largely hidden: https://hyperscript.org/docs/#async https://hyperscript.org/docs/#async This allows for some pretty interesting programming techniques, such as event-driven control flow: https://hyperscript.org/docs/#event-control-flow https://hyperscript.org/docs/#event-control-flow One thing to be aware of with _hyperscript is that it is intended as a light weight, event oriented scripting language, I would not recommend a huge application being build out in it exclusively. It is designed to make it easy to plug into the event models of htmx and other libraries. EDIT: I should also mention, it is still very early in development (0.0.9)
- mattgreenrocks 6y ago
  The async transparency aspect is very interesting from a design POV! What were your inspirations for that?
  - recursivedoubts 6y ago
    I just hated the way that callbacks look or that you had to color your functions: https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/ https://journal.stuffwithstuff.com/2015/02/01/what-color-is-... For light weight scripting I didn't want to have to think about that. I had implement a "wait" command in the old ic-action attribute from intercooler: https://intercoolerjs.org/attributes/ic-action.html https://intercoolerjs.org/attributes/ic-action.html And I wanted to generalize that. (A motivation for creating _hyperscript was because I removed ic-action as well as a bunch of other event-based attributes when rewrote intercooler.js as htmx: https://hyperscript.org/docs/#history https://hyperscript.org/docs/#history)
    - mstade 6y ago
      The async transparency stuff is really interesting, and reminds me of a comment[1] I made a couple of years ago here on HN about async/await and how I think it's backwards from what it ought to be. Really glad to see you exploring this further, I think you're on to something. That post from Bob Nystrom's blog makes the point I was trying to make much more eloquently than I could, thanks for sharing! [1]: https://news.ycombinator.com/item?id=21065806 https://news.ycombinator.com/item?id=21065806
luord 6y ago
htmx by itself is so good—when paired with discipline in the backend in creating proper fragments anyway—that so far I haven't needed hyperscript. But then again, htmx is so good that any project by the author has my vote of confidence by default. Still, I oughta try this to make a proper judgement.
- recursivedoubts 6y ago
  :) I appreciate hearing that. _hyperscript is far more speculative than htmx, so if you don't need it, don't use it just to use it. But if there are places where a bit of light scripting might help, it's maybe worth a try.
sdwvit 6y ago
How to debug if I have a typo somewhere?
tyingq 6y ago
<div _="on click transition opacity to 0 then remove me"> My immediate reaction was "Oh, web Cobol". Edit: By the downvotes, I'm guessing people think it was a lazy attempt to poke fun. It's not though :) Cobol has a very repeated VERB->NOUN->ADVERB->ETC sentence style pattern that's very similar to what's in that snippet of _hyperscript above. Like: DIVIDE NUMA BY NUMB GIVING RES-DIV PERFORM VARYING LoopCount FROM 1 BY 1 UNTIL LoopCount GREATER THAN 4 And so on...
- lhjn 6y ago
  I had the exact same reaction. It's a very striking resemblance. Don't mean to detract from the project though, not my piece of cake but could be handy
- deniz-a 6y ago
  Thankfully, we have arithmetic expressions :] Every command has an initial verb, which makes parsing easier (both by computer, and hopefully by people). Just for fun, here are your examples in hyperscript: get numA / numB then put it into resDiv -- or simply set resDiv to numA / numB repeat 5 times index loopCount log loopCount end
  - tyingq 6y ago
    Ah, very cool. Thanks for sharing the hyperscript examples.
mdtusz 6y ago
This seems quite interesting and powerful for what most server-side rendered websites need from javascript, however the _usage_ seems fairly klunky to me at this stage. I could see this being a joy to work with though if a well determined usage pattern emerges where you have something like a `some_page_template.html` file open next to a `some_page_hyperscript.hy` where you define all the locally scoped functionality and the two are combined by your webserver template engine. It wouldn't be very hard to set up, but having a de-facto way to structure and organize things it would likely help with adoption and prevent new users from being architechture astronauts.
rlawson 6y ago
I haven't started to use _hyperscript yet but htmx (by same author) has been a real pleasure to use with Django. SPA like behavior with 1/10th effort.
progforlyfe 6y ago
This is giving me some serious HyperCard/HyperTalk vibes from the late 80s/early 90s on Macintosh computers! Perhaps that is why the name has "hyper" in it? _hyperscript: <button _="on click fetch /clickedMessage/ then put the result into #fetch-target-3"> HyperTalk (https://en.wikipedia.org/wiki/HyperTalk https://en.wikipedia.org/wiki/HyperTalk): put the value of card field "typehere" into theValue
- recursivedoubts 6y ago
  Yep, I programmed in HyperCard/HyperTalk a long time ago and when i was thinking about how I needed a language with native event handling I remembered HyperTalk. :)
v8dev123 6y ago
This won't scale. It will be like AppleScript for Web :)
danfritz 6y ago
As a developer with dyslexia I hope this never becomes popular as I would be out of a job. Kuddos to the author looks cool but personally I wouldn't be able to make a single thing work.
twsted 6y ago
Tangential, the best web tech (in my opinion) I am considering at the moment (in this order): - Svelte - htmlx - lit-html and perhaps also lit-element
oblib 6y ago
Wow! This is just sweet! I love the natural language approach and simplicity. I'm definitely going to block off some time to play with this.
frabjoused 6y ago
It seems like this library was built to address the edge cases the author is familiar with, and for the more complicated actions it starts leaning closer towards a traditional language. For example, the debounce function referenced in the JS comparison isn't even a properly implemented debounce, which means his built-in language function for debounce is incorrect. I've had to build or use a debounce function maybe 10 times in 12 years personally.
- recursivedoubts 6y ago
  Would you mind opening an issue on how the debounce is incorrect? I'd like to fix it if possible.
cardanome 6y ago
I love it. I am totally fond of the locality of behavior approach. Not many frontend tools do fit into the traditional niche of JQuery were you want a static site with some quick and easy way to add some interactivity. Now I do share the concern that it might not be the best approach for really complex stateful applications but we will have to see how it scales once we see the first real world uses of it. It is good to know that the is always the escape of hatch of simply using plain vanilla js. Sure it wont replace React/Svelte/Elm level of use cases but I guess that is not the goal. Also really dig the fresh take on a human friendly syntax. Sure there are pitfalls with that but hey for this kind of DSL it might work out. Nice to see people trying out non mainstream approaches.
sequoia 6y ago
I like the locality of behavior concept and am interested in learning more about hyperscript. This VanillaJS example is just plain silly. I've never seen anyone set styles and call requestAnimationFrame & do all that in an inline onClick handler. I mean html elements have a `style` attribute, why would you set `transition` in a click handler? The vanilla example should look more like the jQuery one, with the the code apart from the markup & referencing the element by id or class, attaching a handler with addEventListener. Your will still compare favorably, and this a slightly less "intentionally ugly" way to write the code.
thomas-guettler 6y ago
Hyperscript is great. Just like the real revolutionary htmx.

What's the debugging experience like? If some _hyperscript code I wrote doesn't do what I want it to do, what do I do? Is there some browser extension of some sorts or some IDE-like tool?

recursivedoubts 6y ago
We have a debugger: https://hyperscript.org/docs/#debugging https://hyperscript.org/docs/#debugging

bshimmin 6y ago

In case you never knew you wanted AppleScript in the browser, here it (sort of) is!

nmcfarl 6y ago
Looks like it's supposed to be more like HyperTalk in the browser: > It is based on an older and somewhat obscure (today) family of programming languages that originated in HyperTalk... - https://hypescript.org/docs/#syntax https://hypescript.org/docs/#syntax

gnrlst 6y ago

I guess it could be useful for simple DOM manipulation. The issue with it is, despite how great co-locality of concerns is, is that it can't EVER be separated. So I would use something like this if I wasn't using any framework at all. As soon as you use a framework (e.g. svelte/react/vue), the need for manual jQuery/dom manipulation drops to near 0.

Cthulhu_ 6y ago
'guess' indeed, it probably doesn't take long to run into a situation where you have to go back to regular JS. I'm confident the examples given can be simplified as well. The vanilla JS and jQuery examples are not equivalent for example, the vanilla one is (intentionally?) inline JS whereas the jquery one separates it out. It also doesn't use ES6 arrow functions (neither vanilla nor native), which would remove the need to rebind `this` to `self`. The vanilla one also sets style via JS, which isn't how you should do things. Transitions can be set in CSS beforehand. The one used sets the animation to 'all' properties as well, instead of just 'opacity' which is the only property changed. TL;DR the article is making vanilla look more difficult than it is. The jquery example seems lifted off of Stack Overflow.
mrozbarry 6y ago
I think this should expose something like `_hyperscript.on(domElementHere, 'your hyperscript string')` and that could resolve the co-locality concern.
- recursivedoubts 6y ago
  we are working on supporting _hs files and you can write event handlers against other elements: on click from #some-btn log 'The button was clicked' end However, we really lean towards directly embedding the scripts on HTML elements for Locality of Behaviour https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/
dsego 6y ago
You wouldn't use a framework like react/vue with this. It is a companion project of htmx (1) which takes a different approach than your typical JS framework. There is a recent JS Party podcast (2) with the author if you want to learn more and have a better understanding of the motivation behind these approaches. 1 https://htmx.org/ https://htmx.org/ 2 https://www.youtube.com/watch?v=hJdxR6qoUOE https://www.youtube.com/watch?v=hJdxR6qoUOE
- brianzelip 6y ago
  > recent JS Party podcast (2) See also https://changelog.com/jsparty/171 https://changelog.com/jsparty/171

k__ 6y ago

Not to be confused with HyperScript [0], a popular JS templating library. [0] https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript

SamBam 6y ago

It seems that the strings in the _ attribute aren't actually being read at runtime. E.g. if you edit them in the DOM it doesn't change anything. I assume this means it's compiled once on DOM load?

deniz-a 6y ago
You're pretty much right. Modifying the code at runtime is useful for devtools fun, but not much else. If you'd like to play around, open the console and try calling the `_hyperscript` function: _hyperscript(`get the first <button/> transition its background-color to 'red' over 2s log ':]' `)
recursivedoubts 6y ago
We have a (hidden) playground here: https://hyperscript.org/playground/ https://hyperscript.org/playground/ Still a work in progress, but you can play around w/ the language.

klibertp 6y ago

It looks interesting. There is a lot of complexity that can be hidden behind a well-crafted DSL. REBOL's View dialect and TCL's TK are examples of DSLs which make developing UIs much simpler than it would be with a full language. It might work with web frontends, too. It's also quite safe to use, in that it has an escape hatch and allows embedding JavaScript in it, and allows extension with JS code. The drastic simplification of the build process (and the reduction of the amount of code needed to do something useful) makes it attractive to people who don't work on the frontend often. I'll definitely give it a try.

codingdave 6y ago

My gut feeling is that this won't scale to work well in a non-trivial app, but I don't want to jump to conclusions, either. If the author is really trying to be a better jQuery without long chains of callbacks, then I'd like to see an example that shows exactly that. Show us an AJAX call that GETs data, add elements to the DOM based on that data, then binds events to those elements that call some existing functions. Maybe an example fetching data to build a draggable/droppable list with separate handlers for click vs. drag, or something along those lines?

klibertp 6y ago
> Show us an AJAX call that GETs data <button class='btn primary' _="on click fetch /clickedMessage put the result into me wait 2s put 'Click Me!' into me"> Click Me! </button> More here: https://hyperscript.org/docs/ https://hyperscript.org/docs/
- notjustanymike 6y ago
  I saw that, it leaves out a lot. In production you'll need something that formats the response and handles errors, which means defining a custom Event Source. It seems like the functionality quickly returns to traditional javascript when any normal amount of complexity is required.
  - klibertp 6y ago
    Apparently when the fetch fails, it triggers an `fetch:error` event[1], which can (probably) be handled somewhere. No idea about formatting the response, though. I think it's quite natural for there to be large gaps in functionality provided: it looks like a rather young and unpopular project, so the additional code needed to handle more situations from within the language still needs to get written. jQuery also didn't have a whole universe of plugins from day 1, but was useful enough anyway. Not saying this project has a chance to become another jquery, just that it too can be useful even in a far-from-complete state. [1] https://github.com/bigskysoftware/_hyperscript/blob/master/src/lib/core.js#L4577-L4579 https://github.com/bigskysoftware/_hyperscript/blob/master/s...

ape4 6y ago

Looks like jQuery without punctuation.

Grieving 6y ago

I really like hyperscript et al. They seem to apply the 'everything-in-one-place' approach from modern JS development to HTML itself, extending hypertext without papering over it.

vladde 6y ago

I wouldn't implement this in any larger projects. Reading through the syntax it seems to fluctuate between choppy flow and fluent English. Possibly for smaller personal projects, but maybe that is what the library is for.

TheRealPomax 6y ago

The first example is already bizarre: use CSS and a transition listener on the JS side, why would you still implement it with a 1998 onclick, and a setTimeout? This isn't modern "vanilla JS", this is "ancient nonsense" =/ Add a CSS class "hide-animated" tied to your transition, add a transition end listener on the document (not once, perpemtual), with evt => evt.target.remove() (That's right, ".remove()", not "element.parentNode.removeChild(element)". Actually looking up modern JS is a good idea if you're going to knock it). And then the only other JS thing you need for your element is a click listener that adds "classList.add(`hide-animated`)". Is "addEventListener(`click`, evt => evt.target.remove())" overly verbose and cumbersome? Sure is, I have no love for it, but if you want to show that your library is better than vanilla JS, show vanilla JS, not code from 20 years ago.

recursivedoubts 6y ago
I would love a pull request with improvements. I'd like to be as fair as possible in these comparisons.
- suction 6y ago
  Wait, you're looking for people to do the work you claim you did?
  - recursivedoubts 6y ago
    For htmx I have to stay in es5 to preserve IE11 compatibility, so there are modern features in the language I don't use on a regular basis. I appreciate any help from people who are better at the language, but of course understand if people aren't interested.
    - deleted 6y ago
      [deleted]
liquidise 6y ago
Do you push arrow functions to production? IE still accounts for 2.5% [0] of browser share and has no support [1] for them. My guess is that most of us have Babel in the mix of a production deployment, in which case I think the “20 year old code isn’t vanilla” loses some of it’s effect. 0: https://www.statista.com/statistics/272697/market-share-desktop-internet-browser-usa/ https://www.statista.com/statistics/272697/market-share-desk... 1: https://www.caniuse.com/arrow-functions https://www.caniuse.com/arrow-functions

jamestothejimmy 6y ago

Looks useful for a lot of the mini sites or landing pages we need to do, would make it much easier to add some basic interactivity with potentially less debug time

jeffreyrogers 6y ago

I have a small marketing webpage I am working on and I could see this being useful for that. Most of what I want to use JS on for that is relatively straightforward and this seems like a simpler approach than using a full framework or writing everything from scratch in normal Javascript.

Tade0 6y ago

It's libraries like these which remind me that even today most of the web front-end consists of static pages with JS sprinkled on top. Yes, there's Facebook with React and whatnot, but for every shared news article there you'll find an URL which leads to a WP site with jQuery added for interactivity.

Sharlin 6y ago
The real problem is all the pages that could be static HTML with some JS on top, but are instead SPAs with a dozen layers of abstraction taking half a gig of RAM and five seconds to render.
- Tade0 6y ago
  I've thought about this a lot and my position is that it all boils down to how bad is the result when you apply any of these approaches wrongly. Turns out static pages with JS on top can be even worse than badly done SPAs - especially when the server infrastructure is lacking and a single request takes a significant amount of time.
  - ljm 6y ago
    Surely all of the money invested into that SPA could be redirected into a simpler full-stack app, with sprinkles of progressive JS? On the one hand you have a shared-nothing architecture that serves HTML and can enjoy varying forms of caching. On the other you have an application that still depends on a server, but replaces all of that simplicity with a stateful client-server architecture that requires _more_ infra to manage, at a greater expense.
    - Tade0 6y ago
      There's one important factor you're missing: for lack of a better word - "staffability". Just about every programming language has also a web framework implemented in it, so if you want to create a full-stack web app, the range of options is just dazzling, which results in a highly fragmented ecosystem. Meanwhile on the front-end there's essentially one language(with different flavours) and 3-4 leading frameworks, so once a developer has these covered, they can be hired to do anything in this part of the stack. The overall result is that it's easier to scale work if you offload it to the front-end, because by the time you found your <insert highly specific language/framework combination>, your front-end developers would have done most of the work twice over. There are many more reasons why you would want a SPA instead of a full-stack app, but this is one of the strongest.

fouric 6y ago

The symbol-light, kind-of-English-looking syntax initially reminded me of Common Lisp's LOOP DSL[1] before I made the connection to HyperTalk/HyperCard. [1] http://www.gigamonkeys.com/book/loop-for-black-belts.html http://www.gigamonkeys.com/book/loop-for-black-belts.html

cortexio 6y ago

This is bad, very bad. I get the idea, it's cool and all, but it's very limiting, let alone all the parsing your pc has to do. U know, people talk about the environment so much and how much they care, yet they create stuff like this. Not that the creator of this project cares about this, but i've seen to many devs doing it.. so called "caring" about the environment but then wasting electricity like it's nothing.

gmaster1440 6y ago

Neat, appears to occupy a similar niche as Alpine: https://github.com/alpinejs/alpine https://github.com/alpinejs/alpine

recursivedoubts 6y ago
yep, very similar goals (although _hyperscript, sadly, requires a lot more code...)

goto11 6y ago

Seems cool in general. I like their point about "locality of behavior". Some of the syntax give me unfortunate flashbacks to AppleScript. Expressions like "the location of window" looks cool at first glance, but in reality "window.location" is easier to both read and write, especially when you start to compose more complex expressions.

klibertp 6y ago
> but in reality "window.location" is easier to both read and write No, it's not easier to read. Really. You think it is, but that's only because you're used to it. If you take a step back and look at the "window.location" expression objectively, while forgetting all that you know about programming (but retaining your knowledge of English), you won't be able to tell what is it about, not with any kind of certainty. Or, if you have experience with some other programming languages, you might read it as "a composition of function window and function location". On the other hand, "the location of window", even if it's not 100% correct English, tells you all that you need to know to understand what is happening. It is easier to write, but only because it has less characters. The docs state pretty clearly that they are optimizing for ease of reading, not writing, so this is expected.
- kayodelycaon 6y ago
  Natural-language programming comes up from time to time and it rarely sticks around. For myself, I can't parse them without my brain trying to read it as actual English. Having programming languages look distinctly different from human communication keeps my mental overhead low. I find Applescript impossible to use. NLP also has a major issue with rapid comprehension. It's far harder to see the structure of code at a glance if everything is just keywords. While this is an issue with every type of communication, NLP has a significantly lower upper limit to almost every other language I work in. SQL is a middle ground. If you format it properly, it's really easy to scan and see what's happening. Applescript? Not so much.
  - recursivedoubts 6y ago
    I agree, applescript is a warning to anyone going down the hypertalk-derived road I am adding things like CSS literals: https://hyperscript.org/expressions/#css https://hyperscript.org/expressions/#css in the hope that we can increase the expressiveness (and distinctness between different elements) that we don't fall into the wall-of-text nature of applescript. It's a speculative project, we'll see how it works out.

devilduck 6y ago

We don't need this

epr 6y ago

Several years back, when I was learning my first web stack, I got some very good advice from a seasoned developer. "Focus on the fundamentals of HTML, CSS and JS. Everything else is ephemeral." I don't mean to pick on whomever wrote these examples, but the ~7 lines of JS for the first example (fading out) shows either a lack of basic understanding or intentional complication to make hyperscript appear better in comparison. A more reasonable solution is 3 lines of code. .fade { transition: opacity 500ms ease-out; } <div class="fade" onclick=" this.style.opacity=0; this.addEventListener('transitionend', () => this.remove()); ">Remove Me</div>

supakeen 6y ago
This doesn't remove the object from the DOM after the animation is over, which the example on the website does. You'll need to add something that removes the element after the transition is over which would be a bunch more code (the eventlistener for transitionend) :)
- epr 6y ago
  Thanks for the heads up before the Hacker News edit window closed. +1 LOC
  - jolux 6y ago
    FYI you can set a "delay" in your profile of up to 10 minutes before your comments are shown, giving you more time to edit. May not have helped in this case but it's a cool feature.
    - SebastianKra 6y ago
      thats's a nice tip. Thanks
      - jolux 6y ago
        one can learn a lot from reading the FAQ: https://news.ycombinator.com/newsfaq.html https://news.ycombinator.com/newsfaq.html :)

racl101 6y ago

This could be nice for new people but as a person well versed in jQuery and CSS selectors it would be more work for me to learn this than to continue using jQuery.

recursivedoubts 6y ago
hyperscript has built in CSS literals, which can make code pretty tight: https://hyperscript.org/expressions/#css https://hyperscript.org/expressions/#css Not suggesting you give up jQuery, but a lot of your knowledge should transfer if you ever want to play with the language.

megous 6y ago

So say you want to start a fetch and some animation at the same time to indicate progress. Both run in parallel. Not very unusual use case. How?

recursivedoubts 6y ago
There is an example using event-driven control flow that could be used as a basis for this: https://hyperscript.org/docs/#event-control-flow https://hyperscript.org/docs/#event-control-flow Coupled with an async command: https://hyperscript.org/commands/async/ https://hyperscript.org/commands/async/ The language is very young, so we are still building out the docs and examples. For something like htmx, where there is already a rich event model around requests, I would instead listen for htmx:beforeRequest and htmx:afterRequest events: https://htmx.org/reference/#events https://htmx.org/reference/#events And use that event-driven control flow technique to smoothly end the animation.
- megous 6y ago
  I see, async command would solve that. Thanks.

SPBS 6y ago

My first reaction was that "this sucks, who would want to use some non-established DSL over universally understood JavaScript". But thinking about it more, this is just like functional CSS libraries (e.g. Tailwind CSS) that allow you to compose behavior from strings that you bake into the HTML. I don't agree with the syntax here or the use of `_` instead `data-*`, but I think it's worth looking into encoding common UI behavior into HTML classes or a custom data-* attribute.

purerandomness 6y ago
From the docs: > While the underscore (_) attribute is where the hyperscript runtime looks for hyperscript on an element by default, you may also use script or data-script attribute, or configure a different attribute name if you don't like any of those.

graderjs 6y ago

Not to be confused with hyperscript[0] hyperscript[1] hyperscript[2] hyperapp[3] [0]: https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript [1]: https://cycle.js.org/api/dom.html#api-h https://cycle.js.org/api/dom.html#api-h [2]: https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/6#issuecomment-232994673 https://github.com/vuejs/babel-plugin-transform-vue-jsx/issu... [3]: https://github.com/jorgebucaran/hyperapp https://github.com/jorgebucaran/hyperapp

tobr 6y ago
I read this too late and was already confused. Since the author is here, I’d like to take the opportunity to suggest they change it.
lhorie 6y ago
See also: preact, mithril.js, etc I mentioned this before[0] but it seems the author is committed to the name, despite the potential confusion downsides </shrug> [0] https://news.ycombinator.com/item?id=26744932 https://news.ycombinator.com/item?id=26744932
simplify 6y ago
Yes, hyperscript is a well-established term, and is still in use today. An unfortunate name clash.

recursivedoubts 6y ago

Hi there, I'm the creator of _hyperscript and htmx, happy to answer questions. _hyperscript is much more speculative than htmx, but it is working out pretty nicely. One aspect of the language that HN readers might find interesting is that it is async-transparent: the distinction between synchronous and asynchronous code is largely hidden: https://hyperscript.org/docs/#async https://hyperscript.org/docs/#async This allows for some pretty interesting programming techniques, such as event-driven control flow: https://hyperscript.org/docs/#event-control-flow https://hyperscript.org/docs/#event-control-flow One thing to be aware of with _hyperscript is that it is intended as a light weight, event oriented scripting language, I would not recommend a huge application being build out in it exclusively. It is designed to make it easy to plug into the event models of htmx and other libraries. EDIT: I should also mention, it is still very early in development (0.0.9)

mattgreenrocks 6y ago
The async transparency aspect is very interesting from a design POV! What were your inspirations for that?
- recursivedoubts 6y ago
  I just hated the way that callbacks look or that you had to color your functions: https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/ https://journal.stuffwithstuff.com/2015/02/01/what-color-is-... For light weight scripting I didn't want to have to think about that. I had implement a "wait" command in the old ic-action attribute from intercooler: https://intercoolerjs.org/attributes/ic-action.html https://intercoolerjs.org/attributes/ic-action.html And I wanted to generalize that. (A motivation for creating _hyperscript was because I removed ic-action as well as a bunch of other event-based attributes when rewrote intercooler.js as htmx: https://hyperscript.org/docs/#history https://hyperscript.org/docs/#history)
  - mstade 6y ago
    The async transparency stuff is really interesting, and reminds me of a comment[1] I made a couple of years ago here on HN about async/await and how I think it's backwards from what it ought to be. Really glad to see you exploring this further, I think you're on to something. That post from Bob Nystrom's blog makes the point I was trying to make much more eloquently than I could, thanks for sharing! [1]: https://news.ycombinator.com/item?id=21065806 https://news.ycombinator.com/item?id=21065806

luord 6y ago

htmx by itself is so good—when paired with discipline in the backend in creating proper fragments anyway—that so far I haven't needed hyperscript. But then again, htmx is so good that any project by the author has my vote of confidence by default. Still, I oughta try this to make a proper judgement.

recursivedoubts 6y ago
:) I appreciate hearing that. _hyperscript is far more speculative than htmx, so if you don't need it, don't use it just to use it. But if there are places where a bit of light scripting might help, it's maybe worth a try.

sdwvit 6y ago

How to debug if I have a typo somewhere?

tyingq 6y ago

<div _="on click transition opacity to 0 then remove me"> My immediate reaction was "Oh, web Cobol". Edit: By the downvotes, I'm guessing people think it was a lazy attempt to poke fun. It's not though :) Cobol has a very repeated VERB->NOUN->ADVERB->ETC sentence style pattern that's very similar to what's in that snippet of _hyperscript above. Like: DIVIDE NUMA BY NUMB GIVING RES-DIV PERFORM VARYING LoopCount FROM 1 BY 1 UNTIL LoopCount GREATER THAN 4 And so on...

lhjn 6y ago
I had the exact same reaction. It's a very striking resemblance. Don't mean to detract from the project though, not my piece of cake but could be handy
deniz-a 6y ago
Thankfully, we have arithmetic expressions :] Every command has an initial verb, which makes parsing easier (both by computer, and hopefully by people). Just for fun, here are your examples in hyperscript: get numA / numB then put it into resDiv -- or simply set resDiv to numA / numB repeat 5 times index loopCount log loopCount end
- tyingq 6y ago
  Ah, very cool. Thanks for sharing the hyperscript examples.

mdtusz 6y ago

This seems quite interesting and powerful for what most server-side rendered websites need from javascript, however the _usage_ seems fairly klunky to me at this stage. I could see this being a joy to work with though if a well determined usage pattern emerges where you have something like a `some_page_template.html` file open next to a `some_page_hyperscript.hy` where you define all the locally scoped functionality and the two are combined by your webserver template engine. It wouldn't be very hard to set up, but having a de-facto way to structure and organize things it would likely help with adoption and prevent new users from being architechture astronauts.

rlawson 6y ago

I haven't started to use _hyperscript yet but htmx (by same author) has been a real pleasure to use with Django. SPA like behavior with 1/10th effort.

progforlyfe 6y ago

This is giving me some serious HyperCard/HyperTalk vibes from the late 80s/early 90s on Macintosh computers! Perhaps that is why the name has "hyper" in it? _hyperscript: <button _="on click fetch /clickedMessage/ then put the result into #fetch-target-3"> HyperTalk (https://en.wikipedia.org/wiki/HyperTalk https://en.wikipedia.org/wiki/HyperTalk): put the value of card field "typehere" into theValue

recursivedoubts 6y ago
Yep, I programmed in HyperCard/HyperTalk a long time ago and when i was thinking about how I needed a language with native event handling I remembered HyperTalk. :)

v8dev123 6y ago

This won't scale. It will be like AppleScript for Web :)

danfritz 6y ago

As a developer with dyslexia I hope this never becomes popular as I would be out of a job. Kuddos to the author looks cool but personally I wouldn't be able to make a single thing work.

twsted 6y ago

Tangential, the best web tech (in my opinion) I am considering at the moment (in this order): - Svelte - htmlx - lit-html and perhaps also lit-element

oblib 6y ago

Wow! This is just sweet! I love the natural language approach and simplicity. I'm definitely going to block off some time to play with this.

frabjoused 6y ago

It seems like this library was built to address the edge cases the author is familiar with, and for the more complicated actions it starts leaning closer towards a traditional language. For example, the debounce function referenced in the JS comparison isn't even a properly implemented debounce, which means his built-in language function for debounce is incorrect. I've had to build or use a debounce function maybe 10 times in 12 years personally.

recursivedoubts 6y ago
Would you mind opening an issue on how the debounce is incorrect? I'd like to fix it if possible.

cardanome 6y ago

I love it. I am totally fond of the locality of behavior approach. Not many frontend tools do fit into the traditional niche of JQuery were you want a static site with some quick and easy way to add some interactivity. Now I do share the concern that it might not be the best approach for really complex stateful applications but we will have to see how it scales once we see the first real world uses of it. It is good to know that the is always the escape of hatch of simply using plain vanilla js. Sure it wont replace React/Svelte/Elm level of use cases but I guess that is not the goal. Also really dig the fresh take on a human friendly syntax. Sure there are pitfalls with that but hey for this kind of DSL it might work out. Nice to see people trying out non mainstream approaches.

sequoia 6y ago

I like the locality of behavior concept and am interested in learning more about hyperscript. This VanillaJS example is just plain silly. I've never seen anyone set styles and call requestAnimationFrame & do all that in an inline onClick handler. I mean html elements have a `style` attribute, why would you set `transition` in a click handler? The vanilla example should look more like the jQuery one, with the the code apart from the markup & referencing the element by id or class, attaching a handler with addEventListener. Your will still compare favorably, and this a slightly less "intentionally ugly" way to write the code.

thomas-guettler 6y ago

Hyperscript is great. Just like the real revolutionary htmx.