MikeVV

Posted on Feb 11, 2022

Are there modern JavaScript frameworks without NodeJS dependency?

#javascript #webdev #programming #question

Some time ago I have checked in the Internet JavaScript frameworks for my pet project and found out that there is no frameworks what can work purely on client side (in browser) and have no dependency to NodeJS.

If you know any framework that is commonly used (more or less) and is not require NodeJS please let me know in comments 🙂

Top comments (23)

balakine • Jan 27 '23 • Edited

preact + htm + wouter
It will look like this:
htm-demo-preact.glitch.me/

<!DOCTYPE html>
<html lang="en">
  <title>htm Demo</title>
  <script type="module">
    import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js';

    class App extends Component {
      addTodo() {
        const { todos = [] } = this.state;
        this.setState({ todos: todos.concat(`Item ${todos.length}`) });
      }
      render({ page }, { todos = [] }) {
        return html`
          <div class="app">
            <${Header} name="ToDo's (${page})" />
            <ul>
              ${todos.map(todo => html`
                <li key=${todo}>${todo}</li>
              `)}
            </ul>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
            <${Footer}>footer content here<//>
          </div>
        `;
      }
    }

    const Header = ({ name }) => html`<h1>${name} List</h1>`

    const Footer = props => html`<footer ...${props} />`

    render(html`<${App} page="All" />`, document.body);
  </script>
</html>

MikeVV • Jan 31 '23

Interesting idea. For sure will check this set 🙂

balakine • Feb 1 '23

To give an example with wouter
codepen.io/balakine/pen/eYjQOxw

MikeVV • Feb 1 '23

Thank you 🙂
PS: looks like "Page with state" does not keep the state in safari

balakine • Feb 1 '23

Unlike React Router, wouter doesn't support state. There are some discussions, but nothing is decided yet. To keep the state it needs to be lifted into context.

Abbas Cyclewala • Feb 13 '22 • Edited

Most frameworks require build process which involves using node.js.
If you are looking for buildless framework, check out lit.dev
It is a library to build web components and can directly run in browser without any build or nodejs dependency.
More details on going buildless - modern-web.dev/guides/going-buildl...

MikeVV • Feb 14 '22 • Edited

Hi Abbas

I have checked this lit.dev and from one hand it looks promising, but from other hand I did not found there any other way to setup lit besides "npm i lit".

Is there a way to install "lit" without node?

Abbas Cyclewala • Feb 15 '22 • Edited

You can use unpkg.com/ . It can help you load any npm package as you need from cdn.
Working example on plunker - https://plnkr.co/edit/mjP8w2ZaZ39AShL8?open=lib%2Fscript.js&preview

Note: this will only work on modern(non IE) browsers

MikeVV • Feb 15 '22

cool service 👍

Brian Kirkpatrick • Feb 12 '22 • Edited

I would strongly recommend RequireJS.

requirejs.org/

It's less of a framework, and more of an asynchronous module loader, but what that gives you is:

A schema within which you can define, load, and reuse self-contained modules w/o all the NPM fluff and packaging
A browser-native module loader that makes it easy to re-use other packages (even NPM builds) by wrapping them in a define() closure
A very nice way to structure and organize your JS projects in a Python-like mapping of modules-are-files logic

Oooh! Almost forgot:

You also get loader extensions for defining manual (and asynchronous) loading logic for "special" resources that aren't pure JS, like JSX (or even ZIP, CSV, and others)

John Galt • Mar 9 '23 • Edited

I use pure vue.js 3 without nodejs and I am not related even on building process with nodejs. I can create vue component in vannile js and use import. I am happy. I hope that help. I'm wonder that nobody mention that.

JoelBonetR 🥇 • Feb 13 '22

The question is... When?
I mean, you'll end up using Node in your local machine for several things, but this does not mean that you need Node to run the output from the bundler.
If you build a project with, let's say Parcel, you can run the dist/ in client directly as long as you don't add backend dependencies deliberately 🤷🏻‍♀️

MikeVV • Feb 14 '22

I would like to create a web application without using node/npm at any stage, not on my local machine, nor on the server running my app.

Something with backend written in backend specific language, and frontend with JS.
Also I understand that it is not a good idea to create something with plan JS as I this case I need to create anything from scratch and by myself solve all compatibility issues that may happen and I would like to create my app with some framework instead, but looks like all of them require node/npm at some point.

JoelBonetR 🥇 • Feb 16 '22

Mostly they do, this is because you'll end up using a package for doing something and this package will also be used in any framework to reach the same. So you don't "reinvent the wheel".
A question would be Do you really need to avoid Node/npm? or it's just stubborness?

You can of course, reduce the frontend to html + css in the major part and just adding JS when needed. This way you don't really need npm or Node, but even that, it would be recommended to "bundle" your code through it (using webpack, parcel, rollup or whatever bundler of your choice) so your "output" or "dist" will be minified, optimised, ofuscated (sometimes) and so on.

Mike Talbot ⭐ • Feb 11 '22

React, Vue, Angular? React can run (and compile) solely in the browser for sure.

Fyodor • Feb 12 '22

It’s not really possible with Angular, only with AngularJS. But I agree that many other modern habitual frameworks provide for building apps without node.

CuriousDev • Feb 11 '22

I also wanted to put here Vue and also thought this should be possible with others, like React.
It is possible, that the author refers to something like a CLI, which could use Node to set up a project.

Mike Talbot ⭐ • Feb 11 '22

Agreed, but that is certainly not necessary for React. You can just get going in the browser - if you want JSX then you need to get the in browser transpiler, but plain old React is fine without it and that doesn't require Node - it's an "in browser" babel thing.