ajax的兴起，前端能做的事更多了、更复杂了，前端门槛和地位也更高了，这时候催生了前后端分离。...然鹅，移动H5的兴起，人们对产品体验的重视，移动H5的起始白屏时间让大家难以忍受，为了减少白屏时间、提升页面加载速度和利于SEO，这时候就有了服务器直出。...这时候就涉及到View层的前后端代码复用，node因为用js写的，天生就适合用来做服务器直出。前后端分离嚷嚷了辣么久，这时候前端同学也要写服务器端了。 前端的地位更高了。...Node直出 1.纯前端 代码架构随着业务的发展改变的 最开始我们的产品没有H5页面，只有客户端。后台通过PB协议提供接口给客户端。...5.源码编译成前后端各自使用的代码 AlloyTeam兴趣部落直出讲座的ppt上给出的方案如下 总结下，大概就是一份源码编译成两份代码。
ajax的兴起，前端能做的事更多了、更复杂了，前端门槛和地位也更高了，这时候催生了前后端分离。...然鹅，移动H5的兴起，人们对产品体验的重视，移动H5的起始白屏时间让大家难以忍受，为了减少白屏时间、提升页面加载速度和利于SEO，这时候就有了服务器直出。...似乎服务器直出也并一定需要node。但假如main模块含有一个列表模块c，服务器端先生成十条记录，浏览器端需要加载更多的话，再从后端拉取数据动态生成。...这时候就涉及到View层的前后端代码复用，node因为用js写的，天生就适合用来做服务器直出。前后端分离嚷嚷了辣么久，这时候前端同学也要写服务器端了。前端的地位更高了。...5.源码编译成前后端各自使用的代码 AlloyTeam兴趣部落直出讲座的ppt上给出的方案如下： 总结下，大概就是一份源码编译成两份代码。
前后端分离，不只是简单的代码的分离。 首先是要架构上分离解耦，逐渐摆脱前后端在架构上的依赖，前后端各司其职，分开部署在不同的服务器上，通过RESTful接口传递数据。...其次是逻辑分离，不分离的时候，对于业务代码的界限很不明确，业务逻辑基本都放在后端，分离之后，前端也承担了一部分不该后端来写的业务逻辑，数据处理更加清晰。...同样，对于前端应用来说，可以更方便的调用多个后端服务器的接口，处理和展示多个系统间的数据。 为什么要前后端分离 前后端分离，让软件开发的流程更加清晰，解决了开发阶段的痛点。...可以在浏览器上打开，也可以在微信或各种APP内打开（这也是一直APP内webview打开的方式） [12.png] H5游戏 H5游戏已经见怪不怪了，当年微信退出打飞机游戏的时候，推动了H5游戏的大发展...说是最好的时代，是因为各种前端技术都更新换代，开始应用于更多场景，发挥出更大的优势和作用。对于前端开发者来说，是充满很多的机会的。
前端优化 前端优化我们主要做了下面几件事情： 前后端分离 图片优化 域名收敛、减少请求 离线化 首屏Node后端同构渲染 前后端分离 在之前的项目中，页面是“Java直出”的方式，由Java后端项目中通过...前后端分离的关键点在于前端拥有完整独立的开发、测试、部署的流程，与后端完全分离。我们把页面的组装完全放置到了前端项目，后端只提供Ajax的接口用于获取和提交数据。...但这种架构除了SEO时的问题还有另外一个问题，先看一下前后端分离下的一个页面加载过程： ? 当遇到页面引入的外部依赖很多时，这种架构性能可能还不如"Java直出"： ?...同构渲染，结合了Java直出和前后端分离的优势： 通过在Java API之前加入Node层，Node由前端同学来维护，这样仍然可以做到前后端解耦，后端同学只需要写Ajax返回JSON，甚至只需要通过RPC...Node同构和一开始的Java freemark后端渲染Java直出的方式对比，最大的区别在于：Node项目可由前端同学来维护，用的是前端工程师熟悉的JS语言。
秒杀系统的难点 友好的用户体验 用户不能接受破窗的体验，例如：系统超时、系统错误的提示，或者直接 404 页面 瞬时高并发流量的挑战 木桶短板理论，整个系统的瓶颈往往都在 DB，如何设计出高并发、高可用系统...直筒型 直筒型业务，指的是用户请求 1:1 的洞穿到 db 层，如下图所示。在比较简单的业务中，才会采用这个模型。随着业务规模复杂度上来，一定会有 db 和逻辑层分离、逻辑层和接入层分离。...客户端 重试策略非常关键，如果用户秒杀失败了，频繁重试，会加剧后端的雪崩。如何重试呢？根据后端返回码的约定，有两种方法： 不允许重试错误，此时 ui 和文案都需要有一个提示。...用户的体验流程如下： 架构图 客户端主要是微视主 app 和 h5 页面，主 app 是入口，h5 页面是集卡活动页面和瓜分页面。...二级预案，后端随机丢请求，接入层频控失效或者下游服务过载，手动开启进入 三级预案，前端随机丢请求，后端服务过载或者宕机进入。
html渲染上总的方向是更快的展示内容，比如通过CDN分发、DNS解析、http缓存、数据预请求，数据缓存及首屏优化大杀器——直出等。...直出省去了前端渲染，及ajax请求的时间，虽然直出能够通过各种缓存策略优化得很好，但是加载html也是需要时间的。 通过离线包技术能够很好解决html文件本身加载需要时间的问题。...对于直出HTML，我们可以配合PWA，将从后台直出的文件，缓存到cacheStorage，在下一次请求时，优先从本地缓存中获取，同时发起网络请求更新本地html文件。...对于非直出的页面，我们仍然无法避免浏览器渲染html时间的问题，应该如何kill掉这里的时间呢？...不管从加载速度还是页面流畅度小程序都要高于H5页面，其原因是通过在架构上对开发进行规范化和约束化，小程序内部将webview渲染和js执行分离开来，然后通过离线包，页面拆分，预加载页面等一系列优化手段，
而不管是简单的 数据直出 或是 服务端渲染直出 都能使页面的性能优化得到较大提高，以下将从实际应用中进行说明。...形式如下 使用这种中间层的方式，在项目的开发过程中依然可使用前后端分离的方式，开发完后再将页面请求指向这个中间层服务上。...另一点，做为中间层玄武直出服务通过公司的L5负载均衡服务，完美兼容直出与非直出版本，即当直出服务挂掉了，也可以顺利走非直出版本，确保基本的用户体验，也能够更好的支持 A/BTest。...性能数据 简单的数据方式直出同样迎来了较大的性能提升，手Q家校群列表页在首屏渲染完成时间上，相比于优化前的版本，数据直出有大概 650ms 的优化，提升约 35% 的性能。...总结 在前后端没有分离时 使用后端渲染出模板的方式是与文中所述的直出方案效果是一致的，前后端分离后淡化了这种思想，Node 的发展让更多的前端开始做后端事情，直出的方式也越来越被重视了。
前 言 最近，我所在的团队做了一些结构调整，其实我一直想讲讲这次调整，希望能够带给同行一些思考，但因调整后很多事情还未走上正轨，一直拖延着，现在终于有时间把一些想法写下来记录成文字。...NodeJS 职能变化 对于 NodeJS ，我其实有挺多的话题想分享，关于前后端分离，关于服务端渲染，关于纯服务端开发。...值得注意的一点是，当我们的 NodeJS 运用非常成熟的时候，我们却一直没有做业界大家在玩的服务端渲染，或者前后端分离中间层，其实不是我们不了解或者没有能力，而是我们一直在思考“为什么”，然后会”带来什么问题...其实我们团队后来也做了业界意义上基于”服务端渲染"的”前后端分离“项目，在某个特殊业务中，我们衡量必须要做，与多方共同讨论，最终实施落地的一个和谐方案。...ReactNative的大规模应用 我所在团队对于RN的技术积累其实从很早就开始了，大概接近一年前，但是一直处于调研的状态，甚至组件库都写好了，基础的集成SDK也写好了，但是从来没被应用到业务中。
先后负责机票PC前后端分离，H5 Swift改版，机票React Native技术的推进，重点关注Node.js技术和产品体验。 本文来自付文平在“2018携程技术峰会”上的分享。...我们也从最初用Node.js来完成前后端的架构分离到最近使用GraphQL来做微服务，机票部门在Node.js的应用探索上越走越宽。...一、前后端分离 在机票事业部前端开发的web1.0时代，整个前后端代码耦合在一起，采用的是典型的服务端 MVC架构。 ?...在机票H5实践前后端分离过程中，我们改进了技术架构，在前端的应用层，采用PM2+Node.js（8.9.4）+Express（4.0）框架，内部基于携程基础框架ctriputil，同时对一些常用功能的封装...四、总结 Node.js在机票团队从早期的前后端分离到GraphQL的实践，目前已经深度应用到前端组的各个模块，现在机票前端应用层已全部采用Node.js来实现。
秒杀系统的难点 友好的用户体验 用户不能接受破窗的体验，例如：系统超时、系统错误的提示，或者直接 404 页面 瞬时高并发流量的挑战 木桶短板理论，整个系统的瓶颈往往都在 DB，如何设计出高并发、高可用系统...直筒型 直筒型业务，指的是用户请求 1:1 的洞穿到 db 层，如下图所示。在比较简单的业务中，才会采用这个模型。随着业务规模复杂度上来，一定会有 db 和逻辑层分离、逻辑层和接入层分离。...客户端 重试策略非常关键，如果用户秒杀失败了，频繁重试，会加剧后端的雪崩。如何重试呢？根据后端返回码的约定，有两种方法： 不允许重试错误，此时 ui 和文案都需要有一个提示。...from=pc] 客户端主要是微视主 app 和 h5 页面，主 app 是入口，h5 页面是集卡活动页面和瓜分页面。...二级预案，后端随机丢请求，接入层频控失效或者下游服务过载，手动开启进入 三级预案，前端随机丢请求，后端服务过载或者宕机进入。手动开启 Redis大厂面试真题。
在这个过程里面，我也曾懵懂，也曾迷茫，但我一直信奉“一次只做一件事，尽力做到极致”，短时间内是比较枯燥的，但一旦坚持下去，就会发现技术其实是门手艺，厚积才能薄发。...使用Node.js进行前后端分离（此时还是前端）。 掌握Express、Koa这类框架。 掌握Jade、EJS等模板引擎。 使用Nginx。 玩转后端异步流程处理。...玩转后端MongoDB、MySQL对应的Node.js模块。 从我们的经验来看，这样做是比较靠谱的。先做最简单的前后端分离，里面没有任何和DB相关的内容，前端可以非常容易地学会。...只要关注www目录里的H5即可，比较简单。 H5不足以应对的情况下，可以编写Cordova插件，即通过插件让JavaScript调用原生SDK里的功能。...只要入了H5的坑，其实就非常好办了。
这里，HTTP API 同时有两个作用： 契约：约定数据交换格式； 解耦：前后端分离，基于契约并行开发； 解耦，换句话说，就是隔离共享。解耦带来共享的困难，所以解耦通常应用在，共享较少的地方。...过程 起初，只是在服务端建立一个共享文件夹，里面两个子文件夹，type、fetch，用于放置可同时被H5和小程序使用的类型定义，以及自测用例中封装的请求函数。...image.png 不难发现，数据转换 Mapper，放在服务端响应前做，还是放在前端接收到响应后做，其实是等效的。...这也是，前后端分离背景下，Node 相对其他语言的不可替代性。 感想 直接交付 SDK，其实在 RPC 调用中很常见。...前后端分离、分工的细化，带来了效率的提升。 然而分离，也推高了“沟通”成本，抵消了一部分分工带来的效率提升。 Node 的出现，全栈的推广，其实带来了转机 —— 前后端语言统一。
JNPF快速开发平台 JNPF快速开发平台采用前后端分离技术、采用B/S架构开发，形成一站式开发多端（APP+PC）使用。 使用JNPF开发平台可以简单、快速、高效的构建各种类型java项目。...JAVA版介绍 JNPF.java版采用前后端分离，可将代码直接导入idea运行，也可将前后端代码利用ngnix分开部署。...JNPF主体架构、技术 采用前后端分离技术，主体架构为B/S，PC端和APP混合开发。 前后端分离特点 JNPF快速开发平台平台采用全新的前后端分离架构模式。...前后端分离已成为互联网项目开发的业界标准使用方式，通过 nginx+tomcat 等方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、...IO，webSocket 图标组件：echarts、highcharts 打印组件:lodop、h5打印 APP JS框架:uniapp, h5, vue APP UI框架:uniapp 后端 核心框架
先后负责机票PC前后端分离，H5 Swift改版，机票React Native技术的推进，重点关注Node.js技术和产品体验。 本文来自付文平在“2018携程技术峰会”上的分享。...我们也从最初用Node.js来完成前后端的架构分离到最近使用GraphQL来做微服务，机票部门在Node.js的应用探索上越走越宽。 一、前后端分离 ?...在机票H5实践前后端分离过程中，我们改进了技术架构，在前端的应用层，采用PM2+Node.js（8.9.4）+Express（4.0）框架，内部基于携程基础框架ctriputil，同时对一些常用功能的封装...如何让团队的效能发挥到最大是我们一直在思考的问题，于是我们在scrum团队尝试技术栈统一，将前台的数据聚合层改为用Node.js来实现，使得整个团队内部以前端开发工程师为主。 ?...Node.js在机票团队从早期的前后端分离到GraphQL的实践，目前已经深度应用到前端组的各个模块，现在机票前端应用层已全部采用Node.js来实现。
本文带我们学习通常前后端分离的开发模式下有哪些问题，利用Node端的服务又是如何帮助我们解决这些问题的。...如果使用Node后端数据渲染（有人称之为直出，后文中也称之为直出层），在页面请求时将内容渲染到页面上输出，那么搜索引擎获取到的HTML就已经包含页面完整的内容，页面也就更容易被检索到了。...图6-4为目前一般后台页面数据直出的通用架构设计，直出层接受前端的路由请求，并在Node端的Controller层异步请求服务接入层接口，获得Model数据并进行组装拼接，然后提取相对应的Node端View...不仅如此，直出层根据不同的浏览器userAgent，也可以提取不同的模板渲染页面返回给不同的用户浏览器，所以这种实现方式不仅非常适合大型应用服务的实现场景，而且可以方便地实现网站的响应式内容直出。...Node直出层开发Web架构 本文选自《现代前端技术解析》
MPM 支持 H5 和小程序两种页面类型，其中 H5 页面默认支持直出访问和静态访问两种访问形态，所以 MPM 涉及的端环境一共有静态 H5、直出 H5、小程序三类环境。...直出 H5 的解析 针对静态 H5 首屏体验差的问题，MPM 打造了一个高可用的 Node 服务，为所有 H5 页面提供直出能力。...引擎解析时 MPM 的 Node 直出端基于 Express 框架设计，承载着 MPM 的直出解析引擎。同样地，MPM 直出端引擎也内置了和静态 H5 引擎逻辑相同的一套 Vue 组件。 ?...直出 H5 端解析过程 1、读取 Redis 直出端以访问为单元，每趟访问都有一个独立的上下文。...在客户端我们可以有多次渲染，所以我们利用 Vue 的响应式更新，让数据请求滞后处理，但在直出端，我们实现的是流式渲染，有且只有一趟渲染，渲染前要求渲染数据必须全部到位，因此在直出端，我们必须提前进行页面数据请求
“前后端分离”成为趋势。一开始的PC Web网站，大多是采用服务端渲染的前后端一体化的模式。随着技术的发展，前后端分离，前端渲染逐渐成为趋势。相应地，前端开发人员也从后端团队中独立出来。...最近兴起的APP，小程序等，天生就是前后端分离的。前端，APP，小程序等各自独立成专门的团队，当然可以满足这种趋势。...等产品想清楚了，基本稳定了，后端再上。这样，产品思考问题的重点，就从后端现有的功能转移到客户现实需求上来。“需求拉动型开发模式”，解放了产品的思维，更容易设计出符合客户期望的产品。...另外一个是往后端扩展，比如Node.js的兴起，或许写后端服务没有Java成熟，写BFF还是可以胜任的。 “大前端”是相对于传统的前端，iOS，Android，H5等独立小团队而言的。...“大前端”是随着前后端分离的趋势逐步提出来的，是相对于后端来讲的，因此，要达到和后端既相互独立、减少依赖，又相互合作、沟通清晰的目标。
； 标识输出文件名，例如同一个页面的代码最后可以打包成 page.h5.js， page.app.js， page.ipad.js等； 其他需要根据平台设置的配置、插件列表等 ... ； 3.4.2 直出代码打包...直出代码打包同理，需要根据编译时环境变量打包出多个平台使用的模板代码和组件。...RUNTIME_ENV) .map(([_, env]) => { return [ // 静态资源打包 buildDistConfigForEnv(env), // 直出代码打包... ...getSSRConfigs({ mode, output }, env), ] }).flat(); 最后打包进直出 templates 的模板有多个，例如 腾讯课堂App...所以需要一个直出服务的路由逻辑，在访问同一个URL时，自动根据请求带的用户环境信息选择对应合适的模板文件（指向不同的静态资源）进行渲染。
； 标识输出文件名，例如同一个页面的代码最后可以打包成 page.h5.js， page.app.js， page.ipad.js等； 其他需要根据平台设置的配置、插件列表等 ... ； 3.4.2 直出代码打包...直出代码打包同理，需要根据编译时环境变量打包出多个平台使用的模板代码和组件。...RUNTIME_ENV) .map(([_, env]) => { return [ // 静态资源打包 buildDistConfigForEnv(env), // 直出代码打包......getSSRConfigs({ mode, output }, env), ] }).flat(); 最后打包进直出 templates 的模板有多个，例如 腾讯课堂App...所以需要一个直出服务的路由逻辑，在访问同一个URL时，自动根据请求带的用户环境信息选择对应合适的模板文件（指向不同的静态资源）进行渲染。
初入软件开发这一行时，当时还没有前后端分离这个概念，所有的开发工程师既能写html，也能写后台服务，随着技术的发展，前后端分离成为趋势，目前团队不少人能熟悉的写java后台服务，却难以hold住前端页面的开发...在前后端未分离的时代，通常是后端基于前端还原的html来进行开发，通过模板技术绑定数据。...而随着ajax的兴起，前端 MVVM框架的流行，前后端分离，数据绑定工作前移到前端，因此前端的职责之一就是调用后端的服务，并显示到页面上。...复杂的单页应用 现在流行一个词“大前端”，前端更大的挑战就是构建复杂的单页应用，比如易企秀的H5编辑器，单个页面里包含了非常多的功能和逻辑，这类页面有个特点： 包含复杂的业务逻辑 通常需要上千行的javascript...HTML5+CSS3 HTTP HTTP get/post/put/delete HTTP响应码 chrome F12 network使用 html块元素、内联元素、表单 CSS 与盒子模型 响应式布局 H5
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
