6 ms·

For all the comments asking what's the difference between this and Bootstrap, Ant, jQuery UI, React, Vue and friends: Interfaces built with FAST adapt to your

For all the comments asking what's the difference between this and Bootstrap, Ant, jQuery UI, React, Vue and friends: Interfaces built with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard _Web Components_. The important word here is Web Components, which are like React or Vue components but using only standard HTML and JavaScript (no frameworks). I guess you could even add Bootstrap on top of Fast. Some references: - https://en.wikipedia.org/wiki/Web_Components https://en.wikipedia.org/wiki/Web_Components - https://developer.mozilla.org/en-US/docs/Web/Web_Components https://developer.mozilla.org/en-US/docs/Web/Web_Components - https://developers.google.com/web/fundamentals/web-components https://developers.google.com/web/fundamentals/web-component... - https://caniuse.com/#search=components https://caniuse.com/#search=components Also worth reading: https://dev.to/richharris/why-i-don-t-use-web-components-2cia https://dev.to/richharris/why-i-don-t-use-web-components-2ci... (discussion on HN: https://news.ycombinator.com/item?id=20232628 https://news.ycombinator.com/item?id=20232628)

Udik 6y ago
> but using only standard HTML and JavaScript (no frameworks). Sounds like they ship a framework with the browser and call it "standard". Given that the size of a UI components framework is tiny anyway (3kb for preact) I'm not sure it's such a revolution. I'm open to hearing alternative takes on this though.
- lucasmullens 6y ago
  If all the open source components I used all used preact, I wouldn't be concerned about the 3kb. But if each component author uses a different framework or even a different version of a framework, it quickly becomes something like 3kb * number of components.
  - Udik 6y ago
    True, but what I meant to say is that there is nothing revolutionary. It's not providing capabilities that we didn't have before. It's simply establishing a standard for a tiny subset of what a modern web framework does- roughly equivalent to those 3kb of code- by doing the equivalent of incorporating it natively inside the browser. Yes, now you can use components without a framework (you could use them without a build step also before). But if you want to do anything more complex than a static page with jquery, you still need both. To me it feels like the dream of 2005. It's cool, but we've been able to do the same for at least ten years at this point, and with the tools of our choice.
    - rictic 6y ago
      The big thing web components solve is interoperability. How do you use a preact component inside an angular app? How do you use an angular component inside a vue app? Web components are the solution. No matter what library or framework or whatever that you're using, you can render a <div> so you can render a <my-component>. That combined with shadow dom means that the element's internals and its styles are encapsulated, so that you can drop it into a page and it won't mess up the rest of the page and the page can't mess it up. This is particularly valuable for a design system, because a company will have a design and want their web properties to look consistent, but they'll have one app written with angular, and another couple with react, and a few ancient apps written with jquery. You could either convert _everything_ to the latest and greatest thing, or you could write your design system with web components, and it'll work everywhere.
      - mrmonkeyman 6y ago
        One angular component? Yeah sure. Add 500kb for one calender widget.. nice solution guys. Literally never had this problem. Lots of other problems though, but no, let's focus on interoperability because we like to mix react, angular and vue.
Someone 6y ago
So, like https://medium.com/ing-blog/ing-open-sources-lion-a-library-for-performant-accessible-flexible-web-components-22ad165b1d3d https://medium.com/ing-blog/ing-open-sources-lion-a-library-...?
- claviska 6y ago
  Lion is similar in that it’s intended to be customized from the start. For something more “batteries included,” see https://shoelace.style https://shoelace.style.
- dheerajvs 6y ago
  Or like Adobe's react-spectrum: https://react-spectrum.adobe.com/architecture.html https://react-spectrum.adobe.com/architecture.html
