4 场会议演讲改变了我作为 Web 开发者的视角

我决心让2021年成为我迄今为止学习最充实的一年。到目前为止，我的博客更新一直很断断续续……但我终于决定全力以赴，每周写一篇公开学习的文章！

我以前总觉得博客文章一定是我才能发现的智慧结晶。不过，既然我每周都做笔记，为什么不也跟全世界分享一下我的日记呢？😁

所以，以下是我在过去一年左右发现的一些最具影响力的会议演讲。我希望将来能整理出更多内容，也希望大家在评论区留言，分享你们最喜欢的演讲！

Rich Hickey - 简单易行🧶

🎥 点击此处查看演讲及文字记录

如果你曾经听过有人说某件事“容易，但并不简单”，他们指的很可能就是这篇演讲。这篇演讲是给广大程序员（不仅仅是 Web 开发者）的简单推荐。话虽如此，我认为这篇演讲对于如今拥有各种工具的前端开发者尤其有意义。

感觉 Web 框架和“最佳实践”正在朝着一些强有力的新观点发展：

一切都是组件
函数式编程才是王道
状态管理很复杂，值得重新思考（你好，状态机👋）

☝️ 这就是 Rich十年前演讲中想要表达的观点！这也是为什么我在整个 Web 开发生涯中多次拒绝听这个演讲。作为一名正在逐渐适应企业级 React 应用的初级开发者，它帮助我理解了团队架构决策背后的原因。

个人笔记

简单是一个客观的衡量标准，无论对于谁来说，它都反映了一个给定系统中有多少个相互交织的部分（复杂性）
轻松对于每个人来说都是相对的，反映出某种事物感觉多么“熟悉”或“近在咫尺”
敏捷编程鼓励我们快速行动，不后退一步
- 当我们忽视不良抽象的迹象时，复杂性和技术债务就会堆积起来
- 最喜欢的演讲引言是：“但是程序员每跑 100 码就会打响一次发令枪，并称之为（新的）冲刺！”
用组合（现代前端框架的模块化）取代组合（由大量相互依赖的部分组成的复杂代码）
- 想象一下用乐高积木搭建一座城堡，而不是用编织物搭建一座“编织城堡”
- 水平分离，垂直分层
需要做出的具体改进
- “有状态”变量会随着时间推移而改变其值；使从一个状态到另一个状态的转换变得可预测（参见状态机
- 密切关注系统的功能；考虑行为而不是实现细节
- 示例：声明式编程优于命令式编程
- 示例：正确完成测试驱动开发（Ian Cooper 的精彩演讲在这里）
- 使用规则而不是条件/ switch case 意大利面条
- 给定一些数据 X，这里有一些规则可以让它变成 Y
- 依靠纯函数，它为给定的输入提供一致的输出

Dan Abramov - 湿代码库 🌊

🎥 点击此处查看演讲及文字记录

这是另一场关于架构的演讲，其主题远不止 Web 开发。如果你不熟悉Dan Abramov，单从教学角度来看，他就是 React 核心团队中成果最丰硕的成员之一。所以，如果你想获得 Web 应用架构方面的建议，这就是你要找的人 😁

这次演讲与Kent C Dodd 的“AHA 编程”文章相辅相成。总的来说，他们都在探讨基于组件的思维方式的最大陷阱：复制/粘贴感觉很糟糕，所以你会把每一段逻辑都抽象到各自的小文件中。

当然，抽象是有其存在的必要，但重复也同样存在！本次演讲有很多例子和有趣的引言，让讨论轻松愉快；绝对值得一看。

个人笔记

如果不加以控制，抽象可能会随着时间的推移变成弗兰肯斯坦代码
- 抽象几乎适合用例，但不完全👉我们把那个圆孔削掉以适应我们的方钉
- 当一个用例出现错误时，我们会引入影响大量其他用例的修复程序
👍 当抽象是好的
- 使您的代码更具声明性/专注于特定意图（请参阅上面的 Rich Hickey 的讨论😉）
- 避免错过错误修复👉修复一次，修复所有地方
👎 当抽象不好时
- 产生耦合——当它不太合适时，你可以创建一个重构的怪物
- 添加间接性- 随着时间的推移创建层和层；“我们避免意大利面条式代码，但我们创建千层面代码” 🇮🇹
未来改进的方法
- 测试使用抽象的代码，而不是抽象本身
- 如果您稍后删除该抽象，您的测试就会爆炸！
- 抽象只是另一个实现细节（再次强调，TDD 为王）
- 除非你需要抽象层，否则不要致力于抽象层； “如果一个女孩和你一样喜欢不知名的乐队……那并不意味着你们注定要在一起”
- 准备好稍后删除抽象；成为在 PR 评审中询问“请内联此抽象！”的人！

Rich Harris - 重新思考反应性⚛️

在我看来，这是自 React 首次亮相以来最大的重磅炸弹💣

这里可能需要发出一个触发警告：如果你是 React 的忠实追随者，那么这次演讲会对 React 所珍视的许多实践提出质疑（包括虚拟 DOM 本身！）。

