Trailhead 官方 LWC trailmix 解读之 LW

完全停不下来系列之 LWC 基础介绍篇

在上一个湿手 trail 中建立了 LWC 的开发环境，同时无脑做了第一个 LWC 应用： hello world。接下来是时候一步一步了解 LWC 的相关概念了。

Unit 1：发现 LWC

LWC 的入门介绍，包括什么是 LWC, LWC 带来的好处，以及 LWC 相关的可用工具。同学可用参考这个系列文章的第一篇去对比了解Trailhead 和 我都是怎么介绍 LWC 组件的。这里就简单摘要下为什么要用 LWC？简单讲：遵从标准，减少定制。遵循标准带来的好处：更多方案，更多人会，更快开发，更丰富组件。Salesforce 用来支持 LWC 的工具可是相当丰富：LWC Playground，Salesforce DX，VS Code Extension，GitHub，Dev Hub, Scratch Orgs, Salesfroce CLI, Lightning Component Library
), Lightning Web Components Recipes, E-Bikes Demo
), Lightning Locker。
乌欧，很多不是吗？幸福来得突然，一下就能拥有这么多还真是有限不适应。不用担心过年期间跟着 trail 慢慢来你都会消化掉的。

Unit 2：创建 LWC

这个 Unit 是通过 LWC 的 playground 创建 LWC，直接打开链接就可用写 LWC 代码了。 浅尝即止的同学一定要玩下，然后你就会爱上 LWC 的。 这次试着写 LWC 更偏重于介绍 LWC 组件本身的很多细节。比如 HTML template 怎么写， js 文件用了那些新语法等等。
如果你玩了 LWC 的 playground，你会发现这是一个很好的学习 js 的工具，结合Lightning Web Components Recipes repo 聪明的同学应该很快就会掌握基本 LWC 的编写，同时也提示 js 水平到一个全新的高度。LWC playground 对于动手能力强的聪明同学来说就是能通过“白首太白经”直接倒推掌握整个侠客行的武功秘籍，而且还不需要满足像葵花宝典那么残酷的前置条件。 JUST DO IT!

Unit 3：Push Lightning Web Component Files

这个 Unit 说实话我觉得作者有点偷懒，并没有做到步步有指导，点点都有趣的trailhead 要求。完成这个Unit 需要综合运用很多技能包括

• GitHub account
• IDE, such as Visual Studio Code
• Salesforce CLI
• Dev Hub enabled org
• My Domain deployed to users in your Dev Hub enabled org
  很多指导就一句话：比如 “1. In the project directory, follow the instructions for Installing E-Bikes using Salesforce DX.
  ” 对于很多人来说，这就相当于“请参考说明书，把两颗中子相撞产生的能量234维方收集到红双喜保温瓶里”一样。
  但还好，哪个installing E-Bikes 的文章里步骤很清楚，一步一步向前走，眨眼已是老几个秋~ 安装指导做的过程中能感受到 SFDX 的开发体验真的很好，所有辅助操作都是可用通过命令行完成：创建项目，导入项目，设置权限，导入数据，拉起浏览器。命令行的另外一个好处是，很方便构建自动化的开发流程，甚至DEVOPS流程自动化。听起来一点也不 saleforce，但这就是 salesforce 的步伐，让从需求到代码，从代码到部署的整体流程体验都那么好，你感受过才能体会为什么叫 DX。真的是要努力把 developer experience 做到最佳。 在这个 Unit 中代码的编写和推送更多是用 CLI 命令完成，但其实如果之前的湿手 project 学的好，你可用直接在 VS Code 中使用 sdfx 插件完成。 try different way for FUN！
  Unit 对 CLI 的要求挺高，反正不懂不妨碍你 copy paste 命令行去执行。恩，我就是这么做的。做下来对 Dev Hub，scratch org 都有了更多体会。
  image.png

Unit 4: Handle Events in Lightning Web Components

这个 Unit 的节奏及更快了，基本没有太多寒暄就直奔主题：
导入代码，介绍组件关系，事件浮出流程，属性下沉流程，收工。真正读进去没有一个小时是完不成的，我也只是为了快点交稿，囫囵吞枣的过了。

Unit 5: Add Styles and Data to a Lightning Web Component

作为整个trail 的最后一个 Unit 赶工的痕迹就更明显了， css 就是简单介绍了下 SLDS,而连接数据源则只是简单介绍了装饰器 @wire 的基本使用方法。
甚至 Unit 最后 8bit 风格的配图，就隐约能感受到赶工的痕迹。

image.png

感受：

这个 module 是最不想 trailhead module 的module，越往后越快的节奏很像是开发人员写的文档。这个 module 对学员的综合能力要求也比较高，做下来更像是一个解密游戏：module 给出说明，你还需要到各处收集资料才能顺利完成。比起之前 module 手把手教的方式，这个 module 已经把你看作是一个成人了。呜呼 1024。
这个module可用让你完整体验 LWC 的开发流程，是时候为自己的未来做决定了：到底是去搬砖，还是来 LWC 搭乐高？反正我的身体肯定不能去搬砖了，我计划全心的投入到搬乐高的事业中去。一起吗？

image.png

LWC 系列文章

• Salesforce 未来最有钱途的闪电（Lightning）开发组件 LWC (Lightning Web Component) 导读
• Trailhead 官方 LWC trailmix 解读之 Quick Start: Lightning Web Components
• Trailhead 官方 LWC trailmix 解读之 LWC basics
• Trailhead 官方 LWC trailmix 解读之 Set Up Your Lightning Web Components Developer Tools
• Trailhead 官方 LWC trailmix 解读之 Lightning Web Components for Aura Developers （纯净版）
• Trailhead 官方 LWC trailmix 解读之 “熊出没” APP 搭建