写在前面的话
也许很多同学还不是很了解什么是aura ? 简单讲 aura 就是在 LWC 之前用来做 Lightning 前端开发的框架。所以标题可以理解为:写给老一辈 Lightning 前端开发者的 LWC 介绍。各位同学要有心理准备,这个 module 是很冷血,残酷的一个 module,但同时也是整个 trail 里唯一达到 Trailhead 标准的一个 module。所以无论你是否是老一辈的 Lightning 开发人员,这个 module 都不应该错过。只是提醒下,如果其中很多关于 aura 的概念你不清楚,简单了解下就好不需要深究了,原因马上告诉你。
Unit 1:Understand How Lightning Web Components Work with Aura Components
“理解 LWC 如何与 Aura 组件一起工作”,哼!这种虚伪的标题在第一段就撕掉了伪善的面具露出了冷血的现实。章节开始作为老一辈Lightning 开发者不禁要问:“马克班尼奥夫同志,我刚花了两年时间才学会了Aura,你就推个新 LWC 框架,做一模一样的的事情!你几个意思啊?” 然后官方给出的答复是:“在创世之初,并没有意识到 JS 的星星之火可以燎原成这个样子。当前 ES6 ES7 的出现基本统一了 JS 的标准。所以我们推出了基于最新 JS 标准的新 LWC 组件。让全世界前端受苦受难的人都可以翻身得解放。'Do you hear the people sing? Singing a song of angry men?It is the music of a people who will not be slaves again! '” 恩,你还能怎么办呢?
接下来 unit 就开始介绍 LWC 的好处:What Are the Benefits of Lightning Web Components?
- 更现代的 javascript
- 开发效率和满意度的提升
- 代码性能
后面需要特别提到了一段就是“Buckle Up for a Journey”,这段描写非常有 trailhead 的调调。
Learning any new programming model or language is a journey. When you get some new code running, it can feel like the thrill of driving a convertible on an open road. Then you change a line of code and you get an error. You slam on the brakes, but you’ve hit a traffic jam and you desperately search for the next exit. Remember, it’s a journey. The error is just a temporary slowdown, and you’ll get to your destination in the end... hopefully, before dinner time.
We hope that this module prepares you for your Lightning web components journey. Think of the module as packing your suitcase for your trip. We step you through everything you need for the adventure. When you reach your destination, we don’t want you to open your suitcase and realize that you forgot to pack any underwear!
接着介绍新旧开发框架的合作模式:在 aura 组件中可以嵌套 LWC 组件,但反过来不可以。有没有感到一丝不安?这分明就是断了aura 组件的后路。unit 的最后甚至给出了从 aura 到 LWC 的迁移的建议。至此你应该能看清 aura 要被抛弃的悲惨命运了吧? 多么的残酷,之前还叫人家小甜甜,现在倒好说放弃就放弃,不留一丝牵挂。
unit 2 & unit 3 迁移markup,CSS 和 javascript
后续的两个 unit 就是搬家指南了,帮助老一辈的 auro 开发能更快的了解 aura 和 LWC 的差异,以及如果从 aura 迁移到 LWC。即使你没学过 aura,你也可以当作一份有对比的学习手册,还是会提供很多关于 LWC 的知识点,而且通过和 aura 的对比,你能更清晰的体会到 LWC 新框架带来的便利与简化。
Dynamic content in a Lightning web component’s HTML file doesn’t have quotes around the {brokerId} reference. It’s not a typo!
针对 JS 的迁移,可以发现 aura 之前很多自定义的组件属性和逻辑都被更标准和现代的 js 方式方法所替代。基本一个学过 react 的前端可以很容易的无痛上手 LWC 组件。
unit 4: Use JavaScript API Methods to Write Data
这个Unit 主要介绍前端与后端的不同交互方式,包括表单组件,@wire 注释方式,直接请求 API 等,如果你对 salesforce 前后端交互方式不是很清楚,这个 Unit 能给你跟多帮助。
unit 5:创建组件 Compose Components
这个Unit非常有用,介绍了组件间的集中关系,以及 LWC 事件绑定的机制。最后还介绍了 slot。所有这些对于以后理解 LWC 组件都回有很大帮助。
unit:6 事件通讯 Communicate with Events
所有现代的 js 组件都会引入自己的事件机制。随着js 标准的发展,事件处理也已经趋于标准。 LWC 组件支持单项数据响应流程,而 aura 则是支持双向。这个 unit 还把发布/订阅方式的事件加入到 LWC 中,供组件间交换数据。很酷不是吗?
写到最后
困的不行了,码字守夜先到这里。明显我的这篇文字也是虎头蛇尾,猪年合家快乐健康。
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 搭建
网友评论