前端体系认识和我的技术栈

文章目录

前端体系认识和我的技术栈
- 前言
- 往期的学习记录
- - 第一阶段：认识（前端路线）
  - 第二阶段：理解（从产品角度看前端）
  - 第三阶段：实践（vue框架）
- 前端体系认识
- - 别人的前端体系
  - 我所认为的学习路线
  - 我所认为的底层
- 不仅仅是前端
- 我的技术栈
- - 从开发角度
  - 从自身角度
- 常用到的网站
- - 搜索网站
  - 同步代码的网站
  - 互联网资讯网站
  - 技术文档网站
  - 我常用的工具的网站
  - 我常用的技术视频学习网站
- 我常用的软件

前言

从2020.3.12日我才开始系统接触前端。在此之前，只是简单了解前端的HTML、CSS、JavaScript。其他的vue、elementUI、node.js、ajax、webpack等都没去涉及过。

我当时在做毕业设计，题目是基于Java的在线小说发布系统。内容和前端、后端相关，于是边了解Java边了解前端，碰巧当时字节跳动校招，我被校招的前端开发工程师和Java后端开发工程师的岗位要求吸引了，由此入坑（快乐）。

1、2020届获得本科及以上学历，计算机相关专业；

2、精通HTML、CSS、JS，熟悉页面架构和布局，熟悉 HTML5/CSS3 等常用技术；

3、熟悉常用UI框架（如 Bootstrap/Pure/Kendo 等);

4、精通JavaScript、AJAX、DOM、jQuery等技术；

5、熟悉NodeJS，熟练使用 Grunt、Gulp、Webpack 等构建工具；

6、具备MVVM框架开发经验，如 React、VueJS、AngularJS 等；

7、良好的沟通和团队协作能力、热爱技术、责任心强、能推动技术框架的落地使用。

这篇前端体系认识是陆陆续续写的。内容有三，往期学习，前端认识，不仅仅是前端。是我从三月份到八月份的迭代认识，回顾反思。

往期的学习记录

第一阶段：认识（前端路线）

2020.3.10：做网站的学习路线：bootstrap、jQuery、ajax、json

2020.3.30：前后端发展----wsdchong：vue.js、sass、webpack

2020.4.13：前后端学习：基本功、技巧、工具

2020.4.21：前端后端知识体系理解–wsdchong：node.js后端、Java后端

2020.4.22：第一届前端早早聊笔记–wsdchong：业务与技术

2020.5.1：我的技术栈准备：阶段性分析。

2020.6.13：前端学习梳理——wsdchong：学习路线

第一阶段：浅层。从不懂到懂，了解了前端的全貌。慢慢积累认识。最关键的是写了《前端学习梳理》。

学习过程大概有一个月，从求职网站上、博客上、官网上、《前端早早聊》上看的消息，一点一点按照自己的理解补充到自己的理解体系中。

前端学习路线可以参考峰华的博客：想成为前端大神秒杀群雄？收下这份2020年最新前端学习路线！其中有一句博主的回复很到位：html css js三大件学好，React vue angular挑一个深入，打包，部署，性能优化掌握一下。

这篇博客有链接，可以参考，不过也不用全部都学，了解即可，能拿vue框架开发一个平台项目就可以进入一个公司实习，在实习的过程中，三大件、打包等就会疯狂提升，用问题驱动理解。

第二阶段：理解（从产品角度看前端）

2020.6.13：《前端技术架构与工程》之编程语言笔记：理解CSS（less、sass、postcss）、理解JavaScript（ES6新特性的意义）

2020.6.14：《前端技术架构与工程》之性能笔记：对HTTP协议、浏览器有了崭新的认识。

2020.6.16：前端三大件的学习——wsdchong：从编程语言、性能的角度认识HTML、CSS、JavaScript。

第二阶段：底层。从全貌到底层，了解了前端变化的原因。使得我能一通百通。最关键是看了《前端技术架构与工程》这本书。

