【译】如何在2019年修炼成一个高阶的前端开发者?

Web开发是一个不断变化的领域 - 我们今天构建网站的方式与几年前的方式完全不同。随着大量工具的出现以及新工具的层出不穷,大多数时候开发人员发现对于自己该怎么选择感到困惑。

我是WEB开发者修炼图谱的作者和维护者,其中列出了您希望学习进入前端,后端或运维需要了解(掌握)的工具和技术。这个修炼图谱是在2017年创建的,并在2018年进行了更新,最近修订了2019年版本。在撰写本文时,前端开发修炼图谱(2019版)已经更新。我仍在研究后端和运维的修炼图谱,希望在接下来的几天内发布它。

在这边文章中我将回顾和分享制作这个修炼图谱的背后动机,一些免责声明如果你决定根据这个修炼图谱学习(这句不知道怎么翻译,反正意思就是,你根据我的修炼图谱学习,学不好跟我没关系:see_no_evil:),最后有一些细分和学习上的技巧,如果你期望在2019成为一个成熟的前端开发者。

动机

在开始这篇文章之前,为了让您了解我,我在过去的6年里一直在进行全栈开发,目前在tajawal担任首席工程师,在那里我不得不穿着许多不同的帽子作为工作的一部分。这不仅是我的爱好,也是我的工作职责之一,要密切关技术注趋势,承担技术决策并保持开发人员的积极性和成长性。

前端开发已经成长了很多而且成长的也很快;前端可用的技术数量多到足以让任何人感到困惑。我在开源和社区非常活跃; 如果我每次被问到或者在论坛上看到这个问题“接下来应该学什么”弹出时我都有一分钱,那么几年前我就会退休。大约2017年,我的一个大学老教授为她的学生准备一套计划来了解市场,并且向我求助希望我能给她一份WEB开发的工具和技术建议清单。我画了一个粗略的草图并转发给她,但后来我决定把它弄清楚一点并把它放在Github上。以便每当我被问到这个问题时我都可以推荐任何人。这就是这些修炼图谱诞生的原因。

声明

在开始看修炼图谱之前,请记住一些免责声明。

这个修炼图谱的目的是给你一个关于学习过程的概念,在你对下一步要学什么感到困惑时给你指导,并且不鼓励你去学习什么是时髦或过时的技术。

其次,研究一下你的就业市场。

不要忽视你所用的语言和工具对市场非常依赖是事实,所以对你所针对的市场做一些研究。

第三,您不需要知道此处列出的所有东西

你不需要学习这里列出的所有东西就可以找到你的第一份工作。如果你刚刚踏入前端开发不要被这堆积如山的路线图所吓到。我只是试图覆盖到你最终可能学到或者用到的所有东西。你可以只是学习其中很小的一部分,并在你开始项目开发后继续学习其他内容。

段位1 - 就业准备

如果你是一个刚刚踏入WEB开发的初学者,这里有一份不同修炼图谱给你。看一看下面的修炼图谱并且停止往下阅读;完成下面这个修炼图谱中列出的内容,在你在一些项目中运用到这些东西后再返回继续阅读。

只要学习完上面列出的内容你就可以称自己为web开发者了并能在市场上找到一份工作。我认识很多这样的人,他们从自由职业或是一份日常工作中赚了不少钱。花点时间在修炼图谱中列出的所有内容上,牢牢掌握所有这些内容并多练习;做很多很多的项目;下面提供一些建议供你参考:

任务:

完成上面这些后,学习一下版本控制系统,了解Git的基本用法并在GitHub上创建账号。

段位2 - 写更好的CSS

在你掌握基础之后,下一步就是学习如何写出可维护性的Css和使用Css框架。下面是这个修炼图谱大概的样子

完成此步骤后,请继续对您在第1阶段中所做的项目执行以下任务

任务:
  • 使用npmyarn将bootstrap添加到上述项目中。
  • 将第一阶段你创建的项目转换成使用BEM
  • 在SASS中编写CSS
  • 使用NPM脚本自动将SASS转换成CSS

段位3 - 加速

这个阶段将是持续的一段时间,也是您踏入成熟的前端开发者的一步。继续学习有关JavaScript的更多信息。了解什么是Webpack,了解不同的概念以及为什么需要它。了解什么是babel,为什么我们要使用它并学习如何与webpack集成,最后学习如何使用ESLint来规范代码。此阶段列出的所有项目都围绕webpack。

到本周末,您将开始体验成熟的前端开发。完成此阶段后,请继续执行以下步骤,以便更好地掌握构建工具

任务:
  • 创建一个npm包,接受一个用户名然后返回该用户名相关的社交网络上的链接列表(如果存在的话)。它可以在浏览器中使用,用webpack打包,通过Babel转译并使用Eslint来规范代码。
  • 创建一个简单的待办事项列表应用,用SASS编写CSS,样式风格使用bootstrap,使用BEM,使用babel转译JavaScript,webpack 打包,优化应用构建并把它发布到Github上。

段位4 - 成熟的前端应用

下一步是学习一些前端框架。有多种选择,但目前最常用的是React,Angular和Vue。我的建议是去学习React。

