前端工程师 到底学什么?知识进阶

前端
包含#基础库/框架,H5宣传页面,还有H5小游戏#
刚开始的时候,我入门的基础是做的这些小项目的应用场景,
然而,深入了前端领域才发现,原来前端领域内更加深入的是复杂的Web应用
真正厉害的前端,做的东西应该是例如新闻聚合网站eg:新浪,在线购物平台eg:淘宝\京东,社交网络eg:facebook,金融信贷应用eg:支付宝等等……
前端是一种运行在网页浏览器中的软件,这些软件的图形用户界面(Graphical User Interface,简称GUI)即为前端。
展现给用户观看的一些视觉和动画交互的效果以及对后端传输出来的数据进行处理,就是前端做的事情.
如此复杂的Web应用,动辄几十上百人共同开发维护,其前端界面通常也颇具规模,工程量不亚于一般的传统GUI软件:

前端工程的三个阶段
第一阶段:库/框架选型

一般小的网页应用场景我们就引入jquery或者zepto去进行处理就好了.
但是一个大型的站点,是需要我们根据项目特征进行技术选型。

一般有jquery/React/Angularjs等框架。

第二阶段:简单构建优化

一个大型网站的构建除了保证团队的开发效率,还需要兼顾运行性能。
第二阶段,我们就会选择一种构建工具,对代码进行压缩,校验,之后再以页面为单位进行简单的资源合并。

第三阶段:JS/CSS模块化开发

我最近就在研究模块化开发,因为我并不想要重复地去做某件事情,或者只是一直做搬砖的工作,所以我去找关于模块化开发的学习资料.

JS模块化方案很多,AMD/CommonJS/UMD/ES6 Module等
而CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。

第四阶段

进入第四阶段,我们只需做好两件事就能大幅提升前端开发效率,并且兼顾运行性能,那就是——组件化开发与资源管理。
第一件事:组件化开发

[何为组件?]
页面上的每个 独立的 可视/可交互区域视为一个组件;
每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;
由于组件具有独立性,因此组件与组件之间可以 自由组合;
页面只不过是组件的容器,负责组合组件形成功能完整的界面;
当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

组件化开发具有较高的通用性,无论是前端渲染的单页面应用,还是后端模板渲染的多页面应用,组件化开发的概念都能适用。
组件HTML部分根据业务选型的不同,可以是静态的HTML文件,可以是前端模板,也可以是后端模板:
[组件的好处]
开发者之间不会产生开发时序的依赖,大幅提升并行的开发效率,理论上允许随时加入新成员认领组件开发或维护工作,也更容易支持多个团队共同维护一个大型站点的开发。

结合前面提到的模块化开发,整个前端项目可以划分为这么几种开发概念:

名称 说明 举例
JS模块 独立的算法和数据单元 浏览器环境检测(detect),网络请求(ajax),应用配置(config),DOM操作(dom),工具函数(utils),以及组件里的JS单元
CSS模块 独立的功能性样式单元 栅格系统(grid),字体图标(icon-fonts),动画样式(animate),以及组件里的CSS单元
UI组件 独立的可视/可交互功能单元 页头(header),页尾(footer),导航栏(nav),搜索框(search)
页面 前端这种GUI软件的界面状态,是UI组件的容器 首页(index),列表页(list),用户管理(user)
应用 整个项目或整个站点被称之为应用,由多个页面组成
以上5种开发概念以相对较少的规则组成了前端开发的基本工程结构,基于这些理念,我眼中的前端开发就成了这个样子:

整个Web应用由页面组成->页面由组件组成->一个组件一个目录,资源就近维护->组件可组合,组件的JS可依赖其他JS模块,CSS可依赖其他CSS单元

第二件事:“智能”静态资源管理

模块化/组件化开发之后,我们最终要解决的,就是模块/组件加载的技术问题。

我们应该精心规划每个页面的资源加载策略,使得用户无论访问哪个页面都能按需加载页面所需资源,没访问过的无需加载,访问过的可以缓存复用,最终带来流畅的应用体验。

有加载相关的按需加载、延迟加载、预加载、请求合并等策略;
有缓存相关的浏览器缓存利用,缓存更新、缓存共享、非覆盖式发布等方案;
还有复杂的BigRender、BigPipe、Quickling、PageCache等技术。

所以我觉得:

第四阶段前端开发最迫切需要做好的就是在基础架构中贯彻增量原则。

静态资源管理系统 = 资源表 + 资源加载框架

资源表是一份数据文件(比如JSON),是项目中所有静态资源(主要是JS和CSS)的构建信息记录,通过构建工具扫描项目源码生成,是一种k-v结构的数据,以每个资源的id为key,记录了资源的类别、部署路径、依赖关系、打包合并等内容,比如:

