写本文目的
- 为了帮助想学前端,或者正在学前端的学弟学妹,前端新人等 重新认识前端或者说是加深对前端工程师的认识
- 个人角度回答收集到的一些疑问
tips:本文中提到的FE(Front-End)均指前端
什么是前端开发
这里先引用百度百科-前端开发的介绍
前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互
从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。
目前很多新同学和部分学校的老师对前端开发的认识还是停留在Web1.0时代
认为FE的工作就是写写网页(页面),认为没有什么难度,容易学习,能力很容易达到天花板
加之网上各种在线教育机构,铺天盖地的针对没有过多FE基础的同学的课程广告 (XX天入门前端,仿XX项目,XX天入门到精通)容易对新人产生误导
这是一种比较狭义的认识
从广义上来讲,所有用户终端产品与视觉
和交互
有关的部分,都有前端工程师的身影,且前端工程师的职责不止于此,后文会详细介绍
终端指
- PC
- 移动端:Android,IOS
- 嵌入式设备:Pos机,工作台,智能穿戴设备等
什么是Web前端工程师
字面上理解就是 主要掌握的Web开发相关技术的前端同学
而与Web相关的技术 就是 HTML,JS,CSS
由此大家就联想到 就是做网站的页面开发
在目前招聘中 Web前端工程师和前端工程师 大部分情况下指的就是同一个岗位
工作就只是写写页面吗
前端只写网页页面的时代已经过去很久了
前面也提到了凡是在终端产品中的视觉与交互相关的工作都需要前端工程师 的参与
随着端上的硬件配置越来越高,性能越来越好,用户想要的功能就越来越多
前端的工作是直接影响用户体验的,PM(产品经理)也为了提升用户对产品的使用粘性,也会提出更多的用户体验上的要求,这些是光会写页面所解决不了的
为了丰富用户的体验,就需要丰富页面的交互,动画,提升用户粘性就是利用端上的游戏
例如:
年报(支付宝年度账单)里面的交互动画,数据报表,这里面就涉及到了 数据可视化,复杂交互动画等技术,各主流App中的内置,果园游戏,种树游戏,每年双十一的淘宝游戏活动等,这些都是需要前端工程师的工作内容
快速发展的前端
在Web1.0时代掌握 HTML,JS,CSS 即可
但现代Web开发强调工程化,所需要掌握的内容远不止于此,尤其是JS现在已经算是前端的顶梁柱
由此诞生了一句名言:
任何可以用 JavaScript 来写的应用,最终都将用 JavaScript 来写
我们能做什么
除了普通的页面编写,前端工程师 还有很多能做的事情...
面向普通用户
- PC:PC网页,桌面应用
- 移动端:H5应用,手机App,小程序
- 互动交互
- 游戏:比如支付宝(蚂蚁庄园,蚂蚁森林),淘宝(每年双十一的游戏活动页),各种App中的果园游戏,常见于活动页的交互游戏
- 动画:用户看见的一些有趣的动画
- 交互:组件/页面维度之间的交互动画
- 数据可视化:用户常见的数据图表
面向开发者
- 工程化
- 流程规范工具
- 度量监控系统:日志收集,错误上报,页面监控,数据分析,水印服务等
- 构建工具:基于现有的构建工具进行定制化
- 研发框架:针对特定业务场景框架,基于已有的开源框架进行定制化的框架
- CLI:脚手架工具
- 组件:UI组件,业务组件,图形组件
- 测试:UI自动化测试工具
- CI/CD:持续集成与持续交付平台搭建,云构建平台
- 性能优化
- Node.js
- Node中间件
- 服务端开发框架
- 各种自动化工具
- 跨端技术:一套代码,多端复用的框架
- 小程序跨端:微信,QQ,支付宝,百度,字节跳动,快应用等等小程序
- 移动端跨端:IOS,Android
- PC端跨端:windows,Linux,MacOS
- 可视化技术:将数据转化成为交互的图形或图像
- 数据报表
- 地理信息可视化
- 数据图表
- 搭建服务平台:通过拖拽,结合少量配置的方式生成完整的页面技术
- 智能化平台:通过AI机器学习,实现直接通过设计原件 生成页面代码,并保证代码的高质量
如何成为合格的初级FE
个人观点
1. 具备一定的HTML,CSS基础
- 能完成对UI设计稿的还原
- 能完成一些简单的交互动画
2. 扎实的JS基础
js是FE书写最多的内容,很多框架技术,工具等也由JS书写,即最终都脱离不了JS
- 熟悉ES5,ES6的语法
- 了解BOM/DOM API: 至少了解这些API提供了哪些能力,不一定要记住API如何使用
- 熟悉一门现代Web框架(Vue,React,Angular)的使用,并了解其一些核心的原理
3. 工程化能力
- 了解如何使用构建工具
- 了解如何调试自己的应用
4. 项目能力
- 能够部署自己的web应用
- 会使用一种数据库
- 具备一定的服务端开发能力
其它
- 能够持续学习
- 不排斥新技术
总结
前端目前正在迅猛发展,未来的前景也是一片大好
随着硬件技术的迭代,会出现更多的应用场景,FE的工作还是非常具有挑战性的
行业缺的是 工程师,而不是 UI还原师