okay thought it wasn't working because it seems to take a long time for the spinner to go away. but I'm very impressed with the todo.py! This is what frontend should be and in 5 years or so I wouldn't be surprised to see python taking over. If only the initial payload for the python runner was smaller and if only browsers started supporting webassembly/python stack out of the box!!!
from datetime import datetime as dt
from utils import add_class, remove_class
from js import console
tasks = []
# define the task template that will be use to render new templates to the page
task_template = Element("task-template").select('.task', from_content=True)
task_list = Element("list-tasks-container")
new_task_content = Element("new-task-content")
def add_task(*ags, **kws):
# create task
task_id = f"task-{len(tasks)}"
task = {"id": task_id, "content": new_task_content.element.value, "done": False, "created_at": dt.now()}
tasks.append(task)
# add the task element to the page as new node in the list by cloning
taskHtml = task_template.clone(task_id, to=task_list)
taskHtmlContent = taskHtml.select('p')
taskHtmlContent.element.innerText = task['content']
taskHtmlCheck = taskHtml.select('input')
task_list.element.appendChild(taskHtml.element)
def check_task(evt=None):
task['done'] = not task['done']
if task['done']:
add_class(taskHtmlContent, "line-through")
else:
remove_class(taskHtmlContent, "line-through")
new_task_content.clear()
taskHtmlCheck.element.onclick = check_task
def add_task_event(e):
if (e.key == "Enter"):
add_task()
> if only browsers started supporting webassembly/python stack out of the box!!
This seems highly unlikely. Each browser maker would have to have two teams now (one for JavaScript and one for Python). An additional language would add a new security/hacking vector. They would need to keep both languages at parity which would probably slow development and make testing much more complicated. Would JS and Python be able to both work on the same web page at the same time? What if both tried to interact with the same element at the same time? This is just thoughts off the top of my head. I’m sure the real issues would be much more complicated.
As a way of interacting with the DOM, this makes me very uncomfortable:
# add the task element to the page as new node in the list by cloning
taskHtml = task_template.clone(task_id, to=task_list)
taskHtmlContent = taskHtml.select('p')
taskHtmlContent.element.innerText = task['content']
taskHtmlCheck = taskHtml.select('input')
task_list.element.appendChild(taskHtml.element)
I imagine that if Python were supported out of the box in browsers like JavaScript is, frameworks would emerge for this sort of thing. At this point though, I'm not sure I think it's particularly likely that browsers will support additional languages instead of just preferring people compile to WASM and use some JavaScript over it.
Works fine for me on a Pixel 6XL. It does need to let the pyodide files load, but they get cached, so for me, having previously loaded a demo a month or so ago, it loaded the Todo app almost instantly.
A few brief delays came with the matplotlib examples but nothing too bad (seconds not minutes)