正在筹划本期工作坊时,就看到 FCC 成都社区的微信群里有小伙伴在苦恼前端技能提升的问题,也有小伙伴想一起开发一个组件库,那你们这次可来对了~
本期工作坊是水歌在 2019 年 Google DevFest 成都站《Web 组件标准实践》演讲后的首次配套工作坊,可以错过上次,但一定不要错过这次!
【时间】2019 年 12 月 21 日(周六)13:30 ~ 17:30
【地点】成都市高新区天益南巷 18 号创客大使馆
实践收获
学习 Web Components 标准原生 API 的基本用法
了解 WebCell 如何基于 TypeScript、JSX、Parcel 简化 Web 组件开发
亲手封装一个基于 BootStrap 的通用 Web 组件,现场为开源项目做贡献
实践路线图
Step 0 | Web Components 标准简介
Web Components 是一套浏览器提供的新标准 API,用于实现框架无关的 Web 组件。其官方 polyfill 补丁支持 IE 11+,Polymer、Angular、Ionic Stencil 等国际 Web 前端框架已全面应用。
Step 1 | 手写一个 Web 组件
只用 Web Components API 来实现一个简单的组件。
Step 2 | 用 WebCell 简化组件
WebCell 是一个基于 Web Components API 的轻量级组件引擎,在保留 Web Components 核心写法的同时,基于 TypeScript、JSX、Parcel 等成熟技术,进一步简化 Web 组件的开发。
Step 3 | 封装一个 BootStrap 组件
BootStrap 可谓 CSS 框架时代的开创者,一直被模仿、从未被超越。在同时代的大量同类框架中,现在基本只有它还在持续演进。
在当今基于 Angular、React、Vue 等的 JS 组件库大行其道之时,BootStrap 为何仍有很大的优势?来基于它亲自封装一个通用 Web 组件、开发一个 Web 应用,你就能体会到其设计的独到之处~