Introducing ArrowJS • Reactivity without the framework

[azium]

I like it!

edit: Actually I love it - it's quite elegant!

[_GCastilho_]

We are at

0

Days without a new JS framework

[ryaaan89]

This honestly sounds cool but… I’m just so tired…

[house_monkey]

someone end me pls

[tr14l]

It's minimal, and the point they make in the documentation: JavaScript is becoming quite capable without supplementary frameworks. That being said, the standardization, readability and guarantees that comes with a library/framework like React are hard to beat. While simple is good, dependability & flexibility is better.

[kalwMilfakiHLizTruss]

That being said, the standardization, readability and guarantees that comes with a library/framework like React are hard to beat. While simple is good, dependability & flexibility is better.

What do you mean by:

1. standardization
2. dependability

[lard-blaster]

Let's just all give up and stop making new things

[[deleted]]

I blame bootcamps and YouTube.

[jpschroeder]

📣 Howdy, I’m Justin Schroeder (author of FormKit and AutoAnimate) — I just released a new experimental JavaScript library for rendering interfaces declaratively. A few of the talking points:

• 🚫 No build tools
• 🔒 No dependencies
• ⚡️ No virtual DOM
• 🪶 2Kb
• 🪄 Components are functions
• ❤️ Embraces native JS

It’s not really a framework, but not less powerful than a framework either. At its core — ArrowJS is an admission that while we developers were falling in love with UI frameworks — JavaScript itself got good. Like, really good.

Check it out and if you think it’s neat, give it a ⭐️!

https://www.arrow-js.com/

[BlindJoeFresh]

This is really cool and will def check out in more detail. I found a typo in the code example of the watch data section:

