17 ms·

Microsoft Fast Design

623 points by no_wizard 6y ago

nathanaldensr 6y ago
Allow me to ask the obvious question: How does Fast compare against React, Angular, VueJS, etc.?
- atarian 6y ago
  Apples and oranges. A design system is a collection of components that fit a certain look-and-feel; it is not tied to the implementation so it can be implemented by React, Angular, or VueJS: https://www.fast.design/docs/integrations/introduction https://www.fast.design/docs/integrations/introduction
- arsome 6y ago
  My understanding is this is closer to something like Bootstrap but using Web Components (or material-ui if you want a react component set) than it is to React itself. You'd probably still want to use React or similar ontop of it, but in the future we might get much lighter libraries covering that side of things.
- deleted 6y ago
  [deleted]
- sreekotay 6y ago
  Appears to be a custom HTML elements (and some helper libraries) that you can plugin to vanilla, Vue, React, etc?
- crooked-v 6y ago
  Well, the focus on Web Components is good for cross-compatibility, but means not being able to do the full static analysis of components that you can do with JSX or equivalents.
- moenarch 6y ago
  That's FAST!
- lucideer 6y ago
  It doesn't. It's more comparable to something like Google Polymer[0] They can be used in conjunction with eachother[1][2], so I'd imagine the same/similar would be possible with Fast. [0] https://en.wikipedia.org/wiki/Polymer_(library) https://en.wikipedia.org/wiki/Polymer_(library) [1] https://www.digitalocean.com/community/tutorials/vuejs-vue-integrate-web-components https://www.digitalocean.com/community/tutorials/vuejs-vue-i... [2] https://github.com/jscissr/react-polymer#readme https://github.com/jscissr/react-polymer#readme
  - kutorio 6y ago
    It reminds me more of https://material-ui.com/ https://material-ui.com/
- bokchoi 6y ago
  From this page: https://www.fast.design/docs/fast-element/observables-and-state https://www.fast.design/docs/fast-element/observables-and-st... > The arrow function bindings and directives used in templates allow the fast-element templating engine to intelligently react by only updating the parts of the DOM that actually change, with no need for a virtual DOM, VDOM diffing, or DOM reconciliation algorithms. This approach enables top-tier initial render time, industry-leading incremental DOM updates, and ultra-low memory allocation. > When a binding is used within a template, the underlying engine uses a technique to capture which properties are accessed in that expression. With the list of properties captured, it then subscribes to changes in their values. Any time a value changes, a task is scheduled on the DOM update queue. When the queue is processed, all updates run as a batch, updating precisely the aspects of the DOM that have changed. That's neat.
- dudus 6y ago
  At first glance it seems the fast-components are akin to material components and fast-foundation kinda reminds of angular cdk
pearjuice 6y ago
Kind of surprises me that Microsoft allowed this project to use Discord for external communication.
- throwaways885 6y ago
  Why not? It's incredibly popular.
- CuddleBunny 6y ago
  Teams doesn't have a free public mode at this time so it sounds like the best option to me. There are official Microsoft instances of Slack and Gitter as well and teams seem to be given a fair degree of freedom.
Datsundere 6y ago
There are plenty of these libraries. Can someone tackle the hot mess css is? Give me one way of doing things. Css breaks do much shit for me to the point where I don’t want to code
- crooked-v 6y ago
  If you use React, you might like Rebass (https://rebassjs.org/getting-started https://rebassjs.org/getting-started), which turns the most common CSS attributes into component props with assorted built-in functionality for common theming and media queries, or Emotion (https://emotion.sh/docs/introduction https://emotion.sh/docs/introduction), which lets you composably define CSS per component that automatically gets scoped to that component only. Both are designed in a way that still render efficiently, such as turning static CSS rules into statically-defined bundles and only swapping out the dynamic bits on the fly.
timvisee 6y ago
Took a quick look: It has limited components. It isn't fast on my mobile device. Some components appear to be broken. Why would I ever use this?
- mey 6y ago
  Sliders and radio buttons do not seem to work on Firefox for Android nightly build.
  - GrayShade 6y ago
    Neither do they seem to work in desktop Nightly.
- XCSme 6y ago
  Agree, UI and UX is really bad for the components demo, but I think their goal is not to be an UI framework, but a step before that? I am very confused about what they are trying to achieve and how. I personally that think this project has no future.
d0m 6y ago
There are many design issues with their website which IMHO don't provide great confidence in using their components
- deleted 6y ago
  [deleted]
pjmlp 6y ago
For those that miss it, the dark mode can be turned off on the top right corner.
su8898 6y ago
Not sure if it's just me but I kind of feel like these components are not very polished - at least not to the point of Bootstrap/AntDesign. May be it's the square unrounded borders or may be it's just the way the demo components are presented.
duopixel 6y ago
Check out the FAST Component explorer to see it in action: https://explore.fast.design/ https://explore.fast.design/ Looks very flexible but the presentation and default design is horrible.
- neogodless 6y ago
  I would imagine the design convention is to show a + when you have more content hidden, and a - to indicate you can hide (minimize) it. Is that the popular consensus, or is that an odd way of looking at it?
  - achr2 6y ago
    Yeah, this threw me as well, it is implemented incorrectly..
  - yodon 6y ago
    The accordion tag doesn't make any assumptions about icons. You can use smiley faces & frowny faces for open and closed if you prefer, or you can use plus and minus signs in either order or anything else. The bigger more systemic documentation issue is the examples pages lack a view example source mode so there isn't an easy way to discover that icons are a user choice thing rather than a prebuilt styling thing.
- klohto 6y ago
  The default design looks awful, especially on phone. I’m not a frontend dev, but I don’t see any reason why would I use this instead of, for example, Bootstrap for sideprojects. Can some FE comment on the project usefulness? Why go with Fast?
  - WorldMaker 6y ago
    The impression I get is FAST is trying to simplify the markup you see in for instance Bootstrap's documentation by trying to build standard components that Bootstrap themselves could use (or Material or their own Fluent stuff). The emphasis is on a lot of the little things in Bootstrap's documentation that doesn't either get copy/pasted or it gets copy and pasted and ignored/forgotten/left-to-bit-rot. Stuff like aria- tags for accessibility. Seems the idea here is that by baking them into web components that do most of the work for you they are less likely to be forgotten or left to bit-rot. (I'm not a front end dev myself, but do enough full stack to think I know what is going on here.)
