码迷,mamicode.com
首页 > 其他好文 > 详细

2019年前端工程师应该学什么?

时间:2019-09-02 22:09:33      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:端口   line   hook   格式   ssi   服务器攻击   模块   reac   代码风格   

  参加工作三年多了,最近业务不是很忙,心里反而空落落的。最近参与了一个公司UI库开发,发现自己不懂的东西实在太多。以此为契机吧:

1. 有必要把近两年的经验知识沉淀一下,与标准和文档进行一一印证,查漏补缺。
2. 工具不仅要会用,用的好,还要知道原理。
3. 即便是有些知识暂时用不到,作为一名有点追求的工程师,应该提前做一些知识储备。

  写到此处惊觉自己这两三年在技术上还是成长了的,2016年我需要看着前辈们的分享,大家说有用我就学,听前辈的总没错,2019年我可以根据自己的经验和体会总结出该怎么去系统的学习了,并且轻重缓急自己心里都有底。

  现在返回到标题,前端工程师应该学什么?我写了一个大纲,但里面的学习目标是对自己说的,发出来一是为了跟大家分享一下,共同学习;二是希望你们帮我看看,有没有遗漏下的。

  我的自我定位并没有找准,前端领域太广,到底哪个点最适合自己,并且值得深入钻研?我不知道。但先全学一遍,查漏补缺总没错的。

  我觉得自己仍然,仍将,一直都会是一名前端小学生。

  本文没有劝退效果,请放心阅读。如果你是应届生,找准自己的定位,慢慢来。

 

前端工程师

一、语言基础

HTML相关

  • HTML标准,跟进了解最新的HTML标准更新。
  • HTML标签语义化,嵌套标准等。
  • 可访问性。

学习目标:重新梳理各标签关系。面向国际、未来的网页结构,符合可访问性规范。

CSS 相关

  • CSS标准,跟进了解最新的CSS标准更新。
  • CSS属性,最新属性等。
  • CSS编程,Houdini。
  • Web Fonts

学习目标:重新梳理css属性之间的关系,更多的功能尝试使用css实现。掌握关注最新的css发展。

JavaScript相关

  • ECMAScript标准,最新提案等,浏览器DOM,BOM。

学习目标:熟悉JavaScript的基础API,参数搞清楚。掌握最新的JavaScript语言动向。

Node.js相关

  • Node.js 全局API,原生模块等,了解最新的Node.js动向。

学习目标:熟悉Node.js基础原生API的作用和使用。为学习服务端开发打下基础。

TypeScript(TS)

  • TS大火,成未来开发趋势。
  • TypeScript的使用。与JavaScript API的区别

学习目标:熟练使用TypeScript。

AssemblyScript(AS)

  • 除了可以将c\c++,Rust,Kotlin,Golang等高级语言转译为WebAssembly字节码外,一门全新的语言AS也可以。AS是TS的严格子集,可以一并学习为WebAssembly开发打下基础。
  • AssemblyScript的语法和使用

学习目标:了解基础语法,可以将AssemblyScript文件编译成.wasm格式。有了它,可以不用去复习C/C++了。

Dart

  • Flutter持续火热,Dart作为开发基础,应该掌握
  • Dart的语法,了解与JavaScript的区别。

学习目标:熟练使用Dart语言。

Markdown

  • 语法,使用。
  • 写文章,写文档必备

学习目标:熟练使用Markdown写文章,项目文档等。

Shell脚本

  • 语法,常用函数

学习目标:可以使用shell编写出比较常见的程序。

SQL语言

  • 常用语法,函数

学习目标:可以写出常见的CARD查询的sql语句。

二、计算机基础

数据结构与算法

  • 经典算法的思路
  • 常用的数据结构

学习目标: 熟练掌握经典的算数思想,以便应用到业务代码中来,会在合适的场景选择最优的数据结构。

