Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web前端印象
otakustay@icloud.com
自我介绍
• 张立理 – Gray Zhang – otakustay
otakustay @icloud.com
otakustaygithub.com/
otakustaystackoverflow:
自我介绍
• 工作6年,专职前端5年
• 2010年加入百度,现T7,前端架构师
• 百度EFE组RIA技术方向负责人
• 擅长大型前端系统设计&建设,第三方脚本实现
• 爱好摄影、驾驶
• 宅、家里蹲
大纲
职责定位
知识体系
工程模式
热门技术
Q&A
前端的作用
没有前端时 有前端时
前端的位置
产品
开发
运维
前端
市场
产品
DBA
UE
后端
运维
IT
运营
前端的职责
• 产品需求
• 交互设计
• 视觉设计
输入
• 逻辑实现
• 设计还原
• 前后接口
• 系统构建
• 发布部署
过程 • 面向用户可用的界面
• 流畅一致的使用体验
• 回馈后续产品设计
输出
• 问题监控&修复
• 性能监控...
编码内容
HTML(内容)
•文字
•图片
•按钮
•文本输入
CSS(外
观)
•颜色
•背景图片
•字体字号
•摆放位置
JavaScript
(逻辑)
•点击、输入
•数据获取
•计算校验
知识体系
基本技能栈
工程技能堆
知识体系
基本技能栈
程序逻辑 数据结构 基本算法
HTML JavaScript CSS
Emmet Coffee ES Next SASS Stylus
DOM BOM 布局 动画
响应式语义性 异步管理
面向对象 函数式 设计模式 MVC MVVM...
工程技能堆
Nginx
CDN
自动化
部署
性能分析
GPU加速
RAIL模型
优化
模块化
应用分层
依赖管理
配置化
约定化
架构
性能
异常
行为
统计
报警
监控
HTTP/1.1
HTTP/2.0
WebSocket
长链接
服务器...
HTML
基本
标签
DOCTYPE
基础标签
HTML5语义标签
嵌套关系
语义
化
标签语义化
属性、内容语义化
Microdata
语法
语法元素
可省略元素
编译状态机
JavaScript
语言对
象系统
基本类型
对象类型
原生对象
宿主对象
内置对象
语法
关键词
运算符
语句
内置核
心类型
数字
字符串
数组
对象
函数
常见编
程方式
面向过程
面向对象
函数式
关键知
识点
原型链
作用域链
闭包...
CSS
使用方式
• link
• style
• inline
• @import
语法
• CSSOM
• @rule
• 选择器
• 属性
• 伪类、伪元素
• 媒体选择
属性值
• 数字
• 长度
• 颜色
布局
• 盒模型
• 浮动
...
HTTPHTTP/1.1
协议格式
TCP复用
分段输出
缓存
数据压缩
断点续传
HTTP/2.0
二进制
多路复用
头部压缩
优先级调度
依赖管理
双向传输
服务器推送
HTTPS
加密算法
证书验证
开发模式
模板输出
动静分离
中间件
模板输出
后端业务逻辑
提供页面数据
定位模板文件
前端编写模
板内容
服务器将模板转为
HTML输出
• 优点
 直接输出HTML,用户体验好
 对搜索引擎友好
 可基于最终HTML集成测试
• 缺点
 不同框架模板语法不同造成学习成...
动静分离
后端提
供数据
接口
前端编
写模板
纯前端渲染
• JavaScript请
求数据
• 前端模板引擎
• 优点
 职责分离,高效开发
 动静分别管理、上线、部署、运维,可针
对性优化各个环节
 数据相比HTML体积小,网络性能...
中间件
• 细粒度
• 控制授权和权限
后端提供数据
接口
• 聚合数据接口
• 定位模板
• 生成HTML输出
• 控制缓存等优化
前端维护
NodeJS中间件
• 优点
 前端熟悉NodeJS技术,模板语法固定
 后端数据接口无需照顾前...
混合式
• 优点
 混合动静分离与中间件模式
 灵活性极高,前端可自由选择获取数据或者HTML
 中间件可用状态下由中间件进行模板渲染及输出
 中间件不可用时前端直接获取后端数据接口
 前端组件可在中间件进行预渲染
• 缺点
 技术...
热门技术
AngularJS
React
Webpack
AngualrJS
• 场景
 界面操作混乱、复杂,不易测试
 DOM开发效率低下,易出错