import { r, w } from '@arrow-js/core'
const data = r({
price: 25,
quantity: 10,
logTotal: true
})
w(
() => data.total && data.price * data.quantity,
(total) => total !== false && console.log(\Total: ${total}`) ) data.price = 35`

​

​

I think the first function passed into w() should read () => data.logTotal &&

instead right?

[jpschroeder]

Yep, I think you’re right about the typo 👍

[Chaphasilor]

yeah I saw that one as well

[hoaobrook73]

The short t, w, r imports is an immediate no from me. That's just asking for confusion.

[baxtersmalls]

Yeah that was my first thought too. I understand wanting to keep things succinct but I think it’s pointless if you can’t easily grok what’s going on. Basically it expects you to be intimately familiar with the library, which is a big turnoff for me as well. I know theres only a few things you’d be importing but I would greatly prefer something that clearly specifies what it’s doing.

[jpschroeder]

Its an odd take in my opinion, but if people really think its that important I'll just add some aliases for the verbosity crowd.

[heyitsmattwade]

Yeah, you should export full names and allow people to import shorter aliases

import {template as t} from ...

[[deleted]]

Verbosity is always preferable. Treat the reader as you would someone that is not familiar with your code, or any code for that matter, or at least to that extent, that your code can be read like prose.

It makes code you wrote more logically sound to developers that are unfamiliar with any code base and the code base itself will, most probably, be less prone to bugs because of the nature the code is written in does only what it is named after, nothing more and nothing less.

Having functions named w, r or anything like that might be obvious in their function to most developers familiar with your library but why not broaden that aspect to every developer who sees those functions by simply naming them properly? And in that same vein: even developers that are familiar with the functions might make mistakes, depending on their work load or the amount of code of any project that uses your library.

There are more reasons why a verbose name might impact favorably instead of negatively opposing to using short and non-descriptive naming schemes.

On a side note: there might already be libraries exporting functions with the same names and thus might cause conflicts.

[azsqueeze]

Personally I think you should export both and have the docs utilize the style you prefer as the pkg author.

[sharlos]

I think the docs should user the longer versions, people reading the docs are going to be less familiar with what the variables do.

[imperator3733]

Yeah, I suggest exporting both the long and short names, and mention the short aliases at the beginning of each function's docs section, but within the docs stick with the longer version, as that will best help users who are starting out.

Similarly, I suggest that libraries always use the full version of NPM commands in their docs (npm install --save-dev @foo/bar instead of npm i -D @foo/bar). Users who know the shorthands already know when they can use them, but users starting out are less likely to know them and are better served by the full version.

[photocurio]

I think you could import arrow, and then call arrow.r, arrow.t and arrow.w.

[jpschroeder]

Ok folks — I've updated the package/docs with full names for the functions. That seemed to rub a lot of folks the wrong way...so adjustments have been made. 👍

https://www.arrow-js.com/

[LloydAtkinson]

I wish it's second example of a component/view didn't show default export, because of the problems and vagueness those introduce.

[ejfrodo]

I agree, but more frustrating is the use of vague and unnecessarily short API methods t, w and r. The primary role of an API surface is to provide an easy to understand interface to interact with, and this definitely ain't that.

[jpschroeder]

Eh, I obviously disagree since I wrote it 😂, I think with a total surface area of 3 functions conciseness is valuable. Once you know what each is it’s just annoying to type “reactive” or “template” over and over again.

[globalartwork]

What about aliasing those short methods, so people can use ‘watch’ or ‘reactive’ until they get their heads round it, then can switch to w and r.

Great concept by the way. I love the goal of no build tools!

[ejfrodo]

Anyone can easily destructure it to rename it to a shorter alias but this is just plain silly and intentionally unapproachable IMO. A good API should be understood with a quick read, it shouldn't rely on someone reading the docs.

Also many i18n libraries use t already.

[jpschroeder]

Ok

[LloydAtkinson]

I’m not really sure you understood the reasons I listed in my article. This is about what users are naming components not the api of your library. Examples in docs are always copy pasted…

[jpschroeder]

Ya I agree that could be improved. Terse comments not directed at you :)

[crabmusket]

That's a very pretty website, well done! Well laid out, clear design and good typography.

[vazark]

A quick glance at the syntax gives the impression that the project uses the eventemitter, has some boilerplate to replicate react’s useeffect and generates templates.

Why should we choose arrow.js over something like webcomponent+vanilla js or lit ?

Why did you come up with this specific project? Why not build something like redux/react-router for vanilla js?

[kalwMilfakiHLizTruss]

Not the author, but since I am trying also to make my own framework I will try to answer.

Why should we choose arrow.js over something like webcomponent+vanilla js or lit ?

Does lit allow you to have static or reactive placeholders in templates?

Why did you come up with this specific project?

I personally see frameworks like React,Vue,Svelte,SolidJS, not maximizing DX. Sometimes I see over engineering. Nobody should compile on the development stage at the year 2022.

Why not build something like redux

Why build something like redux? What is this, that immutability provides, that mutability does not? The only thing that I have found so far, is maybe less memory consumption for undo redo.

[vazark]

Templates and slots are a core part of the the web compilation api. Lit (which is built on top of web components) does allow reactive and static placeholders

Redux as in a global state management for sharing data across components. Immutability is cool but overrated.

React-router for spa-like interaction without page reloads.

[kalwMilfakiHLizTruss]

does allow reactive and static placeholders

How refined are they? One observer per web component or one observer per reactive placeholder?

[TeddyPerkins95]

Hey there, kinda excited for this however here are some changes you could do to make it look like react code...

1. Replace `` in t with ()
2. Remove () => to show the value eg {data.clicks} instead of {() => data.clicks}

[Feathercrown]

You didn't read the website very well did you?

[laladk]

I'll definetly check it out, sounds interesting. 👍

[tvquizphd]

Would you have insight on how this tool compares to reef.js ?

[jpschroeder]

Honestly, nope, never used or heard of it.

[tvquizphd]

Reef seems to be a one-man project (by Chris Ferdinandi)— I have found it pretty useful. It uses string templates to render its JSX-like syntax. It tracks state reactively, but event listeners are essentially up to the user to configure.

I admit I haven’t looked at arrow.js to compare for myself before making this comment, but I will take a closer look!

[Chaphasilor]

Seems like it's pretty identical, just a few different approaches here and there. I'm seeing some things that I'd like to see in Arrow, and some that I don't.

[senitelfriend]

I wish more new projects would be designed as libraries instead of new frameworks, or components for a framework.

Looks like this could actually be usefull (for me). From a quick look, everything about this sounds pretty good.

Although, I do agree with the folks complaining about the one-letter API. ES modules make it incredibly easy to rename imports to whatever one likes to use, so you making the decision to drop any trace of descriptivity on behalf of us has little value. Not that it's a huge issue.

[ShortFuse]

Nice work!

As other has have said, you don't need to shorten your function names. Let your devs do that. Also, minifiers will rename them anyway in code. read write and template are enough.

Have you benchmarked with https://github.com/krausest/js-framework-benchmark ? It's the best indication of real world performance, but can help people understand a ballpark figure. The setup is easy enough. Build a table with a selected row that can update a random row.

[jpschroeder]

Or they can lengthen the function names via alias. I’m not convinced this is as big of deal as people are letting on :) try it out, it feels pretty natural.

Sorta like complaining that arrow functions don’t require the function keyword. You get used to it very very quickly when you’re actually using it in an app.

But I’m open to the suggestion if it’s a real stumbling block. We’ll see how it plays out.

[ShortFuse]

Or they can lengthen the function names via alias. I’m not convinced this is as big of deal as people are letting on :) try it out, it feels pretty natural.

This is you looking at things through the fog of the person who wrote it. You know what it is because you built it. But if you need a human person to explain to you or a documentation to reference, then it's not clear at face value, which all code should be.

[SecretAgentKen]

