阅读更多
编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到类似的问题,全栈开发者Kamran Ahmed索性在github上制订了一份现代前端开发的路线图,并且用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。 进入正题之前先交代一下我和这张路线图的背景。过去5年我一直在进行全栈开发,目前是tajawal的首席工程师(我得有很多头衔)。关注趋势并且让其他开发者训练得当不仅是我的爱好也是我的工作职责。在如何跟上形势方面我发现有很多新手(也包括一些有经验的)都感到很困惑。2017年的时候我有很多朋友都发邮件给我寻求指导,他们想知道做这一行的话应该学些什么。所以为了避免自己老是要碰到这样的麻烦同时也是为了帮助别人,我决定一劳永逸准备这些图表,这样只要有人问我时就把这些图表的链接发给他们。所以这些图表就是这么诞生的。
一开始他们只是想要一些工具的推荐,但是昨天我决定给他们一份更加结构化一点的东西,增加了细节并且设计成步骤的形式以便你可以更好地理解该选择什么,按照什么样的次序。
同时我还在制作后端和DevOps部分的路线图,但是前端已经做好了,你可以看看下面。 在详细介绍这份路线图的不同部分之前,我先花点时间讲讲我的免责声明:
这份路线图的目的是让你了解一下整体情况并且提供指导,如果你对接下来该学什么感到困惑的话。但并不鼓励你用赶时髦的心态去学东西。你应该对为什么一项工具在一些情况下更适合有基本了解,并且要记住时髦的东西从来都不意味着就是最适合你要处理的工作的。
好了,下面开始吧——下面就是这份路线图,但是本文的目的是依次解释路线图的每一个步骤。 你首先想要去做的第一件事是学习一些基础,包括学习HTML、CSS的一点基础知识,以及熟悉一下JavaScript的语法。 学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上:
  • 学习HTML基础,了解如何编写语义HTML
  • 理解如何把网页分成section(段落),以及如何正确组织DOM(文档对象模型)
任务——一旦你学习了HTML基础,至少要制作5个HTML网页。我建议你随便找一个网站,比如看看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看,但是暂时别担心,把你的关注点放在恰当的结构上。 学点CSS 现在我们已经学会了如何给网页准备好骨架,接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。
  • 首先要做的是学习语法,熟悉常见的CSS属性。
  • 了解盒模型(box model),掌握如何利用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,这其实是个转译器,可以将这门新的JavaScript转换为旧的JavaScript,因为有一些旧版的浏览器不支持新版的JS。不过现在先不用担心Babel,只需要了解相关概念,然后用到任何一种支持ES6的最新版浏览器上来练习一下就行。我们后面还会再继续讲ES6的。
现在你应该已经感觉到东西像是那么一回事了。如果你按照上面的步骤做下来的话应该鼓励一下。这些是你刚刚学到的一些最重要的东西。 我应该学jQuery吗? 曾经有一段时间每个人都对jQuery疯狂,也有充分的理由;这是一个强大的库,在JavaScript基础上提供了一个封装,让你可以用兼容浏览器的方式执行任何东西。不过那些日子已经一去不复返,现在新项目用它已经不是很多了,但是仍然还有人在用。你不是一定要学它,但是这玩意儿的确很容易,如果你想看看的话还是有好处的。 练习时间 我已经说过很多次但是还是要再说一次,不练习的话你学不到任何东西。你可能随时都会感觉自己已经理解了但是如果不练习的话很快就会忘掉。在按照这份路线图去学习的时候,要确保尽可能多地去上手实践。 继续做些响应式网站,用JavaScript增加交互性。你可以添加任何感兴趣的现有的网页上去,但记住要利用上目前学到的一切 一旦你制作出了一些网站,接下来就是开始做真正的东西了。你可以到github上面找一些项目打开某些开源项目的pull请求。以下就是一些可以去尝试的pull请求:
  • 增强UI,把任何演示页做成响应式或者改进设计
  • 看看有什么开放的issue是你能够解决的
  • 重构任何你认为自己可以改进的代码
