Fast Design是一套Web组件设计系统。

介绍

不同的产品需要不同的视觉风格,如果每个产品都整一套组件,那么轮子就造得太多了。

有没有一种设计,能够随着产品的需求,自定义其风格。Fast Design给出了一个答案。

Fast Design基于Web原生的组件技术,在其上提供了可自定义风格的框架。

https://explore.fast.design可以浏览Fast Design所提供的组件。

https://www.fast.design/docs/introduction/

  • Introduction
    • Where should I start?,你可以
      • 使用已提供的组件
      • 构建自己的设计体系
      • 构建自己的组件
      • 将FAST与其他框架整合
    • What is FAST?
      • Web组件其实是指一系列web标准,联合起来可以用于创建自定义的HTML元素
        • 定义新的HTML标签、生命周期管理、HTML和CSS封装、参数化CSS,皮肤组件等等
      • FAST提供了
        • @microsoft/fast-components,里面包含了已实现的现有组件(聚焦于Web工业化的风格,叫做FAST Frame)
        • @microsoft/fast-foundation,里面包含了对设计体系进行自定义的工具
        • @microsoft/fast-element,里面包含了轻量级的工具,用于创建自定义的web组件(即自定义的HTML元素)
  • Using the Components
    • The FAST Frame Design System
      • FAST Frame (@microsoft/fast-components) 是一套可以高度自定义的、由组件构成的、设计体系。
      • Using FAST Frame Components

        • Create a DesignSystem

        • Add Element to HTML

        • Hide undefined elements

      • Configuring Components

        • Configuring the DesignSystem

          • 本章API会覆盖组件配置,组件注册时特别指明的除外
          • DesignSystem.withPrefix()
            • 前缀,可以用-隔离
          • DesignSystem.withShadowRootMode()
            • 指定ShadowRootMode是Open还是Closed
          • DesignSystem.withElementDisambiguation()
            • 注册重名元素的一些问题
        • Configuring Components During Registration

          • Prefix
          • Template
          • Styles
          • Shadow Options
      • Configuring Styles

        • 设计号牌,以及适应性的颜色系统
        • FAST Frame Design Tokens

          • Typography、Sizing、Misc
        • Adaptive Color System

          • (过)
  • Building Components
    • Getting Started
      • Installation(略)
      • From CDN(略)
    • Defining Elements
      • Basic elements
        • 只须从FASTElement派生,然后注记customElement('name-tag')
        • 然后就可以使用,方式如<name-tag></name-tag>
        • 添加属性的话,形如@attr greeting: string = 'Hello';
        • 从FASTElement派生的默认会有一个ShadowRoot
      • Customizing attributes
        • 使用浏览器的setAttribute来将属性反映到DOM上
        • 可以用mode辖属控制此过程
          • reflect ,默认,可以指定converter
          • boolean ,使用内在的booleanConverter
          • fromView ,不反映,但接收
          • 例子
            • @attr({ mode: 'boolean' }) disabled: boolean = false;
            • export class MyCounter extends FASTElement { @attr({ converter: numberConverter }) count: number = 0;
      • The element lifecycle
        • 所有的Web组件支持特定命循事件
          • constructor、connectedCallback、disconnectedCallback、attributeChangedCallback(attrName, oldVal, newVal)、adoptedCallback
      • Working without decorators
        • 修饰器是JS未完成的特性,但其语法应该不会有太大变动了
        • 建议在TS上使用"importHelpers": true编译选项,这样就从tslib导入共享的帮助例程
        • 如果需要建构最小的尺寸,可以不使用修饰器,用静态的definition域属代替。
    • Declaring Templates
      • Basic templates

        • 通过模板来应对大部分渲绘场景
          • @customElement上使用html签定的模板,返回的是一个ViewTemplate
          • 模板内,提供绑定来声明(箭头算函)模板的动态部分
          • 算函的输入是数据模型
          • Typed Templates

            • 可以显示指定template的类型,比如将ViewTemplate按照类型导入,就有
              • const template: ViewTemplate<NameTag> = html`` …… ``
      • Understanding bindings

        • Content (过)

        • Attributes

          • 对于class属性,默认行为是不造成干扰,要去除掉这个,使用辖属绑定,比如:className="list-item ${x => x.type}"
        • Properties

          • 形如::myCustomProperty="${x => x.mySpecialData}"
          • 形如::innerHTML="${x => x.someDangerousHTMLContent}"
            • 直接设置innerHTML存在风险,参考文中内容
        • Events

          • 形如:@click="${x => x.remove()}"
          • 形如:@input="${(x, c) => x.handleDescriptionChange(c.event)}"
          • 默认会调用preventDefault(),可以在事件处理中返回true来阻止此行为
          • 只支持从model到view的单向数据流,不支持双向绑定,从view到model要通过事件处理
      • Templating and the element lifecycle

        • 在connectedCallback阶段FASTElement 才创建模板和绑定视图,只在首次连接时发生一次
        • 默认情况下,模板来自template辖属,但是可以通过自定义resolveTemplate()来提供模板,会在connectedCallback期间调用
        • FASTElement的$fastController辖属允许动态变化模板
    • Using Directives
      • 除了模板的动态部分,还可以访问到多个强力的指令
      • Structural directives

        • 可以增删DOM节点
        • The when directive

          • 特定条件下渲绘
          • @observable修饰器添加可观测的辖属,类似@attr,但不会反映在HTML属性上
          • 除了直接提供html模板外,when还支持通过表达式来运算成模板
        • The repeat directive

          • 渲绘列表数据
        • Composing templates

          • html标签助手返回的ViewTemplate 在模板中有特殊的处理
      • Referential directives

        • 获取到DOM节点的引用
        • The ref directive

          • 获取到元素的引用
        • The children directive

          • 获取到元素下级元素的引用
        • The slotted directive

          • 获取插入到某个槽位的所有节点
      • Host directives

        • html中以template为根元素,template上的属性可以应用于侯宿
    • Observables and State
      • Reactivity

        • 在模板中使用箭头算函绑定以及指示,允许fast-element智能相应,仅更新所需部分,无需virtual DOM, VDOM diffing, 或DOM reconciliation算法。
        • 引擎负责协调改动DOM的任务
      • Observables

        • 开启绑定跟踪和改动通知,辖属需要修饰@attr@observable,前者用于需要反映成元素属性的初始类型,比如(string, bool, number),后者则用于剩余场景
        • 模板系统也可以观察阵列,需要用到repeat指示
        • 这些修饰器是在标类上进行辖属元编程的一个手段
          • @attr之恶能用于FASTElement
          • @observable可用于任意标类
          • 只有一个getter的辖属不应用@attr或者@observable修饰,也许适用于@volatile
      • Observable Features

        • Access tracking

          • 可以手动调用 Observable.trackObservable.notify方法
          • 如果你的代码有分支逻辑,则需要通过@volatile告知
        • Internal observation

          • 可以实现propertyNameChanged来对自身状态通知进行反应
        • External observation

          • 通过Observable.getNotifier,然后通过notifier.subscribe注册
      • Observing Arrays

        • 也需要通过Observable.getNotifier
      • Observing Volatile Properties

        • (略)
        • Records

          • 通过BindingObserver.records()可知有哪些记录的观察
    • Working with Shadow DOM
      • 除了定义元素、定义元素上的属性之外,如果用声明式模板控制元素的渲绘也要做以说明
      • The default slot

        • 元素组合,我们所需做的就是使用标准的<slot>元素
        • The text “John Doe” exists in the “Light DOM”, but it gets projected into the location of the slot within the “Shadow DOM”.
      • Named slots

        • 顾名思义,但值得注意
          • 同一个槽位可以插入多个节点,会保留节点原次序
          • 只能在直接下级使用slot属性
          • 对应槽位不存在的话,不会被渲绘
          • 如果slot元素是另一个自定义元素的直接下级,也可以有自己的slot属性
          • 不必为每个声明了的槽位提供内容
      • Fallback content

        • 槽位元素内可以提供候选内容
      • Slot APIs

        • slotchange
        • assignedNodes
        • assignedSlot
      • Events

        • Shadow DOM会把内部产生的事件以顶层元素的名义发出去
          • composed: true必须设置
          • 文中举了两派例子
          • 通过composedPath()可以获得完整合成的事件路径
        • Custom events

          • 使用$emit助手
      • Shadow DOM configuration

        • FASTElement自动创建open模式的Shadow Root,可以通过指定shadowOptions: { mode: 'closed' }配置closed模式
        • shadowOptions: null直接渲绘到Light DOM
        • shadowOptions上可以设置所有attachShadow 用编口上允许的选项
      • Shadow DOM and the element lifecycle

        • open模式下,shadowRoot可作为自定义元素的辖属获得
    • Leveraging CSS
      • Basic styles

      • Composing styles

        • css模板助手可以嵌套其他css内容
        • Partial CSS

          • 使用cssPartial
      • CSSDirective

        • 允许通过ElementStyles来绑定行为
        • createCSS

          • createCSS方法返回一个可供插值的字符串
        • createBehavior

        • Usage in ElementStyles

      • Shadow DOM styling

        • :host允许应用样式到自定义元素
        • 有一些建议开启的设置
          • display ,自定义元素的默认display为inline
          • contain ,如果在边界内渲绘的话,建议将contain 设为content
          • hidden ,添加对hidden的支持
      • Slotted content

        • 形如::slotted(img)
        • 侯宿和槽定样式都可以被元素使用者覆写
      • Styles and the element lifecycle

        • 在connectedCallback 阶段添加元素的样式,而且只添加一次
        • 通常样式由配置中的styles辖属提供,但是可以通过resolveStyles()自定义
        • $fastController上的styles辖属可以修改样式
        • Hiding undefined elements

          • 没有upgraded过的自定义元素不具备样式,为了避免FOUC,最后将其隐藏之。
    • Next Steps
      • 可以用FAST Components,而不是自己构建
      • 其他一些资源。
  • Creating Design Systems
    • Overview
      • 一个设计系统可以想象成一套交互性的媒体资源,用以提升品牌一致性
      • How does FAST facilitate development of design systems?

        • (过)
      • A highly configurable design system

        • FAST Frame
          • 由一套web组件,以及伴随的设计号牌
        • Design Tokens

          • 用于表达设计上的抽象,比如颜色、布局、间隔单位等等
      • Your own design system based on FAST components

        • 可以自定义@microsoft/fast-foundation所提供元素的模板和样式
    • Creating a Component Library
      • 也可以用于创建料库或组件系统,比如:
        • 可以配置custom element的名字
        • custom element需要显示注册,因此不会无端增加体积
        • 模板、样式、默认槽位内容等等皆可配置
        • 方便配置Shadow DOM
      • Defining components

        • @microsoft/fast-foundation导入FoundationElement,而不是FastElement
          • 不使用@customElement,因为会立马初始化模板和样式
      • Define Templates and Styles

        • 支持ElementDefinitionContext和FoundationElementDefinition
        • What is the ElementDefinitionContext?

          • 暴露注册时才有的信息
        • What is the FoundationElementDefinition?

          • 给元素自身使用的配置
      • Compose and Export Registration

        • 形如Counter.compose<CounterDefinition>
      • Defining a design system

        • FAST design system thinking

          • 使用场景思考
            • foundation components,设计系统无关,高度可重用
            • design system
            • application,按需注册组件
            • features,只使用application涉及的组件
        • Composing a foundation component

          • (过)
        • Creating a design system provider function

          • (过)
    • Design Tokens
      • (过)
    • High Contrast
      • (过)
    • MatchMedia Stylesheets
      • (过)
    • Localization
      • Document Direction

  • Tools
  • Resources
    • Why Web Components?
      • You might choose Web Components for performance.

      • You might use Web Components for their interoperability.

      • You might leverage Web Components because they can be incrementally adopted.

      • You might choose Web Components to be future-compatible with the open web.

      • You might choose Web Components if you are creating an extensible ecosystem or application with a plugin model.

      • You might choose Web Components if you want to include community members who are not proficient with JavaScript.

      • Who is using Web Components?

    • Acknowledgements
      • asap,异步任务管理
      • Aurelia,修饰器及元数据模型
      • faastjs,api-exractor
      • Knockout,观察者系统
      • lit-html,签定的JS模板字面值
      • Polymer,早期拥抱Web component的料库
      • Vue ,:@来自它
    • Cheat Sheet
    • FAQ
      • Who is behind FAST?

      • What does FAST stand for?

        • “Functional, Adaptive, Secure, and Timeless Design Network Architecture”
      • How does fast-element compare to “Framework X”?

      • What are Web Components?

        • the ability to define new HTML tags, plug into a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, skin components, and more.
      • Why should I choose Web Components over [other JavaScript framework]?

      • Are Web Components “done”?

      • Why does FAST have components that are already available in HTML?

        • CSS Encapsulation
        • CSS Behaviors
        • Enhanced Anatomies

Fluent UI Web Components Overview

Fluent UI是跨原生平台和Web平台的设计体系,其中Web平台的组件是基于Fluent的,参考 https://developer.microsoft.com/en-us/fluentui#/controls/webcomponents。示例在https://fluent-components.azurewebsites.net/?path=/docs/getting-started-overview--page

  • Other Info
    • FAQ
      • What’s the difference between Fluent and FAST?
      • How does fast-element compare to “Framework X”?
        • fast-element不想成为"mega SPA framework",而只是专注于Web组件创建
      • Why does FAST have components that are already available in HTML?
        • 达成CSS封装,使用Shadow DOM来将样式嵌入组件
        • 调整CSS行为,自定义元素可以让FAST动态增删样式
        • https://open-ui.org/学习的经验,更细力度的分解,可以带来更自由的组合。

Fast Blazor

Fast Blazor目前还是存在一些问题的

  • Anchored Region貌似不能用
  • ListBox的Size参数不生效

文档:

其他

(本篇完)