01 Web前端工程师都在开发什么

如何在学习和实践前端技术中有所沉淀？

**前端技术不只是技术。**学习 Web 前端技术的目的是将其应用于实际前端开发工作，要对自己为之工作的前端应用有更全面、立体的了解，才能更有效地总结、归纳技术点，真正成为自己的知识。
**掌握技术的广度和深度一样重要。**掌握多项技术后，技术与技术之间的联系和差异，就会在你脑海中形成一张知识图谱。

前端开发工作历史

Web 前端是一种图形用户界面，即 GUI。

早期的网站或 Web 应用以静态网页加服务器端页面技术为主，如 CGI、ASP、PHP、JSP、Ruby on Rails、ASP.NET 等。
2004 年，谷歌发布了一款基于 AJAX 技术开发的，标志性的 Web 应用——Gmail，从此 B/S（浏览器 - 服务器）架构，成为 C/S 架构中的主流。
2010 年，Apple 创始人乔布斯公开抨击 Flash、力挺 HTML5，Web 应用迎来 HTML5 的时代。浏览器领域 Firefox 和 Chrome 先后打破 IE 的垄断，尤其是 V8 JS 引擎打消了开发者对 JS 性能的顾虑。
JS 框架从早期的 jQueryUI、Dojo Toolkit、ExtJS，演进到后来的 Backbone.js、Ember.js，一直到现在的 React、Vue、Angular 三大框架。

用户只关注与应用界面的交互，而不需要关注界面后面对应的程序是怎么实现的。

GUI 作为接口的设计准则：

可用性：用户不需要向导或仅需极少向导即可学会如何与之交互。
一致性：单一界面标准，能够通过提高产出和减少错误，改善用户学习界面的能力和提高生产率。
遵循用户心智模型，避免实现模型：比如前端界面上有个颜色选择器，比起一个 RGB 数字值输入框，把可用的颜色块列举出来备选对普通用户更友好。
最小惊讶原则：就是编程时的那个最小惊讶原则。
及时反馈：用户点了提交按钮，需要让他知道是否成功，如果在成功前后端需要一些时间计算，需要显示一个进度条，告诉用户后端在计算中；任何场景下都要避免 GUI 冻结而无法做任何操作的情况。

领域知识：

交互设计：面向用户的交互设计中的图形化元素。
Web 浏览器：前端开发者在设计开发一个 Web 应用之前，需要清楚浏览器能做什么、不能做什么、有什么限制、有什么 workaround，才能做到胸有成竹，确定需求能否实现。

JSP - HTML模板

JSP 页面模版中的条件或者循环逻辑，可以通过混写 Java 代码来实现。JSP 可以引入标签库（JSTL）。

Vue.js 框架模版包含了v-if 、 v-for 指令，可以在模版中实现条件和循环。

MVC 架构，JSP 作为纯粹的视图，Servlet 作为控制器，Java Bean 对象作为模型。

Angular 以 MVVM 架构拆分代码文件，数据模型、HTML 视图与 JSP 在概念上是相似的，View-model 视图模型则取代了上面 JSP 中控制器的地位。

当 JSP 项目包含 .java 源文件时，需要编译并与 JSP 文件一起打包成 .war 包，再部署到 Tomcat 里就可以提供服务了。

React、Vue.js、Angular 项目一般而言也需要先通过 Webpack、Vite 等工具构建，生成若干 bundle 后再部署到 CDN 上，即可投入使用。

Java 可以借助第三方开源库（或闭源库）实现很多功能。JSP 项目中常会引入很多这样的依赖。在最早期，这些依赖是通过拷贝 .jar包到项目中引入。当依赖项增多，依赖关系变得复杂，Java 引入了 Maven 工具。Maven 其中一项职能就是定义、管理依赖。

前端代码 package.json 文件中的 dependencies 字段表示，在执行 npm install 的时候，会从 npm 仓库中下载对应的 NPM 包，作为项目依赖。