很多人都想学编程. 但是苦于没有具体的步骤和指导. 比如想找份前端开发的工作, 却不知道应该先学习什么再学习什么, 也不知道该选择什么样的工具.
因为经常被人问到类似的问题, 全栈开发者 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.
这份路线图可能还会有遗漏的地方, 但是足以应付任何 "前端工程" 角色之所需. 还要记住的是, 关键是尽可能多地练习. 一开始你可能会觉得很吓人, 总感觉自己没有掌握, 但这是正常的, 慢慢你就会觉得自己变得越来越好. 还有, 陷入困境时别忘了寻求帮助, 你会惊喜地发现有多少人愿意帮助你的, 或者至少我愿意.
我目前是在职前端开发, 如果你现在也想学习前端开发技术, 在入门学习前端的过程当中有遇见任何关于学习方法, 学习路线, 学习效率等方面的问题, 你都可以申请加入我的前端学习交流裙: 前面: 603 中间: 985 最后: 993. 里面聚集了一些正在自学前端的初学者 裙文件里面也有我做前端技术这段时间整理的一些前端学习手册, 前端面试题, 前端开发工具, PDF 文档书籍教程, 需要的话都可以自行来获取下载.
来源: http://www.jianshu.com/p/f8cf560229aa