design-blocks
design-blocks copied to clipboard
froala
[Suggestion] Web Components
Hi, i suggest you to switch the entire library to web components... no dependencies, framework agnostic, maintainable, css encapsulation, native and responsive design blocks ready to be used in your web or mobile apps for real.
@equinusocio that's an interesting suggestion that would definitely worth exploring. Can you see any drawbacks of switching this to web components?
The only thing is the shadow dom compatibility. There are polyfills called webcomponents.js that should be included by the end users.
Chrome (even mobile), safari (even mobile), every webkit browser and Edge 16 supports the shadow dom v1 spec. Firefox needs the polyfill.
Oldest browser like IE 11 needs polyfills. There are some differents between shadow dom (native) and shady dom (polyfill).
Take a look at google developers articles about web components and libraries like hyperHTML.
To use a web component you can just link its js to the html page or import it as module inside webpack. The most used bundler.
I suggest to stick with polymer 3 instead of react. So you can provide just a js file for component.
Anyone with basic frontend development knowledge can create web components on any library or framework (Polymer, Angular, React, Vue, etc). This guys did a CSS/SCSS styling for basic web elements and this can be implemented into any Web UI Kit.
@hetmann We want to move the design blocks from simple HTML to Web Components / Polyer because this way they can be easily used in front-end frameworks without having to reinvent the wheel again. We're still discussing about which would be the best approach and should have a decision in the following days.
@Stefanneculai note that if we use polymer you will make polymer elements that works only with polymer. The only way to make them works with any frameworks is by using pure custom elements.
@equinusocio yes, I'm aware of that. Most likely we're going to use Custom Elements without using the Shadow DOM. We still have to make some checks and a POC before starting all the conversion. I'll post here more details shortly.
Yep, we're taking into consideration to keep only a few things from Bootstrap, like the grid and some helper classes.
In my opinion, you don't need bootstrap at all. Consider each component as indipendent building-block, If you need to use a grid, you can use the CSS Grid Layout (widely supported) just inside the component. Without have to make extra markup or extra CSS class. Each component have its own grid defined inside.
Using Stencil may be a better option than Polymer or React, it compiles to standards custom elements.
@equinusocio Actually you don't. Stencil produces Vanilla JS, so you can distribute the components without any dependency. Yeah it adds one-way data binding, lazy-loading, etc but all goes together when you compile and there is no need to do such a thing as import Stencil as a dependency.
But anyway, is just an idea. Since it's new, things can change very quickly and may be more interesting use something more stable.
@VictorHeringer It is not true, you can take a look at this [sample project] (https://github.com/coryrylan/stencil-demos). It build a bundle.js file that include some core files and it does not support Shadow DOM at this moment. This is an example of vanilla no-dependencies web component https://github.com/contactlab/ikonograph/blob/master/src/ikonograph.js.
As you said, i think it is better going with something more stable..
@VictorHeringer thanks for the suggestion, however, we'd prefer to go with something more stable. We're going to post more details in the following days.
