前端如何高效的与后端协作开发
转载
1.前后端分离
前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化、组件化、单页面应用等。
可以参考:前后端分离、web与static服务器分离(https://segmentfault.com/a/1190000015297319)。
2. 尽量避免后端模板渲染
web 应用的渲染方式分为服务器端渲染和客户端渲染,当下比较推荐的方式是客户端渲染,数据使用全 ajax 的方式进行交互。
除非在一些不得不使用服务器端渲染的情况下(如门户、电商等),应当尽量使用客户端渲染,因为客户端渲染更能使前后端分离(项目分离、代码解耦、协作分离、职责分离等),也能更好的做本地接口模拟开发,提升开发效率。
即使用服务器端渲染,在技术支持的条件下,可以使用 node 中间层(由前端人员开发),代替传统的后端模板渲染,这样可以使后端与前端完全解耦,后端与前端只有数据上的往来。
可以参考:细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)(https://segmentfault.com/a/1190000016704384)。
3. 尽量避免大量的线上调试
做好本地接口模拟开发(包括后端模板渲染),避免大量的线上调试,因为线上调试很不方便,也很费事,并且每次更新代码,都需要重新构建,然后同步到服务器。
所以做好本地接口模拟开发,只要程序在本地运行是没问题的,一般线上就不会有太大的问题,这样就能大幅降低调试工作量,提升开发效率。
4. 本地接口模拟开发
本地接口模拟就是在本地模拟一个与服务器差不多的环境,能够提供数据所需的接口,进行错误模拟处理等等。
本地接口模拟开发的意义就在于能够在本地完成几乎所有的开发与调试,尽量减少线上的调试,提高开发效率。
一些常用库:
browser-sync(https://github.com/BrowserSync/browser-sync):能让浏览器实时、快速响应文件更改(
html
、js
、css
、sass
、less
等)并自动刷新页面,并且可以同时在PC、平板、手机等设备下进行调试。webpack-dev-middleware(https://github.com/webpack/webpack-dev-middleware):A development middleware for webpack。
webpack-hot-middleware(https://github.com/webpack-contrib/webpack-hot-middleware):热更新本地开发浏览器服务。
另外,本地接口模拟开发需要后端开发人员有规范的接口文档。
可以参考:本地化接口模拟、前后端并行开发(https://segmentfault.com/a/1190000015297352)。
5. 规范的接口文档
前端与后端协作提升开发效率的一个很重要的方法就是减少沟通:能够形成纸质的文档就不要口头沟通、能够把接口文档写清楚也不要口头沟通(参数、数据结构、字段含义等),特别是线上协作的时候,面对面交流是很困难的。
一个良好的接口文档应当有以下的几点要求与信息:
格式简洁清晰:推荐用 API Blueprint(https://apiblueprint.org/)
分组:当接口很多的时候,分组就很必要了
接口名、接口描述、接口地址
http 方法、参数、headers、是否序列化
http 状态码、响应数据
接口文档可以用一些文档服务(如 leanote(https://github.com/leanote/leanote))来管理文档,也可以用 git
来管理;书写方式可以用 markdown
,也可以 YAML
、 JSON
等。
推荐使用 markdown
方式写文档,用 git
管理文档。
可以参考:
本地化接口模拟、前后端并行开发(https://segmentfault.com/a/1190000015297352)
API Blueprint(https://apiblueprint.org/)
6. 去缓存
前端需要做好去客户端缓存的功能,保证用户始终都是使用的最新资源,不会因为因为缓存的问题而出现 bug。
传统的去缓存是在静态资源 url 上加上版本号或者时间戳,不过因为构建工具的出现以及一些浏览器已经不支持这种方式了的缘故,这种方式已经是过去时了。
现在去缓存是将文件 hash 化命名,只要文件变动,文件名就会不一样,以此才能彻底的去缓存。如果使用 webpack 进行打包,会自动将所有文件进行 hash 化命名。
可以参考:webpack output-filename
(https://webpack.js.org/configuration/output/#output-filename)。
7. 做好错误处理
前端与后端都需要各自做好错误处理,以便发生错误能够有友好的提示,也能在用户反馈时快速准确定位错误来源和原因。
一般前端的错误分为:
脚本运行错误:
js
脚本错误,找到堆栈信息,然后解决接口错误:服务器报错、数据返回不对、没有响应数据、超时等
而接口错误分为:
状态码错误(状态码非
2XX
):服务器报错、超时等数据错误:没有响应数据、数据格式不对、数据内容不对
可以参考:HTTP状态码(https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin)。
8. 运行时捕捉 js
脚本错误
当用户在用线上的程序时,怎么知道有没有出 bug;如果出 bug 了,报的是什么错;如果是 js 报错,怎么知道是那一行运行出了错?
所以,在程序运行时捕捉 js
脚本错误,并上报到服务器,是非常有必要的。
这里就要用到 window.onerror
了:
window.onerror = (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) => {
const data = {
title: document.getElementsByTagName('title')[0].innerText,
errorMessage,
scriptURI,
lineNumber,
columnNumber,
detailMessage: (errorObj && errorObj.message) || '',
stack: (errorObj && errorObj.stack) || '',
userAgent: window.navigator.userAgent,
locationHref: window.location.href,
cookie: window.document.cookie,
};
post('url', data); // 上报到服务器
};
线上的 js
脚本都是压缩过的,需要用 sourcemap
文件与 source-map(https://github.com/mozilla/source-map) 查看原始的报错堆栈信息。
可以参考:
webpack - devtool(https://webpack.js.org/configuration/devtool/)
source-map(https://github.com/mozilla/source-map)
9. 移动端远程调试、vConsole、TBS Studio
因为移动端的开发无法像 pc 端开发一样使用 Chrome 的开发者调试工具,所以调试移动端需要一些额外的技巧。
移动端应用一般都运行在微信浏览器中、 webview
中、手机浏览器中。
远程调试(Remote Debugging)
远程调试就是通过 USB 连接、端口转发、搭建代理等方式,将一个设备的 web
页面映射到另一个设备上,比如将手机的 webview
映射到 pc 上,达到调试的目的。
移动端 web
应用调试难题从一开始就有,不过后来浏览器厂商基本都推出自己的远程调试工具来解决这个问题,包括 OperaMobile
、 iOSSafari
、 ChromeforAndroid
、UC 浏览器等,另外还有一些第三方开发的远程调试工具,比如 weinre(http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/) 等。
以 Android 为例,可以将 webview
、 ChromeforAndroid
中的页面映射到 pc 端的 ChromeDevTools
,然后就可以在 pc 端调试移动端的页面了。
可以参考:移动端Web开发调试之Chrome远程调试(Remote Debugging)(https://blog.csdn.net/freshlover/article/details/42528643/)。
vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板( chrome
开发者工具的便利实现)。
这个是内嵌的页面当中的便捷调试器,基本上能够满足一般的需要远程调试的页面。
github
:https://github.com/Tencent/vConsoledemo
:https://wechatfe.github.io/vconsole/demo.html
TBS Studio
因为微信浏览器是定制的浏览器,一般的远程调试方式都不可用,需要配合特定的工具,如微信开发者工具。
TBS Studio(https://x5.tencent.com/tbs/guide.html) 是另一个可以像 Chrome 一样调试远程微信浏览器页面的强大工具。
可以参考:
tbs studio - 腾讯浏览服务-调试工具(https://x5.tencent.com/tbs/guide/debug/season1.html)
TBS Studio(https://x5.tencent.com/tbs/guide.html)
10. 前后端并行开发
正常情况下,前端的开发在完成 UI 或者组件开发之后,就需要等后端给出接口文档才能继续进行,如果能做到前后端并行开发,也能提升开发效率。
前后端并行开发,就是说前端的开发不需要等后端给出接口文档就可以进行开发,等后端给出接口之后,再对接好后就基本上可以上线了。
在本地化接口模拟的实现下,就可以做到前后端并行开发,只是在代码层面需要对 ajax
进行封装。
可以参考:本地化接口模拟、前后端并行开发(https://segmentfault.com/a/1190000015297352)。
11. 友好的沟通
不管工具多么厉害,很多时候都免不了要当面沟通,友好、心平气和的沟通也是很重要的哩!
后续
更多博客,查看:https://github.com/senntyou/blogs
作者:深予之 (@senntyou)
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
转载于:https://www.cnblogs.com/Yanss/p/10211796.html
前端如何高效的与后端协作开发相关推荐
- ApiPost 前后端协作开发神器 Postman+Swagger+Mock+Websocket的完美替代品
ApiPost 是什么 ApiPost 的官网地址:https://www.apipost.cn?token=4f13dfb0ecf6000bb94797449466f723 Web 版本的链接:ht ...
- 前端git操作命名规范和协作开发流程
前言 一个项目的分支,一般包括主干 master 和 开发分支 dev,以及若干临时分支 分支命名规范 分支: 命名: 说明:主分支 master 主分支,所有提供给用户使用的正式版本,都在这个主分支 ...
- java api文档_细说API – 文档和前后端协作
在上一篇文章--<细说API – 重新认识RESTful>中介绍了如何理解和设计RESTful风格的API,现在我们来聊聊如何有效的呈现API文档,以及前后端协作的方式. 我经历过一些没有 ...
- 014-Axios Ajax:前后端分离概述,发送json类型的参数,前后端分离开发:在线接口文档,前端工程化、Element、nginx
第一节 Ajax概述 1.概述 概念: Asynchronous JavaScript And XML,异步的JavaScript和XML. 作用: 数据交换:通过Ajax可以给服务器发送请求,并获取 ...
- 前端html页面如何结合后端,前端开发与后台交互机制
传统开发模式: 一般传统上的开发协作模式有两种: 一种是前端先写一个静态页面,写好后,让后端去套模板.静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可.不足是还需要后端套模板,这些前端代 ...
- 后端开发者开发前端必会的工具(一):样式调试篇
又来为大家分享干货了,今天主要是分享一点关于后端工程师开发前端比较苦恼的一个问题<如何去调试前端?>,我相信这是所有后端开发者比较困惑的,如果有这个困惑的,记得关注"程序员晓晓& ...
- 前端VS后端Web开发
前端VS后端-Web开发 介绍 前端开发 后端开发 如果您是一名开发人员,则只是学习编码而希望专注于Web开发,但对走上哪条道路感到困惑.是前端Web还是后端Web开发,或者您是否已经开始了自己的旅程 ...
- 前端及后端项目开发工具
1 前端项目开发工具:构建Vue项目 开发工具:HBuilder 作用:用来创建vue项目 web中间件:nodejs nodejs作用:用来解析开发者写好的js.jQuery.vue代码. 项目管理 ...
- LayBox官斗精品手游《勇者名录》完整源码下载 前端laybox typeScipt脚本开发 后端php开发
LayBox官斗精品手游<勇者名录>完整源码下载 前端laybox typeScipt脚本开发 后端php开发 数据库mysql redies等 含有详细说明文档. 勇者名录是一款三国题材 ...
最新文章
- 我是越来越喜欢做产品了
- GRUB and LVM and EVMS
- 图解Oracle RMAN备份入门
- 使用parted命令对硬盘进行操作
- python中random是什么意思_Python代码中的“importrandom”是什么意思?
- 一文读懂密码学中的证书
- linux shell 中判断字符串为空的正确方法
- 初识JavaScript,感觉整个人都不好了。。。
- java redis 面试题_Java开发人员怎么面试 常见Redis面试题有哪些
- 中小学生Python课应该学什么
- python基础系列教程——python基础语法全解
- django view返回form error_Django(解决被钓鱼CSRF、Django中间件、反射)
- C# 简单封装一个XML文件读取类
- iis6扩展php_教你IIS6的PHP最佳配置方法
- c语言图灵机算法,图灵机的时间化简概述(3/4)
- Centos7 64位镜像下载
- Excel数据分析实战之开宗明义: Excel与数据分析实战
- EasyExcel java实现excel简单读写操作(快速上手,复制粘贴即可)
- C语言位运算的高级应用(尤其适合单片机和嵌入式编程)
- js清除所有的cookie
热门文章
- MFC 使用datetimepicker获取时间
- ***必备兵器与技能
- unbuntu nginx安装详解 /configure: error: the HTTP rewrite module requires the PCRE library
- 触发器和java的关系_触发器-1 - java ee spring - 博客园
- html表单文本框怎么输出函数值,如何获取用户输入的html文本表单字段传递给javascript函数的值?...
- 有关RSA 命令总结
- 排序算法----快速排序(数组形式)
- 让VisualStudio的StartPage关联自己的博客
- 全局异常捕获处理-@ControllerAdvice+@HandleException
- windows 下搭建python虚拟环境