就像这个repo一样,告诉他们你正在学习让他们就你的PR以及可以如何加以改进提供反馈。
尽管我愿意推荐这个Github库,但是这需要了解一点git的知识,所以这是可选的。你不必做这个但如果你做了的话,你会发现真的很有用——只要你开口你会惊讶地发现居然有那么多人愿意帮助你。那你也可以找到很多有关git的免费资源,比如试试这个 鼓励自己一下 现在你已经学习了必要的基础了。如果一切都学得不错的话,你就可以去找份自由职业工作或者也许可以去试试能不能找份全职了。然而,如果你想有一份更好的职业的话,现在还不能停止脚步,因为还有很长一段路要走。 包管理器 在此之前,如果你要用到一些外部库比如插件或者任何外部的桌面小部件的话,你得手工下载JavaScript和CSS文件并且将它们放到项目里面,然后那些库或者插件发布新版本的时候,你又得下载更新的文件再放到你的项目里面,这是极其麻烦的事情。包管理器可以干掉这种麻烦。它们帮助你把外部库和插件放到你的项目里面,这样你就不用关心手工复制库或者费事地在它们发布新版时更新文件的事情了。现在有yarn和npm了。这两个几乎是一样的,都只是实现,你可以任选一个,一旦学会了使用其中一个,另一个自然也不成问题。 现在学以致用吧 在对包管理器有了基本了解之后,你就可以去安装一些外部库到你前面制作的一些网页上了,比如安装一些提示插件,当用户点击某个按钮时显示提示信息,或者创建一个登录表单用一些表单验证库进行表单验证,或者试试不同的选项看看如何安装不同的版本。
记得要看看语义版本控制
CSS预处理器 预处理器以CSS默认不支持的功能丰富了后者。可选项有很多,包括Sass、Less、Stylus等等。要我选的话,我会选择Sass。然而,PostCSS最近的发展势头也不错,这属于一个锦上添花的东西,有点类似于CSS的“Babel”。你可以拿来独立使用或者在Sass的基础上叠加。目前我建议你先学Sass,等后面有时间了再看看PostCSS。 CSS框架 你已经不再需要学习CSS框架了,然而如果你想学一个的话。我会推荐在Bootstrap、Materialize和Bulma里面选。但如果你要考虑它们的市场需求的话,我会选择Bootstrap。 CSS组织 随着你的应用不断膨胀,CSS也开始变得混乱难以维系。有多种手段可以对你的CSS进行组织,让它更好地应对伸缩性,比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM。你应该了解它们之间的不同,但是我更偏好BEM。 构建工具 工具可以帮助你进行JavaScript应用的构建/打包以及开发。这一类包括了linter(代码检查)、task runner(自动构建)以及bundler(打包工具)。 对于自动构建,这个本来是是很多选项的,包括npm脚本、gulp、grun等等。不过这一次,既然webpack能够处理gulp能做的大部分东西,所以只有自动构建中的npm脚本可以用来对webpack能做的任务进行自动化。你不需要学习Gulp,然而到后面如果你有点时间的话,可以去看看它能否对你的应用有所帮助。 至于linter,再次地也有很多选项,其中包括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一直都在努力改进它。你需要确保的是不要因为什么东西火就选择什么,要去google一下,对比一下,看看哪一个最适合你。 这两个的比较以及我的个人体会我要留到下一篇文章再谈了,不过既然这篇文章是谈学习的,我就来讲讲如何找到Angular和React的学习曲线。
下图中的学习曲线考虑了你已经具备TypeScript的知识,而且也懂了一些Rx.JS的基础。至于这种假设的原因我会在将来的文章中解释,不过主要是因为Angular提供的其中的一些即时可用的标准和关键功能。但这并不意味着React就是坏的,它们各自都有自己的地位,我以后会进一步细谈。 你可以看看各自的学习曲线,看看哪个更适合你。
一旦你选择了自己的框架,当然还有其他一些东西需要你学的。比方说如果你决定学React的话,你可能还得学Redux或者Mobx去了解状态管理,具体选学什么要取决于你要做的应用的规模。Mobx适合中小规模应用,Redux更适合大规模应用。甚至你可能都不需要学,靠React的原生状态管理就行了,如果你的app允许的话。 如果你选择Angular,你就得用TypeScript(没有它你也能开发出Angular应用,但是我们还是推荐你使用)和Rx.js,这些除了Angular应用以外在其他地方也能用得上。这都是非常强大的库,也适合于函数编程开发。 如果你选了Vue.js的话,也许还得学习Vuex,这东西有点类似于Redux但是是给Vue用的。
需要注意的是,Redux、Mobx以及Rx.js都不是跟这些框架绑死到一起的,你也可以用到各种JavaScript应用里面。此外,如果你选择了Angular的话,确保你用的是Angular 2+而不是Angular 1+。
练习时间 现在你已经知道了开发现代JavaScript应用所需的一切。现在就用你选择的框架做点东西出来吧。你会在库中的idea目录找到一些点子;任选一个然后开始吧! 做完之后,再去看看如何衡量和改进性能。比方说可以看看Interactivity Time、Page Speed Index以及Lighthouse Score等。 渐进式Web应用 一旦完成了上述所有步骤,再来学习一下service worker以及如何制作渐进式web应用。 测试你的应用 应用测试有很多工具,各自的用途也不一样。我本人经常是组合使用Jest、Mocha、 Karma及Enzyme。然而,在开始选择工具之前,最好是首先理解有哪些不同的测试类型,看看所有的选项情况,然后从中再选择最适合您需求的一个。 这里有一份很好的概括,你可以去看看。 静态类型检查器 静态类型检查器帮助给JavaScript增加类型检查。你不需要学习这些,不过这些东西可以赋予你超能力,而且学习起来也很快,几个钟头就行了。这方面主要有TypeScript 和 Flow。我喜欢TypeScript ,不过你可以两个都看看,再选你喜欢的。 服务器渲染 目前为止,你所学到的技能应该足够你找到一个“前端工程”的位置了。但且慢,你还可以更上一层楼。 你还可以在选定的任何框架内再学学服务器端渲染的知识。有不同的选项可选,这要取决于你用什么样的框架。比方说如果你决定用React,最值得关注的选项是Next.js 和 After.js。如果是Angular,你可以选Universal。对于Vue.js,我们有 Nuxt.js。 这份路线图可能还会有遗漏的地方,但是足以应付任何“前端工程”角色之所需。还要记住的是,关键是尽可能多地练习。一开始你可能会觉得很吓人,总感觉自己没有掌握,但这是正常的,慢慢你就会觉得自己变得越来越好。还有,陷入困境时别忘了寻求帮助,你会惊喜地发现有多少人愿意帮助你的,或者至少我愿意。
  • 大小: 487.3 KB
  • 大小: 834.4 KB
  • 大小: 43 KB