首先学习React,然后看看redux,然后了解JS中的CSS; 这不是必需的,但如果您愿意,可以看看样式组件和CSS模块。

在您学习完React后,您可以继续阅读有关渐进式web应用的东西。现在您已经了解了前端框架,那对你来说应该不是难事。看一看PWA checklist,了解了解Service Workers, 通过lighthouse进行一些性能测试以及查看可用于您的不同浏览器的API,例如,Storage, Location , Notifications, Device Orientation以及Payments。另外还要了解一些有关RAIL模型PRPL模式的信息。

做完这些,你就可以称为一个成熟的前端工程师了。一定要练习你学到的东西。如果你在寻找方案,您或许从下面的列表中获得一些

任务:
  • 创建一个简单的应用,它允许你选择一些哈希标签并用使用Twitter搜索接口来获取并以类似Trello的网格形式展示那些主题标签的最新推文。尝试固定主题标签,以便在用户刷新页面时,它能记住用户选择的主题标签。使用React Router并添加相关页面。

  • 创建一个与此类似的番茄钟应用程序,允许用户配置工作和休息的持续时间,显示通知并在工作或休息结束/开始时播放声音。

  • 使用React重新创建Github今日热门项目,并允许使用语言和日期过滤,就像github一样。您可以添加任何库来处理日期。

段位5 - 自动化测试

学习为您的应用程序编写自动化测试将在未来为您节省很多麻烦,并且在寻找工作时会让您处于更有利的位置。首先,继续学习不同类型测试的不同,不同的概念,例如 mocking, stubs 。这之后,以各自的方式继续学习jestjs, Enzyme, Cypress。还需要学习计算测试覆盖率。

任务:

关于这个阶段的任务任务,为您在上面的第4阶段中创建的应用编写单元、集成和功能测试。

段位6 - 静态类型检查器

类型检查器促使您的代码在增长过程中更易于维护,在进行重构时提高灵活性,在IDES中提供更好的支持,并且是您可以拥有的最佳文档形式。目前在这个领域的主要是FlowTypeScript 。然而,趋势趋向于TypeScript我建议你使用TypeScript。

在学完TypeScript后,把你的项目转换成TypeScript。

段位7 - 服务器端渲染

与客户端渲染应用相比,服务端渲染应用拥有更好的性能以及更好的SEO。虽然服务端渲染不是必须的,但是他确实能帮助你打造一个更好的前端应用。服务端渲染的方案各不相同,取决于你使用的前端框架;但是如果你使用那么React.js 你应该使用Next.js,这使得SSR变得轻而易举。

任务,使用Next.js把你的任意一个项目改成服务端渲染。

段位8 - 超越

此阶段显示的所有内容都是可选的,并不是您真正需要的,但如果您想尝试一下,请继续

请注意,为了简洁起见,我没有深入了解细节并试图给你一个更全的图谱; 在你学习的时候要去弄清楚更多的细节。

完整的修炼图谱

下面给出了整个路线图的完整图表,其中包含了一些其他详细信息。

修炼图中可能仍然缺少一些东西,但这就是你成为一个”前端工程师”所需要的所有东西。记住,关键是尽可能多地练习。在刚开始的时候这看起来可能很可怕并感觉自己无法掌握那么多,但这是正常的,随着时间的推移,你会感觉到自己越来越棒。如果你遇到困难,不要忘记寻求帮助,你会惊讶于有这么多人愿意提供帮助。

在我的GitHub主页可以找到关于后端和运维的修炼图谱。请注意,我仍在努力更新后端和运维的图谱,并计划在未来几天内发布它们。

话虽如此,这篇文章即将结束,随时在Twitter上与我交朋友或通过电子邮件打个招呼。回见,敬请期待!

译自: Learn to become a modern Frontend Developer in 2019, 部分内容有修改。

作者Github, 开发者知识图谱项目

写于 2019 02-22Javascript Web 2777

如非特别注明,文章皆为原创。

转载请注明出处: https://www.liayal.com/article/5c6f5ed3c0ab13505eeefab7

你不想说点啥么?
😀😃😄😁😆😅😂🤣☺️😊😇🙂🙃😉😌😍😘😗😙😚😋😜😝😛🤑🤗🤓😎🤡🤠😏😒😞😔😟😕🙁☹️😣😖😫😩😤😠😡😶😐😑😯😦😧😮😲😵😳😱😨😰😢😥🤤😭😓😪😴🙄🤔🤥😬🤐🤢🤧😷🤒🤕😈👿👹👺💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾👐👐🏻👐🏼👐🏽👐🏾👐🏿🙌🙌🏻🙌🏼🙌🏽🙌🏾🙌🏿👏👏🏻👏🏼👏🏽👏🏾👏🏿🙏🙏🏻🙏🏼🙏🏽🙏🏾🙏🏿🤝👍👍🏻👍🏼👍🏽👍🏾👍🏿👎👎🏻👎🏼👎🏽👎🏾👎🏿👊👊🏻👊🏼👊🏽👊🏾👊🏿✊🏻✊🏼✊🏽✊🏾✊🏿

评论

~ 评论还没有,沙发可以有 O(∩_∩)O~