{
"a.js": {
"url": "/static/js/a.5f100fa.js",
"dep": [ "b.js", "a.css" ]
},
"a.css": {
"url": "/static/css/a.63cf374.css",
"dep": [ "button.css" ]
},
"b.js": {
"url": "/static/js/b.97193bf.js"
},
"button.css": {
"url": "/static/css/button.de33108.js"
}
}

总结

回顾一下前面提到过的前端工程三个阶段:

第一阶段:库/框架选型
第二阶段:简单构建优化
第三阶段:JS/CSS模块化开发
第四阶段:组件化开发与资源管理

时间: 2024-10-08 15:22:03

前端工程师 到底学什么?知识进阶的相关文章

一个前端工程师到底需要掌握哪些技能?

作为一名前端想要晋升,需要什么条件? 现在在用 React,要不要也学学 Vue? 有必要学习 Node.js/Flutter/ 函数式吗? 这几个问题看似毫无关联,但是其实它们本质上都是同一个问题,这个问题就是"一个前端工程师到底需要掌握哪些技能?" 其实在行业里面,对前端工程师的能力模型有一个基本的认知,不同公司的定义可能有细微差别,但是它的内核是一致的. 这里我给出一张图,是我自己理解的前端工程师的技能模型. 为了方便你理解,我把这些技能具体放进前端工程师的不同级别里,你可以对照

一个web前端工程师到底需要掌握哪些技能?有何晋升?

对于前端基础需要学习哪些内容,之前文章已经有写过不少了,本篇重在谈论: 作为一名前端想要晋升,需要什么条件?现在在用 React,要不要也学学 Vue?有必要学习 Node.js/Flutter/ 函数式吗?这几个问题看似毫无关联,但是其实它们本质上都是同一个问题,这个问题就是"一个前端工程师到底需要掌握哪些技能?" 其实在行业里面,对前端工程师的能力模型有一个基本的认知,不同公司的定义可能有细微差别,但是它的内核是一致的. 这里我给出一张图,是我自己理解的前端工程师的技能模型. 为了

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

参加工作三年多了,最近业务不是很忙,心里反而空落落的.最近参与了一个公司UI库开发,发现自己不懂的东西实在太多.以此为契机吧: 1. 有必要把近两年的经验知识沉淀一下,与标准和文档进行一一印证,查漏补缺. 2. 工具不仅要会用,用的好,还要知道原理. 3. 即便是有些知识暂时用不到,作为一名有点追求的工程师,应该提前做一些知识储备. 写到此处惊觉自己这两三年在技术上还是成长了的,2016年我需要看着前辈们的分享,大家说有用我就学,听前辈的总没错,2019年我可以根据自己的经验和体会总结出该怎么去

web前端工程师需要掌握哪些知识

随着互联网的发展速度迅猛,web前端工程师越来越火热,想学习Web前端开发吗 ? 若想成为web前端工程师需要掌握哪些知识?今天小编总结了成为web前端工程师需要掌握的所有知识. 一.基础 1.H5标签 1.1.H5引进的一些新的标签,需要注意article.header.footer.aside.nav以及HTML的标题结构 1.2.理解浏览器解析HTML的过程,理解DOM的树形结构,及相应API 1.3.理解HTML标签在各个浏览器上的默认样式(代理样式),理解CSS中的重置样式表的概念 1

Web前端工程师成长之路——知识汇总

一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发.制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验. 图1.前端技术MSS Web前端开发技术主要包括三个要素:HTML.CSS和JavaS

web前端工程师知识汇总

分类: Web开发应用 一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发.制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验. Web前端工程师成长之路--知识汇总 图1.前端技术MSS W

如何称为一个优秀的前端工程师?

最近在实验室很受打击,导师给的任务没有很好的完成,我能感受到导师的失望,同时对自己也失去了自信心.自信心是非常重要的一件事情.所以我需要思考我到底在不就的将来想从事什么工作.最近也是在一直不断地摸索中. 这几天想学前端,我也知道像我这样浮躁是做不成事情的,我尽量能够让自己稳定下来.希望好好学习前端吧. 首先我认为需要明白前端是什么,我认为的前端,是与人交互的接口.这是我当前的理解.在计算机中功能模块的解耦在有些地方能简化开发,使得产品容易维护等优点.所以现在讲究前端后端的分离.在前端中,HTML

如何成为一名优秀的前端工程师(转)

web前端工程师 分类: Web开发应用 一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发.制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验. Web前端工程师成长之路——知识汇总 图1.

写给想成为前端工程师的同学们―前端工程师是做什么的?

前端工程师是做什么的? 前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端网页,处理视觉和交互问题.从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域. 2005年的时候大多数网页长这样: 现在的网页一般是这样的: 前端工程师的发展之路和前景是怎么样的? 前端是一个相对比较新的行业,互联网发展早期(1995年~2005