Web开发是一个不断变化的领域 - 我们今天构建网站的方式与几年前的方式完全不同。随着大量工具的出现以及新工具的层出不穷,大多数时候开发人员发现对于自己该怎么选择感到困惑。
我是WEB开发者修炼图谱的作者和维护者,其中列出了您希望学习进入前端,后端或运维需要了解(掌握)的工具和技术。这个修炼图谱是在2017年创建的,并在2018年进行了更新,最近修订了2019年版本。在撰写本文时,前端开发修炼图谱(2019版)已经更新。我仍在研究后端和运维的修炼图谱,希望在接下来的几天内发布它。
在这边文章中我将回顾和分享制作这个修炼图谱的背后动机,一些免责声明如果你决定根据这个修炼图谱学习(这句不知道怎么翻译,反正意思就是,你根据我的修炼图谱学习,学不好跟我没关系),最后有一些细分和学习上的技巧,如果你期望在2019成为一个成熟的前端开发者。
动机
在开始这篇文章之前,为了让您了解我,我在过去的6年里一直在进行全栈开发,目前在tajawal担任首席工程师,在那里我不得不穿着许多不同的帽子作为工作的一部分。这不仅是我的爱好,也是我的工作职责之一,要密切关技术注趋势,承担技术决策并保持开发人员的积极性和成长性。
前端开发已经成长了很多而且成长的也很快;前端可用的技术数量多到足以让任何人感到困惑。我在开源和社区非常活跃; 如果我每次被问到或者在论坛上看到这个问题“接下来应该学什么”弹出时我都有一分钱,那么几年前我就会退休。大约2017年,我的一个大学老教授为她的学生准备一套计划来了解市场,并且向我求助希望我能给她一份WEB开发的工具和技术建议清单。我画了一个粗略的草图并转发给她,但后来我决定把它弄清楚一点并把它放在Github上。以便每当我被问到这个问题时我都可以推荐任何人。这就是这些修炼图谱诞生的原因。
声明
在开始看修炼图谱之前,请记住一些免责声明。
这个修炼图谱的目的是给你一个关于学习过程的概念,在你对下一步要学什么感到困惑时给你指导,并且不鼓励你去学习什么是时髦或过时的技术。
其次,研究一下你的就业市场。
不要忽视你所用的语言和工具对市场非常依赖是事实,所以对你所针对的市场做一些研究。
第三,您不需要知道此处列出的所有东西
你不需要学习这里列出的所有东西就可以找到你的第一份工作。如果你刚刚踏入前端开发不要被这堆积如山的路线图所吓到。我只是试图覆盖到你最终可能学到或者用到的所有东西。你可以只是学习其中很小的一部分,并在你开始项目开发后继续学习其他内容。
段位1 - 就业准备
如果你是一个刚刚踏入WEB开发的初学者,这里有一份不同修炼图谱给你。看一看下面的修炼图谱并且停止往下阅读;完成下面这个修炼图谱中列出的内容,在你在一些项目中运用到这些东西后再返回继续阅读。
只要学习完上面列出的内容你就可以称自己为web开发者了并能在市场上找到一份工作。我认识很多这样的人,他们从自由职业或是一份日常工作中赚了不少钱。花点时间在修炼图谱中列出的所有内容上,牢牢掌握所有这些内容并多练习;做很多很多的项目;下面提供一些建议供你参考:
任务:
- 构建一个番茄时钟应用。您可以克隆并制作此应用程序的Web版本;
- 创建一个响应式网站通过GitHub Repositories API来获取并展示本周前10库。
- 创建一个简单待办事项列表,支持 添加任务,标记任务完成,编辑或删除任务。
- 创建一个简单的秒表,支持用户启动,停止,暂停和重置。
完成上面这些后,学习一下版本控制系统,了解Git的基本用法并在GitHub上创建账号。
段位2 - 写更好的CSS
在你掌握基础之后,下一步就是学习如何写出可维护性的Css和使用Css框架。下面是这个修炼图谱大概的样子
完成此步骤后,请继续对您在第1阶段中所做的项目执行以下任务
任务:
- 使用
npm
或yarn
将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中提供更好的支持,并且是您可以拥有的最佳文档形式。目前在这个领域的主要是Flow和TypeScript 。然而,趋势趋向于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, 部分内容有修改。
写于 2019年02月22日Javascript Web 11763
如非特别注明,文章皆为原创。
转载请注明出处: https://www.liayal.com/article/5c6f5ed3c0ab13505eeefab7
记小栈小程序上线啦~搜索【记小栈】或【点击扫码】体验
~ 评论还没有,沙发可以有 O(∩_∩)O~