计算机网络

  • HTTP协议,TCP协议,UDP协议
  • HTTPS,HTTP2
  • DNS
  • WebSocket

学习目标:掌握并了解这些网络协议的原理,可以用以实践。

电子计算机组成原理

  • 进制
  • Unicode,ASCII,UTF-8等编码
  • 计算机工作原理

学习目标: 了解自己的伙伴,为了解“云”主机、虚拟主机奠定基础。

操作系统

  • 计算机操作系统原理
  • Linux操作系统的使用

学习目标:了解操作系统是如何工作的,可以自主使用linux操作系统,掌握常用的命令。

三、进阶

工程化

  • webpack
  • rollup
  • babel 使用与原理,可以用来与ECMAScript最新语法一一印证。
  • eslint,stylelint,prettier等代码风格与语法审查工具的使用
  • unit test库或工具的使用
  • sass编程,语法
  • postcss后处理器
  • uglify原理与实现
  • 多人git协作流程
  • gitlab的搭建与使用
  • CI/CD
  • git hooks, husky,commitlint
  • 文档输出,StoryBook,gitDoc,gitbook等
  • npm, lerna
  • yarn
  • markdown render。markdown写的示例可在线执行
  • 模块化,js模块化在ECMAScript和Node.js已经学习过,这里主要是指css模块化的几种方式
  • 数据mock

学习目标:可以从无到有快速搭建起一个多人协作的现代化前端工程项目,选择合适的工具提高开发效率,保持团队成员代码风格统一,并最大限度的利用工具保障代码质量。

组件化

  • Vue
  • React
  • WebComponents
  • 浏览器兼容性,canIUse

学习目标:熟练使用Vue,React进行开发,了解组件化未来趋势WebComponents。掌握数据驱动思想,掌握经典的双向绑定实现原理,阅读源码,深入了解。掌握衍生产物如前端路由,数据管理的设计思想和实现。

基于Node.js的Web服务开发

  • koa
  • express
  • pm2
  • RESTFul 风格
  • 进程管理
  • 数据持久 MongoDB,mysql等
  • 数据缓存 redis等
  • 长链接服务
  • SSR
  • Docker
  • Nginx配置, openresty
  • 云主机,共享主机等

学习目标:可以独立完成Web服务的搭建和部署。

基于Node.js的CLI开发

  • 常用的CLI开发库和原理
  • 比较流行的CLI库的设计思想,实现思路

学习目标:可以独立开发CLI,当有需求时,可以快速定位到此方案。

桌面应用开发

  • Electron
  • NW.JS

学习目标:了解一种基于JavaScript的桌面应用的开发,当有需要时,可以迅速定位到此技术方案。

移动应用开发

  • Flutter 及相关衍生技术
  • React Native及相关衍生技术
  • PWA
  • WEEX

学习目标: 了解和掌握。可以使用Flutter或RN开发一个移动APP。了解PWA。

第三方平台开发

  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 快应用
  • wepy
  • mpvue
  • taro

学习目标:可以快速上手任何一种开发小程序。了解小程序的实现方案。了解业内流行的小程序开发库的实现思路。

插件开发

  • chrome插件API
  • DevTool扩展
  • VSCode等IDE插件开发

学习目标:了解插件可以做到什么,当有需要时,可以迅速定位到此方案来。

浏览器工作原理

  • 排版引擎,浏览器渲染原理
  • 脚本解释引擎,脚本运行原理,v8
  • headless无头浏览器,puppeteer

学习目标:掌握浏览器工作原理,可以应用在性能优化和自动化测试上。

性能优化

  • RAIL 模型
  • 硬件基础:帧、帧率、显示器绘图原理
  • 渐进式网页指标(Progressive Web Metrics,简称 PWM’s)
  • 常用的性能优化手段

学习目标:了解性能优化手段,写出性能优异的Web应用。

