路线图的DevOps部分，不过前端已经做了，可以看下图。现代前端发展路线图：从零开始，一步一步成为前端工程师最后，如果你在自学中遇到困难，想找一个前端学习环境，可以加入我们的前端学习圈，点我加入，会节省很多时间，减少很多学习中遇到的困难。在详细介绍本路线图的不同部分之前，让我花点时间声明一下我的免责声明：本路线图的目的是为您提供一个概览，并在您对下一步要学什么感到困惑时提供指导。但是不鼓励你用时髦的心态去学东西。您应该对为什么某种工具更适合某些情况有一个基本的了解，并记住流行的东西并不意味着它最适合您正在做的工作。好吧，让我们开始吧——这是路线图，但本文的目的是依次解释路线图的每个步骤。首先要做的是学习一些基础知识，包括学习一点HTML、CSS的基础知识，熟悉JavaScript的语法。学习HTML基础知识HTML为您的网页提供结构。它让你像人体骨骼一样站立。首先，您需要学习语法及其提供的所有内容。你的学习应该集中在以下方面：学习HTML基础知识，理解如何编写语义HTML理解如何将网页划分为部分（段落），以及如何正确组织DOM（文档对象模型）任务-一旦你学习了HTML基础知识，制作至少5个HTML网页。我建议你找一个随机站点，例如Github个人资料页面或Twitter登录页面。然后专注于正确组织内容。结果可能很丑陋，但暂时不要担心，专注于适当的结构。学习一些CSS现在我们已经学会了如何为网页准备骨架，接下来就是在这个基础上添加一些皮肤，让它看起来更好看。CSS-级联样式表用于美化您的HTML页面。首先要做的是学习语法并熟悉常用的CSS属性。了解盒模型（boxmodel），掌握如何使用Grid和Flexbox来准备布局。学会了上面的内容之后，再学习下面的内容，通过媒体查询让网站响应。任务-一旦掌握了基础知识，就可以设计您在上一步中制作的HTML页面了。例如，如果您为Github配置文件编写了HTML页面，现在是应用CSS使其看起来像实际GitHub配置文件页面的时候了。应该使用前5页进行尝试。学习JavaScript的基础知识JavaScript可以使您的HTML页面更具交互性。假设您在网站上看到的所有幻灯片、弹出窗口和广播通知，以及在不重新加载页面的情况下重新加载页面的特定部分，都是用JavaScript完成的。在此步骤中，您将学习JavaScript的基础知识，为接下来的旅程做好准备——学习该语言的语法和基本机制。了解如何使用JavaScript操作DOM，例如如何从页面中删除一些元素、如何添加一些元素、添加和删除类、通过JavaScript应用CSS样式等。学习和理解范围、闭包、变量等主题完成后进行提升和事件冒泡。了解如何使用XHR或Ajax生成HTTP调用。Ajax允许您在不重新加载网页的情况下执行某些操作。学完之后，接下来就是了解ES6+的所有新特性。ES6只是JavaScript的一个版本，它为该语言引入了许多有趣的更新，例如类、定义变量的多种方式、数组的新方法、字符串连接等等。你在网上找到的大部分文章都会用Babel来解析ES6，其实就是一个transpiler，可以把这个新的JavaScript转换成旧的JavaScript，因为有些旧的浏览器不支持新版的JS。不过暂时不用担心Babel，你只需要了解相关概念，然后使用任何支持ES6的最新浏览器进行练习即可。后面我们会继续讲ES6。到现在为止，您应该对事情的样子有所了解。如果您按照上述步骤操作，您应该受到鼓励。这些是您刚刚学到的一些最重要的东西。我应该学习jQuery吗？曾几何时，每个人都为jQuery疯狂，这是有充分理由的；它是一个强大的库，在JavaScript之上提供了一个包装器，让您可以以浏览器兼容的方式做任何事情。那些日子已经一去不复返了，不再有多少新项目使用它了，但是仍然有人在使用它。您不必学习它，但它真的很容易，如果您愿意，看看也很好。练习时间我已经说过很多次了，但我再说一遍，不练习你什么也学不到。你可能随时都觉得自己明白了什么，但如果你不练习，很快就会忘记。遵循此路线图学习时，请确保获得尽可能多的实践经验。继续制作一些响应式网站，添加与JavaScript的交互性。您可以添加您感兴趣的任何现有页面，但请记住使用您目前学到的所有内容。一旦你制作了一些网站，就该开始制作真正的东西了。你可以在github上找到一些项目，并为一些开源项目打开pullrequests。这里有一些可以尝试的拉取请求：增强UI，使任何演示页面响应或改进设计查看是否有任何可以解决的未解决问题重构任何您认为可以像这个repo一样改进的代码并让他们提供有关您的PR以及如何改进的反馈。虽然我很乐意推荐这个Github存储库，但它需要一点git知识，所以它是可选的。您不必这样做，但如果您这样做，您会发现它真的很有用——您会惊讶地发现，只要您提出要求，就会有这么多人愿意帮助您。然后你还可以找到很多关于git的免费资源，例如试试这个。试一试现在您已经了解了必要的基础知识。如果一切都学好了，你可以去找一份自由职业，或者尝试找一份全职工作。但是，如果你想拥有更好的事业，现在还不能停下来，因为还有很长的路要走。包管理器在此之前，如果你想使用一些外部库，如插件或任何外部桌面小部件，你必须手动下载JavaScript和CSS文件并将它们放入项目中，然后发布这些库或插件的新版本有时，你必须下载更新的文件并将其放入你的项目中，这是非常麻烦的。包管理器可以解决这个问题。它们帮助您将外部库和插件放入您的项目中，因此您不必担心手动复制库或在发布新版本时费心更新文件。现在有了yarn和npm。这两个差不多，都只是实现，你可以选择一个，学会用一个，另一个自然就没问题了。下面我们来实践一下，在对包管理器有了基本的了解之后，可以给之前做的一些网页安装一些外部库，比如安装一些提示插件，在用户点击某一个时显示提示信息按钮，或者创建一个登录表单以使用一些表单验证库进行表单验证，或者尝试不同的选项以查看如何安装不同的版本。记得看一下语义版本控制CSS预处理器预处理器通过CSS默认不支持的功能丰富了后者。有很多选项，包括Sass、Less、Stylus等。如果必须选择，我会选择Sass。不过，PostCSS最近也风生水起，锦上添花，有点像CSS的“巴别塔”。你可以单独使用它，也可以将它叠加在Sass之上。目前建议大家先学Sass，以后有时间再看看PostCSS。CSS框架你不再需要学习CSS框架，但如果你想学习一个。我建议在Bootstrap、Materialise和Bulma中进行选择。但是如果要考虑他们的市场需求，我会选择Bootstrap。CSS组织随着应用程序的增长，CSS变得凌乱且难以维护。有多种方法可以组织CSS以更好地处理可伸缩性，例如OOCSS、SMACSS、SUITCSS、Atomic和BEM。你应该知道区别，但我更喜欢BEM。构建工具可以帮助您构建/打包和开发JavaScript应用程序。此类别包括linters（代码检查）、taskrunners（自动构建）和bundlers（打包工具）。对于自动构建，有很多选项，包括npmscripts、gulp、grun等。但是这一次，由于webpack可以处理大部分gulp可以做的事情，所以只有自动化构建中的npm脚本可以用来自动化webpack可以做的任务。你不需要学习Gulp，但如果你以后有一点时间，你可以去看看它是否对你的应用有帮助。至于linters，同样有很多选择，包括ESLint、JSLint、JSHint和JSCS等。但是目前主要是ESLint用的比较多。对于模块打包器，不同的选项包括Parcel、Webpack、Rollup、Browserify等。如果非要二选一的话，此刻闭着眼睛选择Webpack也是可以的。Rollup也很常用，但主要还是推荐在库上使用。至于app，还是以webpack为主。所以现在大家可以先了解一下webpack，想了解的话再了解一下Rollup。练习时间-做点什么恭喜！您现在可以称自己为75%的现代JavaScript开发人员。现在继续，用你学到的东西做点什么。也许将来可以为Sass和JavaScript使用一个库。然后使用Webpack将Sass转CSS，babel转ES6代码。完成后将其发布到Github和npm。选择一个框架在旧的路线图中，这部分通常在基础知识旁边，但这次我将它更改为将它放在Sass、构建工具和包管理器之后，因为在框架中你将使用它们所有的东西，如果你没有这样做的知识。该框架还有几个选项。不过目前比较常用的是React、Vue和Angular。React.js最近的需求量很大。但是，上面列出的任何一个都不会出错。我个人会选择React或Angular。但特别是，作为初学者，你可能会发现Angular相对容易一些，也许是因为它支持几乎所有立即可用的东西，例如支持延迟加载的强大路由器、支持拦截器的HTTP客户端和依赖注入。,组件CSS封装等，不用担心选择外部库。但React在社区方面肯定有优势，Facebook一直在努力改进它。你需要确定的是不要仅仅因为它很受欢迎就选择它，去谷歌，比较一下，看看哪一个最适合你。关于这两者的比较和我的个人经验，我会留到下一篇文章，但由于这篇文章是学习方面的，所以我会谈谈如何找到Angular和React的学习曲线。下图中的学习曲线考虑到您已经具备TypeScript的知识并且还了解Rx.JS的一些基础知识。我将在以后的文章中解释这种假设的原因，但主要是因为Angular提供的一些开箱即用的标准和关键功能。但这并不意味着React不好，它们各有千秋，稍后我会详细介绍。您可以查看各自的学习曲线，看看哪一个更适合您。现代前端发展路线图：从零开始，一步步成为前端工程师一旦选择了适合自己的框架，当然还有其他需要学习的东西。例如，如果您决定学习React，您可能还必须学习Redux或Mobx以了解状态管理，这取决于您要学习的应用程序的规模。Mobx适合中小型应用，而Redux更适合大型应用。如果您的应用程序允许，您甚至可能不需要学习它，只需依赖React的本机状态管理即可。如果你选择Angular，你必须使用TypeScript（你可以在没有它的情况下开发Angular应用程序，但我们仍然建议你使用它）和Rx.js，它可以在Angular应用程序之外的其他地方使用。这些都是非常强大的库，也适合函数式编程开发。如果你选择Vue.js，你可能要学习Vuex，它类似于Redux，但用于Vue。需要注意的是，Redux、Mobx和Rx.js并不依赖于这些框架，您还可以在各种JavaScript应用程序中使用它们。此外，如果您选择Angular，请确保您使用的是Angular2+而不是Angular1+。”我是一名从事web前端开发6年的老程序员（我的微信：webxxq），今年年初，我花了一个月的时间组织了一整套web前端培训课程，2019年最适合自学的（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动HTML5以及各种框架和新技术整理、打包给每一位前端小伙伴，这里是前端学习者的聚集地，欢迎新手和进阶小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注回复“2019”即可获取）。现在练习时间你已经知道开发现代JavaScript应用程序所需的一切。现在就开始使用你选择的框架构建一些东西。你会在库的ideas目录中找到一些想法；选择一个并开始！完成后，去看看如何衡量和提高性能。例如，您可以查看InteractivityTime、PageSpeedIndex、LighthouseScore等Progressivewebapplications完成上述所有步骤后，让我们了解serviceworkers以及如何制作渐进式网络应用程序。测试你的应用程序应用程序测试的工具有很多，每个的用途都不同。我经常结合使用Jest、Mocha、Karma和Enzyme。但是，在开始选择工具之前，最好先了解有哪些不同的测试类型，查看所有选项，然后从中选择最适合您需要的那个。这是一个很好的概述，您可以查看。静态类型检查器静态类型检查器有助于向JavaScript添加类型检查。你不需要学习这些，但它们可以赋予你超能力，而且学起来很快，几个小时就可以。这方面主要有TypeScript和Flow。我喜欢TypeScript，但您可以同时查看两者并选择您喜欢的。