学习时间大概是两个月。让我把设计、开发、测试、运维、架构等方面建立了全新的认识，运用知识的时候算是知其然也知其所以然。这本书是我认识的突破点。让我对编程语言的选择、性能优化等有了一个全面的了解。以此，我能过更快透过现象看到本质。

第三阶段：实践（vue框架）

2020.7.15：数据可视化学习笔记一——概述：公司的技术栈爬虫、spark、可视化、GIS；

2020.8.4：使用SVN更新自己的文档——wsdchong：团队协作SVN；

2020.8.4：mapbox的初次笔记——wsdchong：mapbox库的使用；

2020.8.8：2020最新版vscode格式化代码——wsdchong：vscode工具的使用；

2020.8.12：前端可视化echarts使用理解——wsdchong：echarts库的使用；

2020.8.12：vue+Cesium学习笔记——wsdchong：cesium库的使用；

第三阶段：实践。从底层到实践，将理论用到实践中。使得自己能产生效益。我在一家做智慧城市的公司做了可视化前端开发。

学习时间大概一个月。在工作中把所学的运用起来。果然实践出真知。理论的知识通过实践迅速应用，实践中遇到的问题补充到理论知识中。对前端”页面创建-静态实现-接口“的一个流程有了一个实践角度的认识。

从实践的角度来说。前端有两个最基础的功能，一是静态实现，运用框架和库把界面实现；二是通信，运用axios发送请求使界面能与后端交互。

此外就是后端服务搭建、存储、工程与协作。

前端体系认识

别人的前端体系

我找到这个前端体系认识是在实用角度出发的前端体系，毕竟学以致用。

不过从理论角度来说，前端的基础是HTML、CSS、JavaScript、HTTP协议，还有在这基础上的HTML5新特性（canvas）、CSS预处理语言（解决全局性、兼容性、响应式的问题）、ES6新特性（静态语言、箭头函数、promise）、以及计算机网络（浏览器原理、HTTP协议、安全、SEO）。

很显然，从理论角度去学前端，就会有许多需要去研究，但是却又不能很快上手，比较打击新生积极性。

而从实用角度去学前端，就像是使用黑盒，虽然不知道原理，但能达到效果。并且很快上手，大大提高新生学习积极性。

现在使用原生的要么是菜鸡，要么是大佬。正常项目都开始使用框架，因为框架里就把这些底层的东西封装好了，只需要照着官方文档使用即可，便于公司生产。（细节部分以后有机会再补充）

重点学习前端基础，要十分熟练。辅助了解工程与协作以及通信的axios，要能使用。服务部分、通信部分，以及存储部分要了解概念，知道作用。

参考：开课吧——web前端高级工程师

有一部分内容修改了。

前端基础

JavaScript进阶：ES6

vue全家桶：vue指令、组件、插件与过滤器、脚手架、vue-router、vuex、vue devtools、elementUI

服务

node.js：环境搭建、包管理器、搭建服务器、实现爬虫

koa2：koa-views、koa-router、koa-static

通信

同源：HTTP、XHR、ajax、axios

非同源：前后端分离开发、跨域解决方案、jsonp原理解析、cors跨域设置

存储

服务端存储：MongoDB、mysql

客户端存储：cookie、localstorage、sessionStorage、离线存储

工程与协作

git或SVN

vscode：格式化规范

vue CLI（封装了webpack）

前端基础部分（实用角度）

深刻认识到vue的两大特性——数据驱动视图、组件化；
理解vue指令、方法、生命周期，
熟练使用vue CLI、vue Router、vue组件通信（父子通信、兄弟通信、平行通信、vuex）、axios；
进阶：可扩展（解耦、组件化）、性能优化（资源压缩、懒加载、预加载、缓存）、安全（登录、反爬虫）
最后利用所学的做一个平台，如电商平台、博客平台、数据可视化平台等等。

在学习这部分的时候，多参考HTML、css、JavaScript，便于vue的使用。