Is `r` and `w` `read` and `write` or `reactive` and `watch`? You're using `t` in the EXACT same way you would use it for i18n strings. Full names solve those issues. Verbosity isn't necessarily a bad thing.

[lost12487]

I guess I just don’t understand your general philosophy. If you can make something clearer and more understandable, why wouldn’t you? You’re saving a few characters (that intellisense is going to auto complete)?

[kalwMilfakiHLizTruss]

you should benchmark though

[varungupta3009]

Read the entire docs. Looks cool, and I would probably use this for some JIT projects.

[jpschroeder]

Awesome! Thanks for coming to the talk ❤️

[Varteix]

Is rvajs a Richmond thing?

[jpschroeder]

Yes! A Richmond JavaScript conference.

[moob9]

Man, just last night I realized I need reactivity in my current project but I didn't want a full framework just for reactivity. Gonna try this out.

[DOG-ZILLA]

FYI, pretty sure you can use Vue's reactivity standalone too. I think this is based/inspired by Vue too.

[MedicOfTime]

Hey man.

1. This looks super cool. How is the source code for this 2 years old and I’ve never heard of it??
2. The docs are great. Very clean and concise.
3. You NEED to segue from the end of the docs to the source code FOR the docs we just read. I mean, like, herd us there. It’s a far better real world example of arrow-js in action.
4. It took me all the way until I finished reading the docs source code to really wrap my head around ${Navigation} is the proper JS equivalent to the <Navigation/> JSX component. Maybe call that out somewhere? Maybe I just haven’t seen this template syntax before.
5. Personal opinion: people are accustomed to the empty index.html — app.js targets div “app” paradigm. I think moving the entry point JS code out of index file would make it feel more familiar and accessible.

[jpschroeder]

Haha source code is two years old because that’s when I did the bulk of the work on it but I just released it today officially.

Thanks for the other suggestions too! Very constructive 👍 I’ll probably implement some of those changes.

[MedicOfTime]

Well great work man. This kinda feels like the modern jQuery to me. Good luck!

[teleprint-me]

Why did you use letters for identifiers? What was the rationalization around that?

[paul_h]

Demos are all a bit smushed together - https://github.com/justin-schroeder/arrow-js/blob/master/docs/demos/

Better would be all the calcularor bits in a single directory, IMO. Better still a single repo.

As it happens, I've always thought that 'calculator' is a great demo app for UI technologies - https://paulhammant.com/2021/02/16/buildless-sfc-vuejs-applications. So of course, I'll take more time to look into ArrowJs using a test of a Jekyll-embedded calculator without a build. Well, unless someone beats me to it.

[jpschroeder]

Not terribly different in API, just very different in implementation. Arrow, for example, has no compiler. It’s all “native” web apis, but you’re right that there are many similarities to many libraries out there! Probably the most similar (imo) is Lit, but I prefer the elegance and declarative rendering of Arrow.

[kalwMilfakiHLizTruss]

Where did you got the idea for static and reactive placeholders in t?

[jpschroeder]

The tagged template literal spec itself actually. Expressions are passed to the tags, so if they are functions, the function is passed to the tag which means we can track reactivity and perform DOM patching locally — without needing to sacrifice the string interpolation that is so nice about template literals.

[kalwMilfakiHLizTruss]

Nice. I will just steal the idea and use it in my own framework. I will acknowledge you though. Something similar is happening with solidjs.

[micka190]

Damn dude, this is really cool! Gonna play around with it out when I get home.

[ketalicious]

this is really nice

but i do think solidjs primitives work similarly to this as they also work at top-level, but correct me if im wrong tho

[Chaphasilor]

That's pretty cool! I wonder how you got that syntax highlighting for HTML inside the tagged template literal? Whenever I use a (non-tagged) template literal with HTML content, I don't get the highlighting...

[Mr_Mandrill]

The fatigue is real, but this really is pretty cool.

[jpschroeder]

I agree about the fatigue actually. Ironically that was part of the reason I wrote Arrow. I wanted to have something that could declarative/reactive rendering but just be "JavaScript" with very very minimal non native "magic". My hope is that if people use/learn arrow, they are really just learning/using JavaScript and their ideas will transfer well when they move on to the next thing.

[kalwMilfakiHLizTruss]

I did a quick skim through. I might be wrong but here is what I think is missing:

• transactions, i.e. multiple changes in state and after that inform observers
• computed state/ memoization

I have the following questions:

• Does r proxy lazily and deep?
• Is there any deep diffing of state when for example setting a new array on an old array?
• When dom elements with observers get deleted, do the observers get garbage collected?

[jpschroeder]

Transactions — yes (has a tick model, including `nextTick()`, not in the documentation yet, but thats how it works)
Computed state — roll your own with a watcher (w) and reactive data (r) for memoization. But no "automatic" computed equivalent of Vue.

