DEV Community

Salma Alam-Naylor
Salma Alam-Naylor

Posted on • Originally published at whitep4nth3r.com

Should I write a new JavaScript framework?

Each week, around 300 blazing-fast, game-changing, full-stack JavaScript frameworks are released into the developer ecosystem. They promise the discerning developer radical new approaches, life-affirming developer experiences, zero-config, maximum-config, all-bells, no-whistles, and the dopamine high of falling in love — over and over and over again.

Do you want to be a hero?

Open source maintainers of the billions of JavaScript frameworks now available for public consumption are worshipped as heroes of a new era, as they lead us boldly into a new landscape of JavaScript — and beyond.

And you're probably asking yourself — "Should I write a new JavaScript framework?"

What's the answer?

The answer to this question is far beyond the scope of this post. Instead, I built a website. This website takes you on an inspiring journey through the essential concepts to consider when building your new JavaScript framework, and gives you the confidence to finally mkdir bestframework.js && cd bestframework.js && git init.

Start your journey here.

Top comments (37)

Collapse
 
hyrumwhite profile image
hyrumwhite

Counterpoint: yes.

Just dont expect it to take off. You'll learn a ton about what's going on under the hood of frameworks in general. And its fun.

Full disclosure: I'm currently writing a new JS framework.

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

Fair point BUT you can also gain that same knowledge by contributing to an already existing framework under the mentorship of established contributors and as part of a team 😃

Collapse
 
ninjin profile image
Jin

You will never learn how to do something really new if you just follow someone else.

Collapse
 
wadecodez profile image
Wade Zimmerman

Thank you for the inspiration. We need an alternative to React. Something that uses JSX but without hooks. Instead it should use ES6 classes. /s

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

🤣

Collapse
 
ninjin profile image
Jin

JSX is not the best solution, but if you really want it, I recommend trying $mol_jsx, which fixes most JSX problems:

✅ The component automatically tracks external states (not only inner state).
✅ Component parameters are updated without a parent re-render.
✅ Changing the callback does not result in a re-render.
✅ Our hook counterpart can be applied anywhere in the code, even in loops and conditions.
✅ For partial updates, you can create a component that accepts callback.
✅ Stateful components are fully controllable.

Collapse
 
uzair004 profile image
Muhammad Uzair

Classes don't have good class in JavaScript. 😁

Collapse
 
eshimischi profile image
eshimischi

What??

Collapse
 
drsensor profile image
૮༼⚆︿⚆༽つ

Answer: let company like vercel or netlify burn their VC funding 🤑

I'm currently writing one 😂

don't ask why 😃
It start from me trying to participate in a game jam. Only some UI libs fit the rules so I try to write it myself (along with other whacky_helper.js). Now I got immersed to it and this is the 3rd rewrite 😅. A quick summary: it's a library that combine Reactive Programming and Entity Component System.

In the past there is a gitter chat that discuss Reactive Programming in JS. The author of Solidjs is very active in there. I wonder if there a similar chatroom or new forem for this that still active 🤔

Collapse
 
oxharris profile image
Oxford Harrison

You might find the Reactive Contexts Proposal for JavaScript very interesting.
Over here: github.com/webqit/subscript.

I got on that work to explore the possibility of having reactivity as part of the JavaScript language. You'd realise that we've stretched JavaScript in all directions to speak "reactivity"! Speaking it natively should be all that makes sense now.

Collapse
 
drsensor profile image
૮༼⚆︿⚆༽つ

Thanks. I only skim the explainer and have 2 question.

  1. Why name it thread? Shouldn't that make it ambiguous with multi-threading 🤔
  2. Does async function inside subcript function will do automatic tracking? AFAIK in async effect, automatic tracking only happen before await syntax. All reactive variable will not get tracked after await syntax.

References:

Thread Thread
 
oxharris profile image
Oxford Harrison • Edited

Valid questions!

  1. In hind sight... thread() shouldn't be the best name for that function! I raised the first issue myself here: #5. Funny!