我所认为的学习路线

理论部分：HTML（DOM）、CSS、JavaScript、HTTP（ajax）
框架部分：vue（指令、方法、生命周期）、vue CLI（webpack）、vue Router、组件通信（父子通信、兄弟通信、平行通信、vuex）、axios；
工具部分：SVN、vscode自动格式化、Chrome调试；

参加教程：

理论部分、框架部分内容写在最后的常用网站中。

工具

使用SVN更新自己的文档——wsdchong

2020最新版vscode格式化代码——wsdchong

Chrome调试我还没写。

入门

首先了解前端的学习路线，方便对前端有个总体认识，不用都会，但需要对常用到的名词了解。

然后参考别人的vue平台进行模仿。构建自己的知识理论结构。（万事开头难，许多人就是徘徊在前端门外，入门之后，就可以进入飞速成长阶段）

前期学习的内容有

理论部分：HTML（DOM、BOM）、CSS、JavaScript

框架部分：vue（指令、方法、生命周期）、vue CLI、vue Router、组件通信（父子通信、兄弟通信、平行通信、vuex）、axios；

工具部分：SVN、vscode自动格式化、Chrome调试；

熟练

查漏补缺，多使用别人的轮子，完善自己的项目（如前端实验台）。

熟练使用别人的轮子后，边研究理论基础（HTML、CSS、JavaScript、计网），尝试自定义别人的轮子。

做好自己造轮子。

我所认为的底层

前端的基础是HTML、CSS、JavaScript、HTTP协议，还有在这基础上的HTML5新特性（canvas）、CSS预处理语言（解决全局性、兼容性、响应式的问题）、ES6新特性（静态语言、箭头函数、promise）、以及计算机网络（浏览器原理、HTTP协议、安全、SEO）。

HTML5新特性，如canvas、web storage等
CSS预处理语言，解决CSS全局性、兼容性、无报错等的缺陷。如（less、scss、sass、postcss等），（CSS命名具有全局性，项目越大，命名越难），（各浏览器版本支持不同程度的CSS，导致需要写多套CSS）；
ES6，解决JavaScript动态类型（大项目中用静态类型易报错）、同步（promise）的JavaScript新标准。Basel使得前端工程师可以使用ES6,（它可以把ES6转化成ES5）
计算机网络，如常用的HTTP协议。内容有许多。

不仅仅是前端

前端是不能脱离其他分支独立的，所以其他也需要补充。

参考：《前端技术架构与工程》初次笔记——wsdchong

《前端技术架构与工程》之工程思维与服务支撑笔记

从一个产品的生产角度来看，开发过程有：业务需求-产品策划-UI设计（项目架构）-前后端开发-测试-部署。

所以前端还需要了解（了解即可，一下基本概念，方便降低沟通成本）：

业务需求（看自己公司面对的用户群体，了解用户群体的业务需求，如外卖、公司OA、智慧城市、遥感、土木等）
产品策划：可行性分析、需求分析、设计、开发、测试、交付；
UI设计：视觉（光影、色彩、动静）、数字图像（RGB）；
项目架构：技术架构、工程架构
后端：数据库、服务器
测试：黑盒、白盒、自动化测试
部署：服务器、监测。

我的技术栈

从开发角度

业务需求：无，了解部分GIS，但是不够用。
产品策划：学过《软件工程》这门课，用其中的思想设计自己的毕业设计。
UI设计：学过美工，Photoshop。
项目架构：来源于《前端技术架构与工程》，对编程语言、性能这两部分十分感兴趣；
前端：vue框架、echarts、mapbox
后端：SSM框架、mysql
测试：黑盒测试
部署：Linux

从自身角度

编程方面：C语言、面向对象（C++）、JAVA、操作系统、离散数学、数据结构、算法分析、设计模式；软件工程、计算机图形学OpenGL、图像处理openCV 、三维游戏设计（DirectX）
计算机知识：导论、计算机组成原理、计算机网络
数据库方面：数据库系统概论
自学：web前端（三大件+vue）、Java后端（SSM）
美工方面：图像处理（Photoshop）、影视基础（PR）、三维软件（3ds max）、动画原理（Maya）、游戏引擎（unity3D）、虚拟现实（VR）
工具方面：vscode、Chrome、SVN、git、eclipse、IDEA、MySQL、navicat、Android studio、Hbuild
JavaScript库：echarts、mapbox、elementUI
擅长：记录、归档、风险防范。
未来着手信息。

常用到的网站

搜索网站

百度：虽然有广告，但是资源很多；

bing：没有广告

Chrome：中文搜索没百度好用，不过搜索bug可以找到解决方法的网站。

百度翻译：虽然有翻译软件，但用后，我的电脑会卡，所以干脆用翻译网站。

有道翻译：和百度翻译一样。常用于翻译报错、命名、中文转英文。

同步代码的网站

git：大名鼎鼎，不过国内访问有些慢。

gitee：国内特别好使用。速度快。

互联网资讯网站

git trending：我经常用来找vue项目，参考学习。

coschina：前沿的资讯

牛客网：刷刷题，看看面经汇总，看看内推。虽然很多人推荐LeetCode，不过我先接触的牛客网。

技术文档网站

HTML+CSS+JavaScript理论部分（按使用频率）

菜鸟教程：国内的，很简洁。我比较常用

w3school：国外的，很简洁。我比较常用

w3cschool：国内的，有广告，不过内容框架很丰富，便于入门。

MDN：官方的，权威。不过不怎么简洁。

框架部分

vue官网：要结合一个已有的项目学，才能更好的掌握，官网上只是给一些例子。

vue教程：便于初学者参考的文档，不过建议看视频+官网学习比较好。光看教程，不太好入门。

vue API：入门后，多看看，便于更好的使用vue。

vue 风格指南：便于养成良好的vue代码书写

vue CLI：官方文档

vue loader：运行用户使用单文件组件的格式撰写vue组件。

vue devtools：vue专属调试，Chrome调试结合这个调试很舒服。

vue router：vue的路由。结合组件通信使用。

vuex：有些视频说，涉及大项目用组件通信好，vuex比较难用。

vue SSR：vue服务端渲染的官网说明文档

JavaScript库（可以自定义）

echarts：做可视化图表

mapbox：做地图可视化

elementUI：做页面

前端可视化echarts使用理解——wsdchong

mapbox的初次笔记——wsdchong

vscode插件官方文档

参考文章：2020最新版vscode格式化代码——wsdchong

vetur：官方文档。代码高亮、emmet语法支持、语法错误校验检查、代码提醒、格式化vue。
vetur集成了prettier，让.vue文件中不同的块使用不同的格式化方案，template标签调用 html 格式化工具，script标签调用 JavaScript 格式化工具，style标签使用style格式化工具。

ESlint：官方文档。代码检验。

prettyhtml：官方文档。为vue或纯HTML模板等提供通用格式化的工具。

pretties：官方文档。代码格式化工具，能够解析代码，使用用户设定的规则格式化规范的代码。

stylus-supremacy：官方文档。用于格式化stylus文件的node.js模块。

我常用的工具的网站

参考文章：我常用的工具及下载地址——wsdchong

vscode、chrome、node.js
git、GitHub for desktop、tortoiseSVN
sublime、typora、snipaste
云骑士、火绒、bandzip、adobe Reader、PotPlayer
eclipse、IDEA、MySQL、navicat
FSCapture、everything、光影魔术手
Photoshop、premise
3ds max、maya
unity、Android studio

我常用的技术视频学习网站

网易云课堂：我以前常用，有些课程质量不错。
哔哩哩哔：我现在常用，万能，找不到资源的时候，搜索一下，总能意想不到。
慕课网：分类明确。

我常用的软件

