基于 Stencil 构建 Web Components 组件库
5.98
使用 Stencil ,让你的组件 Write once,Run anywhere !
游走在架构边缘的前端工程师 @ 蓝湖
加入学习群
免费试学
602 人加入学习
20 小节
·
约 238分30秒
免费试学
介绍
目录
评论

作者介绍

作者简介(2100x389).jpg

Super_x 老曹),资深前端工程师,现任职于新晋独角兽公司——蓝湖,任职于主站中台 & 基建架构组,同时为 Web Components 组件库负责人,从事前端6年,有4年关于前端架构及组件库开发经验。

小册介绍

课程介绍(1624x623).jpg

组件化一直是Web前端发展的一个大方向,例如 React、Vue 都是组件化思想抽象的框架,而 Web Components 作为下一代Web组件化技术的核心,凭借着体积小、效率高、浏览器原生支持等特点受到了很多前端开发者的关注。

随着 Google 和 w3c 的推动,也有越来越多的国际企业开始使用 Web Components 来构建他们的组件库。京东的跨端框架 Taro 的组件部分,就是用基于 Web Components 的工具链 Stencil 开发,可以看出,Stencil 和 Web Components 已经逐渐被前端开发者所认可接受。

现在去研究它们,正是最佳入场时机。

Stencil 是 ionic 公司的一个开源框架,简单来说,它是一个构建 Web Component 的工具集。在 Stencil的框架下面,我们可以以一种类似 React 的方式去开发 Web Component 组件,它有更加便捷的语法糖、更高的渲染效率。而且集成了unit和e2e的测试框架,而且最需要注意的是,它只是一个构造器,最终的编译结果是标准的Web Component组件,所以它不会作为我们组件库的直接依赖。

Stencil在国内还未被广大前端开发者所认知,基于Web Component 的组件库也是凤毛菱角,为了紧跟Web技术更新迭代的潮流,我们前端开发者们是时候接触 Web Component 这种技术,了解 Stencil 这个优美的框架了。

本小册会以实战开发组件为主线,介绍过程中的知识点和注意事项、以及好的代码风格和规范。

你会学到什么?

本小册会从 0 到 1 构建一个基于 Stencil 的 Web Components 组件库,其中会前置介绍相关技术栈的背景、概念、基本用法;介绍组件库的架构和设计原则;学习组件库的样式 SCSS 文件该如何组织。

然后会再挑选两个比较有代表性的组件,剖析它们的代码设计过程。一步一步实现相应功能,培养一个良好的组件设计思想。

还会介绍 Unit 单元测试和 e2e 测试的基本概念和书写规则。

最后也会基于 dumi 去构建一个静态网站去介绍每个组件的用法和功能。在整个学习过程中,还会给大家做一些代码风格规范的培养和纠正。

image.png

总的来说,通过这本小册你可以获得:

  1. 学习到Web Components的基础知识;
  2. 学习到如何用Lerna管理Monorepos;
  3. 学习到Stencil框架的核心知识;
  4. 学习到开发一个组件的流程与核心要素;
  5. 学习到如何构建一个组件库的scss文件;
  6. 了解一个组件的完整开发流程;
  7. 如何书写 unit 和 e2e 测试 case;
  8. 如何使用 dumi 构建你的组件库静态页面;
  9. 一个好的代码规范和编程风格。

适宜人群

  • 对下一代 Web 技术感兴趣的前端小伙伴;
  • 想要了解开发组件库整体流程的同学;
  • 前端中级、高级开发人员,需要扩展自己技术视野;
  • Web Components 组件库开发人员。

购买须知

  1. 本小册为图文形式内容服务,共计 20 节;
  2. 全部内容已更新完成;
  3. 购买用户可享有小册永久的阅读权限;
  4. 购买用户可进入小册微信群,与作者互动;
  5. 掘金小册为虚拟内容服务,一经购买成功概不退款;
  6. 掘金小册版权归北京北比信息技术有限公司所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表,违者将依法追究责任;
  7. 在掘金小册阅读过程中,如有任何问题,请邮件联系 xiaoce@xitu.io
推荐小册
京ICP备18012699号-3 ©版权所有 北京北比信息技术有限公司

公司地址:北京市海淀区信息路甲28号13层B座13B-5 | 公司座机:010-83434395