DEV Community

Are there modern JavaScript frameworks without NodeJS dependency?

MikeVV on February 11, 2022

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 🙂

Collapse
 
balakine profile image
balakine • 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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mikevv profile image
MikeVV

Interesting idea. For sure will check this set 🙂

Collapse
 
balakine profile image
balakine

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

Thread Thread
 
mikevv profile image
MikeVV

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

Thread Thread
 
balakine profile image
balakine

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.

Collapse
 
abbasc52 profile image
Abbas Cyclewala • 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...

Collapse
 
mikevv profile image
MikeVV • 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?

Collapse
 
abbasc52 profile image
Abbas Cyclewala • 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

Thread Thread
 
mikevv profile image
MikeVV

cool service 👍

Collapse
 
tythos profile image
Brian Kirkpatrick • 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)
Collapse
 
johngalt profile image
John Galt • 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.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

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 🤷🏻‍♀️

Collapse
 
mikevv profile image
MikeVV

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.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

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.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

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

Collapse
 
fyodorio profile image
Fyodor

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.

Collapse
 
curiousdev profile image
CuriousDev

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.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

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.

Collapse
 
mikevv profile image
MikeVV

My idea is to not to have dependency to node/npm at any stage.
From comments is see good options with:

  • Vue
  • AngularJS
  • lit (if it possible to use it via unpkg)
  • and svelte (also via unpkg)

Looks like now I need to check above 4 frameworks more closely.

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

@mikevv Don't use AngularJS - it's kinda deprecated. As I mentioned React works out of the box in the browser.

Thread Thread
 
mikevv profile image
MikeVV

Thank you, will take a closer look to React in browser 🙂

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

React.js

Collapse
 
gevera profile image
Denis Donici

kit.svelte.dev/

This is what you are looking for