美文网首页程序员前端开发那些事儿让前端飞
2020 前端学习路线总结,哎呦,不错哦!

2020 前端学习路线总结,哎呦,不错哦!

作者: 开跑车的程序员 | 来源:发表于2020-11-16 11:47 被阅读0次

2020 前端学习路线总结

在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读。

图下面是我翻译的一个文字版,可以先看图再看文字。

✔︎ 表示个人推荐学习

✔︎ 表示可选择学习

✔︎ 表示不需要严格按照路线的先后顺序,可在任何时间补充这一块的知识

✘ 表示个人不再推荐

计算机网络

掌握计算机网络的基础是一名前端工程师的基本素养,建议先学习以下的知识:

✔︎ Internet 如何工作

✔︎ HTTP 协议

✔︎ 浏览器工作机制

✔︎ DNS 及其运行机制

✔︎了解域名、网站托管

HTML

✔︎ 学习 HTML 基础,标签、元素、表单验证等等

✔︎ 语义化标签

✔︎ 了解 Web 无障碍(Accessibility)

✔︎ 学习 SEO 优化

CSS

✔︎ 学习 CSS 基础

✔︎ 制作布局:浮动、定位、显示、盒模型、网格布局、弹性布局

✔︎ 响应式设计和媒体查询(@media)

✔︎ 结合 HTML 制作一个简单的网页作为最佳实践

JavaScript

✔︎ 学习语法和基本结构

✔︎ 学习操作 DOM

✔︎ 学习 Fetch API / Ajax(XHR)

✔︎ ES6+ 和模块化 JavaScript

✔︎ 了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念

版本控制

✔︎ Git 的基本操作

✔︎ 创建账号并且学习使用 GitHub

✔︎ 创建账号并且学习使用 GitLab

Web 安全知识

✔︎ HTTPS

✔︎ 内容安全策略(CSP)

✔︎ 跨域资源共享

✔︎ OWASP 安全风险

上面的内容是前端最基础的部分,建议多花时间,掌握好每一个知识点。

从这开始,将进入前端工程化的部分,你可能会接触到很多种不同的框架,并学习使用多种的工具为自己的开发提效。

包管理工具

npm 和 yarn 都很好,选择一个学习即可,他们两是相似的

✔︎ npm

✔︎ yarn

CSS 构架

通过使用现代的 CSS 框架和 CSS-in-JS 的书写方式,不用再担心 CSS 的构架问题,但熟悉 BEM 规范是一个不错的选择。

✔︎ BEM,一种书写规范

✘ OOCSS

✘ SMACSS

CSS 预处理器

以下三个可选择一个进行学习。

✔︎ SCSS

✔︎ PostCSS

✔︎ Less

构建工具

任务执行器

✔︎ npm scripts

✘ Gulp

2.代码检查和格式化工具

✔︎ Prettier 代码格式化

✔︎ ESLint 代码检查

✘ StandardJS

3.模块打包

✔︎ Webpack

✔︎ Rollup

✔︎ Parcel

前端框架

前端框架推荐先学习 React,能理解函数式编程和组件化。Vue 的特点是上手快,中文文档齐全,可以选择性的学习。

✔︎ React.js

✔︎Redux

✔︎ MobX

2.✔︎ Vue.js

VueX

3.✔︎ Angular

RxJS

NgRx

现代 CSS

✔︎ Styled Component

✔︎ CSS Module

✔︎ Styled JSX

✔︎ Emotion

✘ Radium

✘ Glamorou

Web 组件

✔︎ HTML 模版

✔︎ 自定义元素

✔︎ Shadow DOM

CSS 框架

CSS 框架有两种,一种是基于 JavaScript 框架开发的应用程序。推荐的框架有:

✔︎ Reactstrap

✔︎ Material UI

✔︎ TailWind CSS

✔︎ Chakra UI

另外一只是纯 CSS 框架,默认和不和 JavaScript 组件一起使用。

✔︎ BootStrap

✔︎ Materialize CSS

✔︎ Bulma

测试

在这里你需要学习使用下面的框架进行单元、集成和功能测试。

✔︎ Jest

✔︎ react-testing-library

✔︎ Cypress

✔︎ Enzyme

类型检查器

✔︎✔︎ TypeScript

✘ Flow

上面是前端工程化的学习内容,接下来的内容涉及到性能、服务端渲染以及跨端,这一部分前端也叫被称作「大前端」。

PWA

✔︎ 学习 PWA 中使用到的 Web API:

Storage

Web Sockets

Service Workers

定位

通知

设备方向

支付、证书等等

2.✔︎计算、测量以及提高性能:

PRPL 模式

RAIL 模式

性能指标

学习使用 LightHouse

学习使用 DevTools

服务端渲染

✔︎ Next.js (React.js)

✔︎ Nuxt.js (Vue.js)

✔︎ Universal(Angular)

✔︎ GraphQL

✔︎ Apollo

✔︎ Relay Modern

✔︎ 静态网站生成

✔︎ Next.js

✔︎ GatsbyJS

✔︎ Nuxt.js

✔︎ Vuepress

✔︎ JekyII

✔︎ Hugo

✔︎ 移动端应用开发

✔︎ ReactNative

✔︎ Flutter

✔︎ 桌面应用开发

✔︎ Electron

✔︎ Carlo

✔︎ Proton Native

✔︎ WebAssembly

我目前是在职前端开发,如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我的前端学习交流3000人裙:前面:851 中间:231 最后:348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册,前端面试题,前端开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。

总结完毕,不由得感叹前端生态真是丰富多彩,要学的东西很多,自己不懂的也很多,有些知识点也是浅尝辄止。虽然有这么多的方向,但还是需要找到一个点能够深挖。

如果你是前端的初学者,也不要被这些框架给吓到,学好基础然后加以实践更为重要。

上面推荐的 Roadmap GitHub 仓库里也有后端以及 DevOps 的学习路线,可以自行浏览,如果有时间我也会整理出一版文字版以供大家参阅。

Keep Learning,持续精进。

相关文章

  • 2020 前端学习路线总结,哎呦,不错哦!

    2020 前端学习路线总结 在 GitHub 看到一个很不错的前端学习路线图[https://link.zhihu...

  • 哎呦,不错哦!

  • 哎呦,不错哦

    《哎呦,不错哦》 很多事情比我想象的复杂 可是我还是习惯简单的想法 在我看来好多人的行为都不太礼貌啦 自己不喜欢的...

  • 哎呦不错哦

    社工考试考场一出,我们都在查公交路线。 α:“32……不行,72……也不行。” β:“可以坐308啊” α:“哪儿...

  • 哎呦,不错哦!

    我带你去看周杰伦的演唱会 那你对我来说一定很重要 因为我要带你听的 是我的整个青春 很多人都说周杰伦是自己的青春,...

  • 哎呦,不错哦

  • 哎呦不错哦

    哎呦不错哦,一句简单的话语,表明了时代不同了,时代在进步,人类命运共同体共享地球村那会是真的呢,这个世界就是弱肉强...

  • 哎呦不错哦

    天下之大,无奇不有,方可吞天之地灵气鲲鹏展翅,九万里风鹏正举。风休住。蓬舟吹取三山去了,天下三分明月夜,短松冈,与...

  • 哎呦,数学不错哦!

    遇到挑食的孩子!想尽办法让他吃下去,真的很头痛!! 他爸教过他说0就是没有,他很会利用…… 对他可以数到100了…...

  • 哎呦!还不错哦!

    第一天的幼儿园生活挺顺利的,老师也给出了良好的评价,忐忑了一天的心终于可以放下了! 下午我准时到了学...

网友评论

    本文标题:2020 前端学习路线总结,哎呦,不错哦!

    本文链接:https://www.haomeiwen.com/subject/czbabktx.html