Example of Transcrypt, HyperApp, and SSR

[pauleveritt]

I made a repo with some Sphinx docs as a step-by-step example of Transcrypt combined with HyperApp and Bottle to do server-side rendering:

https://github.com/pauleveritt/transcrypt_hyperapp_hydrate

Docs at:

https://transcrypt-hyperapp-and-ssr.readthedocs.io/en/latest/

This was intriguing to work on. Unlike other Transcrypt examples, this needed a codebase that could work in Python (first render) and JS (browser-side re-renders.) HyperApp is a great choice for this, since it is so tiny. Not only can you skip bundling altogether, you could reasonably port pieces of it to Python, so that the templating is not double-implemented. (I didn't get that far.)

Anyway, if you'd like, I could re-do this as a PR in your docs. I'd love to collaborate on a first-class story for SSR.

[retsimx]

In extension, I released a React demo yesterday, https://github.com/retsimx/TranscryptReact

[JdeH]

@pauleveritt It would be very useful have this as one of the demo's in Transcryp/transcrypt/demos, including the documentation you made. A pull request to that extent is welcome! An alternative is to have links from the site or the docs to your work on this.

@retsimx Same holds here. Either it could become one of the demo's in the distribution, including some docs on dependencies / required tools, or there could be a link from the Transcrypt site. Unfortunately GitHub for some reason doesn't allow me to add you as one of the assignees of this issue.

Note that to be in the next version of the distro, things would have to work with Transcrypt 3.7 and CPython 3.7, which I believe shouldn't pose too much problems.

Kind regards Jacques

[pauleveritt]

@JdeH I'm interested in a conversation with you about server-side rendering. My perception: Transcrypt is for writing code that targets execution in JS, not both Python and JS. I'd like to first find out if dual-mode is interesting. If so, it brings up more questions.

[JdeH]

Hi, OK, a quick reaction, in anticipation of a more extensive conversation.

I'd like to think that quite some code can be made to run both with Transcrypt and with CPython. Load balancing between client and server, with the possibility to use partially the same code on both, is one of the things I had in mind with Transcrypt.

On the other hand Transcrypt will never have full CPython semantics, as it would get too slow and complicated. There are projects like PyPyJs, that do, but at a cost.

From the Transcrypt docs:

It’s lightweight, in accordance Pareto’s rule adapted for IT: 99% of the result can be achieved with 1% of the effort. http://www.transcrypt.org/docs/html/what_why.html#what-is-transcrypt

When run from the command line, it still introduces itself with Small Sane Subset compiler, although currently I am happy to say that's a severe understatement, TS compiles the bulk of Python.

In short: I think dual-mode is certainly interesting!

[pauleveritt]

(long, sorry)

Since you're interested, I'll continue by picking two specific places that I'm interested in.

1) Templating

Python web projects have a lot of complexity in templates, which are a pseudo-language without full CPython semantics. But they solve an old/wrong problem: giving "HTML Designers" a separate universe. As such, Python code quality tools (linters, black, mypy, coverage, etc.) can't help.

Modern frontends have un-split this divide into "components" which unify logic, state, presentation, and even styling. I worked quite a bit on a component model for Jinja2 AST. Then realized, it was flawed. We need "templating" that works with the VDOM on the client, Python on the server, same template code. And preferably something where mypy can peek into the "template". Jinja2's AST isn't VDOM-oriented.

Hence my interest in converting the h function into something that can render the same Transcrypt-Python view server-side as well as client side. But I'll need help from Transcrypt people, as it needs to be good. So this idea -- Python-based progressive web apps and SSR -- would need to be interesting to Transcrypt.

2) Developer experience

As others discussed, seamlessly plugging into Parcel and webpack lets frontend developers keep the file watching, on-the-fly transpire, browser reload, and HMR. It's crazy productive, if your target is the browser or NodeJS SSR.

As a Pyramid guy, I'm interested in Python SSR. My GatsbyJS project has 500 MB in node_modules. It's insane. How much could get from SSR in Python, with zero NodeJS anywhere around? I think it's worth exploring:

• A view that can pre-render in Python on the server

• Then when someone clicks "Next Page" in the browser, the same view renders the next batch of data

• And when you need an HTTP fetch, it's back to a Python endpoint

Getting a webpack-devserver style setup for Python with Transpile is going to be some work. But it's do-able.