gem docs

Tags
webappgem
Created
Jan 20, 2020 4:31 AM

帮助新用户了解 gem 的功能，看完 docs 能写出 webapp

// gem 帮助用户轻松编写符合最佳实践的自定义元素

try: codesandbox/iframe+esbuild

search: docsearch

slogan: 快速构建 UI 组件、高性能 WebApp

features:

  • 基于标准
  • 声明式
  • 生态环境

blog: 使用 Gem 开发 WebApp 的一些实践

  • 编写跨框架 UI 库
  • 如何从 React 迁移到 Gem
  • v2 介绍
    • 使用装饰器、默认 LightDOM，Theme
    • v1 迁移到 v2
  • 拥抱 ES 装饰器 // 使用 decorator.metadata
  • 加载优化 // 路由预加载，元素预加载，依赖预加载，静态资源预加载
  • 优化路由切换
  • 为 WebApp 添加手势支持 // 选择 pointer event，capture，touch-action，事件识别，使用 gem-gesture
  • 创建标准可靠的元素 // API, CSS(layout, nesting), 可访问性
  • 创建受控元素
  • 基于 gem-boilerplate 搭建前端项目
  • gem 的演进 // + 链接到 v2

basic：开发中重点关注的问题

  1. Introduction：介绍 Gem 能做什么，是如何做到的，具体长什么样子
  2. 响应式元素
  3. 全局状态管理
  4. 路由
  5. 样式化：共享样式、CSS-in-JS、样式化实例、外部自定义样式、自定义外部元素样式

advance：比较少碰到的问题

  1. SVG 图标
  2. GemElement 更多内容
    1. lit-html 模板新特性
    2. emitter,effect,memo // effect 相当于 useLayoutEffect
  3. 主题
  4. 国际化
  5. 和其他库比较
    1. 能力
    2. 开发体验
    3. 性能
  6. 和 lit/stencil 比较
  7. 开发
  8. 构建
  9. 测试 // 单元测试/集成测试
  10. 调试

faq：gem 的问题

api

  1. gem-element
  2. store management
  3. history
  4. 内置自定义元素
  5. helper
  6. TS 装饰器
  7. utils
  8. 从 lit-html 导出的 API

example：

  • 渲染
  • 表单
SuperMade with Super