• 解决方案
 数据生成界面,数据变化产生界面变化
 双向绑定,界面变化回馈数据变化
• 优点
 开发效率高,大部分场景只关注数据
• 缺点
...
React
• 场景
 维护数据关系容易混乱,数据所有权不明,一份数据多处修改容易丢失一致性
 数据变化自动生成界面变化效率不高
• 解决方案
 引入函数式编程理念,强调数据不变性
 组件通信使用事件机制,避免对数据的多端修改
 虚拟...
Webpack
• 场景
 模块化开发成为主流,构建工具却依旧以文件为单位
 依赖管理分散,逻辑模块自主管理依赖,其它依赖无处声明
 非全局性地构建单个模块较为麻烦
• 解决方案
 以模块为核心的构建系统
 所有资源均为模块,统一依赖...
Q&A
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
手机浏览器竞品分析(Home页诉求)0714
Next
Upcoming SlideShare
手机浏览器竞品分析(Home页诉求)0714
Next
Download to read offline and view in fullscreen.

2

Share

web-frontend-overview

Download to read offline

Web前端印象

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

web-frontend-overview

  1. 1. Web前端印象 otakustay@icloud.com
  2. 2. 自我介绍 • 张立理 – Gray Zhang – otakustay otakustay @icloud.com otakustaygithub.com/ otakustaystackoverflow:
  3. 3. 自我介绍 • 工作6年,专职前端5年 • 2010年加入百度,现T7,前端架构师 • 百度EFE组RIA技术方向负责人 • 擅长大型前端系统设计&建设,第三方脚本实现 • 爱好摄影、驾驶 • 宅、家里蹲
  4. 4. 大纲 职责定位 知识体系 工程模式 热门技术 Q&A
  5. 5. 前端的作用 没有前端时 有前端时
  6. 6. 前端的位置 产品 开发 运维 前端 市场 产品 DBA UE 后端 运维 IT 运营
  7. 7. 前端的职责 • 产品需求 • 交互设计 • 视觉设计 输入 • 逻辑实现 • 设计还原 • 前后接口 • 系统构建 • 发布部署 过程 • 面向用户可用的界面 • 流畅一致的使用体验 • 回馈后续产品设计 输出 • 问题监控&修复 • 性能监控&优化 • 用户行为追踪&统计 • 细节体验优化 支撑
  8. 8. 编码内容 HTML(内容) •文字 •图片 •按钮 •文本输入 CSS(外 观) •颜色 •背景图片 •字体字号 •摆放位置 JavaScript (逻辑) •点击、输入 •数据获取 •计算校验
  9. 9. 知识体系 基本技能栈 工程技能堆
  10. 10. 知识体系
  11. 11. 基本技能栈 程序逻辑 数据结构 基本算法 HTML JavaScript CSS Emmet Coffee ES Next SASS Stylus DOM BOM 布局 动画 响应式语义性 异步管理 面向对象 函数式 设计模式 MVC MVVM XHR JSON jQuery underscore iscroll zepto React Sencha ECharts Angular Ember 基础知识 编程语言 应用接口 库 框架 解决方案 学习 编码 生产 英语
  12. 12. 工程技能堆 Nginx CDN 自动化 部署 性能分析 GPU加速 RAIL模型 优化 模块化 应用分层 依赖管理 配置化 约定化 架构 性能 异常 行为 统计 报警 监控 HTTP/1.1 HTTP/2.0 WebSocket 长链接 服务器推送 协议 下载 解析 样式计算 布局 绘制 渲染原理 SVN Git 分支模型 主干模型 源码管理 Grunt Gulp WebPack UglifyJS PostCSS 构建
  13. 13. HTML 基本 标签 DOCTYPE 基础标签 HTML5语义标签 嵌套关系 语义 化 标签语义化 属性、内容语义化 Microdata 语法 语法元素 可省略元素 编译状态机
  14. 14. JavaScript 语言对 象系统 基本类型 对象类型 原生对象 宿主对象 内置对象 语法 关键词 运算符 语句 内置核 心类型 数字 字符串 数组 对象 函数 常见编 程方式 面向过程 面向对象 函数式 关键知 识点 原型链 作用域链 闭包 异步 ES Next 语法增强 异步函数 解构 class 生成器 装饰器
  15. 15. CSS 使用方式 • link • style • inline • @import 语法 • CSSOM • @rule • 选择器 • 属性 • 伪类、伪元素 • 媒体选择 属性值 • 数字 • 长度 • 颜色 布局 • 盒模型 • 浮动 • 定位 • 表格 • 边距折叠 • 展现层级
  16. 16. HTTPHTTP/1.1 协议格式 TCP复用 分段输出 缓存 数据压缩 断点续传 HTTP/2.0 二进制 多路复用 头部压缩 优先级调度 依赖管理 双向传输 服务器推送 HTTPS 加密算法 证书验证
  17. 17. 开发模式 模板输出 动静分离 中间件
  18. 18. 模板输出 后端业务逻辑 提供页面数据 定位模板文件 前端编写模 板内容 服务器将模板转为 HTML输出 • 优点  直接输出HTML,用户体验好  对搜索引擎友好  可基于最终HTML集成测试 • 缺点  不同框架模板语法不同造成学习成本  循环生成HTML冗余,网络传输量大  动静资源难以独立维护、上线、部署  难以针对静态资源做CDN等运维优化  模板渲染与业务代码不可物理分离 • 常见场景  跨职责工程师团队  访问量中等的多页式传统项目
  19. 19. 动静分离 后端提 供数据 接口 前端编 写模板 纯前端渲染 • JavaScript请 求数据 • 前端模板引擎 • 优点  职责分离,高效开发  动静分别管理、上线、部署、运维,可针 对性优化各个环节  数据相比HTML体积小,网络性能更佳  可结合双向绑定等技术提升前端开发效率 • 缺点  难以进行SEO(搜索引擎优化)  需较重量级前端框架支撑  页面需多份数据往往要请求多次,造成 HTTP请求数量较多影响性能 • 常见场景  单页式应用  单职责形开发团队
  20. 20. 中间件 • 细粒度 • 控制授权和权限 后端提供数据 接口 • 聚合数据接口 • 定位模板 • 生成HTML输出 • 控制缓存等优化 前端维护 NodeJS中间件 • 优点  前端熟悉NodeJS技术,模板语法固定  后端数据接口无需照顾前端展现形式  NodeJS擅长IO密集形应用,可提升性能  业务逻辑与中间件可分离部署,在服务器 配置、运维手段等方面针对性优化  NodeJS可进行部分客户端JavaScript预执 行和渲染 • 缺点  NodeJS不够成熟  增加故障点 • 常见场景  高并发高PV压力的系统
  21. 21. 混合式 • 优点  混合动静分离与中间件模式  灵活性极高,前端可自由选择获取数据或者HTML  中间件可用状态下由中间件进行模板渲染及输出  中间件不可用时前端直接获取后端数据接口  前端组件可在中间件进行预渲染 • 缺点  技术难度较高  中间件不可用时后端压力增长,需要完善扩容方案  代码不易复用,相同逻辑往往中间件与前端重复编写 • 常见场景  基于React组件解决方案的应用
  22. 22. 热门技术 AngularJS React Webpack
  23. 23. AngualrJS • 场景  界面操作混乱、复杂,不易测试  DOM开发效率低下,易出错 • 解决方案  数据生成界面,数据变化产生界面变化  双向绑定,界面变化回馈数据变化 • 优点  开发效率高,大部分场景只关注数据 • 缺点  复杂应用场景下数据关系易产生混乱  重型解决方案,不可分拆性
  24. 24. React • 场景  维护数据关系容易混乱,数据所有权不明,一份数据多处修改容易丢失一致性  数据变化自动生成界面变化效率不高 • 解决方案  引入函数式编程理念,强调数据不变性  组件通信使用事件机制,避免对数据的多端修改  虚拟DOM优化界面性能  新的语言JSX提供辅助 • 优点  数据管理清晰,变更流动可控,系统健壮 • 缺点  应用层面不隐藏组件存在,测试困难
  25. 25. Webpack • 场景  模块化开发成为主流,构建工具却依旧以文件为单位  依赖管理分散,逻辑模块自主管理依赖,其它依赖无处声明  非全局性地构建单个模块较为麻烦 • 解决方案  以模块为核心的构建系统  所有资源均为模块,统一依赖管理方式 • 优点  与模块化设计/开发配合效果优秀 • 缺点  与编码方式相关,下游影响上游
  26. 26. Q&A
  • e2ghost

    Oct. 23, 2015
  • garnai

    Oct. 23, 2015

Web前端印象

Views

Total views

555

On Slideshare

0

From embeds

0

Number of embeds

5

Actions

Downloads

21

Shares

0

Comments

0

Likes

2

×