CuddleBunny 6y ago
The difference is that FAST is NOT a component library. It is a tool for building component libraries. The fast-components package is a showcase of what this library is capable of. You could use FAST to create web component libraries that consume bootstrap styles if you want. Microsoft is using this same base to write web components for Fluent UI (previously Office Fabric): https://www.npmjs.com/package/@fluentui/web-components https://www.npmjs.com/package/@fluentui/web-components
Vinnl 6y ago
> The important word here is Web Components, which is like React or Vue components but using only standard HTML and JavaScript (no frameworks). I wouldn't say that - Web Components (by themselves) do not allow you to write your view as a function of application state, which is the main draw of at least React. But the initial use case of Web Components is to create a standard that allows developers to iterate on the web's built-in components (inputs, date pickers, etc.) without having to wait on the standards track, and FAST appears to intend to provide a number of such components. (And there is more to such components than just styling (which is what Bootstrap provides) - it's behaviour, usability by people reliant on e.g. screen readers, an API to access its data, etc.
- sroussey 6y ago
  Ionic Stencil let’s you wrap webcomponents and turn them into React, Vue, or Angular components. MS should use that or do something of a similar nature. Otherwise there is a impedance mismatch between this and what most or used to.
  - helixten 6y ago
    Not quite, Ionic Stencil is library to helps build webcomponents. Since fast.design are webcomponents, they can be used in any with any framework, no wrapping required.
    - sroussey 6y ago
      Ah, thanks for the clarification. I know the developer of Framework7.io has a tool to take his components (not webcomponents though) and make them into React/Svelte/Vue native ones. So I kinda mixed the two tools together in my head.
    - turadg 6y ago
      Web Components can't be directly used in React due to these limitations documented at https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/ Handling data React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used. Handling events Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome. Stencil provides wrapping to circumvent these limitations. https://stenciljs.com/docs/react https://stenciljs.com/docs/react
pc86 6y ago
That's FAST.

Udik 6y ago

> but using only standard HTML and JavaScript (no frameworks). Sounds like they ship a framework with the browser and call it "standard". Given that the size of a UI components framework is tiny anyway (3kb for preact) I'm not sure it's such a revolution. I'm open to hearing alternative takes on this though.

lucasmullens 6y ago
If all the open source components I used all used preact, I wouldn't be concerned about the 3kb. But if each component author uses a different framework or even a different version of a framework, it quickly becomes something like 3kb * number of components.
- Udik 6y ago
  True, but what I meant to say is that there is nothing revolutionary. It's not providing capabilities that we didn't have before. It's simply establishing a standard for a tiny subset of what a modern web framework does- roughly equivalent to those 3kb of code- by doing the equivalent of incorporating it natively inside the browser. Yes, now you can use components without a framework (you could use them without a build step also before). But if you want to do anything more complex than a static page with jquery, you still need both. To me it feels like the dream of 2005. It's cool, but we've been able to do the same for at least ten years at this point, and with the tools of our choice.
  - rictic 6y ago
    The big thing web components solve is interoperability. How do you use a preact component inside an angular app? How do you use an angular component inside a vue app? Web components are the solution. No matter what library or framework or whatever that you're using, you can render a <div> so you can render a <my-component>. That combined with shadow dom means that the element's internals and its styles are encapsulated, so that you can drop it into a page and it won't mess up the rest of the page and the page can't mess it up. This is particularly valuable for a design system, because a company will have a design and want their web properties to look consistent, but they'll have one app written with angular, and another couple with react, and a few ancient apps written with jquery. You could either convert _everything_ to the latest and greatest thing, or you could write your design system with web components, and it'll work everywhere.
    - mrmonkeyman 6y ago
      One angular component? Yeah sure. Add 500kb for one calender widget.. nice solution guys. Literally never had this problem. Lots of other problems though, but no, let's focus on interoperability because we like to mix react, angular and vue.

Someone 6y ago

So, like https://medium.com/ing-blog/ing-open-sources-lion-a-library-for-performant-accessible-flexible-web-components-22ad165b1d3d https://medium.com/ing-blog/ing-open-sources-lion-a-library-...?

claviska 6y ago
Lion is similar in that it’s intended to be customized from the start. For something more “batteries included,” see https://shoelace.style https://shoelace.style.
dheerajvs 6y ago
Or like Adobe's react-spectrum: https://react-spectrum.adobe.com/architecture.html https://react-spectrum.adobe.com/architecture.html

CuddleBunny 6y ago

The difference is that FAST is NOT a component library. It is a tool for building component libraries. The fast-components package is a showcase of what this library is capable of. You could use FAST to create web component libraries that consume bootstrap styles if you want. Microsoft is using this same base to write web components for Fluent UI (previously Office Fabric): https://www.npmjs.com/package/@fluentui/web-components https://www.npmjs.com/package/@fluentui/web-components

Vinnl 6y ago

> The important word here is Web Components, which is like React or Vue components but using only standard HTML and JavaScript (no frameworks). I wouldn't say that - Web Components (by themselves) do not allow you to write your view as a function of application state, which is the main draw of at least React. But the initial use case of Web Components is to create a standard that allows developers to iterate on the web's built-in components (inputs, date pickers, etc.) without having to wait on the standards track, and FAST appears to intend to provide a number of such components. (And there is more to such components than just styling (which is what Bootstrap provides) - it's behaviour, usability by people reliant on e.g. screen readers, an API to access its data, etc.

sroussey 6y ago
Ionic Stencil let’s you wrap webcomponents and turn them into React, Vue, or Angular components. MS should use that or do something of a similar nature. Otherwise there is a impedance mismatch between this and what most or used to.
- helixten 6y ago
  Not quite, Ionic Stencil is library to helps build webcomponents. Since fast.design are webcomponents, they can be used in any with any framework, no wrapping required.
  - sroussey 6y ago
    Ah, thanks for the clarification. I know the developer of Framework7.io has a tool to take his components (not webcomponents though) and make them into React/Svelte/Vue native ones. So I kinda mixed the two tools together in my head.
  - turadg 6y ago
    Web Components can't be directly used in React due to these limitations documented at https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/ Handling data React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used. Handling events Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome. Stencil provides wrapping to circumvent these limitations. https://stenciljs.com/docs/react https://stenciljs.com/docs/react

pc86 6y ago

That's FAST.