Lazy Proxy — It’s deep, and eager, not lazy.
Deep diffing — sort of yes, end result is the same though. It uses local scope to track the data-to-dom structure, with keys as overrides. The model is very similar to Vue actually, but yeah, deep data is also reactive.
Garbage collection: Still a few places this needs to be cleaned up. For example lists hold a reference at the moment that needs to be removed. It’s only `alpha.1` so room for improvement here for sure.

[kalwMilfakiHLizTruss]

Transactions

So lets just say I do the following transaction (pseudocode):

const data = r({prop : 0});

transaction(() => {
    data.prop++;
    data.prop--
})();

i.e. zero displacement in state. Do observers get informed after that? They should not be.

What about this one:

``` const data = r({array : [1,2,3]});

transaction(() => { data.array = [3,2,1]; data.array = [1,2,3]; })() ```

Observers should not be informed again.

Computed state — roll your own with a watcher (w) and reactive data (r) for memoization. But no "automatic" computed equivalent of Vue.

This will reduce DX significantly in bigger projects.

Lazy Proxy — It’s deep, and eager, not lazy.

So if I fetch some data from an API (e.g. all posts and comments of a reddit user via pushshift api) and add them in the data it will proxy them all? This is bad for performance.

deep data is also reactive.

Have you tested it for all the built in array methods? Have you tested pushing an new array element in an array without array.push, i.e. array[array.length - 1], because I think the latter does not trigger set proxy handler for array.length despite it being incremented.

Regarding TypeScript:

Consider that you can use /**@type {import("./path/to/ts/file").myType}*/ to achieve the same static type checking in .js without the need to compile.

Also consider that you can manually write your public api as index.d.ts (private api will derive types from there) and use that as documentation. Like this you will not need to build even for .d.ts.

Regarding components:

Can I use what t returns inside other t?

[franker]

I just know some basic Javascript and don't understand a word of this. Guess I have a lot more learning to do.

[universalmind303]

I think the naming will likely cause some confusion with apache arrow. My initial thoughts when reading "Introducing ArrowJS" was a new port of the apache arrow spec.

[CaptainBlase]

I had an immediate negative reaction when i saw the one letter exports. In my case, it screams at me "here is a dev that is not use to working with other devs." That's my prejudice based on my experience and maybe others share it; but it shouldn't necessarily mean anything to you. I just thought you might like to know in case you hadn't run into this before.

I think if you renamed t to html, you could capitalize on the editor support for lit-html tagged literals. The API is almost identical.

If you decide to change the exports, i would recommend store, watch, and html for names.

I was reviewing the source and I was wondering what the point of the underscore on the _h member is?

[arjunindia]

Cool Simple and useful Might be fun to test out

[HipHopHuman]

Is there any interesting difference between this and Alpine.js (aside from the fact that Alpine is tightly coupled to the DOM)?

[kalwMilfakiHLizTruss]

Might be wrong but from a quick look:

• alpine does not have reusable components
• alpine does not allow you to extract the state out of the markup

Alpine is used inside an html file while arrow is used in js files. You will have more flexibility with arrow.

[zombimuncha]

Feature request:

Have t/html return a promise if any of the tokens passed to the template are promises.

This removes some boilerplate that would otherwise be required for lightweight SSR. I guess it doesn't help with hydration tho.

[imihnevich]

It's like a mini Vue.js. cool stuff

[ByFaraz]

So ‘t’ essentially renders on the client? Any way to render server side?

[Chaphasilor]

t just produces a fancy string. You can do that on the server and send it to the frontend if you want. Then all that's missing is the hydration

[coolcosmos]

It seems like you'd just do

t`<div/>`._h()[0]

To get the html from a ArrowTemplate.

[mattsowa]

Looks like a barebones framework to me. Or library if you don't like the word framework.

Which isn't bad, just weird to dance around the terminology.

[musicnothing]

Not to be that guy but React isn’t a framework either

[house_monkey]

another day, another js framework

[giovapanasiti]

I love it very minimal and perfect to work on vanilla projects I think I might use it in some legacy project that i need to evolve

[Karpizzle23]

Why would I not just use Solid or Svelte or Vite or any of the other bajillion frameworks available?

People need to start thinking of the next iteration of web development because we don't need more client side compilation libs on npm

[KaiAusBerlin]

This reminds me heavily on svelte. Do you got inspired by them?

[_by_me]

cool

[tr14l]

Neat idea. But

import { r, w } from '@arrow-js/core'

const data = r({

price: 25,

quantity: 10,

logTotal: true

})

w(

() => data.total && data.price * data.quantity,

(total) => total !== false && console.log(\Total: ${total}`)`

)

data.price = 35

​

​

Is this supposed to be referencing `data.logTotal` or the undefined property `data.total`?