For versatile GUIs written in HTML/CSS with node.js

For versatile GUIs written in HTML/CSS with node.js

For versatile GUIs written in HTML/CSS with node.js (no front-end JavaScript needed) - The lightweight and easy-to-use toolkit to begin with GUI programming.

Node.js version of the Atlas toolkit

The Atlas toolkit is available for:

Language GitHub repository Online démonstrations Stars
Java https://github.com/epeios-q37/atlas-java https://q37.info/s/3vwk3h3n Stars
Node.js https://github.com/epeios-q37/atlas-node https://q37.info/s/st7gccd4 Stars
Perl https://github.com/epeios-q37/atlas-perl https://q37.info/s/h3h34zgq Stars
Python https://github.com/epeios-q37/atlas-python https://q37.info/s/vwpsw73v Stars
Ruby https://github.com/epeios-q37/atlas-ruby https://q37.info/s/9thdtmjg Stars

Note for Repl.it users (online demonstrations): after the first demonstration, you may have to click the reload button top left in the frame containing the QR code to display it for the other demonstrations.

Straight to the point: the Hello, World! program

Source code

const atlas = require( 'atlastk' );

const body = `
<div style="display: table; margin: 50px auto auto auto;">
 <fieldset>
  <input id="input" maxlength="20" placeholder="Enter a name here" type="text"
         data-xdh-onevent="Submit" value="World"/>
  <div style="display: flex; justify-content: space-around; margin: 5px auto auto auto;">
   <button data-xdh-onevent="Submit">Submit</button>
   <button data-xdh-onevent="Clear">Clear</button>
  </div>
 </fieldset>
</div>
`;

const callbacks = {
    "": (dom, id) => dom.inner("", body,
        () => dom.focus("input")),
    "Submit": (dom, id) => dom.getContent("input",
        (name) => dom.alert("Hello, " + name + "!",
            () => dom.focus("input"))),
    "Clear": (dom, id) => dom.confirm("Are you sure ?",
        (answer) => { if (answer) dom.setContent("input", ""); dom.focus("input"); })
};

atlas.launch(() => new atlas.DOM(), callbacks);

Result

Little demonstration

Too good to be true? Try it now - it's quick and easy!

Online, with nothing to install

Thanks to Replit, an online IDE, you can write and run programs using the Atlas toolkit directly in your web browser, without having to install Node.js on your computer.

To see some examples, like the following TodoMVC application or the above Hello, World! program, simply:

  • go here (also accessible with the Run on Repl.it badge on the top of this page),
  • click on the green run button,
  • select the demonstration you want to see,
  • click (or scan with your smartphone) the then displayed QR code,
  • … and, as you wish, run your own tests directly in your web browser, by modifying the code of the examples or by writing your own code.

TodoMVC

With Node.js on your computer
git clone https://github.com/epeios-q37/atlas-node
cd atlas-node
npm install
cd examples
node Hello/main.js

Your turn

If you want to take your code to the next level, from CLI to GUI, then you found the right toolkit.

With the Atlas toolkit, you transform your programs in modern web applications (SPA), but without the usual hassles:

  • no front-end JavaScript to write; only HTML(/CSS) and Node.js,
  • no front and back end architecture to bother with,
  • no web server (Apache, _Nginx_…) to install,
  • no need to deploy your application on a remote server,
  • no incoming port to open on your internet box or routeur.

The Atlas toolkit is written in pure Node.js, with no native code and no dependencies, allowing the Atlas toolkit to be used on all environments where Node.js is available.

And, icing on the cake, simply by running them on a local computer with a simple internet connexion, applications using the Atlas toolkit will be accessible from the entire internet on laptops, smartphones, tablets…

Content of the repository

The atlastk directory contains the JavaScript source code for Node.js of the Atlas toolkit, which is not needed to run the examples.

The node_modules directory (not provided by the repository, but will be created when launching npm install) contains the files that are needed in order to use the Atlas toolkit.

The examples directory contains some examples.

To launch an example (from within the repository):

  • launch npm install (this have only to be do once),
  • cd examples,
  • launch node <Name>/main.js,

where <Name> is the name of the example (15-puzzle, Blank, Chatroom…). For example node Hello/main.js.

Download Details:

Author: epeios-q37

Demo: http://atlastk.org/

Source Code: https://github.com/epeios-q37/atlas-node

node nodejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Node canvas is a Cairo backed Canvas implementation for NodeJS.

node-canvas is a Cairo-backed Canvas implementation for Node.js.

What Is Nodejs Used For? | Nodejs Use Cases

A decade has passed since initial release of the node.js, it has gained immense popularity. Read in this article, what is nodejs used for? Nodejs Use Cases.

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Hire NodeJs Developer

Looking to build dynamic, extensively featured, and full-fledged web applications? **[Hire NodeJs Developer](https://hourlydeveloper.io/hire-dedicated-node-js-developer/ "Hire NodeJs Developer")** to create a real-time, faster, and scalable...

Decoding Nodejs

The main goal of this blog is to explain the “Architecture of Nodejs” and to know how the Nodejs works behind the scenes. Generally, most of the server-side languages, like PHP, ASP.NET, Ruby, and including Nodejs follows multi-threaded architecture. That means for each client-side request initiates a new thread or even a new process.