search

linagora / esn

OpenPaaS web & API server
4 stars 0 forks source link

Application grid web component, version 1 (static) #6

Closed MichaelBailly closed 4 years ago

MichaelBailly commented 4 years ago

Details: https://ci.linagora.com/linagora/lgs/openpaas/esn/-/wikis/Frontend-Split/Stage-2/Header-Bar#step-1-static-content

PRs in review:

itswillta commented 4 years ago

So have we decided whether to use Svelte or StencilJS? At first glance, my take would be to use Svelte since:

  1. It's highly likely to produce the smaller bundle size, which means faster loading time (source: https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/).
  2. It has a more concise syntax (it can do the same thing with less code). I guess no one disagrees on this.
  3. It also utilises an HTML-based template syntax, which is very similar to AngularJS or VueJS (in contrast to StencilJS which relies on JSX).

However, there's a catch: Rich himself doesn't seem to be convinced of Web Components, for understandable reasons. He's been talking against it in some of his tweets (I might find some later) and most notably, in his DEV's post. What I fear is that the Web Component specs haven't been stabilized after all these years (the most recent big change is the abandonment of HTML Imports in favor of JSON, HTML, CSS Modules), and Svelte might even cease supporting the ever-changing specs at some point.

StencilJS might be safer since it's a framework dedicated to Web Components. However, there's still no 100% guarantee about that. What I'm more concerned about is how it's gonna impact the frontend performance (mostly the first loading time). The less-familiar syntax issue is mostly dev-related, and so, can be mitigated imo.

MichaelBailly commented 4 years ago

Hello,

Yes, I heard the pros & cons of web components, and yes, there are people, including Rich, that are against. You'll also find lots of people that are in favour of web components, and some of them use them in production for a long time, as a simple way to provide to customers simple ways of adding functionnalities in a web site. I want that we try to use web components, and the application grid is a good candidate, as it's a small functionality, that we can quickly revert to classical components, if we see too much issues with web components.

Svelte vs. Stencil

Last time I used Svelte (6 months ago), the thing was really not ready for a use in production in the OpenPaaS team. Example: with their use of rollup, I have been unable to setup a reverse proxy (webpack-dev-server like), and the community was not helpful (I went to the discord chat). They don't have simple ways of building a web component. So to resume: Svelte core is stabilizing, tooling is lacking.

-> I suggest we start by using Stencil, and give some feedback after 2 days of tries.

itswillta commented 4 years ago

The Shadow DOM can be a pain sometimes too, especially when the CSS code is spread out in multiple stylesheets/CSS files (like what we're doing right now). Since the Shadow DOM doesn't allow styles from the outside to penetrate inwards, we'll likely end up duplicating our CSS code. Constructable Stylesheets seem to be the solution to that, but it's not implemented anywhere else other than in Chromium-based browsers. At some point we can consider dropping the Shadow DOM if it's more trouble than it's worth.

However, all the cons might be negligible if we'll only be using Web Components for just a very small part of our app. So I think there'll really be no loss if we try StencilJS first and see how it goes afterwards.

itswillta commented 4 years ago

Please take a look when you have time: