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

Move to PatternFly Elements and lit #1028

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

martinpitt
Copy link
Member

@martinpitt martinpitt commented Nov 8, 2024

PFE uses lit, so it makes sense to just use that for the main
application as well. Web components are pretty much React built into the
web platform, and lit adds some convenience around that.

This is mostly a demo -- for real Cockpit pages, PF Elements is still
missing too many components.


This is part of my Day of Learning -- I don't think we should just land that. Perhaps we want to keep it in a branch, or a separate starter-kit-pfe project, I don't know yet. For now this is just a demo.

The size difference is quite impressive:

  • index.js.gz: 80 kB → 29 kB (this includes all PF CSS!)
  • index.css.gz: 22930 Bytes → disappears completely
  • node_modules: 381MB → 202 MB

The UI isn't surprising:

image

But this changed the <Alert> to a normal <p>, as PF Elements does not have an alert yet: patternfly/patternfly-elements#2539

@martinpitt

This comment was marked as resolved.

@bennypowers
Copy link

curious how this might affect final bundle sizes, page loading speed, and runtime performance

@martinpitt
Copy link
Member Author

@bennypowers bundle sizes are in the description. I didn't test performance, for starter-kit everything is so fast that it makes no practical difference.

@martinpitt martinpitt added the no-test For manual test requests label Nov 11, 2024
@martinpitt martinpitt force-pushed the pf-elements branch 2 times, most recently from 814f586 to 03f5e4e Compare November 11, 2024 15:49
@martinpitt martinpitt removed the no-test For manual test requests label Nov 12, 2024
@martinpitt

This comment was marked as resolved.

src/index.html Outdated Show resolved Hide resolved
src/index.tsx Outdated Show resolved Hide resolved
src/index.tsx Outdated Show resolved Hide resolved
src/app.tsx Outdated Show resolved Hide resolved
@martinpitt
Copy link
Member Author

תודה לך!

I applied your suggestions.

@martinpitt martinpitt force-pushed the pf-elements branch 2 times, most recently from b111b56 to 94bb2f4 Compare November 16, 2024 08:43
@martinpitt
Copy link
Member Author

Got rid of sass as well.

@martinpitt martinpitt force-pushed the pf-elements branch 2 times, most recently from d137e0a to 1c6f884 Compare November 19, 2024 05:19
PFE uses lit, so it makes sense to just use that for the main
application as well. Web components are pretty much React built into the
web platform, and lit adds some convenience around that.

This is mostly a demo -- for real Cockpit pages, PF Elements is still
missing too many components.
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.

2 participants