系统自带浏览器：不懂就搜，反复看总结收藏的。
CSDN：本命博客，虽然有些人吐槽，csdn有许多不足的地方，但是我觉得满足我的需求。
知乎：虽然有不少言论是装逼，不过可以参考。
36氪：看互联网相关的瓜。

不怎么常用了：

虎嗅：和36氪一样，吃互联网的瓜。不过先使用的36氪，所以虎嗅没怎么用。
微博：看热搜，不过大多不感兴趣，因为女朋友才看的微博
贴吧：我玩游戏常去的软件，有不少游戏攻略。不过和技术相关的很少，技术交流主要集中在博客上。
掘金：有段时间经常去，不过先使用的csdn，所以掘金用得很少。
简书：收藏各种资源网站、资源工具。技术交流没有很垂直。

最后推荐一下（互联网上的资源还有许多，我就不一一列举了）

我GitHub上的starts

vue相关开源项目库汇总

我gitee上的starts

jiujin

点击有惊喜。

最后还有一句话送给自己：用90%的精力做好10%的事。

写此博客与大家共同参考。不足的地方欢迎大家补充，错误的地方欢迎大家纠错。

更新地址：GitHub

更多内容请关注：CSDN、GitHub、掘金

前端体系认识和我的技术栈——wsdchong相关推荐

前端代码获取文件大小_vue技术栈前端建设方案
前言主要介绍云课堂前端在CRM系统的前端建设方面的经验总结,方便其他前端人做技术选型,全栈工程师快速建站.本文适合对vue技术栈和前端工具化.工程化感兴趣的朋友. 整体架构 CRM系统的服务端是基于 ...
云原生不仅颠覆了技术栈，背后的每个岗位也在悄然发生改变
简介:随着云原生理念与云原生技术的不断完善和发展,越来越多的行业开始落地实践云原生技术,这对不同岗位的技术从业者产生了不同程度的影响.不管是对 IT 主管还是对一线开发人员和运维人员来说,从业务逻辑到 ...
【JavaWeb】JavaWeb与JavaWeb技术栈
JavaWeb与JavaWeb技术栈 1.JavaWeb概述 1.1 Web和JavaWeb的概念 1.2 什么是服务器与客户端 1.2.1 线下的服务器与客户端 1.2.2 线上的服务器与客户端 1 ...
SAAS 技术栈回顾
什么是SAAS SAAS Software-as-a-Service的缩写名称,意思为软件即服务,即通过网络提供软件服务. SaaS 代表软件即服务:一种软件许可模式,其中软件集中托管并通过订阅进行访 ...
昂贵、复杂、低效...中小型企业如何打破大数据技术栈困境？
大数据已经成为当代经济增长的重要驱动力数字经济,已经成为当今经济发展中非常重要的一部分. 与农业经济.工业经济如出一辙,数字经济活动需要土地.劳动力.资本.技术以及相应配套基础设施.不同之处在于:第 ...
4982亿背后的前端技术—2020天猫双11前端体系大揭秘
简介: 整体介绍一下淘系前端在今年双11的思考和沉淀. 今年双11的整体节奏从之前的"光棍节"变为"双节棍",具体业务上也有很多变化和调整,应了阿里的土话&qu ...
Web前端开发大系概览（前端开发技术栈）
前言互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000 ...
2019DevFest | 从互联网前端到2B交付型前端-探索面向交付的实用前端技术栈
2019年11月23日,由天津GDG发起,天津多个技术社区主办的"天津人工智能开发者峰会暨天津技术社群联合峰会"在天津渤龙山庄酒店举行.本次大会内容丰富,涵盖人工智能.大数据.互联 ...
技术栈：为什么 Node 是小菜前端团队的核心技术栈
著作权归作者所有.商业转载请联系 Scott 获得授权,非商业转载请注明出处[务必保留全文,勿做删减]. Scott 近两年无论是面试还是线下线上的技术分享,遇到许许多多前端同学,由于团队原因,个人原 ...

前端体系认识和我的技术栈——wsdchong