pcr910303 6y ago
Ok, so it looks like the main point of this is fast-components, which is a just a bunch of components styled as MS-style, but I'm more interested in the fast-foundation package. According to the instructions: > The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior. > it exports parts and pieces intended to be composed into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations. Which means... if I want to make my own components, I can just take this package and don't worry about making broken components. Since the core HTML/JS is properly taken care (by MS, hopefully) I can less worry about re-implementing keyboard access, or things like accessibility which is hard to do properly. This is IMO huge, and should be more universal.
- RubenvanE 6y ago
  The foundation package sounds a lot like the Lion components that ING Bank open sourced last year. It is indeed super handy to not have to worry about all the browser compatibility and accessibility issues!
  - spankalee 6y ago
    Link to Lion's storybook demos for those interested: https://lion-web-components.netlify.app/?path=/story/intro-lion-web-components--page https://lion-web-components.netlify.app/?path=/story/intro-l...
    - Arkdy 6y ago
      Any idea how FAST compares to using storybook directly? ( https://storybook.js.org/ https://storybook.js.org/ )
      - spankalee 6y ago
        Fast is a set of components (and a base class). Storybook is a way to demo components.
jjcm 6y ago
I love seeing a wider adoption of webcomponents, but I have some complaints about this library, mainly because they're really pushing the whole, "lightweight and low memory" lines. Take a look at the accordian component (the very first one in their system) and check it out in the dom inspector - it has a shadowroot that has precisely one child: a <slot> element. In this situation a shadowroot does nothing to help. All it means is instead of just creating children for the element, you have to create them and add "slot='item'" to all of them. Shadowroots are great when you need encapsulation of styles or static non-content UI, but with this outer element neither of those are true. There isn't any additional UI, nor styles. This is something I see a lot in lazy libraries - they automatically create a separate dom tree even if it isn't needed whatsoever. This tells me either the library requires this every time (going against the "lightweight / low memory" motto), or the developer for this one didn't have enough understanding of when to use shadowroots. That's not to say this is all bad though - their design system tokens are really nice and provide a lot of flexibility. I'll probably emulate a lot of them for the next webcomponent based design system I'm working on. Their algorithmic color palettes are interesting, but so far I've never found a solid algorithmic color generator - color is simply too tied to trends and too subjective to be algorithmically made. Curious to see it work in practice, and a shame they don't provide examples of it.
- infogulch 6y ago
  To clear my understanding of your first statement, you're saying that their "lightweight / low memory" claim is invalidated by components having one unnecessary level of nesting in DOM?
  - jsf01 6y ago
    No. They’re saying that it’s creating an entirely separate DOM tree unnecessarily by using shadow DOM where it isn’t needed. On a related note, I’m curious if anyone has a benchmark comparing performance and memory consumption when attaching a shadow root vs not.
  - jjcm 6y ago
    It's more than one unnecessary level of nesting in the DOM, it's that they're creating an entirely separate DOM tree they aren't using. I threw together a test using tachometer to demonstrate the differences: https://github.com/jjcm/shadowTests https://github.com/jjcm/shadowTests The results are here: https://raw.githubusercontent.com/jjcm/shadowTests/master/result.png https://raw.githubusercontent.com/jjcm/shadowTests/master/re... TL;DR - the withShadow element takes about twice as long to render as the withoutShadow element. Don't use them unnecessarily.
jhardy54 6y ago
This is great, I was hoping for another way to build websites that are completely broken with JavaScript disabled. Try selecting links on the sidebar or even just going to https://fast.design https://fast.design and see how broken it is. Sweet.
bengale 6y ago
I don't know if i'm missing something, but this seems crap. Its really ugly, and there isnt a lot there. Why wouldn't I just use BlueprintJs?
- deleted 6y ago
  [deleted]
mark_l_watson 6y ago
I need to check this out. I have been using Bootstrap for years, and would like to try something new. I am not a very good front end developer, even though my https://markwatson.com https://markwatson.com site is now about 27 years old. I want something batteries included.
megaman821 6y ago
It looks like LitElement but more TypeScript first. The decorators do make it a bit more approachable for me.
- spankalee 6y ago
  LitElement is written in TypeScript so has great typings for all APIs, and TypeScript (and Babel 7) decorators. There's also a template type-checker CLI, compiler plugin, and VS Code extension: https://github.com/runem/lit-analyzer https://github.com/runem/lit-analyzer The big difference from Fast is that LitElement's render() method is an instance method, so it can access any state with `this.` and any properties and methods it uses can be overridden. But it's all just as declarative: import { LitElement, customElement, property, html } from 'lit-element'; @customElement('hello-world') export class HelloWorldElement extends LitElement { @property() name: string = 'World'; render() { return html` <h1>Hello ${this.name}</h1> `; } } We have decorators for reactive properties, registering elements, shadow root queries, and adding event listener options to methods: https://lit-element.polymer-project.org/guide/decorators https://lit-element.polymer-project.org/guide/decorators
  - megaman821 6y ago
    Yeah, LitElement definitely has a cleaner render template. How would one do a computed property in LitElement?
    - spankalee 6y ago
      You really don't need any special for a computed property. I'd start with a simple getter: class MyElement extends LitElement { @property() value: number = 42; get valueSquared() { return this.value ** 2; } } If the value is expensive to compute you can memoize it in the getter, or set it in update.
qppo 6y ago
The "fast slider" is a perfect example of how animations make something perceptually slower, and might even be problematic as it implies the underlying value change is lagging behind the UI update.
- dsego 6y ago
  The slider thing is horrible, it animates while dragging so it looks like it's lagging behind the cursor.
- ourcat 6y ago
  While sliding it from 0% to 100%, the 'thumb cursor' reaches 100% before the mouse pointer does, after some strange animation 'jumps' which have no bearing on the step value setting. Also, clicking anywhere on the bar doesn't set the slider to the centre of the click. They don't appear to be making the correct calculations based on Bounding Client Rects and Offset widths.
- tehbeard 6y ago
  That Slider's unusable on mobile. Seems to just be click for a value, hope you don't need to make a small tweak.
moneywoes 6y ago
Slider doesn't work for me on Chrome Android.
reaperducer 6y ago
So, is this Microsoft's iteration of a more modern jQuery? Forgive me if I don't get what's happening here. The coffee maker broke last night.
andybak 6y ago
Is it just me or is the first thing you want to to see and try the damn things out? Ctrl+F "Demo" - nope. I think I found them eventually under "Component Explorer" - but that's in the secondary nav and not in the main menu.
ramon 6y ago
I was looking at the code it looks optimized, will do a couple of tests later maybe combining this as the main webcomponent controller with something like tailwind css makes sense, but just using this plain look and feel I don't think it's viable at this moment but it's a good structural start I would say. Was looking forward to do this with lit so maybe I might test this and see how the code looks, from a code output perspective it looks promising let us see this with something like snowpack. Till now Lit looks a lot easier to use and all let us see how it goes.
- jokab 6y ago
  maybe hook us up with a writeup later? im interested in whatever you find out.
  - ramon 6y ago
    Sure I do write ups on linkedin follow me there: https://www.linkedin.com/in/ramonck https://www.linkedin.com/in/ramonck
- CuddleBunny 6y ago
  I'm using FAST with the design system props mapped to Tailwind config for my Blazor app team. This lets them consume the awesomeness without writing JS.
  - ramon 6y ago
    That is a great idea and usage. I was thinking about a Blazor setup.. but I will think more about the approach first. I think in a very near future a Fast-Tailwind repo will arrise.
eimg 6y ago
To my understanding, the point of this system is not actually how its default component looks or how rich the default components set are. It's to provide a framework to create Custom HTML Elements (which are browser native?) that we can re-use across projects with different front-end frameworks. e.g., Creating a React Button component using Fast Button like this: `const ReactButton = () => <fast-button>Button</fast-button>`
- mkl 6y ago
  Okay, but how its default components look and how rich the default component set is is how you sell the benefits of such a component creation system. As it is, it makes it look like you can only make limited, badly designed components.
darepublic 6y ago
On mobile Firefox the side menu is quite janky
sholladay 6y ago
Microsoft recently wrote a blog post saying they would be rallying around a single component library. [1] > What’s in a name? A lot it turns out. And we have a lot of them. Too many? We hear you and agree. That’s one of the key reasons we’re simplifying our story. To collectively rally around a single UI library for our web components—Fluent UI. Yet, here we are, and they've released another component library. They really seem to love these things. It's not entirely clear what the difference is between them. 1: https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/ https://developer.microsoft.com/en-us/office/blogs/ui-fabric...
- fassssst 6y ago
  Fluent UI is the one the Office team is standardizing on. FAST is from the Edge team and used for their settings pages. That’s life at BigCo for ya.
- flowerlad 6y ago
  The components part of Fast has moved to Fluent. See https://github.com/microsoft/fast/#fast-components-msft https://github.com/microsoft/fast/#fast-components-msft "This package has been moved to FluentUI and has been renamed to @fluentui/web-components"
dainiusse 6y ago
Don't want to be ride but that is yet more JavaScript fragmentation. That's it
- megaman821 6y ago
  Is it really? Web components seem good for reusable components and design systems. If you are making a reusable component like a switch, you make a web component (maybe with a helper library like Stencil, LitElement, or FastElement). If you are feeling nice you can create thin wrappers for React and Vue. As a consumer you just use an import and an HTML tag. If you take a bunch of reusable components and a theming system. Now you have a design system, but it is still just as easy to consume. For most front-end developers the choices remain the same. Build your site with React, Vue, or whatever you normally use.
ggregoire 6y ago
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.
nojvek 6y ago
Have >3 years of experience working with web components full time. 1) Their templating library has a learning curve. It's not quite like svelte, nor like JSX. If you have templates as strings that aren't typechecked, it makes it really hard to work on large code bases where the components are built by someone else and you're the consumer. I remember breaking powerbi.com due to missing > in an angular template that ended up in prod that only triggered for non english customers. It was a hard lesson that day never to touch untyped string based templates ever again. It's so easy to miss something. You want strict compile time checks, not run time. 2) Being dependent on slots. It's not easy to watch for changes in attributes to a slotted child. Yes you can add mutation observers but they aren't cheap either. All sorts of bugs poped up because some code does querySelector(x).setAttribute on a slotted child but the parent doesn't rerender and the UI doesn't look right. We ended up going to json strings inside attributes so components take their inputs via attrs rather than reading slotted children. The other avenue is props (like ionic), but props don't show up in dom explorer, so you have to make the tradeoff. 3) the 3rd big gotcha of web components. Attributes are strings. You have to serialize and deserialize from strings. Sure you can listen to when they change via attributeChangedCallback and get immutability for free because of serialization, but that comes at a perf cost. for deeply nested objects, you have to serialize and deserialize from json. All in all, I love that Microsoft is doing web components. Webcomponents are part of native dom api with simple lifecycle api. They're neat.
- flowerlad 6y ago
  You can use JSX to implement as well as consume Web Components. See here: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder This gives you compile-time checks, and attributes can be objects.
- CuddleBunny 6y ago
  The template strings are sort of typed, using tagged template literals. These even come with editor support using extensions previously built for lit-html and the like.
  - flowerlad 6y ago
