前端工程师都在干些啥？

切图(ps/photoshop)、

拼凑�HTML�...

敲写�JavaScript�...

折腾�CSS�...

总之，还原�UI�设计稿就行啦、

要写�React、Vue�....

好像有�Redux、vuex、ant.design�等"东西"

好像还要写�Node.js

好像还有�Webpack\Babel\Gulp�...

貌似�App�里面的许多页面看起来像�是HTML页面

大家觉得�前端工程师�都在干些啥呢

ᾝ�?

根据用户来区分�customer�&�business

C�端项目

用户群体：消费者，潜在用户。

开发特点：展示类需求稍多；设计还原，追求页面交互体验和响应速度，需保证兼容性和执行效率。

B�端项目

用户群体：面向商家、销售/经纪人、运营甚至研发自己。

开发特点：工具类需求，强调功能和效率；可能并不会像C端那样有兼容性和设计还原要求。

面向�App�前端开发

• Hybrid/h5�页面�→�(内嵌�WebView,�混合App�开发模式)

• React�Native/Weex/Flutter→�利用前端技术、模式�进行�App�开发

• 微信小程序/支付宝小程序�

• 快应用�→�官网:�https://www.quickapp.cn/

• Electron/NW.js�桌面应用开发

• 大前端概念：也可以尝试 �iOS、Android�App�开发

"H5"��怎么理解？

程序员：采用了�符合HTML5标准/技术�实现的Web页面。

产品/运营：在微信等App里面的浏览器打开的用于营销给人感觉"科技"、"时尚"、"高端"、"炫酷"感觉的Web页面。

还有些人：我也不清楚H5是啥意思，反正在手机访问的Web页面我都叫做H5吧�==�移动版Web页面。

参考： https://zhuanlan.zhihu.com/p/29027643

Hybrid/H5�混合App�开发

→�内嵌在�WebView�控件的�Web页面�，提供�App�原生页面的体验。

→�通过某些技术手段("桥"协议 )�能够实现 �Native�与�Web�页面��"沟通"

背景

• 迭代周期慢：需求迭代、bugfix�依赖发版➙�App�Store�审核

• 研发、维护成本高：

• 跨平台�➙�iOS、Android、移动m站

• 跨App�➙�贝壳、链家及第三方非贝壳系�App

https://realsee.com/ke/Wjme5D6gkA13vo8A/vE9LmyGwu1hxaQlZDXMoKUXTlem3LG7d/

React�Native/Weex/Flutter

React�Native�https://facebook.github.io/react-native/

Build�native�mobile�apps�using�JavaScript�and�React.

Weex�https://weex.apache.org/guide/introduction.html

使用流行的�Web�开发体验来开发高性能原生应用的框架。

Flutter�https://flutter.dev/

Google's�portable�UI�toolkit�for�building�beautiful,

native�applications�for�mobile,�web,�and�desktop�from�a�single�

codebase.

Web�页面是存在缺陷的、ὢ

✘ 离线不可用

✘ 首屏体验差�➙�白屏、可交互时间长

✘ 性能、流畅度远不及�Native�App

✘ Hybrid�"桥"协议开发模式很�"Hack"

支付宝小程序�https://mini.open.alipay.com/channel/miniIndex.htm�

微信小程序�https://mp.weixin.qq.com/cgi-bin/wx

小程序�Mini-Programs�(富有中国特色的生态圈)

✔ 腾讯 /阿里：打开手机�➝�微信/支付宝�➝��社交+购物+吃饭+游戏...�➝�关闭手机�➝�循环以上步骤

✔ 用户：我不需要下载那么多的�App�呀，常用的也就那么几个、挺方便的

✔ 产品/运营：微信/支付宝�有流量哈，推广成本低；维护个小程序远比iOS/Android�App�来得方便

✔ 前端开发者：又多了个平台，终端碎片化愈来愈严重...�➝��又要看新文档、又要学新的"技术"

快应用�→�官网:�https://www.quickapp.cn/ᾝ

快应用是什么�?

• 快应用是基于手机硬件平台的新型应用形态；

• 标准是由主流手机厂商组成的快应用联盟联合制定；

• 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态

模式对个人开发者和企业开发者全品类开放。

ᾝᾝᾝ小程序是ᾝ软件巨头ᾝ推广的生态圈；快应用则是ᾝ硬件联盟ᾝ推广的生态圈。

桌面开发

桌面图形界面软件开发：win32/MFC/WPF/QT/macOS�Cocoa/GTK+/wxWidgets

https://electronjs.org/

https://nwjs.io/

Chromium�+�JavaScript/HTML/CSS

跨平台桌面應用程式

Chromium�Embedded�Framework�(CEF)

ᾝ

虽然脱离于Web，但用前端的技术手段来实现各平台、场景的View层开发。

ü 所有View层、面向用户的模块均属于前端工程师的职责（Web/桌面/iOS/Android）

ü Node�作为�"枢纽层 "�实现前后端分离，前端工程师承担更多非UI层面的开发

大前端概念

Big Front-end

大前端

Web前端工

程师

Node.js工

程师

PC/macOS/Li

nux客户端工

程师

App(iOS/A

ndroid)工

程师

前端测试

工程师

WebGL/VR�前

端工程师

前端运维

工程师

Node服务/Linux/MySql/爬虫�...

Webpack配置、开发脚手架、部署脚本、

流量\性能监控等等

Macaca�等一系列自

动化测试工具

数据可视化、图表...

Node�服务功能：前后端分离Node服务承担功能�➜��"枢纽"

URL�路由分发

请求校验

请求中转(代

理)

数据聚合

渲染�

HTML/JSON/XML

/login

/user/:id

/ershoufang/:id

• 用户信息验证

• upm�权限系统校验

• 请求来源是否合法

• 数据直出(JSON/XML)

• 模板引擎渲染

• 服务端同构渲染(React/Vue�SSR)

• 请求代理（HTTP-Proxy）

• 文件/图片上传

• HTTP/Thrift/RPC�请求后端数据�&�整合

• 一些简单的业务逻辑计算�...

工程效率�

One�more�thing�...

ü 脚手架：前端项目、自动化/单元测试 �等

ü 运维、自动化脚本：项目构建、部署、服务/性能数据监控(PM2)

ü 命令行工具：webpack-cli/terser/uglify-js�...�

ü 代码复用：SDK�封装、npm�共享

ü Node.js/npm�生态圈："你可以做任何你想做的事情"�

• 计算机图形学(WebGL)、深度学习(TensorFlow.js)

如果在�https://www.npmjs.com/�找不到满足你需求的工具，那么恭喜你，开源领域欢迎你的贡献�....�ᾝ

v 面向用户群体：�C�端�&�B�端�

v 面向�App�前端开发

v Hybrid/H5�页面�→�(内嵌�WebView)�Web页面，提供App�原生页面的体验

v React�Native/Weex/Flutter→�利用前端的开发方式�或�技术、工具�进行�App�开发

v 新前端开发生态：微信小程序/支付宝小程序/快应用

v Electron/NW.js�桌面应用开发

v 大前端概念：也可以尝试 iOS/Android�App开发哈、

v 服务端→�基于Node�"枢纽"层实现的前后端分离；全栈式开发。

v 工程效率→�开发脚手架、自动化脚本、命令行工具及SDK等

总结