【Udemy中英字幕】Build lightning fast web components apps for any framework

为任何框架构建闪电般快速的 Web 组件应用程序

了解如何创建适用于所有现代框架的可重用组件

讲师：Andreas Galster

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

• 您将了解 webcomponents 规范：模板、自定义元素、Shadow DOM、ES 模块
• 你将学习构建无需任何库的可重用组件
• 你将学到如何在实际场景中使用 Web 组件的技巧
• 你将学习使用四个组件构建一个完整的应用程序
• 您将学习使用新的 CSS 伪选择器来实现影子 DOM
• 您将学习使用 webcomponent 状态管理和通信

探索相关主题

• Web 组件
• Web 开发
• 发展

要求

• 需要基本的 HTML、CSS 和 JavaScript 知识
• 课程中还包含关于 JS 特性的附加章节
• 无需任何 WebComponents 知识
• 具有组件系统经验者优先，但非强制要求

描述

许多有抱负的开发人员，甚至是经验丰富的前端开发人员，在开始编写 Web 应用程序时，往往会被复杂的依赖项和设置要求所困扰。本课程不会出现这种情况。第一章编码根本不使用任何库，其余课程使用易于使用的样板模板供您入门。

本课程展示了一种名为 Web 组件的新标准，它允许我们编写可重复使用且与框架无关的组件，而无需任何工具或库。您将能够编写自己的闪电般快速的 Web 组件驱动应用程序或构建单个组件以拖放到现有项目中，而不受您使用的框架的影响。

Web 组件可与 Angular、React、Vue 以及更多开箱即用的框架配合使用。

本课程不仅涵盖了 Web 组件的基础知识，还教授了高效构建 Web 应用的实际最佳实践。无论您是初学者还是已有 Web 开发经验，我都会确保将我多年以正确方式构建产品的经验融入课程中。主题包括：

Web 组件基础知识：

• Web 组件背后的理论和概念以及规范的所有四个部分
• 如何定义自定义元素并处理组件的生命周期
• 管理状态并渲染至影子 DOM
• 关于如何管理组件通信的不同概念
• 介绍用于 Web 组件（如 :host 或 ::slotted）的新 CSS 伪选择器
• 使用上述技术构建你的第一个应用程序

通过 ESLint 和 Karma 进行真实世界的自动化测试

• 使用 ESLint 实现 linting
• 设置 Prettier 以实现自动代码格式化
• 通过 Karma 进行单元和集成测试
• 设置 Istanbul 以获取代码覆盖率报告
• 设置 CircleCI 实现持续集成，每次推送到你的仓库时都会运行测试
• 为失败和已修复的测试设置 Slack 通知
• 向您的存储库添加 CI 徽章以突出显示测试状态

完成本课程后，您将掌握 Web 组件标准基础知识，并有足够的信心构建由 Web 组件驱动的生产级应用程序。

本课程适合哪些人：

• 想要了解 2019 年最热门前端趋势的初级 Web 开发人员
• 具有现有框架知识（React、Angular、Vue 等）并希望尝试 webcomponents 的初学者或高级开发人员
• 希望将 WebComponents 集成到现有工作流程和框架中的高级开发人员

显示更多显示较少