Thankfully, that should be only a name change! And it's entirely open to inputs, should you have something in mind! I once used the following reactive/react paradigms:

reactive function render() {
    // Function body
    console.log(externalVariable);
}
// Do first run
render();
Enter fullscreen mode Exit fullscreen mode
// Change externalVariable
externalVariable = newValue;
render.react( ['externalVariable'] );
Enter fullscreen mode Exit fullscreen mode

That is in hopes that react() sounds better, being that what it does is really to let the function react to its external dependencies!

  1. I might need more clarity on the particular question. But inside of Subscript Function is a great Automatic Dependency Tracking system - but this time - based on a compiler-generated Dependency Graph. (Here, calls to react() actually execute along the relationships in this Dependency Graph. And the chain of statements executed is called a dependency thread.)

Talking about async/await... Subscript functions could be async functions...

reactive async function render() {
    // Function body
    let result = await fetch(externalVariable).then(response => response.json());
    console.log(result);
}
// Do first run
render(); // Promise
Enter fullscreen mode Exit fullscreen mode
// Change externalVariable
externalVariable = newValue;
render.react( ['externalVariable'] ); // Promise
Enter fullscreen mode Exit fullscreen mode

Now, on the above update, the console.log() expression only executes after the await fetch() expression resolves - as it would normally!

Code inside Subscript Functions do not change runtime expectations.

Collapse
 
ninjin profile image
Jin

Another way without syntax changing: AutoWire Proposal.

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

Cheers for the helpful links!

Collapse
 
dodov profile image
Hristiyan Dodov

Haha, recently I had thoughts about this exact same thing as well and wrote about it. Doing so, I came across this. The presence of such websites really speaks about the severity of our problem…

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

Very nice article! You said much more than I did 😅

Collapse
 
sylwiavargas profile image
Sylwia Vargas

I expected to be rickrolled and instead, I got a piece of amazing advice instead.
Please feel free to invoice me for your consultancy work 😂

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

😂😂😂😂😂 Thank you for the best thing I’ve read all week 😂😂😂😂😂

Collapse
 
lexlohr profile image
Alex Lohr • Edited

I'm happy to say that I never finished or released the framework I once started to write, because while it would have gone in the same direction, it would never been as good as solid.js, which is now my favorite framework. I did help with the earlier versions of riot.js and wrote a few smaller libraries. In recent months, I wrote a few primitives for solid.js and one of them is already in production code and proven to work better than the alternatives (far smaller, faster, less bug-prone).

Still, I disagree with your sentiment. If you want a learning experience or an interesting hobby, by all means, write a framework or library. Just don't ever release it unless you can reliably prove that it does its job better than most others available on npmjs. And if it's not that good, don't feel bad about it. The best frameworks have grown over years and had the help of many very talented devs. You can't expect to best them so easily. Don't give up, you'll improve over time.

Collapse
 
hyrumwhite profile image
hyrumwhite

What's the harm in releasing it?

Collapse
 
lexlohr profile image
Alex Lohr

If it's not good, you're basically littering the package ecosystem with a bad package. You're responsible for all the problems arising from that.

Collapse
 
fridaycandours profile image
Friday candour

Nice

Collapse
 
andrewbaisden profile image
Andrew Baisden

If you can dethrone the big 3 one day go ahead 😄

Collapse
 
ninjin profile image
Jin

I've already started, join in!

Collapse
 
uzair004 profile image
Muhammad Uzair

Hell No, don't create new framework 😁, contribute to existing ones instead if you feel like you can make them better. Js community needs to settle on some standards.

Collapse
 
oxharris profile image
Oxford Harrison

I had wondered why our community would rather celebrate a framework monoculture than encourage making things standard. So, I decided to explore a path with the standards.

For reactivity, here's something I've been working on for a while now - the Reactive Context Proposal for JavaScript - github.com/webqit/subscript

Hoping that that's indeed exciting. 😃

Collapse
 
fazofazaal profile image
Hussain Fazaal

Yes Please 😁

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more