目录
为什么要实现前后端分离
- 打造精益团队
- 提升开发效率
- 应对复杂多变的前端需求
- 增强代码可维护性
前后端分离的场景(重前端)
- 页面布局复杂,使用了主题和样式。
- 需要有较高的页面渲染效果
- 前端页面中包含复杂业务逻辑
- 页面需要渲染的数据量较大
如何实现前后端分离
前后端分离框架
angular 、vue(1x、2x)、node+express+ejs/jade
- angular框架太过沉重,框架过于陈旧。
- vue 1x和angular很相似,本地没有server,客户端渲染比较方便,用起来也比较方便,直接通过script src=“”引入库文件就可以,部署的时候放在静态服务里就可以运行了,上手容易,用起来简单。
- vue 2x结合node.js,有本地server路由和配置文件,可以做到组件化开发,提高复用率。
- jq+ajax也能实现前后分离,没有路由,开发成本挺高,前端渲染的方法单一、笨重,无非就是appen()、html()、text()等等一些办法,但是网上jquery的插件特别多特别全,配合jquery的话也很好。
- node+express+ejs/jade的前后端分离是主流的开发办法,node的框架express可以提供本地服务和路由,配合模板引擎jade+ejs可以实现快速开发,一些复杂的数据结构处理也可以在node程序中完成,实际上node起到了一个中间层的作用,后端对接java/php的接口,前端对接ejs/jade模板引擎,实现前端服务端页面渲染,很高大上。缺点就是你写的node程序一旦报错就会全盘崩溃,你不会屏蔽错的的话就会死的很惨,要谨慎!
前端做假数据
利用mock(http://mockjs.com)来返回一些假数据,这样就可以模拟发送API到接受响应的整一个过程,因此前端也不需要依赖于后端开发了,可以独立开发,等到后台的API全部设计完之后,就可以比较快速的联调。
数据接口开发流程
更好的开发前端需要掌握哪些技术
语言知识
ES5 & ES6 & ES7 // ES语言基础
HTML5 API & CSS3 // HTML5和CSS特效
Less & Sass // CSS预编译语言
SVG & Canvas & D3.js // 图形数据可视化
WebGL & Three.js // 3D场景
CMD & AMD & CommonJS // 语言标准
RequireJS & SeaJS // ES模块化库
CoffeeScript & TypeScript // ES语言风格库
NodeJS & Express & Koa // Node的WEB服务器
TCP & HTTP & WebSocket // 网络协议
......
框架、库
jQuery
Backbone
Ember
Angular & Angular2 & Angular4
React
Vue & Vue2
Ionic & Ionic2
React Native
Weex
Electron
......
工具
Sublime Text & Atom & Webstorm & VS code //编辑器、IDE
SVN & Git //代码管理、版本控制
Chrome Dev Tools & FireFox Developer Edition // 浏览器开发者工具
ESLint & JSLint // JavaScript代码语法检查
React DevTools // react调试工具
Redux DevTools // redux调试工具
Vue DevTools // vue调试工具
Grunt & Gulp & browserify & Webpack // 代码打包工具
Babel // ES6、react等语法转换工具,将代码转换成ES5
forever * pm2 // nodejs项目部署工具
karma & mocha & PhantomJS //自动化测试框架
......