Introducing, isymtope

Web Application Script Language

• One syntax for client and server

• Built-in Server Side Rendering, no complicated hacks, and no Node.js required.

• Test mode allows you to compile instantly, using a server-side VM implementation.

• Native compilation mode will create static executables, which acts as a Web server and manages cached page source automatically.

• Powered by Rust - the memory safe language created by Mozilla and the Rust team.

Rehydrate with no Flash of Unstyled Content

When the page is rendered on the server, it is linked to the generated views by way of unique keys on each element. This allows the client-side code to continue where the server left off, and does not require rerendering the page on the client side, or removing and adding any elements.

You can even serve a completly static site and enhance it with additional interactivity, all from the same template language.

Javascript is optional, we serve a real HTML page

There is no Javascript required for viewing the pages built with isymtope. Not only are real pages delivered to the user, we can even support dispatching actions view old-fashioned form POST.

Redux-ified

• Define variables using let that will be automatically converted into Reducers.

• Define actions for those reducers in one of three syntaxes:

  • Method pipeline syntax

    Looks like a combination of Javascript and Rust, features a subset Rust's powerful collection of iterators.

  • Filter pipeline syntax

    Uses a combination of SQL-inspired and Unix-pipeline semantics. Supports updating streaming data, reducing to a unique stream based on an id, and other tasks commonly associated with Functional Reactive Programming on the web.

  • Expression syntax

    Along with the other two, this syntax allows for simple updates to state values, as well as merging objects.

Specify your stores and action right in the template, we will generate the Javascript for you, automatically.

Default values are also rendered into the page on the server, and support for replaying actions on the server is coming.

Build API's alongside your application

Define your API's in our template language or import definitions from grpc.io, protobuf, swagger and more. We will generate Redux reducers and actions for each API call, both REST and RPC.

You can also define APIs for your database bindings using diesel.rs.

Call the same API's from client and server, with the same action dispatch syntax and asynhronous semantics.

Built with Rust

There is no javascript code running on the server, and Node.js is not required.

Modular

isymtope is designed to be modular and can target different frameworks for rendering and dispatching actions. It can also be used to generate different output formats, such as targeting Web Assembly, or even as a static site generated.

In the future, other scripting and template formats may be supported, and will target the same backend code generation.

We also intend to support different Rust web servers and frameworks.

Demos

To see isymtope in action, scroll the following demos as well the (TodoMVC)[#TodoMVC] demo below which will open in a new tab.

We are working on an interactive playground, as well as CLI tools for launching the isymtope compiler.

A nearly-functional TodoMVC implementation is quite straight forward, thanks to our method pipeline syntax. As new SQL-inspired pipeline syntax is also coming which will make data manipulation in reducers even simpler.

Features will be added to this demo to match the standard implementation as they are added to the isymtope language and compiler.

use html;

store {
    let todos = [{text: "One", complete: false, id: 0}, {text: "Two", complete: true, id: 1}];
    let entry = "";

    todos {
        action add(entry) => state + (entry + {complete: false, id: (value.map(item.id).max(x) + 1)});
        action toggle_complete(id) => state | set complete = (!item.complete) where (item.id == id) |unique id;
    }

    entry {
        action clear => "";
    }
}

component todo_item (todo) {
    li (class={completed: todo.complete}) {
        div (class="view") {
            input(class="toggle", type="checkbox") bind todo.complete as complete
                change || { dispatch toggle_complete(id: todo.id); } {}
            label { (todo.text) }
            button(class="destroy") {}
        }
     }
}

component new_todo (entry) {
    input(class="new-todo", placeholder="What needs to be done?", autofocus="autofocus") bind entry
        enterkey || { dispatch add(entry: {text: entry}); } {}
}

link(rel="stylesheet", href="https://unpkg.com/todomvc-common@1.0.3/base.css", type="text/css") {}
link(rel="stylesheet", href="https://unpkg.com/todomvc-app-css@2.1.0/index.css", type="text/css") {}

section(class="todoapp") {
    header(class="header") {
        h1() { ("todos") }
        new_todo(get entry) {}
    }

    section(class="main") {
        input(class="toggle-all", id="toggle-all", type="checkbox") {}
        label(class="", for="toggle-all") { ("Mark all as complete") }
        ul(id="todo-list", class="todo-list") {
            todo_item (for todo in todos) {}
        }
    }
}

Open TodoMVC demo in new tab.

Getting the code

You will need to clone this repository to get the source, it hasn't been submitted to crates.io yet.

The API to be exposed from isymtope as a library has not be determined, through it should be possible to integrate into an application.

git clone https://github.com/tmzt/isymtope
cd isymtope

cargo build
cargo test

Currently the examples are run as cargo tests.

Running the examples

You will need to install Rust if you haven't already.

curl https://sh.rustup.rs -sSf | sh

You may need to logout of your session and log back in for the cargo command to be in your path.

If you want to build the examples yourself, you can run:

cargo build
cargo test

Then you will find the html pages with the demos in the site/src/assets/demo folder of your checked out repository.

You can rebuild the docs with cobalt build from the root of the repository, and browse them from docs/index.html.