Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resurrect the Toga-web backend using Pyscript #1475

Merged
merged 36 commits into from Oct 11, 2022

Conversation

freakboy3742
Copy link
Member

@freakboy3742 freakboy3742 commented May 1, 2022

PyScript was announced at PyCon 2022. This provides an easy-to-deploy Python in the browser.

This doesn't implement every widget, but it's enough to get Tutorial 0 and 1 (hello world and the F2C calculator) going, plus the first few stages of the BeeWare tutorial (up until the point httpx is imported); and the general approach being used should be broadly compatible with other widgets.

It pairs well with beeware/briefcase#898 as a means of deploying apps using this backend.

PR Checklist:

  • All new features have been tested
  • All new features have been documented
  • I have read the CONTRIBUTING.md file
  • I will abide by the code of conduct

@aeroaks
Copy link

aeroaks commented Jun 14, 2022

Hi, Is there a plan to move forward (resurrect) with toga-web? I saw the examples in pyscript but did not see roadmap or discussion.

@freakboy3742
Copy link
Member Author

@aeroaks Yes - the web backend is on our todo list; however, in terms of priorities, it's a little lower than solidifying the desktop and mobile platforms. In terms of roadmaps, I wouldn't expect to see big changes from the Toga side unless someone contributes them.

@aeroaks
Copy link

aeroaks commented Jun 15, 2022

In a way it would work out for me, as I can spend a limited time in contribution. I was thinking of picking up small tasks to e.g., make the tutorials in the Toga documentation work (in a similar way as the tutorials added in the pyscript repo). But for that I would need some alignment how and where to begin.

@freakboy3742 freakboy3742 marked this pull request as ready for review October 6, 2022 05:43
Copy link
Member

@mhsmith mhsmith left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested using the temperature conversion app and everything worked correctly, except as noted below.

src/core/toga/style/pack.py Outdated Show resolved Hide resolved
src/web/toga_web/widgets/base.py Outdated Show resolved Hide resolved
@@ -479,6 +479,27 @@ def _layout_column_children(self, node, available_width, available_height, scale

return width, height

def __css__(self):
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious about the rationale for putting this here rather than in the web backend. Is it because we eventually intend to define the Pack algorithm in terms of CSS (#1544), so it makes sense for both realizations of the algorithm to be in the same file so they can be kept consistent?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Essentially yes, but I'd phrase it a slightly different way. It's not so much about defining Pack in terms of CSS; it's more a matter of saying that a style engine can define any set of rules you want, but you have to be able to define a mapping to CSS if you want your style engine to be compatible with web deployment.

This implementation of __css__() is specific to Pack, and describes how Pack's style rules map to "pure" CSS; the implementation for Colosseum will be a 1-1 mapping of the literal style declarations. Other style engines could define complete arbitrary rules, as long as they provide an analogous CSS mapping.

The connection with #1544 is more about using CSS as a reliable known reference implementation; the Pack CSS mapping rendered in a browser should provide the same output as a Pack implementation in native widget layout.

Comment on lines 31 to 34
toga.Command(
None,
"Preferences",
group=toga.Group.HELP,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't look as if this is being used anywhere.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct - it's a placeholder that acts as a tease for future functionality (in the hope it will jolt someone into potentially contributing).

src/web/toga_web/app.py Outdated Show resolved Hide resolved
src/web/toga_web/app.py Outdated Show resolved Hide resolved
Comment on lines +4 to +7
except ModuleNotFoundError:
# To ensure the code can be imported, provide a js symbol
# as a fallback
js = None
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When would this happen?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Running the test suite in CI would be the obvious case. The interface compliance tests are part of the web backend, so we need to be able to import toga_web on non-web platforms.

src/web/toga_web/widgets/button.py Outdated Show resolved Hide resolved
src/web/toga_web/window.py Outdated Show resolved Hide resolved
Comment on lines 51 to 55
[tool.briefcase.app.tutorial.web]
requires = [
'../../src/web',
]
style_framework = "Bootstrap v4.6"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

None of these will work, because they're all called "tutorial" rather than the actual name of the app.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤦 I'm really firing on all cylinders at the moment...

@codecov
Copy link

codecov bot commented Oct 10, 2022

Codecov Report

Merging #1475 (84a949a) into main (dfc7273) will decrease coverage by 12.03%.
The diff coverage is 4.76%.

Impacted Files Coverage Δ
src/core/toga/platform.py 16.66% <0.00%> (-6.87%) ⬇️
src/core/toga/style/pack.py 81.39% <5.55%> (-8.19%) ⬇️
src/core/toga/handlers.py 40.00% <0.00%> (-6.67%) ⬇️
src/core/toga/style/applicator.py 84.21% <0.00%> (-5.27%) ⬇️
src/core/toga/app.py
src/core/toga/widgets/base.py
src/dummy/toga_dummy/widgets/table.py
src/core/tests/widgets/test_selection.py
... and 116 more

@mhsmith mhsmith merged commit f90d8e5 into beeware:main Oct 11, 2022
@freakboy3742 freakboy3742 deleted the pyscript branch October 11, 2022 22:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants