0
点赞
收藏
分享

微信扫一扫

2022 年前端工程师学习路线图（完整版）

生活记录馆 2022-01-12 阅读 77
前端javascriptcss

前端发展越来越快，每天都有数不胜数的技术发布。

想要入门前端却没有一条较为理想的路径？

在这个世界里兜兜转转了很久还是感觉在外围搬砖？

那么你可能需要这份技术学习路线图！

我们把学习前端分为三重境界：

  • 单机写基础网页
  • 联机高效写网页
  • 让网页能够被更多人使用

接下来我们就通过介绍这三重境界来为你呈现详细的学习路线图。

单机写基础网页

何为单机呢？其实就是一个人 🌚

你一个人使用 Web 基础技术开发网站，没有将代码分享给别人（你可能不知道程序世界的代码分享规则），同时只是在本地环境运行你的网站，你甚至对网站如何能把其他人访问到毫无头绪。

这个阶段也是成为一名前端工程师最最基础的一环，大部分初学者还停留在这个阶段，那么我们来看一下这个阶段需要什么样的技能。

HTML + CSS + JavaScript

没错，其实就是我们耳熟能详的前端三剑客，虽然看起来是最最入门的内容，但是需要了解的内容也不少，就类似我们需要先学 26 个字母，学各种汉字基础，才能写作或者创作诗歌一样。了解这三门技术大致需要了解那些内容以及有哪些学习资源推荐呢？

HTML

HTML 的学习大致需要 6 个阶段：

  • 学习基础知识：https://www.w3schools.com/html/html_intro.asp
  • 编写语义化的 HTML：https://www.w3schools.com/html/html5_semantic_elements.asp
  • 了解表单与校验：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
  • 遵守一些约定与最佳实践：https://github.com/hail2u/html-best-practices
  • 了解可访问性：https://www.w3schools.com/accessibility/index.php
  • 了解 SEO 基础：https://developers.google.com/search/docs

CSS

学习基础的 CSS 大致需要 3 个阶段：

  • 学习基础知识：https://www.w3schools.com/css/

  • 学会如何布局，其中布局又包括以下知识：

    • Floats 浮动：https://css-tricks.com/all-about-floats/
    • Positioning 定位：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
    • Display 展示：https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
    • 盒子模型：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
    • CSS 网格：https://cssgridgarden.com/
    • Flex 弹性盒布局：https://flexboxfroggy.com/
  • 学习媒体查询知识与 Web 响应式设计：https://www.freecodecamp.org/learn/responsive-web-design/

JavaScript

学习基础的 JavaScript 大致需要 5 个阶段：

  • 基础的语法：https://javascript.info/
  • 学习 DOM 操作：https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/
  • 学习 Fecth API 与 Ajax（XHR）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
  • 学习 ES6 与模块化 JavaScript：https://www.javascripttutorial.net/es6/

  • 理解进阶知识

    • Hositing：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

    • 事件模型：https://javascript.info/bubbling-and-capturing

    • 作用域：

      • https://developer.mozilla.org/en-US/docs/Glossary/Scope
      • https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

    • 原型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

    • Shadow DOM：https://www.youtube.com/watch?v=7Tok22qxPzQ

    • 严格模式等：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

了解了上面的这些内容，你基本上算是一名基础的前端工程师了，你可以编写各种各样的基础界面，也应该在学习的过程中产出了很多个 DEMO 了。

联机高效写网页

请注意我们这一小节的关键词：联机、高效。

在这个阶段，你将学会如下知识：

  • 如何以程序员的方式将代码与人分享并能够尝试参与别人代码的改进
  • 高效的编写网站
  • 理解网站是如何互通的，你是如何访问的网页的

基于上述的目标，这一阶段的关键技术如下：

  • Git、Github
  • Internet、Network 原理

  • 开发框架：

    • JS/HTML：Reatc/Redux、Vue/Vuex 等
    • CSS：Sass、Styled Components、TailwindCSS 等
    • 构建：Webpack、Babel、Npm Scripts 等
    • 包管理：Yarn、Npm 等

  • 开发规范

    • CSS：BEM 等
    • JavaScript：Airbnb JavaScript Style Guide 等

Git

Git 是一种版本控制系统。

你可以通过下面的链接学习它：

  • https://www.youtube.com/watch?v=zbKdDsNNOhg
  • https://www.youtube.com/watch?v=SWYqp7iY_Tc
  • https://youtu.be/Y9XZQO1n_7c?t=21

Github

你可以通过下面的链接学习它：

  • https://github.com/
  • https://docs.github.com/en/get-started/quickstart/hello-world

Internet

  • 了解互联网是如何工作的？

    • https://www.vox.com/2014/6/16/18076282/the-internet
    • http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm

  • 什么是 HTTP？

    • https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/
    • https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
    • https://kamranahmed.info/blog/2016/08/13/http-in-depth/

  • 什么是浏览器？它们是如何工作的？

    • https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
    • https://www.browserstack.com/guide/browser-rendering-engine
    • https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

  • 什么是 DNS？它们是如何工作的？

    • https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/

  • 什么是域名？

    • https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name

  • 什么是主机？

    • https://www.youtube.com/watch?v=htbY9-yggB0

JavaScript 框架

React

  • https://reactjs.org/
  • https://reactjs.org/tutorial/tutorial.html

Redux

  • https://redux.js.org/
  • https://redux.js.org/introduction/getting-started

当然状态管理方面目前也有 Mobx 与 Recoil 等有力的竞争者。

上述的是 React 生态，此外 JavaScript 社区还有 Vue 与 Angular 等其他非常有竞争力的框架。

CSS 框架

Styled Components

  • https://github.com/styled-components/styled-components

CSS Modules

  • http://www.ruanyifeng.com/blog/2016/06/css_modules.html

Sass

  • http://www.ruanyifeng.com/blog/2012/06/sass.html

TailwindCSS

  • https://tailwindcss.com/

构建相关

Webpack

  • https://webpack.js.org/

除了 Webpack，目前前端圈比较火的还有：

  • 为库打包的更佳选择：Rollup
  • 基于浏览器 ESM 的 Bundless 解决方案：Vite

Npm scripts

  • http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

Babel

  • http://www.ruanyifeng.com/blog/2016/01/babel.html

开发规范

BEM

  • https://en.bem.info/
  • https://juejin.cn/post/6844903672162304013

JavaScript Style Guide

  • https://github.com/airbnb/javascript

经历上面的一阵狂风乱炸的洗礼之后，你现在已经能够理解如下知识了：

  • 网页是如何运行的
  • 如何使用框架（JS、CSS 框架）、现代的前端工程化集合工具辅助你高效的编写界面
  • 在编写代码的时候，遵守相关的规范，写出更容易让其他人读懂的代码
  • 将你的代码使用版本控制系统 Git 来追踪，并通过 Github 将你的代码分析给其他程序员学习

让网页被更多人使用

如果你想让你的网站被更多人使用，甚至是你要开发一款产品，完成你的创业目标，那么你可能还需要一些额外的知识辅助你。

在这个阶段你需要了解的知识点如下：

  • 确保你的网站安全：HTTPS、Cors、内容安全策略等
  • 确保的应用尽可能少 BUG：TypeScript、Jest、Cypress、Enzyme、React Testing Library
  • 让用户在没有网的情况下也能使用：PWA、Storage、Web Socket、Service Workers 等
  • 让你的网站被更快的访问：Lighthouse、Devtools、Performance Metrics、RAIL Model、PRPL Pattern
  • 让你的网站能更好的被索引：SSR
  • 让你的应用分散在各个平台：React Native、Flutter、Electron
  • 让你的网站也能够处理更复杂的动效：WebAssembly 等

Web 安全

HTTPS

  • https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/
  • https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https
  • https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https

CORS

  • https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

CSP（内容安全策略）

  • https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
  • https://developers.google.com/web/fundamentals/security/csp

测试工具

Jest

  • https://jestjs.io/

React Testing Library

  • https://github.com/testing-library/react-testing-library

Cypress

  • https://www.cypress.io/

Enzyme

  • https://github.com/enzymejs/enzyme

类型检查工具

TypeScript

  • https://www.typescriptlang.org/
  • https://www.typescriptlang.org/docs/
  • https://www.typescriptlang.org/docs/handbook/intro.html

离线使用

Web 最新的 Progressive Web Apps （PWA）技术，使得 Web 网站可以像 App 一样，拥有离线使用、推送通知等功能。

PWA 主要包含下面几个部分：

  • Storage
  • WebSockets
  • Service Workers
  • Location
  • Notifications
  • Device Orientation
  • Payments
  • Credentials

主要的参考学习资源如下：

  • https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
  • https://github.com/GoogleChrome/workbox

性能相关

Web 性能是加载时间和运行时的客观测量和感知用户体验。 Web 性能是指网站加载、变得交互和响应所需的时间，以及在用户交互期间内容的流畅程度。

性能涉及到计算、衡量与改进性能，主要涉及下面这些知识点：

  • PRPL Pattern
  • RAIL Model
  • Performance Metrics
  • Lighthouse
  • Devtools

主要的参考学习资源如下：

  • https://developer.mozilla.org/zh-CN/docs/Web/Performance
  • https://web.dev/

SEO 相关

SEO（Search Engine Optimization）—— 搜索引擎优化，目的是帮助我们的网站在Google或者Baidu搜索的时候排名会提升靠前。

Next.js

  • https://nextjs.org/
  • https://nextjs.org/docs/getting-started
  • https://www.freecodecamp.org/news/the-next-js-handbook/

多平台

React Native

  • https://reactnative.cn/
  • https://github.com/facebook/react-native

Flutter

  • https://flutter.cn/
  • https://flutter-io.cn/

Electron

  • https://www.electronjs.org/
  • https://wizardforcel.gitbooks.io/electron-doc/content/tutorial/tutorial.html

高性能应用

WebAssembly

  • https://developer.mozilla.org/zh-CN/docs/WebAssembly
  • https://juejin.cn/post/7035991254257106958

当你学完了这个部分的内容，基本上已经是算是一位高阶的前端工程师了，能够在任何大厂胜任各种研发工作，当然能够坚持到这里不容易，需要持续的努力，加油💪

写在最后

本文从三个维度切入了在 2022 年作为一名前端工程师需要学习的内容，以及给出了详细的学习路线图和对应的学习资源，当然有些资源都是国外的，需要自备科学上网工具，后续会基于这条学习路线图进行完善，并且补充详细的中文学习资源，敬请期待。

❤️/ 感谢支持 /

以上便是本次分享的全部内容，希望对你有所帮助_

喜欢的话别忘了 分享、点赞、收藏 三连哦~

举报

相关推荐

2023年Java学习路线图完整版

Java微服务数据库后端开发

Java工程师学习路线图，从初级到高阶你需要掌握这些

java开发语言Java数据库后端开发JavaScript前端开发

图解java工程师学习路线

系统JavaScript前端开发

运维工程师学习路线

数据GNU缓存软件研发

大数据工程师技能要求的学习路线图

大数据工程师大数据JavaHDFSMySQL数据库

程序员职业发展路线图（完整版+珍藏版）

职场和发展程序人生twitter

Java学习路线|【完整版】

java学习开发语言

Java开发工程师学习路线（2022年最新版）

java学习

架构师学习路线图

java架构之路架构设计

鱼皮前端路线图

前端
0 条评论