mrweasel 6y ago
> fast-anchor is a web component implementation of an HTML anchor element. Wait, what.... WHY? Can't you just use an a tag?
- Vinnl 6y ago
  I was equally confused by fast-divider. I wonder what the rationale behind these were?
  - CuddleBunny 6y ago
    The primary reasons seem to be encapsulating accessibility and styles. There is nothing forcing you to use fast-anchor or divider. The theme is exposed in CSS vars so you can use it from a stylesheet on native elements.
chrisweekly 6y ago
Web Components, as a standard, remain problematic. Among other things, they fail to address the critical need for server-side rendering.
- ramon 6y ago
  I don't think that was the objetive of Web Components at all but to really create open standards around what React started a long time ago. Server-side rendering is not going away ever, there will always be a way to optimize things and to do tree-shaking and all so don't think that a new technology replaces everything else the rest of the eco-system will still remain with a clear purpose. You can do a small little project without builds and all but every "real" project will still need a build process in the end this concept was inherited from Continuous Integration and it's not going away.
- zelly 6y ago
  I think a Web Component is meant to be like a <div/>. It's one of the pieces that you render on the server. That way the client is dumb and just implements a design language in Web Components/JS, and the server sends commands to lay them out with data already bound.
MR4D 6y ago
Possibly the best commercial for Microsoft is how ...fast... this site is. (clearly the pun was unavoidable, which is evident in their name selection) Honestly, one of the quickest loading & changing sites I've seen, and gives HN a run for its money!
azinman2 6y ago
I find it hilarious that they put a dark mode toggle in the corner (why would I want this on a per-website basis?) that doesn't even change the rendering of their sample components (the only reason I can think why that would be useful).
- ggregoire 6y ago
  > I find it hilarious that they put a dark mode toggle in the corner (why would I want this on a per-website basis?) They detect your OS preference and display their light/dark style automatically based on that [1]. The toggle is just there if you wanna switch it manually. My Mac is in dark mode but I usually prefer reading docs in light mode, so that toggle is handy. Agree that it should update the background of the examples tho. Probably just a bug or something they didn't think about. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  - azinman2 6y ago
    If that's the case then I think you should take your Mac out of dark mode. If we have to put it in every app and webpage in a non-standard way, then that suggests that dark mode itself is broken. That it doesn't change the example on the web page seems like a giant oversight, or a rendering error on Safari.
    - mkl 6y ago
      It's there so developers can look at the components in both colour schemes.
- simooooo 6y ago
  That sounds positively hilarious... rather you would just poop on other people’s work
mattlondon 6y ago
A lot of the components don't appear to work? Checkboxes, radios, sliders. There are also weird extra spaces and alignment issues on things like basic links or the list numbers in the tab demo. Bit of a shame This is on Firefox on Android.
dynamite-ready 6y ago
At first glance, while the intro tries to differentiate the product from Fluent UI, I doubt anyone, even the most enthusiastic devotees, would read this... "Have you ever needed a reusable set of UI components that you could drop into your app and have an amazing experience? That's FAST." ...and think 'That's FAST'. They'd immediately think "That's Fabric (or Fluent)".
unnouinceput 6y ago
I like their transparent implementation. Went to text-area expecting ...something else, but I got Microsoft instead ¯\_(ツ)_/¯ Is this a pre-pre alpha preview of the preview? Because it feels like
mishkovski 6y ago
It looks like alternative for https://material.io/ https://material.io/
the-dude 6y ago
And I was thinking they bought this for $1.3bn in 2008 : https://searchengineland.com/microsoft-to-buy-fast-search-for-123-billion-13082 https://searchengineland.com/microsoft-to-buy-fast-search-fo...
rwieruch 6y ago
For anyone who is interested in seeing a practical example of using web components in a library like React https://www.robinwieruch.de/react-web-components https://www.robinwieruch.de/react-web-components Last year I worked for a large company which had Angular and React teams, so the idea was to use web components for their UI library and then just let the angular and react teams write wrapper for these components. I had to prototype how to use web components in react.
wslh 6y ago
I always wonder where is the VB6/Windows Forms for web apps. I don't want to know the intricacies of Rect/Angular/Vue, I just want to do a declaration of the UI, not programming. Zillions of apps doing the same thing and spending weeks and months on the same problems. I start to think that this is not interesting for, for example, Microsoft because the developer market will shrink and their developers, developers, developers mantra. I remember when Bootstrap come up and suddenly we don't need a lot of graphic design time to build a web page. Just an additional note about VB6/Windows Forms. They helped to build commodity UIs but when you needed more advanced one you should rely on specific components.
- Animats 6y ago
  I always wonder where is the VB6/Windows Forms for web apps? Me too. Dreamweaver once did that. But the Javascript/CSS crowd complicated layout so much that writing WYSIWYG layout tools became extremely difficult. Blue Griffon is perhaps the last remnant of that era.
- mstijak 6y ago
  CxJS tries to solve common UI problems related to CRUD apps and dashboards. https://cxjs.io https://cxjs.io
- jokab 6y ago
  > I always wonder where is the VB6/Windows Forms for web apps. they tried. it's called asp.net webforms. it sucked hard. bécause they forced event driven paradigm in a stateless environment (http) resulting to hacks (hello viewstate). but hey it was my gateway drug into web development as a winforms guy. im the sucker and i shouldnt be complaining. but 15 years later im back to aspnet webforms because of legacy apps the client doesn't want to upgrade yet.
