Web Framework with Pythonic Javascript Syntax
Project description
Jyserver Web Framework with Pythonic Javascript Syntax
Jyserver is a framework for simplifying the creation of font ends for apps and kiosks by providing real-time access to the browser's DOM and Javascript from the server using Python syntax. It also provides access to the Python code from the browser's Javascript.
The difference between this framework and others (such as Django, Flask, etc.) is that jyserver uses Python dynamic syntax evaluation so that you can write Python code that will dynamically be converted to JS and executed on the browser. On the browser end, it uses JS's dynamic Proxy object to rewrite JS code for execution by the server. All of this is done transparently without any additional libraries or code. See example below.
Documentation: Class documentation
Tutorial: Dev.to article
Example:
from jserver import Client, Server
class App(Client):
def __init__(self):
# For simplicity, this is the web page we are rendering.
# The module will add the relevant JS code to
# make it all work. You can also use an html file.
self.html = """
<p id="time">TIME</p>
<button id="reset"
onclick="server.reset()">Reset</button>
"""
# Called by onclick
def reset(self):
# reset counter so elapsed time is 0
self.start0 = time.time()
# executed on client
self.js.dom.time.innerHTML = "{:.1f}".format(0)
# If there is a "main" function, it gets executed. Program
# ends when the function ends. If there is no main, then
# server runs forever.
def main(self):
# start counter so elapsed time is 0
self.start0 = time.time()
while True:
# get current elapsed time, rounded to 0.1 seconds
t = "{:.1f}".format(time.time() - self.start0)
# update the DOM on the client
self.js.dom.time.innerHTML = t
time.sleep(0.1)
httpd = Server(App)
print("serving at port", httpd.port)
httpd.start()
How does this work?
-
After calling
httpd.start()
, the server will listen for new http requests. -
When "/" is requested, jyserver will insert special Javascript code into the HTML that enables communication before sending it to the browser. This code creates the
server
Proxy object. -
This injected code will cause the browser to send an asynchronous http request to the server asking for new commands for the browser to execute. Then it waits for a response in the background.
-
When the user clicks on the button
reset
, theserver
Proxy object is called. It will extract the method name--in this casereset
--and then make an http request to the server to execute that statement. -
The server will receive this http request, look at the App class, find a method with that name and execute it.
-
The executed method
reset()
first increases the variablestart0
. Then it begins building a Javascript command by using the specialself.js
command.self.js
uses Python's dynamic language features__getattr__
,__setattr__
, etc. to build Javascript syntax on the fly. -
When this "dynamic" statement get assigned a value (in our case
"0.0"
), it will get converted to Javascript and sent to the browser, which has been waiting for new commands in step 3. The statement will look like:document.getElementById("time").innerHTML = "0.0"
-
The browser will get the statement, evaluate it and return the results to the server. Then the browser will query for new commands in the background.
It seems complicated but this process usually takes less than a 0.01 seconds. If there are multiple statements to execute, they get queued and processed together, which cuts back on the back-and-forth chatter.
All communication is initiated by the browser. The server only listens for special GET and POST requests.
Overview of operation
The browser initiates all communcation. The server listens for connections and sends respnses. Each page request is processed in its own thread so results may finish out of order and any waiting does not stall either the browser or the server.
Browser | Server |
---|---|
Request pages | Send pages with injected Javascript |
Query for new commands | Send any queued commands |
As commands finish, send back results | Match results with commands |
Send server statements for evaluation; wait for results | Executes then and sends back results |
When the browser queries for new commands, the server returns any pending commands that the browser needs to execute. If there are no pending commands, it waits for 5-10 seconds for new commands to queue before closing the connection. The browser, upon getting an empty result will initiate a new connection to query for results. Thus, although there is always a connection open between the browser and server, this connection is reset every 5-10 seconds to avoid a timeout.
Other features
Assign callables in Python.
Functions are treated as first-class objects and can be assigned.
class App(Client):
def __init__(self):
self.html = """
<p id="time">WHEN</p>
<button id="b2" onclick="server.stop()">Pause</button>
"""
def stop(self):
self.running = False
self.js.dom.b2.onclick = self.restart
def restart(self):
self.running = True
self.js.dom.b2.onclick = self.stop
If a main
function is given, it is executed. When it finishes, the server is
terminated. If no main
function is given, the server waits for requests in an
infinite loop.
Lazy evaluation provides live data
Statements are evaluated lazily by self.js
. This means that they are executed
only when they are resolved to an actual value, which can cause some statements
to be evaluated out of order. For example, consider:
v = self.js.var1
self.js.var1 = 10
print(v)
This will always return 10
no matter what var1
is initially. This is
because the assignment v = self.js.var1
assigns a Javascript object and not
the actual value. The object is sent to the browser to be evaluated only when
it is used by an operation. Every time you use v
in an operation, it will be
sent to the browser for evaluation. In this way, it provides a live link to the
data.
This behavior can be changed by calling v = self.js.var1.eval()
, casting it
such as v = int(self.js.var)
or performing some operation such as adding as in
v = self.js.var + 10
.
Installation
Available using pip or conda
pip install jyserver
Source code available on github:ftrias/jyserver
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.