SlideShare a Scribd company logo
1 of 19
Download to read offline
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 1/19
前端开发演进之路
从大后端到前端组件化
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 2/19
大后端时代
MVC
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 3/19
优势
后端数据直接渲染模板, 速度快
页面可以直接执行代码逻辑
后端程序员可以无缝开发
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 4/19
缺点
页面嵌入代码逻辑, 复用和结构调整需考虑变量相关
不易测试前端逻辑
(多后端)同时开发(同一功能)效率低下
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 5/19
分离后端逻辑
数据API时代
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 6/19
特点
后端只负责渲染页面
不再使用后端模板
前后端通过数据API交互
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 7/19
优势
前端独立
协作更加高效
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 8/19
缺点
前端页面富含js逻辑,各种dom操作
不够工程化
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 9/19
前端框架兴起
前端MVC时代
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 10/19
特点
前端路由
逻辑由前端控制
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 11/19
优势
前端工程化
可测试
减少页面随处js逻辑的情况
前端可以更加专注
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 12/19
缺点
代码冗余
复用率不够高
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 13/19
前端工程化
前端组件化时代
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 14/19
特点
MVVM
数据驱动
前端功能模块组件化
前端架构设计更清晰
UI与逻辑解耦
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 15/19
优势
复用率高
Web Application
工程化程度较高
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 16/19
缺点
对工程师要求较高
对前端生态需要熟悉
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 17/19
代码结构
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 18/19
总结
后端MVC
前端MVC
前端MVVM
组件化
2016/9/2 前端开发演进之路 - By TaoBeier
http://172.18.13.248:8081/md/doc.md?print=1 19/19
Thanks

More Related Content

Viewers also liked

importancia de la educación física
importancia de la educación física importancia de la educación física
importancia de la educación física mario olmedo
 
Learning Japanese Kanji: How Technology Can Help the Brain out
Learning Japanese Kanji: How Technology Can Help the Brain outLearning Japanese Kanji: How Technology Can Help the Brain out
Learning Japanese Kanji: How Technology Can Help the Brain outParisa Mehran
 
Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5EAD Amazon
 

Viewers also liked (6)

Honey bee swarm removal
Honey bee swarm removalHoney bee swarm removal
Honey bee swarm removal
 
importancia de la educación física
importancia de la educación física importancia de la educación física
importancia de la educación física
 
Learning Japanese Kanji: How Technology Can Help the Brain out
Learning Japanese Kanji: How Technology Can Help the Brain outLearning Japanese Kanji: How Technology Can Help the Brain out
Learning Japanese Kanji: How Technology Can Help the Brain out
 
Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5
 
Ancillary task
Ancillary taskAncillary task
Ancillary task
 
7th grade Scope and Sequence (Englishpost.org)
7th grade Scope and Sequence (Englishpost.org)7th grade Scope and Sequence (Englishpost.org)
7th grade Scope and Sequence (Englishpost.org)
 

Similar to 前端开发演进之路 | The development of the front end - By TaoBeier

Google雲端 第一章準備篇
Google雲端 第一章準備篇Google雲端 第一章準備篇
Google雲端 第一章準備篇gracebrainyu
 
Jabong - 2016.05.16
Jabong - 2016.05.16Jabong - 2016.05.16
Jabong - 2016.05.16Yingray Lu
 
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API twMVC
 
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践alvis-m
 
程序组介绍Ver2.0
程序组介绍Ver2.0程序组介绍Ver2.0
程序组介绍Ver2.0vtmers2012
 
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊twMVC
 
WoT Frotend 的設計與實作
WoT Frotend 的設計與實作WoT Frotend 的設計與實作
WoT Frotend 的設計與實作julie huang
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展taobao.com
 
企業級監控平台的變革與演進
企業級監控平台的變革與演進企業級監控平台的變革與演進
企業級監控平台的變革與演進Yao-Wei Ou
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_finalWei Sun
 
twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC#22 | 一個微信專案從0到.000的效能調教之路twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC#22 | 一個微信專案從0到.000的效能調教之路twMVC
 
Glamous形象網站建置服務
Glamous形象網站建置服務Glamous形象網站建置服務
Glamous形象網站建置服務Gee Cycliving
 
Non-MVC Web Framework
Non-MVC Web FrameworkNon-MVC Web Framework
Non-MVC Web FrameworkFred Chien
 
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式Chui-Wen Chiu
 
阿里巴巴国际站架构分析和镜像解决方案
阿里巴巴国际站架构分析和镜像解决方案阿里巴巴国际站架构分析和镜像解决方案
阿里巴巴国际站架构分析和镜像解决方案airsex
 
常用开发工具介绍
常用开发工具介绍常用开发工具介绍
常用开发工具介绍haozes
 
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 twMVC
 
twMVC#15 | 開發的效能與效率
twMVC#15 | 開發的效能與效率twMVC#15 | 開發的效能與效率
twMVC#15 | 開發的效能與效率twMVC
 

Similar to 前端开发演进之路 | The development of the front end - By TaoBeier (20)

Google雲端 第一章準備篇
Google雲端 第一章準備篇Google雲端 第一章準備篇
Google雲端 第一章準備篇
 
Jabong - 2016.05.16
Jabong - 2016.05.16Jabong - 2016.05.16
Jabong - 2016.05.16
 
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
twMVC#33聊聊如何自建 Facebook {廣告} 服務 with API
 
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
 
程序组介绍Ver2.0
程序组介绍Ver2.0程序组介绍Ver2.0
程序组介绍Ver2.0
 
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
 
WoT Frotend 的設計與實作
WoT Frotend 的設計與實作WoT Frotend 的設計與實作
WoT Frotend 的設計與實作
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展
 
企業級監控平台的變革與演進
企業級監控平台的變革與演進企業級監控平台的變革與演進
企業級監控平台的變革與演進
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_final
 
twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC#22 | 一個微信專案從0到.000的效能調教之路twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC#22 | 一個微信專案從0到.000的效能調教之路
 
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
 
Data Pipeline Matters
Data Pipeline MattersData Pipeline Matters
Data Pipeline Matters
 
Glamous形象網站建置服務
Glamous形象網站建置服務Glamous形象網站建置服務
Glamous形象網站建置服務
 
Non-MVC Web Framework
Non-MVC Web FrameworkNon-MVC Web Framework
Non-MVC Web Framework
 
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
 
阿里巴巴国际站架构分析和镜像解决方案
阿里巴巴国际站架构分析和镜像解决方案阿里巴巴国际站架构分析和镜像解决方案
阿里巴巴国际站架构分析和镜像解决方案
 
常用开发工具介绍
常用开发工具介绍常用开发工具介绍
常用开发工具介绍
 
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17
 
twMVC#15 | 開發的效能與效率
twMVC#15 | 開發的效能與效率twMVC#15 | 開發的效能與效率
twMVC#15 | 開發的效能與效率
 

前端开发演进之路 | The development of the front end - By TaoBeier