red_admiral 6y ago
Pet hate: SQUARE radio buttons (https://explore.fast.design/components/fast-radio-group https://explore.fast.design/components/fast-radio-group) In case it makes any difference: I'm on Win10, Edge 84.
- erikig 6y ago
  Ditto on OSX+Chrome
deleted 6y ago
[deleted]
EisenbergEffect 6y ago
Howdy! I'm the architecture lead on FAST at Microsoft. There's a great conversation here with lots of questions, so I thought I would chime in and try to clarify a few things. The first point of note is that FAST is built on Web Component standards. I see a number of comments that indicate some folks aren't familiar with Web Components. So, let me give a brief explanation. First, the term "Web Components" is an umbrella term. You may remember when the industry used to talk about "HTML5". This was also an umbrella term for a collection of new HTML standards. Similarly, "Web Components" refers to a collection of standards related to creating reusable custom HTML elements. Some of the standards that are under the umbrella include the ability to define new custom element tags, a standard component lifecycle, encapsulated HTML rendering and encapsulated CSS (shadow dom), CSS properties, CSS Shadow Parts, and more. These are all defined by W3C and have shipped in all major browsers today. The work on Web Component standards, like the rest of the web, is ongoing. New APIs continue to be designed and released. Some recent APIs include form associated custom element APIs and CSS Shadow Parts. W3C is currently working on standards for things like constructible style sheets, declarative Shadow DOM, custom element registries, custom states/pseudo selectors, and more. Microsoft, Google, Salesforce, and many others are working together on this. Because FAST is built on Web Components, it does not create its own component model; it's using the standard component model. What has traditionally been thought of as a "front-end framework" typically has its own component model, not based on web components. Examples of this include Angular, React, Vue, Svelte, etc. Any library that is based on web components isn't trying to create its own model, but rather to leverage the standards. This allows a web component to work like any normal HTML element. You do not need a framework to use them. However, if you want, you can use them in combination with a framework of your choice, or jQuery, or whatever. To drive the point home that these are web standards, here are 4 lines of code that you can execute in a modern browser console to define, create, and add a web component. You can even execute it in this Hacker News page using DevTools. // define the custom element class class HelloWorld extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }).innerHTML = 'Hello World'; } } // register the custom element by tag name customElements.define('hello-world', HelloWorld); // create an instance of your new element const ele = document.createElement('hello-world'); // add your new element to the body document.body.appendChild(ele); If you do this in your console now, you'll be able to scroll down to the end of the page and see your component rendering. Have a look in the element inspector and you'll see the custom tag, along with its shadow dom, including "Hello World". When you start to build web components, you're likely to notice that there's a pretty large amount of code you need to write to implement even a basic component. That's because the standard defines low-level protocols, rather than high-level abstractions. By doing this, the standard provides you with interoperability and flexibility to innovate without boxing you in. At this point, something like FAST comes along and provides a thin layer of opinions, lifting the level of abstraction just enough to make it easier and FASTer to build components. Things that FAST helps with include: providing attribute/property syncing, rich Model-View-ViewModel (MVVM), template rendering/update, style composition, etc. All of this is an internal implementation detail of a FAST component, allowing FAST to integrate with Web Components built in completely different ways or with different libraries. The entire fast-element library, without tree-shaking, is around 10kb minified and GZipped. It was designed for tree-shaking from the beginning, so any feature you don't use when building a component will be removed during build, allowing you to get it smaller based on your needs. Architecturally, today FAST is composed of 3 layers. At the lowest level is fast-element, which provides a basic mechanism for defining components. For many people, this is all they need. However, others need an actual component library to build their site/app with, and often times they need control over the look/feel/branding. To address this, you can add the second layer, fast-foundation, which provides a set of building blocks for creating component libraries and design systems. It itself is not a component library. Rather, it has the base behaviors for standard components like button, tree view, menu, etc. It also has the basic functionality that design systems typically need, such as color algos, design tokens (design variables), typography primitives, etc. Foundation allows you to build your own button, tree-view, etc, without having to design the semantic HTML, work out the correct Aria behaviors, mess with proper keyboard nav, manage the JavaScript state and behavior, etc. Instead, you can compose together a foundation button and foundation template with your own styles, giving you complete control over the appearance of your components. With these building blocks, it's possible to implement something like Bootstrap, Material Design, Lightning, etc. However, if you don't need to implement your own design system, you can use one that we build. This is the third layer. We provide two design systems today. One is called FAST Frame (featured on our web site). The other is Fluent UI Web Components. FAST Frame is an early, experimental design system that our team is working on. I saw some feedback below that it's "ugly" :‑D As mentioned, this design system is a work in progress, being designed and developed in the open. So, we welcome you to contribute to the project and help us define something that the industry would feel proud to use in their apps. As for Fluent UI Web Components, Fluent UI is Microsoft's design language. I saw some comments below about how Microsoft was trying to consolidate and that FAST seems to add yet another option. The consolidation work is around our design system first. So, we're moving to a single design system "Fluent UI" across the company. We're then consolidating implementations as appropriate. Previously, there were several React implementations. There's work ongoing to consolidate that into a single React implementation. But what about people who don't use React? Well, that's what Web Components are for. FAST is providing the Fluent UI Web Components implementation. So, regardless of what platform, framework, etc. you use there will be a best fit implementation that provides you with a consistent Fluent UI experience.
badrchoubai 6y ago
I really love watching companies adopt the Web Components standard, Apple's adoption of it for building Apple Music's web player got me interested in learning them.
c-smile 6y ago
How I would do that in Sciter: fast.css : fast-something { // custom element aspect: FastSomething; // its function-controller display:block; } script: function FastSomething() { // note JSX is built-in in Sciter this.content( <b>Hello World</b> ); } and markup: <style src="fast.css" /> <body> <fast-something /> </body> Easy, no?
- DethNinja 6y ago
  I love Sciter and it is pretty amazing for what it does, but I still wouldn’t use it to share internal web component libraries within my own company, never mind some other 3rd party. Sciter unfortunately uses it’s own dialect of JavaScript and CSS which might not be compliant with browser JavaScript engines. I really wish Sciter would move to some other commonly used JS engine and get rid of TIScript, then I would be more confident with creating an internal library, at least I would be able to use web components in a cross compliant way between browsers and Sciter.
  - c-smile 6y ago
    That's just an illustration of how it can be done otherwise. The only non-standard thing there is that CSS glue construct: selector { aspect: Func url(script.js); } It tells that as soon as element matching that selector will appear in the DOM it will have Func() called (from script.js). No complex abstractions are required. "to share internal web component libraries within my own company, never mind some other 3rd party" My pardon, I didn't get the "to share" part, who share, what, and with whom?
    - DethNinja 6y ago
      I meant creating a web component based widget library and sharing that for use on anything from desktop GUIs to web sites. Sciter’s approach is pretty much the same approach used by web components (combining css/html/js to a single reuseable element). Unfortunately it isn’t 100% compliant with browser based web components and hence Sciter based widget libraries can not be used for web sites or vice versa.
trenchgun 6y ago
That is some seriously cheesy but brilliant copywriting!
r-w 6y ago
For anyone who would like to take a look at the code for the respective packages, here it is: https://github.com/microsoft/fast/tree/master/packages/web-components https://github.com/microsoft/fast/tree/master/packages/web-c...
fareesh 6y ago
The slider performs terribly on Android Chrome
kingnight 6y ago
I could have bet there was a low quality / compressed image on this when I saw Microsoft. Low and behold the site logo is low res. Why is that at MS... Switching to teams everyone’s face turned to mush which while it might save on aggregate network traffic, it greatly reduces the niceness of the conversation.
manigandham 6y ago
The project homepage is easier to understand than text: https://www.fast.design/ https://www.fast.design/ And here's a ASP.NET Community Standup session that goes through the FAST framework by one of the core developers: https://www.youtube.com/watch?v=sYTH_xYH3iA https://www.youtube.com/watch?v=sYTH_xYH3iA
rondennis 6y ago
On a side note, is Microsoft acquiring Tik Tok?
deleted 6y ago
[deleted]
russellbeattie 6y ago
Oof. When will this "dark mode" fad end?!? Is this project made for edgy 14 year olds or actual professionals? (Yes, yes. You can switch some of the site to light mode and, besides, you're an elite uber-hacker and white text on black background is totally easier on your eyes, and you always read everything like that since blahblahblahblahblah. Uh-huh. There's reasons we've been printing with black ink on white paper for 500 years.)
cryptozeus 6y ago
Not responsive, in 2020 ?
zelly 6y ago
Even though they may be slow and have an unusable API, Web Components being built into browsers means they will continue to work long after React, Vue, etc. are all dead and unmaintained.
- abraham 6y ago
  What makes you say web components are slow or have an unstable API?
  - zelly 6y ago
    It's slow and unusable, not unstable. The one benefit of WC is that it's going to be stable for the next hundred years, just like <marquee> still works in 2020. It's unusable because of all the boilerplate it requires and doesn't provide the most important thing of all which is data binding. So you have to bring in some other support code to do data binding such as the Rx/Observables or Redux patterns, but since this can't be shared with other shadow-rooted WCs, the cost of that bloat is multiplied by the number of different WCs you have on a page, which could be hundreds. In benchmarks WC scales very poorly compared to React. It just wasn't designed for performance. I could go on. - strings as the only native serialization format - templates are also strings - messages are passed to children as attributes which are strings - no way to take advantage of efficient tree algorithms (virtual DOM), just manipulate a giant string every tick like a caveman
    - c-smile 6y ago
      You'd be surprised but in general this element.html = "..."; is faster then ReactDOM.render(vdom,dom); at least for initial DOM tree population. There are many reasons for that. `element.html =` is implemented as single update transaction, JS function call is significantly more expensive then HTML parsing of single element, etc.
      - zelly 6y ago
        This is thanks to how extremely optimized V8 and Chrome is for string manipulation. It is faster in the small cases but doesn't scale to, say, 10000 rows in a table. Then it becomes several orders of magnitude slower than React and virtual DOM. On low memory devices it could crash and never render. This should just be kept in mind when choosing WCs. WCs are perfectly fine for the Settings page in Edge, for example.
ruduhudi 6y ago
Love it when I'm on a design system's website and it's broken on mobile. https://postimg.cc/N509Z8Kr https://postimg.cc/N509Z8Kr
siquick 6y ago
One of the worst things about Windows and other Microsoft products is the design of their interfaces and typography - not sure why anyone would ever want to use their design principles for anything.
CraigJPerry 6y ago
Did the concept of atomic design never take off? A few years ago i remember various css and js bundles spawned around Brad Frost’s atomic design movement but i don’t recall any of them lately being on HN. It’s a shame if they’re not making the grade, i thought the idea of composable UI elements sounded spot on.
- HugoDaniel 6y ago
  Tailwindcss is getting quite big.i would dare to say mainstream even.
- CuddleBunny 6y ago
  I'm using FAST as a foundation for my atomic design revolution at my job. I'm gaining much traction!
varbhat 6y ago
It Looks and Feels very much like Google's Material Design.
sireat 6y ago
Does FAST checkbox component have some sort of delay built in? Compared to regular vanilla checkbox it seems to respond slower(100-200ms delay perhaps). This is on slowish 4G connection but that shouldn't matter.
StaticChamp 6y ago
Microsoft and design in the same sentence! They have come far.
- shp0ngle 6y ago
  What about "Windows 8 introduces new Metro Design language", huh
rakamotog 6y ago
For a non developer like me, Is it any different from Ant Design (https://ant.design/ https://ant.design/)? Also, almost every company I worked with (> 500 employees), eventually built their own UI components. And in every company, developers seldom use these, always customize or use something else. Which brings the question - Why do we invest (internally) and open source components? Whats the value?
- scns 6y ago
  Ant shipped 1MB CSS minified, last time i used it at work.
Omnipresent 6y ago
Very interested in the background image on their home page that slowly animates as well. That looks really great. Anyone know how are they doing that? https://fast.design/ https://fast.design/
- flowerlad 6y ago
  The background image is a <canvas> element on which they draw using JavaScript.
winrid 6y ago
Ha, can we add fast-comments as a component? :)
ramon 6y ago
I just wrong a little tutorial on FAST with Snowpack if anyone interested: https://www.linkedin.com/pulse/microsoft-fast-snowpack-ramon-lima/ https://www.linkedin.com/pulse/microsoft-fast-snowpack-ramon...

623 points by no_wizard 6y ago

nathanaldensr 6y ago

Allow me to ask the obvious question: How does Fast compare against React, Angular, VueJS, etc.?

atarian 6y ago
Apples and oranges. A design system is a collection of components that fit a certain look-and-feel; it is not tied to the implementation so it can be implemented by React, Angular, or VueJS: https://www.fast.design/docs/integrations/introduction https://www.fast.design/docs/integrations/introduction
arsome 6y ago
My understanding is this is closer to something like Bootstrap but using Web Components (or material-ui if you want a react component set) than it is to React itself. You'd probably still want to use React or similar ontop of it, but in the future we might get much lighter libraries covering that side of things.
deleted 6y ago
[deleted]
sreekotay 6y ago
Appears to be a custom HTML elements (and some helper libraries) that you can plugin to vanilla, Vue, React, etc?
crooked-v 6y ago
Well, the focus on Web Components is good for cross-compatibility, but means not being able to do the full static analysis of components that you can do with JSX or equivalents.
moenarch 6y ago
That's FAST!
lucideer 6y ago
It doesn't. It's more comparable to something like Google Polymer[0] They can be used in conjunction with eachother[1][2], so I'd imagine the same/similar would be possible with Fast. [0] https://en.wikipedia.org/wiki/Polymer_(library) https://en.wikipedia.org/wiki/Polymer_(library) [1] https://www.digitalocean.com/community/tutorials/vuejs-vue-integrate-web-components https://www.digitalocean.com/community/tutorials/vuejs-vue-i... [2] https://github.com/jscissr/react-polymer#readme https://github.com/jscissr/react-polymer#readme
- kutorio 6y ago
  It reminds me more of https://material-ui.com/ https://material-ui.com/
bokchoi 6y ago
From this page: https://www.fast.design/docs/fast-element/observables-and-state https://www.fast.design/docs/fast-element/observables-and-st... > The arrow function bindings and directives used in templates allow the fast-element templating engine to intelligently react by only updating the parts of the DOM that actually change, with no need for a virtual DOM, VDOM diffing, or DOM reconciliation algorithms. This approach enables top-tier initial render time, industry-leading incremental DOM updates, and ultra-low memory allocation. > When a binding is used within a template, the underlying engine uses a technique to capture which properties are accessed in that expression. With the list of properties captured, it then subscribes to changes in their values. Any time a value changes, a task is scheduled on the DOM update queue. When the queue is processed, all updates run as a batch, updating precisely the aspects of the DOM that have changed. That's neat.
dudus 6y ago
At first glance it seems the fast-components are akin to material components and fast-foundation kinda reminds of angular cdk

pearjuice 6y ago

Kind of surprises me that Microsoft allowed this project to use Discord for external communication.

throwaways885 6y ago
Why not? It's incredibly popular.
CuddleBunny 6y ago
Teams doesn't have a free public mode at this time so it sounds like the best option to me. There are official Microsoft instances of Slack and Gitter as well and teams seem to be given a fair degree of freedom.

Datsundere 6y ago

There are plenty of these libraries. Can someone tackle the hot mess css is? Give me one way of doing things. Css breaks do much shit for me to the point where I don’t want to code

crooked-v 6y ago
If you use React, you might like Rebass (https://rebassjs.org/getting-started https://rebassjs.org/getting-started), which turns the most common CSS attributes into component props with assorted built-in functionality for common theming and media queries, or Emotion (https://emotion.sh/docs/introduction https://emotion.sh/docs/introduction), which lets you composably define CSS per component that automatically gets scoped to that component only. Both are designed in a way that still render efficiently, such as turning static CSS rules into statically-defined bundles and only swapping out the dynamic bits on the fly.

timvisee 6y ago

Took a quick look: It has limited components. It isn't fast on my mobile device. Some components appear to be broken. Why would I ever use this?

mey 6y ago
Sliders and radio buttons do not seem to work on Firefox for Android nightly build.
- GrayShade 6y ago
  Neither do they seem to work in desktop Nightly.
XCSme 6y ago
Agree, UI and UX is really bad for the components demo, but I think their goal is not to be an UI framework, but a step before that? I am very confused about what they are trying to achieve and how. I personally that think this project has no future.

d0m 6y ago

There are many design issues with their website which IMHO don't provide great confidence in using their components

deleted 6y ago
[deleted]

pjmlp 6y ago

For those that miss it, the dark mode can be turned off on the top right corner.

su8898 6y ago

Not sure if it's just me but I kind of feel like these components are not very polished - at least not to the point of Bootstrap/AntDesign. May be it's the square unrounded borders or may be it's just the way the demo components are presented.

duopixel 6y ago

Check out the FAST Component explorer to see it in action: https://explore.fast.design/ https://explore.fast.design/ Looks very flexible but the presentation and default design is horrible.

neogodless 6y ago
I would imagine the design convention is to show a + when you have more content hidden, and a - to indicate you can hide (minimize) it. Is that the popular consensus, or is that an odd way of looking at it?
- achr2 6y ago
  Yeah, this threw me as well, it is implemented incorrectly..
- yodon 6y ago
  The accordion tag doesn't make any assumptions about icons. You can use smiley faces & frowny faces for open and closed if you prefer, or you can use plus and minus signs in either order or anything else. The bigger more systemic documentation issue is the examples pages lack a view example source mode so there isn't an easy way to discover that icons are a user choice thing rather than a prebuilt styling thing.
klohto 6y ago
The default design looks awful, especially on phone. I’m not a frontend dev, but I don’t see any reason why would I use this instead of, for example, Bootstrap for sideprojects. Can some FE comment on the project usefulness? Why go with Fast?
- WorldMaker 6y ago
  The impression I get is FAST is trying to simplify the markup you see in for instance Bootstrap's documentation by trying to build standard components that Bootstrap themselves could use (or Material or their own Fluent stuff). The emphasis is on a lot of the little things in Bootstrap's documentation that doesn't either get copy/pasted or it gets copy and pasted and ignored/forgotten/left-to-bit-rot. Stuff like aria- tags for accessibility. Seems the idea here is that by baking them into web components that do most of the work for you they are less likely to be forgotten or left to bit-rot. (I'm not a front end dev myself, but do enough full stack to think I know what is going on here.)

pcr910303 6y ago

Ok, so it looks like the main point of this is fast-components, which is a just a bunch of components styled as MS-style, but I'm more interested in the fast-foundation package. According to the instructions: > The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior. > it exports parts and pieces intended to be composed into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations. Which means... if I want to make my own components, I can just take this package and don't worry about making broken components. Since the core HTML/JS is properly taken care (by MS, hopefully) I can less worry about re-implementing keyboard access, or things like accessibility which is hard to do properly. This is IMO huge, and should be more universal.

RubenvanE 6y ago
The foundation package sounds a lot like the Lion components that ING Bank open sourced last year. It is indeed super handy to not have to worry about all the browser compatibility and accessibility issues!
- spankalee 6y ago
  Link to Lion's storybook demos for those interested: https://lion-web-components.netlify.app/?path=/story/intro-lion-web-components--page https://lion-web-components.netlify.app/?path=/story/intro-l...
  - Arkdy 6y ago
    Any idea how FAST compares to using storybook directly? ( https://storybook.js.org/ https://storybook.js.org/ )
    - spankalee 6y ago
      Fast is a set of components (and a base class). Storybook is a way to demo components.

jjcm 6y ago

I love seeing a wider adoption of webcomponents, but I have some complaints about this library, mainly because they're really pushing the whole, "lightweight and low memory" lines. Take a look at the accordian component (the very first one in their system) and check it out in the dom inspector - it has a shadowroot that has precisely one child: a <slot> element. In this situation a shadowroot does nothing to help. All it means is instead of just creating children for the element, you have to create them and add "slot='item'" to all of them. Shadowroots are great when you need encapsulation of styles or static non-content UI, but with this outer element neither of those are true. There isn't any additional UI, nor styles. This is something I see a lot in lazy libraries - they automatically create a separate dom tree even if it isn't needed whatsoever. This tells me either the library requires this every time (going against the "lightweight / low memory" motto), or the developer for this one didn't have enough understanding of when to use shadowroots. That's not to say this is all bad though - their design system tokens are really nice and provide a lot of flexibility. I'll probably emulate a lot of them for the next webcomponent based design system I'm working on. Their algorithmic color palettes are interesting, but so far I've never found a solid algorithmic color generator - color is simply too tied to trends and too subjective to be algorithmically made. Curious to see it work in practice, and a shame they don't provide examples of it.

infogulch 6y ago
To clear my understanding of your first statement, you're saying that their "lightweight / low memory" claim is invalidated by components having one unnecessary level of nesting in DOM?
- jsf01 6y ago
  No. They’re saying that it’s creating an entirely separate DOM tree unnecessarily by using shadow DOM where it isn’t needed. On a related note, I’m curious if anyone has a benchmark comparing performance and memory consumption when attaching a shadow root vs not.
- jjcm 6y ago
  It's more than one unnecessary level of nesting in the DOM, it's that they're creating an entirely separate DOM tree they aren't using. I threw together a test using tachometer to demonstrate the differences: https://github.com/jjcm/shadowTests https://github.com/jjcm/shadowTests The results are here: https://raw.githubusercontent.com/jjcm/shadowTests/master/result.png https://raw.githubusercontent.com/jjcm/shadowTests/master/re... TL;DR - the withShadow element takes about twice as long to render as the withoutShadow element. Don't use them unnecessarily.

jhardy54 6y ago

This is great, I was hoping for another way to build websites that are completely broken with JavaScript disabled. Try selecting links on the sidebar or even just going to https://fast.design https://fast.design and see how broken it is. Sweet.

bengale 6y ago

I don't know if i'm missing something, but this seems crap. Its really ugly, and there isnt a lot there. Why wouldn't I just use BlueprintJs?

deleted 6y ago
[deleted]

mark_l_watson 6y ago

I need to check this out. I have been using Bootstrap for years, and would like to try something new. I am not a very good front end developer, even though my https://markwatson.com https://markwatson.com site is now about 27 years old. I want something batteries included.

megaman821 6y ago

It looks like LitElement but more TypeScript first. The decorators do make it a bit more approachable for me.

spankalee 6y ago
LitElement is written in TypeScript so has great typings for all APIs, and TypeScript (and Babel 7) decorators. There's also a template type-checker CLI, compiler plugin, and VS Code extension: https://github.com/runem/lit-analyzer https://github.com/runem/lit-analyzer The big difference from Fast is that LitElement's render() method is an instance method, so it can access any state with `this.` and any properties and methods it uses can be overridden. But it's all just as declarative: import { LitElement, customElement, property, html } from 'lit-element'; @customElement('hello-world') export class HelloWorldElement extends LitElement { @property() name: string = 'World'; render() { return html` <h1>Hello ${this.name}</h1> `; } } We have decorators for reactive properties, registering elements, shadow root queries, and adding event listener options to methods: https://lit-element.polymer-project.org/guide/decorators https://lit-element.polymer-project.org/guide/decorators
- megaman821 6y ago
  Yeah, LitElement definitely has a cleaner render template. How would one do a computed property in LitElement?
  - spankalee 6y ago
    You really don't need any special for a computed property. I'd start with a simple getter: class MyElement extends LitElement { @property() value: number = 42; get valueSquared() { return this.value ** 2; } } If the value is expensive to compute you can memoize it in the getter, or set it in update.

qppo 6y ago

The "fast slider" is a perfect example of how animations make something perceptually slower, and might even be problematic as it implies the underlying value change is lagging behind the UI update.

dsego 6y ago
The slider thing is horrible, it animates while dragging so it looks like it's lagging behind the cursor.
ourcat 6y ago
While sliding it from 0% to 100%, the 'thumb cursor' reaches 100% before the mouse pointer does, after some strange animation 'jumps' which have no bearing on the step value setting. Also, clicking anywhere on the bar doesn't set the slider to the centre of the click. They don't appear to be making the correct calculations based on Bounding Client Rects and Offset widths.
tehbeard 6y ago
That Slider's unusable on mobile. Seems to just be click for a value, hope you don't need to make a small tweak.

moneywoes 6y ago

Slider doesn't work for me on Chrome Android.

reaperducer 6y ago

So, is this Microsoft's iteration of a more modern jQuery? Forgive me if I don't get what's happening here. The coffee maker broke last night.

andybak 6y ago

Is it just me or is the first thing you want to to see and try the damn things out? Ctrl+F "Demo" - nope. I think I found them eventually under "Component Explorer" - but that's in the secondary nav and not in the main menu.

ramon 6y ago

I was looking at the code it looks optimized, will do a couple of tests later maybe combining this as the main webcomponent controller with something like tailwind css makes sense, but just using this plain look and feel I don't think it's viable at this moment but it's a good structural start I would say. Was looking forward to do this with lit so maybe I might test this and see how the code looks, from a code output perspective it looks promising let us see this with something like snowpack. Till now Lit looks a lot easier to use and all let us see how it goes.

jokab 6y ago
maybe hook us up with a writeup later? im interested in whatever you find out.
- ramon 6y ago
  Sure I do write ups on linkedin follow me there: https://www.linkedin.com/in/ramonck https://www.linkedin.com/in/ramonck
CuddleBunny 6y ago
I'm using FAST with the design system props mapped to Tailwind config for my Blazor app team. This lets them consume the awesomeness without writing JS.
- ramon 6y ago
  That is a great idea and usage. I was thinking about a Blazor setup.. but I will think more about the approach first. I think in a very near future a Fast-Tailwind repo will arrise.

eimg 6y ago

To my understanding, the point of this system is not actually how its default component looks or how rich the default components set are. It's to provide a framework to create Custom HTML Elements (which are browser native?) that we can re-use across projects with different front-end frameworks. e.g., Creating a React Button component using Fast Button like this: `const ReactButton = () => <fast-button>Button</fast-button>`

mkl 6y ago
Okay, but how its default components look and how rich the default component set is is how you sell the benefits of such a component creation system. As it is, it makes it look like you can only make limited, badly designed components.

darepublic 6y ago

On mobile Firefox the side menu is quite janky

sholladay 6y ago

Microsoft recently wrote a blog post saying they would be rallying around a single component library. [1] > What’s in a name? A lot it turns out. And we have a lot of them. Too many? We hear you and agree. That’s one of the key reasons we’re simplifying our story. To collectively rally around a single UI library for our web components—Fluent UI. Yet, here we are, and they've released another component library. They really seem to love these things. It's not entirely clear what the difference is between them. 1: https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/ https://developer.microsoft.com/en-us/office/blogs/ui-fabric...

fassssst 6y ago
Fluent UI is the one the Office team is standardizing on. FAST is from the Edge team and used for their settings pages. That’s life at BigCo for ya.
flowerlad 6y ago
The components part of Fast has moved to Fluent. See https://github.com/microsoft/fast/#fast-components-msft https://github.com/microsoft/fast/#fast-components-msft "This package has been moved to FluentUI and has been renamed to @fluentui/web-components"

dainiusse 6y ago

Don't want to be ride but that is yet more JavaScript fragmentation. That's it

megaman821 6y ago
Is it really? Web components seem good for reusable components and design systems. If you are making a reusable component like a switch, you make a web component (maybe with a helper library like Stencil, LitElement, or FastElement). If you are feeling nice you can create thin wrappers for React and Vue. As a consumer you just use an import and an HTML tag. If you take a bunch of reusable components and a theming system. Now you have a design system, but it is still just as easy to consume. For most front-end developers the choices remain the same. Build your site with React, Vue, or whatever you normally use.

ggregoire 6y ago

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.

nojvek 6y ago

Have >3 years of experience working with web components full time. 1) Their templating library has a learning curve. It's not quite like svelte, nor like JSX. If you have templates as strings that aren't typechecked, it makes it really hard to work on large code bases where the components are built by someone else and you're the consumer. I remember breaking powerbi.com due to missing > in an angular template that ended up in prod that only triggered for non english customers. It was a hard lesson that day never to touch untyped string based templates ever again. It's so easy to miss something. You want strict compile time checks, not run time. 2) Being dependent on slots. It's not easy to watch for changes in attributes to a slotted child. Yes you can add mutation observers but they aren't cheap either. All sorts of bugs poped up because some code does querySelector(x).setAttribute on a slotted child but the parent doesn't rerender and the UI doesn't look right. We ended up going to json strings inside attributes so components take their inputs via attrs rather than reading slotted children. The other avenue is props (like ionic), but props don't show up in dom explorer, so you have to make the tradeoff. 3) the 3rd big gotcha of web components. Attributes are strings. You have to serialize and deserialize from strings. Sure you can listen to when they change via attributeChangedCallback and get immutability for free because of serialization, but that comes at a perf cost. for deeply nested objects, you have to serialize and deserialize from json. All in all, I love that Microsoft is doing web components. Webcomponents are part of native dom api with simple lifecycle api. They're neat.

flowerlad 6y ago
You can use JSX to implement as well as consume Web Components. See here: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder This gives you compile-time checks, and attributes can be objects.
CuddleBunny 6y ago
The template strings are sort of typed, using tagged template literals. These even come with editor support using extensions previously built for lit-html and the like.
- flowerlad 6y ago

mrweasel 6y ago

> fast-anchor is a web component implementation of an HTML anchor element. Wait, what.... WHY? Can't you just use an a tag?

Vinnl 6y ago
I was equally confused by fast-divider. I wonder what the rationale behind these were?
- CuddleBunny 6y ago
  The primary reasons seem to be encapsulating accessibility and styles. There is nothing forcing you to use fast-anchor or divider. The theme is exposed in CSS vars so you can use it from a stylesheet on native elements.

chrisweekly 6y ago

Web Components, as a standard, remain problematic. Among other things, they fail to address the critical need for server-side rendering.

ramon 6y ago
I don't think that was the objetive of Web Components at all but to really create open standards around what React started a long time ago. Server-side rendering is not going away ever, there will always be a way to optimize things and to do tree-shaking and all so don't think that a new technology replaces everything else the rest of the eco-system will still remain with a clear purpose. You can do a small little project without builds and all but every "real" project will still need a build process in the end this concept was inherited from Continuous Integration and it's not going away.
zelly 6y ago
I think a Web Component is meant to be like a <div/>. It's one of the pieces that you render on the server. That way the client is dumb and just implements a design language in Web Components/JS, and the server sends commands to lay them out with data already bound.

MR4D 6y ago

Possibly the best commercial for Microsoft is how ...fast... this site is. (clearly the pun was unavoidable, which is evident in their name selection) Honestly, one of the quickest loading & changing sites I've seen, and gives HN a run for its money!

azinman2 6y ago

I find it hilarious that they put a dark mode toggle in the corner (why would I want this on a per-website basis?) that doesn't even change the rendering of their sample components (the only reason I can think why that would be useful).

ggregoire 6y ago
> I find it hilarious that they put a dark mode toggle in the corner (why would I want this on a per-website basis?) They detect your OS preference and display their light/dark style automatically based on that [1]. The toggle is just there if you wanna switch it manually. My Mac is in dark mode but I usually prefer reading docs in light mode, so that toggle is handy. Agree that it should update the background of the examples tho. Probably just a bug or something they didn't think about. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
- azinman2 6y ago
  If that's the case then I think you should take your Mac out of dark mode. If we have to put it in every app and webpage in a non-standard way, then that suggests that dark mode itself is broken. That it doesn't change the example on the web page seems like a giant oversight, or a rendering error on Safari.
  - mkl 6y ago
    It's there so developers can look at the components in both colour schemes.
simooooo 6y ago
That sounds positively hilarious... rather you would just poop on other people’s work

mattlondon 6y ago

A lot of the components don't appear to work? Checkboxes, radios, sliders. There are also weird extra spaces and alignment issues on things like basic links or the list numbers in the tab demo. Bit of a shame This is on Firefox on Android.

dynamite-ready 6y ago

At first glance, while the intro tries to differentiate the product from Fluent UI, I doubt anyone, even the most enthusiastic devotees, would read this... "Have you ever needed a reusable set of UI components that you could drop into your app and have an amazing experience? That's FAST." ...and think 'That's FAST'. They'd immediately think "That's Fabric (or Fluent)".

unnouinceput 6y ago

I like their transparent implementation. Went to text-area expecting ...something else, but I got Microsoft instead ¯\_(ツ)_/¯ Is this a pre-pre alpha preview of the preview? Because it feels like

mishkovski 6y ago

It looks like alternative for https://material.io/ https://material.io/

the-dude 6y ago

And I was thinking they bought this for $1.3bn in 2008 : https://searchengineland.com/microsoft-to-buy-fast-search-for-123-billion-13082 https://searchengineland.com/microsoft-to-buy-fast-search-fo...

rwieruch 6y ago

For anyone who is interested in seeing a practical example of using web components in a library like React https://www.robinwieruch.de/react-web-components https://www.robinwieruch.de/react-web-components Last year I worked for a large company which had Angular and React teams, so the idea was to use web components for their UI library and then just let the angular and react teams write wrapper for these components. I had to prototype how to use web components in react.

wslh 6y ago

I always wonder where is the VB6/Windows Forms for web apps. I don't want to know the intricacies of Rect/Angular/Vue, I just want to do a declaration of the UI, not programming. Zillions of apps doing the same thing and spending weeks and months on the same problems. I start to think that this is not interesting for, for example, Microsoft because the developer market will shrink and their developers, developers, developers mantra. I remember when Bootstrap come up and suddenly we don't need a lot of graphic design time to build a web page. Just an additional note about VB6/Windows Forms. They helped to build commodity UIs but when you needed more advanced one you should rely on specific components.

Animats 6y ago
I always wonder where is the VB6/Windows Forms for web apps? Me too. Dreamweaver once did that. But the Javascript/CSS crowd complicated layout so much that writing WYSIWYG layout tools became extremely difficult. Blue Griffon is perhaps the last remnant of that era.
mstijak 6y ago
CxJS tries to solve common UI problems related to CRUD apps and dashboards. https://cxjs.io https://cxjs.io
jokab 6y ago
> I always wonder where is the VB6/Windows Forms for web apps. they tried. it's called asp.net webforms. it sucked hard. bécause they forced event driven paradigm in a stateless environment (http) resulting to hacks (hello viewstate). but hey it was my gateway drug into web development as a winforms guy. im the sucker and i shouldnt be complaining. but 15 years later im back to aspnet webforms because of legacy apps the client doesn't want to upgrade yet.

red_admiral 6y ago

Pet hate: SQUARE radio buttons (https://explore.fast.design/components/fast-radio-group https://explore.fast.design/components/fast-radio-group) In case it makes any difference: I'm on Win10, Edge 84.

erikig 6y ago
Ditto on OSX+Chrome

deleted 6y ago

[deleted]

EisenbergEffect 6y ago

Howdy! I'm the architecture lead on FAST at Microsoft. There's a great conversation here with lots of questions, so I thought I would chime in and try to clarify a few things. The first point of note is that FAST is built on Web Component standards. I see a number of comments that indicate some folks aren't familiar with Web Components. So, let me give a brief explanation. First, the term "Web Components" is an umbrella term. You may remember when the industry used to talk about "HTML5". This was also an umbrella term for a collection of new HTML standards. Similarly, "Web Components" refers to a collection of standards related to creating reusable custom HTML elements. Some of the standards that are under the umbrella include the ability to define new custom element tags, a standard component lifecycle, encapsulated HTML rendering and encapsulated CSS (shadow dom), CSS properties, CSS Shadow Parts, and more. These are all defined by W3C and have shipped in all major browsers today. The work on Web Component standards, like the rest of the web, is ongoing. New APIs continue to be designed and released. Some recent APIs include form associated custom element APIs and CSS Shadow Parts. W3C is currently working on standards for things like constructible style sheets, declarative Shadow DOM, custom element registries, custom states/pseudo selectors, and more. Microsoft, Google, Salesforce, and many others are working together on this. Because FAST is built on Web Components, it does not create its own component model; it's using the standard component model. What has traditionally been thought of as a "front-end framework" typically has its own component model, not based on web components. Examples of this include Angular, React, Vue, Svelte, etc. Any library that is based on web components isn't trying to create its own model, but rather to leverage the standards. This allows a web component to work like any normal HTML element. You do not need a framework to use them. However, if you want, you can use them in combination with a framework of your choice, or jQuery, or whatever. To drive the point home that these are web standards, here are 4 lines of code that you can execute in a modern browser console to define, create, and add a web component. You can even execute it in this Hacker News page using DevTools. // define the custom element class class HelloWorld extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }).innerHTML = 'Hello World'; } } // register the custom element by tag name customElements.define('hello-world', HelloWorld); // create an instance of your new element const ele = document.createElement('hello-world'); // add your new element to the body document.body.appendChild(ele); If you do this in your console now, you'll be able to scroll down to the end of the page and see your component rendering. Have a look in the element inspector and you'll see the custom tag, along with its shadow dom, including "Hello World". When you start to build web components, you're likely to notice that there's a pretty large amount of code you need to write to implement even a basic component. That's because the standard defines low-level protocols, rather than high-level abstractions. By doing this, the standard provides you with interoperability and flexibility to innovate without boxing you in. At this point, something like FAST comes along and provides a thin layer of opinions, lifting the level of abstraction just enough to make it easier and FASTer to build components. Things that FAST helps with include: providing attribute/property syncing, rich Model-View-ViewModel (MVVM), template rendering/update, style composition, etc. All of this is an internal implementation detail of a FAST component, allowing FAST to integrate with Web Components built in completely different ways or with different libraries. The entire fast-element library, without tree-shaking, is around 10kb minified and GZipped. It was designed for tree-shaking from the beginning, so any feature you don't use when building a component will be removed during build, allowing you to get it smaller based on your needs. Architecturally, today FAST is composed of 3 layers. At the lowest level is fast-element, which provides a basic mechanism for defining components. For many people, this is all they need. However, others need an actual component library to build their site/app with, and often times they need control over the look/feel/branding. To address this, you can add the second layer, fast-foundation, which provides a set of building blocks for creating component libraries and design systems. It itself is not a component library. Rather, it has the base behaviors for standard components like button, tree view, menu, etc. It also has the basic functionality that design systems typically need, such as color algos, design tokens (design variables), typography primitives, etc. Foundation allows you to build your own button, tree-view, etc, without having to design the semantic HTML, work out the correct Aria behaviors, mess with proper keyboard nav, manage the JavaScript state and behavior, etc. Instead, you can compose together a foundation button and foundation template with your own styles, giving you complete control over the appearance of your components. With these building blocks, it's possible to implement something like Bootstrap, Material Design, Lightning, etc. However, if you don't need to implement your own design system, you can use one that we build. This is the third layer. We provide two design systems today. One is called FAST Frame (featured on our web site). The other is Fluent UI Web Components. FAST Frame is an early, experimental design system that our team is working on. I saw some feedback below that it's "ugly" :‑D As mentioned, this design system is a work in progress, being designed and developed in the open. So, we welcome you to contribute to the project and help us define something that the industry would feel proud to use in their apps. As for Fluent UI Web Components, Fluent UI is Microsoft's design language. I saw some comments below about how Microsoft was trying to consolidate and that FAST seems to add yet another option. The consolidation work is around our design system first. So, we're moving to a single design system "Fluent UI" across the company. We're then consolidating implementations as appropriate. Previously, there were several React implementations. There's work ongoing to consolidate that into a single React implementation. But what about people who don't use React? Well, that's what Web Components are for. FAST is providing the Fluent UI Web Components implementation. So, regardless of what platform, framework, etc. you use there will be a best fit implementation that provides you with a consistent Fluent UI experience.

badrchoubai 6y ago

I really love watching companies adopt the Web Components standard, Apple's adoption of it for building Apple Music's web player got me interested in learning them.

c-smile 6y ago

How I would do that in Sciter: fast.css : fast-something { // custom element aspect: FastSomething; // its function-controller display:block; } script: function FastSomething() { // note JSX is built-in in Sciter this.content( <b>Hello World</b> ); } and markup: <style src="fast.css" /> <body> <fast-something /> </body> Easy, no?

DethNinja 6y ago
I love Sciter and it is pretty amazing for what it does, but I still wouldn’t use it to share internal web component libraries within my own company, never mind some other 3rd party. Sciter unfortunately uses it’s own dialect of JavaScript and CSS which might not be compliant with browser JavaScript engines. I really wish Sciter would move to some other commonly used JS engine and get rid of TIScript, then I would be more confident with creating an internal library, at least I would be able to use web components in a cross compliant way between browsers and Sciter.
- c-smile 6y ago
  That's just an illustration of how it can be done otherwise. The only non-standard thing there is that CSS glue construct: selector { aspect: Func url(script.js); } It tells that as soon as element matching that selector will appear in the DOM it will have Func() called (from script.js). No complex abstractions are required. "to share internal web component libraries within my own company, never mind some other 3rd party" My pardon, I didn't get the "to share" part, who share, what, and with whom?
  - DethNinja 6y ago
    I meant creating a web component based widget library and sharing that for use on anything from desktop GUIs to web sites. Sciter’s approach is pretty much the same approach used by web components (combining css/html/js to a single reuseable element). Unfortunately it isn’t 100% compliant with browser based web components and hence Sciter based widget libraries can not be used for web sites or vice versa.

trenchgun 6y ago

That is some seriously cheesy but brilliant copywriting!

r-w 6y ago

For anyone who would like to take a look at the code for the respective packages, here it is: https://github.com/microsoft/fast/tree/master/packages/web-components https://github.com/microsoft/fast/tree/master/packages/web-c...

fareesh 6y ago

The slider performs terribly on Android Chrome

kingnight 6y ago

I could have bet there was a low quality / compressed image on this when I saw Microsoft. Low and behold the site logo is low res. Why is that at MS... Switching to teams everyone’s face turned to mush which while it might save on aggregate network traffic, it greatly reduces the niceness of the conversation.

manigandham 6y ago

The project homepage is easier to understand than text: https://www.fast.design/ https://www.fast.design/ And here's a ASP.NET Community Standup session that goes through the FAST framework by one of the core developers: https://www.youtube.com/watch?v=sYTH_xYH3iA https://www.youtube.com/watch?v=sYTH_xYH3iA

rondennis 6y ago

On a side note, is Microsoft acquiring Tik Tok?

deleted 6y ago

[deleted]

russellbeattie 6y ago

Oof. When will this "dark mode" fad end?!? Is this project made for edgy 14 year olds or actual professionals? (Yes, yes. You can switch some of the site to light mode and, besides, you're an elite uber-hacker and white text on black background is totally easier on your eyes, and you always read everything like that since blahblahblahblahblah. Uh-huh. There's reasons we've been printing with black ink on white paper for 500 years.)

cryptozeus 6y ago

Not responsive, in 2020 ?

zelly 6y ago

Even though they may be slow and have an unusable API, Web Components being built into browsers means they will continue to work long after React, Vue, etc. are all dead and unmaintained.

abraham 6y ago
What makes you say web components are slow or have an unstable API?
- zelly 6y ago
  It's slow and unusable, not unstable. The one benefit of WC is that it's going to be stable for the next hundred years, just like <marquee> still works in 2020. It's unusable because of all the boilerplate it requires and doesn't provide the most important thing of all which is data binding. So you have to bring in some other support code to do data binding such as the Rx/Observables or Redux patterns, but since this can't be shared with other shadow-rooted WCs, the cost of that bloat is multiplied by the number of different WCs you have on a page, which could be hundreds. In benchmarks WC scales very poorly compared to React. It just wasn't designed for performance. I could go on. - strings as the only native serialization format - templates are also strings - messages are passed to children as attributes which are strings - no way to take advantage of efficient tree algorithms (virtual DOM), just manipulate a giant string every tick like a caveman
  - c-smile 6y ago
    You'd be surprised but in general this element.html = "..."; is faster then ReactDOM.render(vdom,dom); at least for initial DOM tree population. There are many reasons for that. `element.html =` is implemented as single update transaction, JS function call is significantly more expensive then HTML parsing of single element, etc.
    - zelly 6y ago
      This is thanks to how extremely optimized V8 and Chrome is for string manipulation. It is faster in the small cases but doesn't scale to, say, 10000 rows in a table. Then it becomes several orders of magnitude slower than React and virtual DOM. On low memory devices it could crash and never render. This should just be kept in mind when choosing WCs. WCs are perfectly fine for the Settings page in Edge, for example.

ruduhudi 6y ago

Love it when I'm on a design system's website and it's broken on mobile. https://postimg.cc/N509Z8Kr https://postimg.cc/N509Z8Kr

siquick 6y ago

One of the worst things about Windows and other Microsoft products is the design of their interfaces and typography - not sure why anyone would ever want to use their design principles for anything.

CraigJPerry 6y ago

Did the concept of atomic design never take off? A few years ago i remember various css and js bundles spawned around Brad Frost’s atomic design movement but i don’t recall any of them lately being on HN. It’s a shame if they’re not making the grade, i thought the idea of composable UI elements sounded spot on.

HugoDaniel 6y ago
Tailwindcss is getting quite big.i would dare to say mainstream even.
CuddleBunny 6y ago
I'm using FAST as a foundation for my atomic design revolution at my job. I'm gaining much traction!

varbhat 6y ago

It Looks and Feels very much like Google's Material Design.

sireat 6y ago

Does FAST checkbox component have some sort of delay built in? Compared to regular vanilla checkbox it seems to respond slower(100-200ms delay perhaps). This is on slowish 4G connection but that shouldn't matter.

StaticChamp 6y ago

Microsoft and design in the same sentence! They have come far.

shp0ngle 6y ago
What about "Windows 8 introduces new Metro Design language", huh

rakamotog 6y ago

For a non developer like me, Is it any different from Ant Design (https://ant.design/ https://ant.design/)? Also, almost every company I worked with (> 500 employees), eventually built their own UI components. And in every company, developers seldom use these, always customize or use something else. Which brings the question - Why do we invest (internally) and open source components? Whats the value?

scns 6y ago
Ant shipped 1MB CSS minified, last time i used it at work.

Omnipresent 6y ago

Very interested in the background image on their home page that slowly animates as well. That looks really great. Anyone know how are they doing that? https://fast.design/ https://fast.design/

flowerlad 6y ago
The background image is a <canvas> element on which they draw using JavaScript.

winrid 6y ago

Ha, can we add fast-comments as a component? :)

ramon 6y ago

I just wrong a little tutorial on FAST with Snowpack if anyone interested: https://www.linkedin.com/pulse/microsoft-fast-snowpack-ramon-lima/ https://www.linkedin.com/pulse/microsoft-fast-snowpack-ramon...