来自: 36氪
5
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 现代前端开发路线图从零开始一步步成为前端工程师 [转] 编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到类似的问题,全栈开发者Kamran Ahmed索性在github上制订了一份现代前端开发路线图,并且用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。进入正题之前先交代一下我和这张路线图的背景。过去5年我一直在进行...
  • 程序人生:现代前端开发路线图从零开始一步步成为前端工程师 如果先想选择学习前端技术,并且想在这个行业走下去。 1、你要规划好你未来的学习计划。 2、学习前端不要急于求成,一定要一点一点的磨练自己的基础不断的丰满自己打磨自己。 3、要有一个良好的学习氛围。要有一个自己的学习团队,这样大家可以融会贯通.有想交流的可以加QQ群: 688676066很全的学习步骤指南。编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该...
  • 浅谈如何做一名优秀的WEB前端工程师 随着近两三年来RIA(Rich Internet Applications的缩写,中文含义为:丰富的因特网应用程序)的流行和普及,前端开发这个行业也开始备受关注。
  • 一文揭秘前端工程师的成长路径 随着互联网的迅猛发展,各种互联网项目的不断兴起让身处其中的玩家对用户体验提出了更高的要求,前端开发也由此逐渐成为了一个不可缺少的专业研发角色。 Web前端开发在国内开始被...
  • 如何成为一位合格的前端开发工程师 ——来自面试前端工作的思考
  • https://blog.csdn.net/web123456780/article/details/79494903 随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才。许多学生,包括以前的UI,java,或完全零基础,想学习的前端。下面的地图是在互联网上广泛传播的前端学习地图。许多初学者说,当他们看到这些密集的知识点时会感到头晕目眩。事实上,前端是一个宽泛的主题。但你需要学习前端你不必惊慌,虽然内容比较多,但没有跟踪可循,只要一步一步地不怕学习不好的前端!这里还是要推荐下小编的web前端学习群:6...
  • 写给想成为前端工程师的同学们 本文转载自:https://www.h5jun.com/post/to-be-a-good-frontend-engineer.html前端工程师是做什么的?前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,
  • https://blog.csdn.net/hicoldcat/article/details/52061654 1. 前言对于一名前端开发技术人员来说,需要学习的前端技术五花八门。各种库,各种框架及UI层出不穷。在这篇博文中我会记录我自己学习的路线。不一定是最好或者最合理,但却是我自己实际走过的路线,仅供参考。我自己也会不断更新,作为自己的技术打卡。
  • 如何成为前端开发工程师并获得第一份工作 你是否想成为一名前端开发工程师,但不知道怎么开始?你是否有过好奇你整天浏览的网站(如:简书,知乎,微博等)是怎么创建的?如果你有这些问题,那么我将在这篇文章中为你解答。 如果你已经阅读我之前写的《做为全栈开发工程师的我开始了自己博客之旅》和《我是如何走上编程之路的》两篇文章,你会知道我通过自学成为全栈开发工程师,从事开发工作有四年之久,我曾经辅助过许多新手入门前端开发,这是我这些年总结的,针对新...
  • 2018前端工程师成长路线图
  • web前端 学习路线图 本文属于职业解惑系列,读完此文要么生,要么死。要么充满斗志,要么颓废放弃。 没错,此文的观点可以让你极端,但极端的选择,完全取决于你个人! 付出就有回报,做好现在,技术只是为了改变生活! 好的,我x装完了,情怀也写好了,那么我们进入【相守】的话题。 由于前两篇【前端开发】文章,得到不少赞同和转发,应该也帮助了不少刚入门感兴趣的童鞋更好的入坑。 更不少人留言说
  • 零基础一个月学会这些就能成为初级CSS前端开发工程师 一个月的时间,成为一个初级的css前端开发工程师?作为一个混迹前端圈几年的码界小姐姐的我来说,我觉得还是蛮难的,毕竟前端这个东西技术的含金量还是蛮高的,不然你觉得关于程序员月入几万都是大风吹来的吗,虽然仅仅只是一个初级的css前端开发工程师,这么一说弄的好像css很简单似的(给你一个白眼,自行体会吧。),css也很难的好吧。不过一个月的时间从0基础到成为一个前端界搬砖的也不是不可以的。
  • https://blog.csdn.net/qq_41726885/article/details/79433346 前言最近总是会看到后很多人会问,我现在想学习Web前端开发,该如何下手,学习路线是怎样的?今天这篇文章,我来说说我自己对前端学习的理解,并结合一些面试中会常问到的问题来谈谈,如何才能在前端坑中,爬的游刃有余?Web前端基础首先前端的基础,相信大家闭着眼睛都能知道HTML+CSS+Javascript,但是它们的轻重缓急该如何去选择呢?我个人认为在学习优先级上HTML > CSS > J...
  • 作为一名Web前端开发工程师,2018告诉你如何正确的学习前端
  • web前端工程师进阶学习线路图 目前前端市场的人才结构以初级web前端工程师居多,因此由入行到进阶的成长曲线已经成为大多数前端工程师的发展目标。在提升阶段对于知识和技能掌握,我们需要从梳理好的知识架构中选择更深一层次的技术进行学习,衡量自身学习的难点,主攻学习难点和自己工作延伸技能点。在这里给大家一些参考,不妨从以下几个方向入手: 一、产品思想 要知道没有正确的产品思想,很难设计出良好的程序,无论从界面、交互,还是接口、逻辑...
  • 前端工程师的技术进阶点在哪里? 前端工程师的技术进阶点在哪里?单纯讲技术进阶点意义不大,脱离场景都是耍流氓。我举个实际例子,今天的阿里大文娱优土,阿里接管2年,底层替换差不多了,由内容为王慢慢转变为产品...
  • Web前端学习路线图,看你需要从哪开始学起? 随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才。很多同学,包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图,很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实,前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端! 如果有想一起学习web前端,HTML5...
  • 我推荐一个2018年 最全前端学习路线图,请收藏
  • 成为前端工程师,再是前端工程师 今天要跟大家说个观念,这个观念无论是在你开发,生活或者以后的道路上都会用到。 你想成为什么样的人,就该去做什么样的事。 那时候找个前端工作有多难,阳叔压根就没有更多实战经验,简历海投,太平保险的都给我打电话,叫我去面试销售;住在北京昌平贫民窟,500块钱的屋子,耗子三只,每天我写代码,耗子看着我在离我远处活动;我睡觉,耗子在书桌那边活动,每天每天得不到面试机会,看着代码直淌眼泪,周末去
  • 我就问,见过比这还有诚意的前端学习路线图吗? 前端很火,想学习前端的人也多。作为过来人,知道自学的辛苦。所以制作这份学习路线图的初心,就是让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。 在为时将近两个月的整理之后,就有了这份全面的前端学习资源大礼包!无论你是刚入门的小白,还是已经工作的前端开发者都能从中获取到你想要的资料!   这份资源包含:学习路线图、配套视频+源码+笔记、前端工具篇、前端经验篇、前端面试篇等
Global site tag (gtag.js) - Google Analytics