Web浏览器安全

  • 浏览器安全策略:同源策略,内容安全策略,沙箱
  • 常见的攻击方式:XSS,CSRF
  • 其它:CRLF攻击, DNS劫持和DNS污染,点击劫持,浏览器插件漏洞攻击等
  • 了解常见对称加密和非对称加密算法

学习目标:了解常见的Web浏览器攻击手段,避免写出有安全隐患的网站。

Web服务器安全

  • 常见攻击手段:目录遍历,DDOS,重放,密码破解,SQL注入
  • 其它攻击手段:CC攻击,端口渗透

学习目标:了解常见服务器攻击手段和原理,避免写出有明显漏洞的Web服务。

监控统计

  • 前端脚本错误监控:错误堆栈形式,实时监控实现方式
  • 前端性能监控:性能指标,实现方案
  • 服务端监控:硬件监控,系统监控,应用监控,网络监控,流量分析,日志监控,安全监控,API监控(可用性、正确性、响应时间),性能监控,业务监控

学习目标:掌握如何自主建设或搭建开源监控平台。了解一些常见的监控指标的含义。如性能相关的指标TTLB、QPS是什么意思,业务相关的指标PV,UV,CTR等等代表什么。

可视化

  • canvas进阶
  • svg进阶
  • WebGL基础
  • 计算机图形学
  • 常用库:ECharts, D3等

学习目标: 这是面向未来的前端技术。了解常见的可视化技术方案,当有需求时可以迅速定位方案。关注并可使用最新的技术开发酷炫的应用,实现数据可视化。

SEO

  • 搜索引擎爬虫原理
  • 搜索引擎权重算法
  • 与SEO相关的网页标签

学习目标:了解搜索引擎的实现原理以及搜索结果的排序算法。如果是对外的网站,可以自主完成简单的SEO,使网站在搜索引擎中的排名尽可能高些(不是花钱竞价排名哟)。

开发与调试

  • 浏览器脚本调试
  • Node.js 调试
  • Chrome Dev Tools进阶使用(环境模拟,渲染性能,内存使用,端点调试,抓包,控制台内置函数等等)
  • IDE
  • 使用帮助开发的插件,如拼写检查等。

学习目标: 熟练掌握Chrome调试工具的使用,对于脚本开发、性能优化都大有裨益。掌握Node.js服务的调试方法。

UI库

  • UX基础
  • 色彩原理,色光三原色,网页色彩表示方法
  • 网页色彩搭配原则,色彩心理学
  • 常用UI组件的实现
  • 常见UI组件的使用和源码

学习目标: 具备一定的美感和用户体验关注度,当没有设计师参与时,可以自主设计一些交互方案,了解常见UI组件代表的含义,可以在合适的需求上使用合适的组件。了解常用UI组件的设计与实现思路,可独立开发UI组件库。

WebAssembly

  • 原理
  • 优势
  • 简单应用开发

学习目标: 了解WebAssembly字节码的开发流程,了解其在浏览器中的运行方式,当需要时,可以快速定位到此方案。

WebRTC

  • 实时通讯方案
  • 了解并进行可简单开发

学习目标: 了解并关注WebRTC技术,了解其标准,实现原理,当需要时,可以快速定位到此方案。

WebXR

  • 使用JavaScript开发VR和AR
  • 了解WebXR API,跟进草案进程

学习目标: 了解并关注WebXR技术,了解其标准,实现原理,当需要时,可以快速定位到此方案。

WebAuthn

  • 使用浏览器进行生物鉴权
  • 了解WebAuthn API,并进行简单使用

学习目标: 了解并关注WebAuthn技术,了解其标准,实现原理,当需要时,可以快速定位到此方案。

 

  本文发布于《一个小学生的博客》,转载请注明出处。

  全文完。

2019年前端工程师应该学什么?

标签:端口   line   hook   格式   ssi   服务器攻击   模块   reac   代码风格   

原文地址:https://www.cnblogs.com/dongtianee/p/2019qianduan.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!