Comments (7)
I'd like to point out that browser support for custom elements (V1 of the spec) has improved a lot since this issue's creation: https://caniuse.com/#feat=custom-elementsv1
Libraries such as lit-element are on the rise (used by big players such as Google, Adobe, Microsoft, etc.) and what I especially like about custom components is the encapsulation where the CSS and markup are all part of the component, i.e., the consumer (e.g. a CMS) doesn't have to know the internals (markup) of the component. For "traditional" websites that are no SPA a full-blown framework such as React or Angular might not always be the best fit.
I'd love to see Gondel adhering to the custom elements spec but am sure that's quite an effort and most importantly probably a breaking change. Also, I'm not sure what would make Gondel stand out from projects like lit-element.
from gondel.
I discussed adding custom-elements to gondel with @adriankremer lately.
custom-element implementations like lit-element have one big issue: slow performance
what do I mean by that?
the browser is not able to render a custom-element before the javascript has been downloaded, parsed and executed - so the browser needs more time to display something meaningful to the user
https://www.eon.com/en.html is a very good example where you can see how the entire page is flickering during load time and during page switch because of that issue.
basically it has the same speed as an angular or react app. however unlike react or angular there is no stable ssr implementation for lit-element.
gondel has been built for enterprise cms or ecommerce which are mainly written in java or c# and have no nodejs ssr capabilities at all. so even if lit-element would provide stable ssr we would probably not be able to use it for gondel projects.
but that does not mean we should not look into this topic any further
in fact it could still help with better dx (e.g. <accordion>
instead of <div data-g-name="accordion">
).
to add basic custom element support to gondel we would need to find a good replacement for the following code:
This code is looking through the entire dom and returns all gondel elements.
Right now it is using a css selector like [data-g-name]
and get's a quite fast result.
If you have any idea how we could replace that part for custom-elements please let me know or create a pull request :)
from gondel.
https://www.eon.com/en.html is a very good example where you can see how the entire page is flickering during load time and during page switch because of that issue.
Imo, that's because of the sheer amount of JS (jQuery 3.3.1, jQuery 1.11.2, jQuery UI, Bootstrap - you name it) that is loaded and executed from different domains using HTTP/1.1. HTTP 2 can help there, especially with deferred loading of script tags and inlining critical CSS. See https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fwww.eon.com%2Fen.html&tab=desktop
the browser is not able to render a custom-element before the javascript has been downloaded, parsed and executed - so the browser needs more time to display something meaningful to the user
Yes, that is true. But frameworks like React and Angular ship a lot more JS that needs to be parsed. Custom Elements are meant to be small and portable.
I get your point, though. Using SSR is a huge benefit (not just for performance but also for SEO reasons). It is a trade-off between hiding complexity / abstracting away the internals, i.e., the HTML from the consumer (the backend of a CMS) and delaying rendering a little bit. It depends on the component I guess, e.g. a videoplayer that takes lots of space on a page leads to more "flickering" than a simple button.
Regarding findComponents
:
I don't think there's a much more performant solution to querying Gondel components in the DOM. And I don't feel like there's much to gain by just using custom elements for expressiveness, e.g. <our-button>
instead of <div data-g-name='OurButton'>
. It's just syntactic sugar at this point.
Custom Elements provide so much more than just encapsulating the markup. They also rely heavily on the Shadow DOM and are really portable and easily shareable.
from gondel.
It depends on your cumulated javascript code size - every byte will increase the time until the entire javascript is downloaded, parsed and executed. If you say we should not use SSR at all we could use preact which is half the size of lit-element and brings the same advantages.
from gondel.
If you say we should not use SSR at all we could use preact which is half the size of lit-element and brings the same advantages.
I didn't say that 😁 (But preact is quite nice).
from gondel.
@adriankremer as this ticket is already older than two years, can we close it?
from gondel.
@janwidmer yep
from gondel.
Related Issues (18)
- Add custom property on the event object to get the original currentTarget HOT 7
- Add agadoo HOT 2
- Fix jQuery plugin typo HOT 1
- Register domain HOT 1
- Autostart the namespace HOT 1
- Support for Angular 4+ HOT 2
- Media Queries Plugin Event Name
- @gondel/plugin-hot - peer dependencies HOT 1
- Decorator Core Plugin is executed twice if gondel is present in multiple js files HOT 3
- Refactor getHandlers HOT 1
- Events to not bubble up / will not be triggered on child components HOT 5
- Update documentation and examples to get ready for 1.0 release HOT 2
- Core changes: add generic typings for DOM utils, refactor componentName location amm. HOT 5
- Lazy loading of components HOT 4
- unwrapPromiseApp is not used anymore in react plugin
- GondelReactComponent expects JSON script tags with wrong MIME type
- Make gondle examples work again HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gondel.