首页 >知识讲堂 >网站建设知识>美团酒店前端在应用Node进行全栈开发的过程中摸索前行的一些心得

美团酒店前端在应用Node进行全栈开发的过程中摸索前行的一些心得

2020-12-30 15:23:59 阅读(205 评论(0)

前后端分离的背景“前后端分离”显然不是什么新话题。Zakas于2013年10月发表博客《Node.jsandthenewwebfront-end》在Node背景下讨论新时代的前端。毫无疑问,Node的出现给JavaScript语言带来了新的活力,也给前端开发者带来了更多的可能。从表面上看,前后端分离似乎是一项“圈地运动”,但从本质上讲,前后端分离是为了解决以往发展模式的一些批评和痛点,也是迎合大行业趋势的明智举措。我所在的美团酒店业务部于去年7月成立,新的业务和新的开发团队使我们的前后端分离得到了彻底的推广。到目前为止,前端承载的所有业务和在线服务都是基于Node的,生产环境中有近20台服务器。这种新的前后端合作模式可以让专业人士做专业的事情,无论前端和后端都可以比以前更专注于他们擅长的方面。传统的技术栈开发模式和技术栈开发模式只需专注于多终端的呈现(浏览器,WebView)。现在,浏览器只是前端的一部分,延伸了Node端的架构和服务的运维能力。上图显示了我们目前的服务架构:Nginx位于Node服务之前,用于负载平衡、服务调度、Gzip压缩等。然后是Node服务。我们通过PM2.5部署和平衡Node服务的Cluster(充分利用多核优势),并负责路由作为轻中间层。Controllers、Views、以及视图渲染,通过RESTfulAPI接口采用JSON格式交互获取数据。后端只负责业务逻辑、数据存储、Models,并为前端提供JSON数据。这种变化后,Node端可以优化页面加载,如第一屏渲染。页面渲染后,后续的交互和渲染将由浏览器端的JavaScript代码完成。大多数情况下,Node端的模板与浏览器端的模板相同,因此我们需要考虑模板的重用。我们用Juicer取代了Express框架的默认模板引擎,Juicer是一个高效、轻量级的前端。(Javascript)模板引擎,效率和易用性是其追求的目标。此外,它还可以在Node中运行.在js环境中。Node端和浏览器端的模板和Helper复用问题可以通过Juicer解决。此外,在前后端分离的工程架构下,前端代码仓库与后端隔离,前端独立负责前端静态资源文件、模板文件和controller的维护和发布。在重新定义前端和后端分工后,前端可以做更多的事情,如微信SDK访问,因为使用微信JSSDK需要在服务端签名,所以现在我们不需要后端干预,前端可以独立完成微信SDK访问。此外,我们内部和商家端SSO登录逻辑的访问完全由前端独立完成。对于前端技术选型,我们始终保持理性、拥抱的态度。我们不会为了盲目创新而引入新技术。技术选择是针对我们目前大团队的场景,以解决以往合作过程中发现的一些痛点和不足。例如,引入Node是为了提高前后端的工作流程和效率,提高前后端的开发体验。另一个例子是我们项目中使用的Angularr、为了提高开发效率,提高代码的可维护性,React也针对特定的业务场景。在我们的业务应用中,Angular可以显著提高商家和后台的开发效率,而React目前只在用户的PC端项目中进行一些尝试和实践。这种分工和架构模式带来的挑战不仅给前端带来了更多的可能性和便利,也带来了巨大的挑战。与传统的前端角色相比,我们需要更加关注在线服务、过程内存占用、CPU占用和在线异常监控的状态。在拥抱Node的同时,对前端能力的要求更高。一个看似正常的JS代码,在浏览器端和Node端两个不同的操作环境中,可能会暴露一些以前没有注意到的问题,比如内存泄露:一个封闭的包或一个用于缓存数据的对象,与浏览器不同,Node对内存泄露非常敏感,因为在线应用程序有成千上万甚至数百万的流量,所以即使是一个字节的内存泄露也会导致内存积累。因此,垃圾回收过程耗时增加,应用响应缓慢,知道过程内存溢出,应用重启或崩溃。内存泄漏问题的定位是我们在生产环境中遇到的一个案例:最近,我们发现在线服务的内存占用在服务重启后会呈线性增长。过程启动18小时后,内存占用约1.6G,很快就会超过V8的内存限制,导致服务重启。从图中可以看出,内存使用在修复前随时间定期波动,波动的原因是在线Node过程不断重启。从图中可以看出,内存使用在修复前随时间定期波动。波动的原因是在线Node过程的不断重启。众所周知,在V8垃圾回收机制下,一般代码很少出现内存泄漏,但一旦出现内存泄漏,往往很难调查。但内存泄漏的根本原因只有一个,那就是应该回收的对象没有正常回收,成为老一代的常驻对象。幸运的是,使用一些常见的调查工具可以帮助我们定位内存泄漏的具体原因:-v8-profiler-node-heapdump-node-mtrace-dtrace-node-在这里,我们使用node-heapdump在模拟访问的条件下生成堆内存的snapshot,并通过Chrome的开发者调试工具对生成的snapshot文件进行分析。通过比较服务和AB模拟并发访问一段时间后,heapdump信息可以更容易地定位内存泄漏问题点:因为Juicer默认打开cache,默认缓存编译模板,因此随着访问和并发请求的增长,cache对象将继续增长,不回收,所以关闭cache并重新部署在线恢复正常。因为它在浏览器场景中运行的时间很短,并且在用户的机器上运行,即使内存使用过多或内存泄漏,也只会影响用户的终端。由于浏览器场景运行时间短,在用户机器上运行,即使内存使用过多或内存泄漏,也只会影响用户终端。而且运行时间短,内存会随着过程的退出而释放,内存管理的必要性很小。但同一代码在Node端可能会暴露问题。除了代码仓库的分离和开发合作的分离外,在线服务的运维和监控前后端的分离还涉及到在线服务的独立发布和单独部署。当然,前端如何更好地操作、维护和监控在线服务,我们的SA将更加关注在线服务的整体指标和可用性,前端希望了解在线Node的过程状态和异常情况。PM2是一种优秀而开源的Node进程管理工具。我们在PM2的基础上进行了一些改造,部署了云中的数据收集和实时数据获取服务,形成了PM2.5,我们已经应用于在线Node部署监控平台。它可以在云中处理和可视化在线Node服务流程级的细粒度信息,PM2.5能够监控Nodeserver和过程的指标状态,并且可以在各个终端配置报警和报警(Web、iPhone、AppleWatch)展示。PM2.PM2.5的服务架构简要介绍:PM2.5CLI部署了生产环境中的Node服务,PM2.5CLI将继续向PM2.5云报告Node过程的所有数据。PM2.PM2.5的服务架构简要介绍:PM2.5CLI部署了生产环境中的Node服务,PM2.5CLI将继续向PM2.5云报告Node过程中的所有数据。云收到报告的数据后,将处理原始数据并存储到MongoDB。Web端和iOS应用程序将通过WebSocket服务从服务端获取实时数据流,然后通过前端显示可视化信息。PM2.当Node过程通过PM2.5启动时,PM2的内部实现.5CLI会同云服务握手,握手成功后数据会不断上报。报告时,AES256将首先加密数据,然后使用TCP通信向服务器报告数据。这里使用开源Axon。云服务器收到数据后,将数据存储在MongoDB中,并扫描监控报警。如果当前数据符合用户订阅的监控报警条件,报警信息将通过云Push服务推送到IOS客户端。WebSocket服务同时在云中运行,为多个终端(Web平台、iOS应用)提供实时数据推送。值得一提的是,PM2.5的客户端是基于React-Native开发的。目前已提交Applestore审核。审核通过后,可从Applestore下载。客户端提供服务和流程基本指标查看,可配合Web平台监控报警设置实现7x24小时服务监控。为了确保在线服务的可靠性和稳定性,我们还访问了其他监控设施和日志平台,以便跟踪、分析和定位在线错误和访问日志。ZabbixZabbix是一种分布式系统监控和网络监控功能的企业级开源中间件,主要用于运维。Zabbix主要用于心跳检测和监控服务的指标。当某些指标异常或超过设定阈值时,应报警短信、大象和电子邮件。Sentry错误日志收集Sentry是一个错误的日志服务器,可以集中捕获程序错误的细节。SDK还为业务接入提供各种常见语言。但是Sentry在服务器端会有采样,一般不能取代实时错误日志报警的监控。日志监控平台日志监控平台是美团内部的日志收集系统。目前,美团统一使用flume收集日志。flume有能力接收scribe格式日志,日志监控平台也采用scibe格式日志收集。日志以原始日志和分析日志两种形式存在于整个收集过程中。目前,我们主要使用日志监控平台报告访问日志的格式化数据,然后我们可以通过Hive/Presto查询访问数据。性能监控平台性能监控平台为美团平台和产品线提供简单易用的端到端性能数据服务。SDK还为业务接入提供了各种常见语言。主要用于分析Node端的接口响应,以及浏览器端的页面载入性能。综上所述,以上是美团酒店前端在应用Node开发全栈的过程中探索前进的一些经验,也是介绍。主要介绍了我们酒店业务部门的前后端分离架构、在线内存泄漏的调查以及使用的Node服务监控平台PM2.5。以后我会分享更多关于我们Node的实践,以及PM2.5监控平台背后的实现,希望对大家有所帮助。也欢迎您参与前后端分离和Node相关技术点的共同交流。

以上就是关于美团酒店前端在应用Node进行全栈开发的过程中摸索前行的一些心得的相关介绍,更多美团酒店前端在应用Node进行全栈开发的过程中摸索前行的一些心得相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对美团酒店前端在应用Node进行全栈开发的过程中摸索前行的一些心得有更深的了解和认识。

内容来源:网络,以上内容来源于网络,不代表本站观点,如有侵权,请联系删除。

推荐阅读

“同心、精进、奋斗,智胜”,万商云集2019年会盛大举行

旺狗辞旧岁,金猪迎新年。奋斗了一年的万商人迎来了自己的庆典。昨天,顽强拼搏的万商人用隆重的仪式告别2018年;昨天,满怀希望的万商人以年会的方式展望2019年。歌声袅袅辞旧岁,舞姿翩翩贺新春。那么这场年会有什么精彩的地方呢?…查看详情

能加微信聊免费交友软件有哪些?

现在很多的年轻人都喜欢在社交软件上认识新的朋友,现在市面上有很多的社交软件是非常的不错的,下面*就给大家来详细介绍一下能加微信聊免费交友软件有哪些?这一块的内容,不知道下面的这些社交app软件大家使用过没有。  能加微…查看详情

服装设计软件有哪些 好用的服装设计软件排行榜

  想设计出一款好的服装,一定需要先画一张完美的设计图,目前市面上也有很多的服装设计软件,下面*就给大家来详细介绍一下服装设计软件有哪些 好用的服装设计软件排行榜这一块的相关内容,希望能帮助到大家!  服装设计软…查看详情

高端商务手机排行榜2022

因为每个人的经济状况不一样,所以大家对于使用手机的要求也是不相同的,对于有钱人来说,他们对手机的要求是非常高的,那么如果你们想要买高档的手机的话,一定要先看一下高端商务手机排行榜都有哪些?1、荣耀Magic4Pro*件配置上,配…查看详情

网站建设的目标:要建设什么样的网站?要达到什么样的目的?

越来越多的企业,从传统的线下销售模式转型到了线上的营销模式,线上的营销企业首先得建设一个企业网站,但是有很多的企业人员可能就不太明白,线上营销有很多种方式,为什么要建设网站呢?网站建设的目标是什么呢?下面,就由小万…查看详情

网站建设基本流程你了解吗?

越来越多的企业开始通过网站进行推广自己的企业产品及品牌,对于传统企业来说,网站虽不是什么新鲜事,但是很多传统企业对网站还是不甚了解的,想要做网站推广就先要有一个网站,那么,如何进行网站建设呢?下面就让小万给您介绍…查看详情

什么是国际域名?国际域名有哪些?

  优质答案(1)  com域名是国际化的域名,更加流行一点,而cn域名是针对大陆用户的1、com和cn后缀类型的区别:com域名是国际域名而cn是国内域名,com的使用范畴和基础人群更大;2、com和cn使用情况的区别:相对来说国际企业更...查看详情

开一家淘宝店需要多少钱

淘宝开店费用明细?淘宝保证金普通类目目前还是1k。旺铺费智能版的旺铺,当然钻级以下的买家可以使用免费版的模版,但那个装修出来的效果差很多,也会影响到搜索权重。各种软件费“限时打折”、“满减优惠”、“套餐优惠”等工具,购买套…查看详情

发明专利审查的详细步骤

  经专利局初步审查符合专利法规定的形式要件要求的,从申请日起或优先权日起18个月内公布发明专利。发明专利公布后,该申请将得到临时保护,下面*就给大家详细介绍下发明专利审查的详细步骤。  一、发明专利审查的详细步骤 …查看详情

建个网站要多少钱?为什么报价差别很大?

建个网站要多少钱?市面上报价从几百块到几十万都有,差距甚大。那么一般来说,到底建个网站要多少钱?不同报价的网站建设效果有什么区别吗? 随着互联网用户需求的增加,企业网站建设在近几年受到了很多的*。很多中小企业也想…查看详情

外汇看盘软件 2022可以看外汇行情的软件

  当交易者拥有自己的MT4真实账户之后,往往会迫不及待的执行下单操作,可打开行情面板找了半天,没有找到“买入”和“卖出”的下单按钮。在默认状态下,MT4下单面板都是隐藏状态,只有熟悉一些基本的操作,才能够将它们调出来。…查看详情

笔记本CPU排行榜,都有哪些可以选择?

说道笔记本CPU还是有很多的,毕竟现在笔记本无论是办公还是娱乐来说都是非常方便的存在,是众多年轻人和商务人士钟爱的存在,毕竟方便快捷的操作是笔记本移动端典型的存在,那么今天我们就来说一说电脑运行速度方面,笔记本CPU排行…查看详情

公司怎么申请商标?具体流程及费用是怎样规定的?

在生活中我们随处都可以见到一些商标,这些商标被印刷在各种商品上面,那么,商标是可以随便被印在商品上的吗?答案是否定的,印在商品上的商标必须符合法律规定,进行商标注册。但是商标的注册流程与商标注册所需要的费用才是大…查看详情

怎么样推广自己的网站 这些方法效果很好!

  在这个大家为自己背书的时代,越来越多的个人也开始利用网站来推广自己。当然,要想取得比较好的宣传推广效果,那么你还是需要一些技巧的:下面*就给大家来详细介绍一下怎么样推广自己的网站这一块内容,希望能帮助到大家做好…查看详情

ascii转换器是什么

如何将汉字转换为Ascii码?[̲̅V̲̅I̲̅P̅]转unicode为[̲̅V̲̅I̲̅P̅]特殊符号可以由alt+小键盘输入,但是这个alt+773,alt+818是不可以的。一些编码转换网站是可以实现的:如打开:汉字转unicode|...查看详情

首页

产品

万商学院

客户服务

会员中心

当前站点

h

选择站点

全国站成都

一 客户顾问-张三

已为0个客户提供专业互联网服务咨询
  • 手机号码
  • 验证码图形验证码换一张
  • 短信校验码

    电话咨询

    在线咨询