但即使你不同意 Rich 的观点，这次演讲也是Web 框架经典中的一座重要里程碑。它还揭示了“打包器”、“编译器”和“响应变化”的真正含义。即使你还没成为 Svelte 的忠实粉丝，你至少也能了解 Web 的发展历程以及未来的方向！

个人笔记

什么是反应式编程？
- 一切始于电子表格
- 我更改了一个单元格中的值，其他单元格通过公式对这些更改做出“反应”
- 仅重新渲染发生变化的值的最早示例
- 它 1）关于跟踪价值，2）更新依赖于该价值的事物
React 模型的问题
- 当组件的状态发生变化时，整个组件会从顶部重新评估自身
- 将你的 HTML 视为黑匣子；应用更改，然后与前一个块进行比较
- 实际上，React 不知道你的“状态值”或它们如何影响 DOM！
- 效率低下的迹象：我不需要useMemo、、等useCallbackshouldComponentUpdate
我们可以通过标记依赖于其他状态变量的状态变量来选择重新评估状态，而不是选择退出（a lauseMemo
- 很像电子表格；编写公式来标记哪些变量会影响给定值
- Svelte 使用自定义运算符来“标记”从其他状态$:计算出的状态（此处为示例）
Svelte 是一个编译器，而不是运行时
- 换句话说，“Svelte”组件编译为浏览器可以理解的 JS
- 无需导入任何“运行时”（例如 React 的虚拟 DOM）
- 也意味着 Svelte 可以随心所欲地改变 JS 语言
- VueJS 的创建者 Evan You - Svelte 太神奇了，因为它允许你编写不完全有效的 JavaScript
- Rich Harris 的回应 - 这种观点就像认为 HTML、CSS 和 JS 应该放在不同的文件中一样。CSS-in-JS 也很奇怪，所以这有什么问题吗？
Svelte 的其他一些精彩演示
- 仅使用<style>标签即可按组件确定 CSS 作用域
- 具有合理开箱即用选项的过渡指令

Shawn“swyx”Wang - 在 React Hooks 上实现 Closure 🎣

这是一次快节奏且代码繁多的演讲，因此您可能需要以 1 倍的速度进行。

话虽如此……这是我看过的关于 React最有启发性的演讲，简直太棒了！虽然只有 30 分钟，但它让我全面了解了 React Hooks、状态管理和重新渲染是如何协同工作的。它还展示了 JS 中“闭包”的一些重要用例。如果你即将参加 Web 开发面试，一定要看看这个！😉

个人笔记

很难写一个简洁的项目符号列表。所以，我只是在成品上做了注释，解释了所有东西是如何运作的。温馨提示：内容太多了，需要消化！

🚀 使用 Codepen 查看其实际运行情况

const React = (function () {
  // create an array for all the state variables in our "React app"
  let stateValues = [];
  // start our state index at 0. We'll use this
  // to throw state into that array ☝️ everytime someone calls "useState"
  let index = 0;
  function useState(initValue) {
    // state should be set to either:
    // 1. the initial value (aka React.useState(initValue))
    // if this is the first time our component rendered
    // 2. the value from the *last* render
    // if we're re-rendering our component (aka stateValues[index])
    const state = stateValues[index] || initValue;
    // "freeze" our index to this particular useState call with _index.
    // prevents the index from changing before we try to call setState later!
    const _index = index;
    const setState = (newValue) => {
      stateValues[_index] = newValue;
    };
    // increment index so our next useState call doesn't override the state
    // we just stored above
    index++;
    return [state, setState];
  }
  function render(Component) {
    // every time we re-render our app,
    // update all our state variables starting from the top
    index = 0;
    const C = Component();
    // "render" the component (which calls the useState function)
    C.render();
    return C;
  }
  // return all our functions from this foe React "module"
  return { useState, render };
})();

function Component() {
  const [count, setCount] = React.useState(2);
  return {
    // whenever we "render" this component with React.render, 
    // just log the value of our state variable
    render: () => console.log({ count }),
    click: () => setCount(count + 1)
  };
}

let App = React.render(Component) // logs { count: 2 }
App.click() // sets the state at stateValues[0] to 3
App.click() // sets the state at stateValues[0] to 4
React.render(Component) // logs { count: 4 }

学到一点东西吗？

太棒了！万一你错过了，我特意开通了“网络魔法”简报，来探索更多类似的知识！

这东西探讨的是Web 开发的“首要原则”。换句话说，究竟是哪些糟糕的浏览器 API、扭曲的 CSS 规则以及半无障碍的 HTML 支撑着我们所有的 Web 项目？如果你想要超越框架，那么亲爱的 Web 魔法师，这东西就是为你准备的🔮

赶紧在这里订阅吧！我保证永远教书，绝不会发垃圾信息❤️

文章来源：https://dev.to/bholmesdev/conference-talks-that-changed-my-perspective-as-a-web-dev-lfp