Welcome to the Atlas toolkit web site

What is the Atlas toolkit?

The Atlas toolkit is for writing graphical user interfaces for web applications. It's a set of C++ written libraries, for the best performances, with bindings for Java, Node.js and PHP. And, even better, you can also write desktop user interfaces with it.

With the Atlas toolkit, frontends can be developed without writing a single line of JavaScript (except, of course, when using Node.js). So, even if you don't know JavaScript, you can become a full-stack developer. And for JavaScript developers, they can now develop both backends and frontends only with Node.js, without the need of a JavaScript framework, or other type of web frameworks, as the Atlas toolkit is not yet another of those frameworks.

You may also be interested by the fact that the Atlas toolkit uses Electron for the desktop interface. Hence, by using the Atlas toolkit, you can develop for Electron without JavaScript.

Works are in progress for the toolkit to be available for other languages, and also to handle mobile interfaces. If you wish to discuss about those perspectives, you are welcome to do so in this forum.

How does it look like?

Hello World!

Here's a basic example, and the corresponding source code for the different available languages.

If the second box does not look like the first one, please click here. If this does not solve the issue, please see this FAQ entry.

Hello World! preview  Try it ! ➜  

Java source code

import info.q37.atlas.*;

class Hello extends Atlas {
  public void handle(DOM dom, String action, String id)
  {
    switch( action ) {
    case "Connect":
      dom.setLayout("", new Tree(), "Main.xsl");
      break;
    case "Typing":
      dom.setContent("name", dom.getContent(id));
      break;
    case "Clear":
      if ( dom.confirm("Are you sure ?") )
        dom.setContents(new String[][] {{"input", ""}, {"name", ""}});
      break;
    }
  }

  public static void main(String[] args) throws Exception
  {
    launch("Connect");

    for (;;) new Hello();
  }
}

JavaScript source code for Node.js

const atlas = require('atlastk');

atlas.register({
  "Connect": (dom, id) => dom.setLayout("", new atlas.Tree(), "Main.xsl"),
  "Typing": (dom, id) => dom.getContent(id, (name) => dom.setContent("name", name)),
  "Clear": (dom, id) => dom.confirm("Are you sure ?", (answer) =>
    { if (answer) dom.setContents({"input": "", "name": ""}); }),
 });

atlas.launch(() => new atlas.DOM(), "Connect");

PHP source code

<?php
require("Atlas.php");

Atlas::launch("Connect");

$dom = new AtlasDOM();

while ( true ) {
  switch( $dom->getAction($id) ) {
  case "Connect":
    $dom->setLayout("", new AtlasTree(), "Main.xsl");
    break;
  case "Typing":
    $dom->setContent("name", $dom->getContent($id));
    break;
  case "Clear":
    if ( $dom->confirm("Are you sure?") )
      $dom->setContents(["input" => "", "name" => ""]);
    break;
  }
}
?>

XSL file

This is the content of the Main.xsl file, which name is given as parameter to the setLayout(...) method of the DOM object in above source codes.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="UTF-8"/>
  <xsl:template match="/">
    <label>Name:</label>
    <input id="input" maxlength="20" placeholder="Enter a name here" type="text" data-xdh-onevent="input|Typing"/>
    <button data-xdh-onevent="Clear">Clear</button>
    <hr/>
    <h1>
      <span>Hello </span>
      <span style="font-style: italic;" id="name"/>
      <span>!</span>
    </h1>
  </xsl:template>
</xsl:stylesheet>

TodoMVC

As an example, the application from the TodoMVC project has been developed using the Atlas toolkit. This is what it looks like:

The source code is available at following addresses:

Other online demonstration

There is another online demonstration at http://atlastk.org:8080, which source code is available at this addresses:

How does it work?

The toolkit relies on well established technologies:

On the launching of the application, or to update broad parts of the interface, the content is generated using XSL(T); this is very similar to a CGI application. Otherwise, only the needed part of the DOM is updated, like a single-page application. With the Atlas toolkit, you have the best of both world.

Unlike the usual frameworks used to develop web interfaces, you don't have to use JavaScript (except, of course, for Node.js), or one of its variant, to manipulate the interface, nor will the code you write be transpiled, or handled by a template processor.

Other processing engine could be used, but, with XSLT, the processing occurs client-side by default, as XSLT is implemented in all graphical web browser, but can, if needed, occurring server-side.

Behind the Atlas toolkit

The lead developer behind the Atlas toolkit is Claude SIMON, a freelance software engineer who lives near Strasbourg, in France.

He developed C++ libraries to handle desktop user interfaces using XULRunner. As XULRunner were discontinued, he switched to the newly standardized HTML5, along with the Chromium Embedded Framework. The libraries were then improved to also handle web user interfaces. Finally, Electron replaced the Chromium Embedded Framework.

As most of the popular languages are interpreted ones, he also specialized in improving the performances of this languages, by developing binding libraries simplifying the use of the more efficient C++ native code with this languages.

The Atlas toolkit is the result of the combination of this binding libraries, and the libraries handling user interfaces.

License

The Atlas toolkit is free software, released under the GNU AGPL. If this license doesn't meet your needs, feel free to ask about another one on the contact page.