Web前端开发项目教程
主讲人：喻林
认识Web前端开发工程师
【任务目标】
知识目标
•了解前端开发工程师的岗位种类；
•掌握未来前端开发方向。
能力目标
•能够深入认识前端开发的职业及未来发展前景；
•具备良好的沟通表达能力，能接受挑战并承担工作压力。
素质目标
•培养乐于探索，勤于学习的品质；
•对工作精益求精，愿意为了好的用户体验不断打磨完善产品 。
【导学知识】
一、 前端开发岗位
Web前端开发是从网页制作演变而来，是指通过HTML（从语义的角
度，描述页面结构）、CSS（从审美的角度，美化页面）、JavaScript
（从交互的角度，提升用户体验）等各种技术实现的客户端产品的开发。
近年来，Web前端的火爆程度不言而喻，这主要是由市场的需求决定的。
【导学知识】
目前Web前端开发主要可以从事的岗位有：
【导学知识】
二、 未来前端开发的发展方向
Web开发每年都在以惊人的速度发展。随着开发人
员探索新的创新方式，新的网站技术不断被发现。
1.单页面应用（Single-Page Application，SPA）就是只
有一张Web页面的应用，是加载单个HTML页面并在用户与
应用程序交互时动态更新该页面的Web应用程序。
【导学知识】
2.渐进式Web应用程序
可以简单地理解为响应式网站，依赖于用户的浏览器功能，可
以自动逐步增强其内置功能，使其外观和感觉像本机Web应用程
序，是开发人员使Web应用程序加载更快，性能提升更高的一种
现代化开发方法。
• PWA是显示像移动应用程序的网站。PWA更像一个在线文档，可以执行与本机
程序相同的功能，但是它可以通过Internet浏览器执行。
• 本机应用程序是一个独立的程序，位于智能手机上。工作方式类似于在计算机
上运行的程序，例如一个记事本，一个画图工具等。
【导学知识】
3.人工智能物联网Web开发
人工智能物联网（AI人工智能+IoT物联网，AIoT）时代来临，
我们所面对的界面，不仅仅是在PC上，手机上，越来越多的车载、
可穿戴、生物识别网络安全等等终端设备上，
都需要有前端交互界面和后台管理界面为客户服务。使用机
器学习进行内容个性化，是一种先进的人工智能驱动方法，
用于Web开发可以向每个用户动态显示最相关的内容，提供
改进的体验。摄像头、传感器、信号设备等互联网设备的运
行促进持续的数据传输，用于Web开发帮助公司快速与客户
互动，创造个性化体验。
【导学知识】
4.区块链Web开发
在区块链、元宇宙热潮之下，Web 越来越多地被业界提及。
Web 时代，大多数基于Web的内容是由静态网页组成的，交
互受限于超链接和异步评论。Web 时代以平台和分享为特征。
Web 时代，提出了使用基于区块链的P2P架构，应用代码和数
据分布在分布式网络中的参与节点上，而非中心化的服务器上。
【导学知识】
5.跨平台混合开发
随着移动应用的发展，诞生了
一大批互联网公司，竞争也是相当
的激烈，为了节省开支，快速开发，
打破Android与iOS各需一套代码的
壁垒，跨平台开发技术应运而生。
跨平台开发框架也是不断的演变，
经过多年的沉淀，各项技术也在逐
步完善。跨操作系统、跨设备、跨
浏览器，基于HTML5 WebGL三维
网络客户端就有很好的兼容性。
【导学知识】
6.低代码开发
低代码开发平台是无需编码或通过少量代码就可以快速生成
应用程序的开发平台。通过可视化进行应用程序开发的方法，使
具有不同经验水平的开发人员可以通过图形化的用户界面，使用
拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。
【导学知识】
7.图形学方向
图形学的集大成者无疑是游戏行业，可视化、3d引擎的开发
等都需要图形学相关的算法知识，
【导学知识】
而Web开发也越来越多的涉及到图形学，如借助5G技术发展出
来的移动虚拟仿真效果，目前主流的大数据可视化技术，都是依
托Web图形化技术，达成了上百种图表的开源项目。
【导学知识】
8.全栈开发
Web前端开发到最后会走向全栈开发的道路，以作为
服务端语言，可直接使用前端的JS技术进行后端开发，基于
实现的服务端框架有Express、Koa，基于的云开
发环境（云函数、云数据库、云存储等）也越来越成熟。
【导学知识】
三、 了解前端开发职业前景
随着互联网竞争不断深化，特别是电商领域的互联网项目不断兴起之
后，Web前端工程师已经成为互联网公司非常青睐的对象，是PC端与移
动端网站开发、手机APP开发、微信小程序开发和人工智能设备界面开发
的主要力量，不管是起薪还是薪资涨幅，都居所有互联网行业职位前列。
【导学知识】
四、 认识前端开发工程师
1.什么是Web前端
Web前端是网站前台部分，运行在PC端/移动端等浏览器上展现给用
户所浏览的网页，简而言之就是给访问网站的人看的内容和页面。
2.什么是Web前端开发
Web前端开发就是客户端上看到的页面和一些交互效果（比如点击、
查看详情、查看更多）等这些内容的制作，也就是代码的实现。
3.什么是Web前端开发工程师
Web前端开发工程师就是从事Web前端开发工作的工程师，主要进行
网站的开发、优化、完善的工作。
【导学知识】
前端开发工程师需要掌握的技能
移动互联网发展这么快，前端开发领域越来越广，早已经告别了切图崽的时代，在PC端、移动
端（安卓、IOS）、Watch、小程序、公众号开发、混合APP开发都能看到前端开发工程师的影子。
薪酬高的公司对Web前端开发工程师任职资格的要求也会比较高，一个优秀的Web前端开发工
程师需要掌握的技能涵盖全栈，比如：
jQuery
AngularWeb前
端
工程师
Ajax
HTML5
CSS
3
UI设计
React
Canvas
• 能够独立搭建框架完成初级项目的开发，评估项目周期，把控项目进度，
保证开发质量；
• 精通HTML5/JavaScript/CSS3/
• 熟悉Vue全家桶技术、React、ReactNative，有上架AppStore商店或解决
过实际项目困难点者优先；
• 熟练使用elementUI、uni-app、iView、vant 等前端UI框架；
• 有微信小程序、公众号认证对接、跨多端开发经验优先；
• 有较深前端工程化、性能优化能力，熟练使用Grunt/Webpack，对模块化
开发有深刻认识，并有实际组件化、优化开发经验；
• 具有丰富的社会实践经验，热爱互联网，对大数据、算法等新技术和新
方向有非常浓厚的兴趣等。
【任务小结】
移动互联网领域不断出现新的开发场景，带来大量的前端
开发需求，有需求就会有市场。总结来说，前端人才需求多，
就业方向广，未来发展前途好，随着工作年限的增加工资也是
同步上涨的趋势。
“千里之行始于足下”，前端开发要学习的东西不仅仅只
有表面的技术，还要深入底层，弄明白原理，只有不断的自我
学习更新才不会被行业所淘汰，希望大家能够找准赛道，厚积
薄发。
谢 谢 大 家
