SàT progress note 2020-W21

goffi 6 months ago jabber-xmpp-en SàT project libre SàT progress

Hello everybody,

during the last few weeks, I've been focusing on Libervia (web): I've been working on the management of dynamism, or in other words the integration of JavaScript and browser side Python with the Libervia web framework.

If you're wondering what I mean by "browser side Python", let me explain briefly some history of Libervia: the former version of this web frontend was a single page application made with Pyjamas, a framework more a less similar to GWT but with Python instead of Java. The main reasons of this choice was to avoid constantly moving from 2 different programming platforms (Python and JavaScript), to factorise code with other frontends, and to avoid the JavaScript ecosystem which is constantly moving (resulting in lot of time spent in following the evolutions, learning new frameworks, rewriting code, etc.).

Pyjamas was made of 2 main parts: a Python to JavaScript transpiler, and a set of libraries to write a web site in a way similar to a desktop application. This was working reasonably well, and once past the initial big download, the application was working nicely. We could indeed factorise code with other frontends, and save time and maintenance efforts.

With time, we realised that hiding the abstraction of the web development to make it look like desktop was not so great: since the beginning of Libervia, the web ecosystem had improved greatly (HTML 5 and CSS things like flexbox notably), and it was getting hard to use the novelties. The application was not responsive and unusable on mobile, while phone was getting the main platform for many people.

In addition, 2 major issues were resulting in a dead end for Pyjamas: first a hijack of the project (not just hostile fork, but true hijack: the official website has been redirected to the fork named pyjs without the consent of the main contributor of Pyjamas, and the mailing list has been redirected without the consent of its subscribers), and second Pyjamas was stuck with Python 2, and a Python 3 port would mean a nearly full rewrite.

So we decided to move away, and the result was Libervia Pages, i.e. the framework made to integrate XMPP, Python, and web. For SàT 0.7 the first goal was to have a static or nearly static framework, with minimal JavaScript, and to implement dynamic part for 0.8.

The decision was to keep Python in the browser, for the same reason that initially lead to Pyjamas, but this time with the possibility to change the "engine", i.e. the software allowing to do Python in the browser. So we keep the door open to use only JavaScript if in the future we decide to move to something like Vue.js or React.

We have been carefully checking the various options, and our favorite candidates were Brython and Transcrypt.

Transcrypt is a Python to JavaScript transpiler, pretty similar to what was doing the transpiler of Pyjamas. It has the advantage of staying close to JavaScript, keeping its speed, and has a system to activate/deactivate Python compatibility features depending on the needs (better compatibility may mean lower performances).

Brython on the other hand is doing the transpilation in the browser, it is like having a Python interpreter in the browser. Its has some decisive (for us) advantages: full Python compatibility, and the possibility to dynamically convert Python to JS. The Python compatibility is essential to factorise the code with other frontends, and the ability to convert Python to JS open the way for future use (like sharing code during a chat, e.g. for a school or scientific use). I've been following the Brython community for years, it is really friendly and dynamic, and the few issues I've reported online were addressed quickly.

So Brython has been chosen as the main way to do dynamic code in the Libervia web framework, but it is possible to switch to something else. To use it, it is as simple as writing some Python in a __init__.py file in a _browser directory of a page ; Libervia will take care of installing Brython, copying and loading the script.

As an example, here is how you would show an alert if somebody click on an element with author class:

from browser import bind,alert

@bind(".author", "click")
def click(ev):
    alert("click on an author")

As we want to have dynamism used progressively (i.e. the page works without JavaScript, but enhancement happen if JavaScript is activated), it's really straightforward to work this way, while it is still possible to do more complex code for fully dynamic pages (like it will be the case for the chat).

Beside Python, JavaScript ecosystem been integrated through the use of either yarn or npm (whichever is present on the system). A common JSON file is used to indicate dependencies (using the syntax of package.json well known by frontend developers), and potentially how to generate corresponding Brython module. Sass has been integrated too.

I've also worked on themes, but I don't want to make this blog post too long to write and read, so I'll talk about that next time.

6 months ago