代码质量

代码风格

  1. 在项目中集成 Prettier + ESLint + Airbnb Style Guide
    integrating-prettier-eslint-airbnb-style-guide-in-vscode

  2. 在项目中集成 ESLint with Prettier, TypeScript

    高质量架构

  3. 如何重构一个过万 Star 开源项—BetterScroll，是由滴滴的大佬嵇智所带来的，无独有偶的是，这篇文章除了详细的介绍一个合格的开源项目应该做到的代码质量保证，测试流程，持续集成流程以外，也体现了他的一些思考深度，非常值得学习。
    如何重构一个过万 Star 开源项目—BetterScroll

    Git 提交信息

  4. 很多新手在提交 Git 信息的时候会写的很随意，比如fix、test、修复，这么糊弄的话是会被 leader 揍的！
    [译]如何撰写 Git 提交信息
    Git-Commit-Log 规范（Angular 规范）
    commitizen规范流程的 commit 工具，规范的 commit 格式也会让工具帮你生成友好的changelog

    构建工具

  5. webpack 基础和优化
    深入浅出 webpack

  6. 滴滴前端工程师的 webpack 深入源码分析系列，非常的优秀。
    webpack 系列之一总览

    性能优化

  7. 推荐修言大佬的性能优化小册，这个真的是讲的深入浅出，从webpack到网络到dom操作，全方位的带你做一些性能优化实战。这本小册我当时看的时候真的是完全停不下来，修言大佬的风格既轻松又幽默。但是讲解的东西却能让你受益匪浅。

  8. 谷歌开发者性能优化章节，不用多说了吧？很权威了。左侧菜单栏里还有更多相关内容，可以按需选择学习。
    user-centric-performance-metrics
  9. 详谈合成层，合成层这个东西离我们忽远忽近，可能你的一个不小心的操作就造成层爆炸，当然需要仔细关注啦。起码，在性能遇到瓶颈的时候，你可以打开 chrome 的layer面板，看看你的页面到底是怎么样的一个层分布。
    详谈层合成（composite）
  10. 刘博文大佬的性能优化指南，非常清晰的讲解了网页优化的几个重要的注意点。
    让你的网页更丝滑

    社区讨论

    作为一个合格的前端工程师，一定要积极的深入社区去了解最新的动向，比如在twitter上关注你喜欢的技术开发人员，如 Dan、尤雨溪。
    另外 Github 上的很多 issue 也是宝藏讨论，我就以最近我对于 Vue3 的学习简单的举几个例子。

    为什么 Vue3 不需要时间切片？

    尤雨溪解释关于为什么在 Vue3 中不加入 React 时间切片功能？并且详细的分析了 React 和 Vue3 之间的一些细节差别，狠狠的吹了一波 Vue3（爱了爱了）。
    Why remove time slicing from vue3?

    Vue3 的composition-api到底好在哪？

    Vue3 的 functional-api 相关的 rfc，尤大舌战群儒，深入浅出的为大家讲解了 Vue3 的设计思路等等。
    Amendment proposal to Function-based Component API

    Vue3composition-api的第一手文档

    vue-composition-api 的 rfc 文档，在国内资料还不齐全的情况下，我去阅读了
    vue-composition-api-rfc 英文版文档，对于里面的设计思路叹为观止，学到了非常非常多尤大的思想。
    总之，对于你喜欢的仓库，都可以去看看它的 issue 有没有看起来感兴趣的讨论，你也会学到非常多的东西。并且你可以和作者保持思路上的同步，这是非常难得的一件事情。

    关于 Hook 的一些收获

    我在狠狠的吸收了一波尤大对于 Vue3 composition-api的设计思路的讲解，新旧模式的对比以后，这篇文章就是我对 Vue3 新模式的一些见解。
    Vue3 Composition-Api + TypeScript + 新型状态管理模式探索。
    在 Vue2 里，可以通过plugin先体验composition-api，截取这篇文章对应的实战项目中的一小部分代码吧：
    1. <template>
    2. <Books :books="booksAvaluable" :loading="loading" />
    3. </template>
    4. <script lang="ts">
    5. import { createComponent } from '@vue/composition-api';
    6. import Books from '@/components/Books.vue';
    7. import { useAsync } from '@/hooks';
    8. import { getBooks } from '@/hacks/fetch';
    9. import { useBookListInject } from '@/context';
    10. export default createComponent({
    11. name: 'books',
    12. setup() {
    13.  const { books, setBooks, booksAvaluable } = useBookListInject();
    14.  const loading = useAsync(async () => {
    15.    const requestBooks = await getBooks();
    16.    setBooks(requestBooks);
    17.  });
    18.  return { booksAvaluable, loading };
    19. },
    20. components: {
    21.  Books,
    22. },
    23. });
    24. </script>
    25. <style>
    26. .content {
    27. max-width: 700px;
    28. margin: auto;
    29. }
    30. </style>
    本实战对应仓库：
    vue-bookshelf
    并且由于它和React Hook在很多方面的思想也非常相近，这甚至对于我在React Hook上的使用也大有裨益，比如代码组织的思路上，
    在第一次使用Hook开发的时候，大部分人可能还是会保留着以前的思想，把state集中起来定义在代码的前一大段，把computed集中定义在第二段，把mutation定义在第三段，如果不看尤大对于设计思想的讲解，我也一直是在这样做。
    但是为什么 Logical Concerns 优于 Vue2 和 React Class Component 的 Option Types？看完detailed-design这个章节你就全部明白了，并且这会融入到你日常开发中去。
    总之，看完这篇以后，我果断的把公司里的首屏组件的一坨代码直接抽成了 n 个自定义 hook，维护效率提升简直像是坐火箭。
    当然，社区里的宝藏 issue 肯定不止这些，我只是简单的列出了几个，但就是这几个都让我的技术视野开阔了很多，并且是真正的融入到公司的业务实战中去，是具有业务价值的。希望你养成看 issue，紧跟英文社区的习惯，Github issue 里单纯的技术探讨氛围，真的是国内很少有社区可以媲美的。
    1. function AppInner({ children }) {
    2. const [menus, setMenus] = useState({});
    3. // 用户信息
    4. const user = useUser();
    5. // 主题能力
    6. useTheme();
    7. // 权限获取
    8. useAuth({
    9.  setMenus,
    10. });
    11. // 动态菜单也需要用到菜单的能力
    12. useDynamicMenus({
    13.  menus,
    14.  setMenus,
    15. });
    16. return (
    17.  <Context.Provider value={user}>
    18.    <Layout routers={backgrounds}>{children}</Layout>
    19.  </Context.Provider>
    20. );
    21. }

