Concept and motivation

Engine

pantra engine specialities:
  1. This is a framework to make Web applications.

  2. Less JavaScript, more Python.

  3. Server-side engine generates and update Web page, client-side just renders and collect user events.

  4. DOM tree of elements is generated on server and then translated to client browser, like remote video game.

  5. Everything is a component. Component is a solid chunk of logic, included in one file:

    • HTML code (using components by choice)

    • styles

    • client-side code

    • server-side code

  6. Single page application. Look-and-feel comparable to regular desktop app.

  7. Multi-tenancy in everything.

    • multiple apps in one

    • multiple users

    • multiple databases

    • multiple locales and languages

    • multiple component packs (to be done)

  8. Support for simple deployment and for complex scaling in compute clouds.

Components

Component definition. Read more.

  1. Component is a template.

  2. Component is a custom HTML tag.

  3. Component is an isolated context with it’s own state and logic.

  4. Component is a class entity for programmers.

  5. Component has unique name and represent a single file.

Action flowchart

pantra represents action-driven logic, which means user interacts with WebUI, triggers events, which send actions initiating backend workers. Workers change state and DOM (dynamic object model) to be delivered to the user’s browser.

digraph "Action Flowchart" { layout=circo; size="4,4"; node [shape=circle]; User [style=filled, fillcolor=lightgreen]; Action, Thread, DOM [style=filled, fillcolor=lightblue]; WebUI, Event, Content [style=filled, fillcolor=lightyellow]; User -> WebUI [label="click"]; WebUI -> Event [label="on:click"]; Event -> Action [label="transmit"]; Action-> Thread [label="Python script"]; Thread -> DOM [label="update"]; DOM -> Content [label="receive"]; Content -> User [label="present"]; }

Data flowchart

The backend consist of two parts:

  • Web backend - lightweight workers to process many connections as single entrypoint. It maintains web socket connections, gets packet action and send to the “compute backend” via message queue.

  • Compute backend - heavyweight data processor scaled to a cloud. It unpacks received data from the message queue and generates RPC-like request to be called in CPU thread. Then collects DOM changes after call, packs and send back to “web backend”.

  • Web backend gets back packed DOM changes and send to JavaScript engine in user’s browser.

digraph "Data Flowchart" { size="5,5"; JSEngine [label="JavaScript Engine", style=filled, fillcolor=lightyellow]; HTTP [label="Async HTTP Server", style=filled, fillcolor=palegreen]; WebSocket [label="Async Web Socket", style=filled, fillcolor=palegreen]; MQ [label="Async Message Queue", style=filled, fillcolor=plum]; TE [label="Thread Engine", style=filled, fillcolor=lightblue]; AsyncThread [label="Async Thread", style=filled, fillcolor=lightblue]; Thread1 [label="Thread 1", style=filled, fillcolor=lightblue]; Thread2 [label="Thread 2", style=filled, fillcolor=lightblue]; ThreadN [label="Thread N", style=filled, fillcolor=lightblue]; subgraph cluster_0 { label="Web Backend"; labeljust="l"; style=filled; color=black; fillcolor=whitesmoke; HTTP; WebSocket; } subgraph cluster_1 { label="Compute Backend"; labeljust="l"; style=filled; color=black; fillcolor=whitesmoke; TE; AsyncThread; Thread1; Thread2; ThreadN; } JSEngine -> HTTP [dir=both]; HTTP -> WebSocket [dir=both]; WebSocket -> MQ [dir=both]; MQ -> TE [dir=both]; TE -> AsyncThread [dir=both]; TE -> Thread1 [dir=both]; TE -> Thread2 [dir=both]; TE -> ThreadN [dir=both]; }