Enviar pesquisa
Carregar
web-frontend-overview
•
Transferir como PPTX, PDF
•
2 gostaram
•
600 visualizações
O
otakustay
Seguir
Web前端印象
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 26
Baixar agora
Recomendados
SF Bay Area 面試經驗分享
SF Bay Area 面試經驗分享
Ian Tsai
Digital product design process
Digital product design process
peiyuhuang5
如何培養架構性思考(談軟體架構師必經之路)
如何培養架構性思考(談軟體架構師必經之路)
Gelis Wu
架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
Gelis Wu
軟體開發之路甘苦談(Gelis)
軟體開發之路甘苦談(Gelis)
Gelis Wu
前端大型系統的基石 TypeScript
前端大型系統的基石 TypeScript
Gelis Wu
實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)
Gelis Wu
Virtools游戏原型开发&脚本书写经验
Virtools游戏原型开发&脚本书写经验
Ming Gao
Recomendados
SF Bay Area 面試經驗分享
SF Bay Area 面試經驗分享
Ian Tsai
Digital product design process
Digital product design process
peiyuhuang5
如何培養架構性思考(談軟體架構師必經之路)
如何培養架構性思考(談軟體架構師必經之路)
Gelis Wu
架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
Gelis Wu
軟體開發之路甘苦談(Gelis)
軟體開發之路甘苦談(Gelis)
Gelis Wu
前端大型系統的基石 TypeScript
前端大型系統的基石 TypeScript
Gelis Wu
實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)
Gelis Wu
Virtools游戏原型开发&脚本书写经验
Virtools游戏原型开发&脚本书写经验
Ming Gao
手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714
麦哥UE
Material design分享
Material design分享
麦哥UE
Axure高级技巧和文档礼仪
Axure高级技巧和文档礼仪
麦哥UE
手机助手Phone端竞品分析
手机助手Phone端竞品分析
麦哥UE
Git 零基础介绍
Git 零基础介绍
Ethan Zhang
最终 大屏手机上的设计策略
最终 大屏手机上的设计策略
麦哥UE
Let's Redux!
Let's Redux!
Joseph Chiang
从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验
麦哥UE
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Web前端性能优化 2014
Web前端性能优化 2014
Yubei Li
塑造产品核心亮点的设计
塑造产品核心亮点的设计
麦哥UE
Node way
Node way
Ethan Zhang
设计好的用户体验 郑磊
设计好的用户体验 郑磊
麦哥UE
前端概述
前端概述
Ethan Zhang
History of share
History of share
aido Cho
初探工程師升級手冊 2022
初探工程師升級手冊 2022
Caesar Chi
Web 前端工程师与成长
Web 前端工程师与成长
RANK LIU
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
Souyi Yang
程序员的职业规划课
程序员的职业规划课
jingping yi
啟動你的AI工匠魂
啟動你的AI工匠魂
Erhwen Kuo
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程
Souyi Yang
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
d0nn9n
Mais conteúdo relacionado
Destaque
手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714
麦哥UE
Material design分享
Material design分享
麦哥UE
Axure高级技巧和文档礼仪
Axure高级技巧和文档礼仪
麦哥UE
手机助手Phone端竞品分析
手机助手Phone端竞品分析
麦哥UE
Git 零基础介绍
Git 零基础介绍
Ethan Zhang
最终 大屏手机上的设计策略
最终 大屏手机上的设计策略
麦哥UE
Let's Redux!
Let's Redux!
Joseph Chiang
从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验
麦哥UE
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Web前端性能优化 2014
Web前端性能优化 2014
Yubei Li
塑造产品核心亮点的设计
塑造产品核心亮点的设计
麦哥UE
Node way
Node way
Ethan Zhang
设计好的用户体验 郑磊
设计好的用户体验 郑磊
麦哥UE
前端概述
前端概述
Ethan Zhang
Destaque
(14)
手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714
Material design分享
Material design分享
Axure高级技巧和文档礼仪
Axure高级技巧和文档礼仪
手机助手Phone端竞品分析
手机助手Phone端竞品分析
Git 零基础介绍
Git 零基础介绍
最终 大屏手机上的设计策略
最终 大屏手机上的设计策略
Let's Redux!
Let's Redux!
从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Web前端性能优化 2014
Web前端性能优化 2014
塑造产品核心亮点的设计
塑造产品核心亮点的设计
Node way
Node way
设计好的用户体验 郑磊
设计好的用户体验 郑磊
前端概述
前端概述
Semelhante a web-frontend-overview
History of share
History of share
aido Cho
初探工程師升級手冊 2022
初探工程師升級手冊 2022
Caesar Chi
Web 前端工程师与成长
Web 前端工程师与成长
RANK LIU
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
Souyi Yang
程序员的职业规划课
程序员的职业规划课
jingping yi
啟動你的AI工匠魂
啟動你的AI工匠魂
Erhwen Kuo
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程
Souyi Yang
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
d0nn9n
你所不知道的 DDD - 文件驅動開發
你所不知道的 DDD - 文件驅動開發
志龍 陳
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
drewz lin
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
Justin Lee
網站企劃10年工作流程改變(HP8)
網站企劃10年工作流程改變(HP8)
悠識學院
Jira live demo_2020_v20
Jira live demo_2020_v20
Linktech
探索 API 開發的挑戰與解決之道 | .NET Conf 2023 Taiwan
探索 API 開發的挑戰與解決之道 | .NET Conf 2023 Taiwan
Alan Tsai
F2E, the Keystone
F2E, the Keystone
Joseph Chiang
數學系的資訊人生
數學系的資訊人生
Jintin Lin
敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)
Weijun Zhong
2020DDDTW-如何逐步導入敏捷精神,創造願意接受失敗的開發團隊?
2020DDDTW-如何逐步導入敏捷精神,創造願意接受失敗的開發團隊?
棋文 鄭
信息系统架构设计
信息系统架构设计
Weijun Zhong
台中市創業平台建置計畫
台中市創業平台建置計畫
Chris 克里斯
Semelhante a web-frontend-overview
(20)
History of share
History of share
初探工程師升級手冊 2022
初探工程師升級手冊 2022
Web 前端工程师与成长
Web 前端工程师与成长
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
程序员的职业规划课
程序员的职业规划课
啟動你的AI工匠魂
啟動你的AI工匠魂
高雄和春資工系-Axure RP基礎課程
高雄和春資工系-Axure RP基礎課程
赵泽欣 - 淘宝网前端应用与发展
赵泽欣 - 淘宝网前端应用与发展
你所不知道的 DDD - 文件驅動開發
你所不知道的 DDD - 文件驅動開發
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
網站企劃10年工作流程改變(HP8)
網站企劃10年工作流程改變(HP8)
Jira live demo_2020_v20
Jira live demo_2020_v20
探索 API 開發的挑戰與解決之道 | .NET Conf 2023 Taiwan
探索 API 開發的挑戰與解決之道 | .NET Conf 2023 Taiwan
F2E, the Keystone
F2E, the Keystone
數學系的資訊人生
數學系的資訊人生
敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)
2020DDDTW-如何逐步導入敏捷精神,創造願意接受失敗的開發團隊?
2020DDDTW-如何逐步導入敏捷精神,創造願意接受失敗的開發團隊?
信息系统架构设计
信息系统架构设计
台中市創業平台建置計畫
台中市創業平台建置計畫
web-frontend-overview
1.
Web前端印象 otakustay@icloud.com
2.
自我介绍 • 张立理 –
Gray Zhang – otakustay otakustay @icloud.com otakustaygithub.com/ otakustaystackoverflow:
3.
自我介绍 • 工作6年,专职前端5年 • 2010年加入百度,现T7,前端架构师 •
百度EFE组RIA技术方向负责人 • 擅长大型前端系统设计&建设,第三方脚本实现 • 爱好摄影、驾驶 • 宅、家里蹲
4.
大纲 职责定位 知识体系 工程模式 热门技术 Q&A
5.
前端的作用 没有前端时 有前端时
6.
前端的位置 产品 开发 运维 前端 市场 产品 DBA UE 后端 运维 IT 运营
7.
前端的职责 • 产品需求 • 交互设计 •
视觉设计 输入 • 逻辑实现 • 设计还原 • 前后接口 • 系统构建 • 发布部署 过程 • 面向用户可用的界面 • 流畅一致的使用体验 • 回馈后续产品设计 输出 • 问题监控&修复 • 性能监控&优化 • 用户行为追踪&统计 • 细节体验优化 支撑
8.
编码内容 HTML(内容) •文字 •图片 •按钮 •文本输入 CSS(外 观) •颜色 •背景图片 •字体字号 •摆放位置 JavaScript (逻辑) •点击、输入 •数据获取 •计算校验
9.
知识体系 基本技能栈 工程技能堆
10.
知识体系
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.
工程技能堆 Nginx CDN 自动化 部署 性能分析 GPU加速 RAIL模型 优化 模块化 应用分层 依赖管理 配置化 约定化 架构 性能 异常 行为 统计 报警 监控 HTTP/1.1 HTTP/2.0 WebSocket 长链接 服务器推送 协议 下载 解析 样式计算 布局 绘制 渲染原理 SVN Git 分支模型 主干模型 源码管理 Grunt Gulp WebPack UglifyJS PostCSS 构建
13.
HTML 基本 标签 DOCTYPE 基础标签 HTML5语义标签 嵌套关系 语义 化 标签语义化 属性、内容语义化 Microdata 语法 语法元素 可省略元素 编译状态机
14.
JavaScript 语言对 象系统 基本类型 对象类型 原生对象 宿主对象 内置对象 语法 关键词 运算符 语句 内置核 心类型 数字 字符串 数组 对象 函数 常见编 程方式 面向过程 面向对象 函数式 关键知 识点 原型链 作用域链 闭包 异步 ES Next 语法增强 异步函数 解构 class 生成器 装饰器
15.
CSS 使用方式 • link • style •
inline • @import 语法 • CSSOM • @rule • 选择器 • 属性 • 伪类、伪元素 • 媒体选择 属性值 • 数字 • 长度 • 颜色 布局 • 盒模型 • 浮动 • 定位 • 表格 • 边距折叠 • 展现层级
16.
HTTPHTTP/1.1 协议格式 TCP复用 分段输出 缓存 数据压缩 断点续传 HTTP/2.0 二进制 多路复用 头部压缩 优先级调度 依赖管理 双向传输 服务器推送 HTTPS 加密算法 证书验证
17.
开发模式 模板输出 动静分离 中间件
18.
模板输出 后端业务逻辑 提供页面数据 定位模板文件 前端编写模 板内容 服务器将模板转为 HTML输出 • 优点 直接输出HTML,用户体验好
对搜索引擎友好 可基于最终HTML集成测试 • 缺点 不同框架模板语法不同造成学习成本 循环生成HTML冗余,网络传输量大 动静资源难以独立维护、上线、部署 难以针对静态资源做CDN等运维优化 模板渲染与业务代码不可物理分离 • 常见场景 跨职责工程师团队 访问量中等的多页式传统项目
19.
动静分离 后端提 供数据 接口 前端编 写模板 纯前端渲染 • JavaScript请 求数据 • 前端模板引擎 •
优点 职责分离,高效开发 动静分别管理、上线、部署、运维,可针 对性优化各个环节 数据相比HTML体积小,网络性能更佳 可结合双向绑定等技术提升前端开发效率 • 缺点 难以进行SEO(搜索引擎优化) 需较重量级前端框架支撑 页面需多份数据往往要请求多次,造成 HTTP请求数量较多影响性能 • 常见场景 单页式应用 单职责形开发团队
20.
中间件 • 细粒度 • 控制授权和权限 后端提供数据 接口 •
聚合数据接口 • 定位模板 • 生成HTML输出 • 控制缓存等优化 前端维护 NodeJS中间件 • 优点 前端熟悉NodeJS技术,模板语法固定 后端数据接口无需照顾前端展现形式 NodeJS擅长IO密集形应用,可提升性能 业务逻辑与中间件可分离部署,在服务器 配置、运维手段等方面针对性优化 NodeJS可进行部分客户端JavaScript预执 行和渲染 • 缺点 NodeJS不够成熟 增加故障点 • 常见场景 高并发高PV压力的系统
21.
混合式 • 优点 混合动静分离与中间件模式
灵活性极高,前端可自由选择获取数据或者HTML 中间件可用状态下由中间件进行模板渲染及输出 中间件不可用时前端直接获取后端数据接口 前端组件可在中间件进行预渲染 • 缺点 技术难度较高 中间件不可用时后端压力增长,需要完善扩容方案 代码不易复用,相同逻辑往往中间件与前端重复编写 • 常见场景 基于React组件解决方案的应用
22.
热门技术 AngularJS React Webpack
23.
AngualrJS • 场景 界面操作混乱、复杂,不易测试
DOM开发效率低下,易出错 • 解决方案 数据生成界面,数据变化产生界面变化 双向绑定,界面变化回馈数据变化 • 优点 开发效率高,大部分场景只关注数据 • 缺点 复杂应用场景下数据关系易产生混乱 重型解决方案,不可分拆性
24.
React • 场景 维护数据关系容易混乱,数据所有权不明,一份数据多处修改容易丢失一致性
数据变化自动生成界面变化效率不高 • 解决方案 引入函数式编程理念,强调数据不变性 组件通信使用事件机制,避免对数据的多端修改 虚拟DOM优化界面性能 新的语言JSX提供辅助 • 优点 数据管理清晰,变更流动可控,系统健壮 • 缺点 应用层面不隐藏组件存在,测试困难
25.
Webpack • 场景 模块化开发成为主流,构建工具却依旧以文件为单位
依赖管理分散,逻辑模块自主管理依赖,其它依赖无处声明 非全局性地构建单个模块较为麻烦 • 解决方案 以模块为核心的构建系统 所有资源均为模块,统一依赖管理方式 • 优点 与模块化设计/开发配合效果优秀 • 缺点 与编码方式相关,下游影响上游
26.
Q&A
Notas do Editor
最简单且合法的HTML是什么样的 什么时候用背景图片,什么时候用<img>标签 压缩HTML时哪些可以移除 多个空行是否可以压缩成一个,是否可以一个不剩
即便基于React可以相对方便地进行这种模式的开发,依旧少有团队采纳混合式作为主要开发模式,因为ROI太低
Baixar agora