可以看到，Hook在代码组织的方面有着得天独厚的优势，甚至各个模块之间值的传递都是那么的自然，仅仅是函数传参而已。
总之，社区推出一些新的东西，它总归是解决了之前的一些痛点。我们跟着大佬的思路走，一定有肉吃。

Tree Shaking 的 Issue

相学长的文章你的 Tree-Shaking 并没什么卵用中，也详细的描述了他对于副作用的一些探寻过程，在UglifyJS 的 Issue中找到了最终的答案，然后贡献给中文社区，这些内容最开始不会在任何中文社区里出现，只有靠你去探寻和发现。

学习方法的转变

从初中级前端开始往高级前端进阶，有一个很重要的点，就是很多情况下国内社区能找到的资料已经不够用了，而且有很多优质资料也是从国外社区二手、三手翻译过来的，翻译质量也不能保证。
这就引申出我们进阶的第一个点，开始接受英文资料。
这里很多同学说，我的英文能力不行啊，看不懂。其实我想说，笔者的英语能力也很一般，从去年开始我立了个目标，就是带着划词翻译插件也要开始艰难的看英文文章和资料，遇到不懂的单词就划出来看两眼（没有刻意去背），第五六次遇见这个单词的时候，就差不多记得它是什么意思了。
半年左右的时间下来，（大概保持每周 3 篇以上的阅读量）能肉眼可见的感觉自己的英语能力在进步，很多时候不用划词翻译插件，也可以完整的阅读下来一段文章。
这里是我当时阅读英文优质文章的一些记录，
英文技术文章阅读
后面英文阅读慢慢成了一件比较自然的事情，也就没有再刻意去记录，前期可以用这种方式激励自己。
推荐两个英文站点吧，有很多高质量的前端文章。
dev.to
medium
medium 可能需要借助一些科学工具才能查看，但是里面的会员付费以及作者激励机制使得文章非常的优质。登录自己的谷歌账号即可成为会员，前期可能首页不会推荐一些前端相关的文章，你可以自己去搜索关键字如Vue、React、Webpack，任何你兴趣的前端技术栈，不需要过多久你的首页就会出现前端的推荐内容。好好享受这个高质量的英文社区吧。

关于实践

社区有很多大佬实力很强，但是对新手写的代码嗤之以鼻，认为有 any 的就不叫 TypeScript、认为没有单元测试就没资格丢到 Github 上去。这种言论其实也不怪他们，他们也只是对开源软件的要求高到偏执而已。但是对于新手学习来说，这种言论很容易对大家造成打击，导致不敢写 ts，写的东西不敢放出来。其实大可不必，工业聚 对于这些观点就发表了一篇很好的看法，让我觉得深受打动，也就是这篇文章开始，我慢慢的把旧项目用 ts 改造起来，慢慢的进步。
Vue 3.0 公开代码之后……