CN110083341A - 一种前端开发平台、前端开发方法及页面显示方法 - Google Patents

Abstract

本发明实施例提供了一种前端开发平台、前端开发方法及页面显示方法，涉及前端开发环境技术领域，前端开发平台中设置基础框架模块，用于保存前端基础框架，设置业务模块用于保存不同的业务的业务代码，然后采用管理模块对框架模块和业务模块分别打包并构建离线资源包，将离线包预置在客户端，即减小业务代码体积，又实现online与offline双活，从而提高了页面打开速度。其次，由于框架和业务代码完全分离，框架被各业务线复用，因此业务线代码可独立快速迭代，减小开发难度。针对不同的渠道(APP、微信、M站)建立一个前端基础框架，并复用此支持跨端的框架，避免针对每个渠道研发一套业务线代码，从而大幅度节省开发人力成本。

Description

一种前端开发平台、前端开发方法及页面显示方法

技术领域

本发明实施例涉及前端开发环境技术领域，尤其涉及一种前端开发平台、前端开发方法及页面显示方法。

背景技术

目前，Web前端具有“随时发版，开发效率高”的优势，同时也具有打开性能不如“app或桌面原生应用”的问题。比如，我们开发“亿级用户、几十条业务线”的IOS、Android手机APP，采用原生技术开发，页面打开性能快，但原生APP发版审核时间长，不能很好的支持业务快速变更和发展，开发成本偏高，规模达到几十条业务线时业务独立迭代困难。因此现在大型APP都是Native+H5的Hybrid APP(混合APP)，对于开发Hybrid APP来说，目前开发平台将多条业务线的代码保存在同在一个代码仓库，每条业务线包括业务代码和基础框架代码，导致各业务线代码会相互影响，不能独立迭代，而且代码体积大，从而不仅导致用户请求页面时，页面打开速度慢，同时增加了开发难度。

发明内容

由于多条业务线的代码保存在同在一个代码仓库，代码体积大，不仅导致用户请求页面时，页面打开速度慢，同时增加了开发难度的问题，本发明实施例提供了一种前端开发平台、前端开发方法及页面显示方法。

一方面，本发明实施例提供了一种前端开发平台，包括：

基础框架模块、业务模块和管理模块；

所述基础框架模块，用于封装基础工具，生成前端基础框架；

所述业务模块，用于保存不同业务的业务代码；

所述管理模块，用于对所述基础框架模块中的前端基础框架和所述业务模块中的业务代码分别进行打包发布并进行管理。

可选地，一个前端基础框架对应一类或多类业务的业务代码。

可选地，所述前端基础框架按照版本进行管理。

可选地，针对不同的渠道建立一个前端基础框架。

可选地，所述管理模块还用于，对打包后的前端基础框架和业务代码进行测试。

可选地，所述管理模块还用于，将打包后的前端基础框架和业务代码发布至离线包管理服务器。

可选地，所述管理模块还用于，将打包后的前端基础框架和业务代码发布至内容分发网络(CDN)，所述内容分发网络的源服务器为离线包管理服务器。

可选地，所述管理模块还用于，生成业务对应的页面离线骨架屏并将所述页面离线骨架屏发布至所述内容分发网络。

本发明实施例中，前端开发平台中设置基础框架模块，用于保存前端基础框架，设置业务模块用于保存不同的业务的业务代码，将业务线的业务代码和前端基础框架分开进行保存，然后采用管理模块对基础框架模块中的前端基础框架和业务模块中的业务代码分别进行打包，减小了代码体积，便于对前端基础框架复用，从而减小了开发难度。其次，由于前端基础框架和业务代码分别进行打包，故可以先将前端基础框架缓存在用户端，用户请求页面时，只请求业务代码，从而提高了页面打开速度。另外，用户端初次请求页面后，可以将获得的业务代码缓存，当用户端二次请求同样的页面时，可以直接采用本地缓存的业务代码和前端基础框架渲染请求的页面，从而提高二次打开页面的速度。

一方面，本发明实施例提供了一种前端开发方法，包括：

接收用户指令；

根据所述用户指令从基础框架模块中获取对应版本的前端基础框架以及从业务模块中确定获取对应的业务代码；

采用管理模块将所述前端基础框架和所述业务代码分别进行打包。

一方面，本发明实施例提供了一种页面显示方法，包括：

离线包管理服务器接收用户端发送的页面请求；

所述离线包管理服务器在确定所述用户端已缓存打包后的前端基础框架时，发送打包后业务代码至所述用户端，以使所述用户端根据打包后的前端基础框架和业务代码渲染请求的页面并缓存业务代码，所述用户端缓存的打包后的前端基础框架和业务代码是所述离线包管理服务器发送的，所述打包后的前端基础框架和业务代码是由所述前端开发平台分别打包并发布至所述离线包管理服务器的。

可选地，所述离线包管理服务器接收用户端发送的页面请求之后，还包括：

所述离线包管理服务器发送页面离线骨架屏至所述用户端，以使所述用户端在渲染请求的页面之前显示所述页面离线骨架屏，所述页面离线骨架屏是由所述前端开发平台生成并发布至所述离线包管理服务器的。

一方面，本发明实施例提供了一种页面显示方法，包括：

用户端发送页面请求至离线包管理服务器；

所述用户端接收所述离线包管理服务器发送的打包后的业务代码并缓存，根据打包后的业务代码和已缓存的打包后的前端基础框架渲染请求的页面，所述打包后的前端基础框架和业务代码是由所述前端开发平台分别打包并发布至所述离线包管理服务器的。

可选地，还包括：

所述用户端接收所述离线包管理服务器发送的页面离线骨架屏，所述页面离线骨架屏是由所述前端开发平台生成并发布至所述离线包管理服务器的；

所述用户端在渲染请求的页面之前显示所述页面离线骨架屏。

本发明实施例中，由于前端基础框架和业务代码分别进行打包，故前端开发平台将前端基础框架和业务代码发布至离线包管理服务器时，离线包管理服务器可以先将前端基础框架缓存在用户端，用户端请求页面时，离线包管理服务器只返回业务代码，从而减小了传输代码的体积，提高了页面打开速度。其次，用户端初次请求页面后，可以将获得的业务代码缓存，当用户端二次请求同样的页面时，可以直接采用本地缓存的业务代码和前端基础框架渲染请求的页面，从而提高二次打开页面的速度。另外，前端开发平台将页面离线骨架屏发布至离线包管理服务器时，离线包管理服务器将页面离线骨架屏发送至用户端，以使用户端在渲染页面之前先显示页面离线骨架屏，从而避免白屏的情况。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种应用场景示意图；

图2为本发明实施例提供的一种前端开发平台的结构示意图；

图3为本发明实施例提供的一种前端开发方法的流程示意图；

图4为本发明实施例提供的一种页面显示方法的流程示意图。

具体实施方式

为了使本发明的目的、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例可以应用于如图1所示的应用场景，在该应用场景中包括前端开发平台101、离线包管理服务器102以及用户端103。

前端开发平台101用于开发应用，开发人员编写业务代码，并将业务代码保存在前端开发平台101的业务模块。前端开发平台101的管理模块对基础框架模块中的前端基础框架和业务模块中的业务代码分别进行打包，然后将打包后的前端基础框架和业务代码发布至离线包管理服务器102。前端开发平台101是一台服务器或若干台服务器组成的服务器集群或云计算中心。离线包管理服务器102是一台服务器或若干台服务器组成的服务器集群或云计算中心。前端开发平台101与离线包管理服务器102通过无线网络连接。离线包管理服务器102可以将打包后的前端基础框架发送至用户端103，用户端103缓存打包后的前端基础框架。后续用户端103发送页面请求至离线包管理服务器102时，离线包管理服务器102发送打包后业务代码至用户端103。用户端103根据打包后的前端基础框架和业务代码渲染请求的页面。用户端103可以是智能手机、平板电脑或便携式个人计算机等。

进一步地，在图1所示的应用场景图中，前端开发平台101的结构示意图如图2所示，包括基础框架模块201、业务模块202和管理模块203。

基础框架模块201，用于封装基础工具，生成前端基础框架。

具体地，基础工具包括核心功能组件、视觉组件、业务组件、页面管理组件、命令行界面等，其中，核心功能组件包括路由、请求、JSBridge、数据、埋点、监控、骨架屏等。在前端基础框架中，每个基础工具对应一个代码库。

业务模块202，用于保存不同业务的业务代码。

具体地，在业务模块202中，不同的业务代码保存在不同的代码库中。

管理模块203，用于对基础框架模块中的前端基础框架和业务模块中的业务代码分别进行打包发布并进行管理。

由于前端开发平台中设置基础框架模块，用于保存前端基础框架，设置业务模块用于保存不同的业务的业务代码，将业务线的业务代码和前端基础框架分开进行保存，然后采用管理模块对基础框架模块中的前端基础框架和业务模块中的业务代码分别进行打包，减小了代码体积，便于对前端基础框架复用，从而减小了开发难度。其次，由于前端基础框架和业务代码分别进行打包，故可以先将前端基础框架缓存在用户端，用户请求页面时，只请求业务代码，从而提高了页面打开速度。另外，用户端初次请求页面后，可以将获得的业务代码缓存，当用户端二次请求同样的页面时，可以直接采用本地缓存的业务代码渲染请求的页面，从而提高二次打开页面的速度。

可选地，在基础框架模块201中，一个前端基础框架对应一类或多类业务的业务代码。当业务不相同时，可能只是对应的业务代码不相同，而所使用的基础工具是相同的，因此多类业务代码可以对应同一个前端基础框架，从而实现了前端基础框架复用，减小了业务代码的体积。

可选地，基础框架模块201中的前端基础框架按照版本进行管理。

在一种可能的实施方式中，在第一版本的前端基础框架中更新部分基础工具后，将更新后的前端基础框架确定为第二版本的前端基础框架。

可选地，针对不同的渠道建立一个前端基础框架。比如，针对渠道1、渠道2和渠道3建立一个前端基础框架，该前端基础框架可以兼容渠道1、渠道2和渠道3，当在渠道1、渠道2和渠道3中发布应用时，可以使用一套业务代码，复用可以兼容渠道1、渠道2和渠道3的前端基础框架，实现在跨渠道开发应用时，只需要开发一套代码、测试一套代码、部署一套代码，避免针对每个渠道研发一套业务线代码，从而大幅度节省开发人力成本。

可选地，管理模块203还用于对打包后的前端基础框架和业务代码进行测试，避免应用发布后出现很多问题，影响用户体验。

可选地，管理模块203还用于，将打包后的前端基础框架和业务代码发布至离线包管理服务器。

具体地，离线包管理服务器在接收到打包后的前端基础框架和业务代码时，可以先将打包后的前端基础框架发送至使用户端，用户端缓存前端基础框架。用户端在发送页面请求至离线包管理服务器时，离线包管理服务器发送打包后的业务代码至用户端，以使用户端根据打包后的前端基础框架和业务代码渲染请求的页面。当离线包管理服务器接收到更新的前端基础框架时，也可以将更新后的前端基础框架发送至用户端，以使用户端更新缓存的前端基础框架。由于用户端缓存的前端基础框架并实时更新，故用户端在向离线包管理服务器请求页面时，离线包管理服务器可以只发送打包后的业务代码至用户端，从而减小了传输的代码体积，提高了页面打开的速度。另外，用户端初次请求页面后，可以将获得的业务代码缓存，当用户端二次请求同样的页面时，可以直接采用本地缓存的业务代码和前端基础框架渲染请求的页面，从而提高二次打开页面的速度。

管理模块203还用于，将打包后的前端基础框架和业务代码发布至内容分发网络(CDN)，内容分发网络的源服务器为离线包管理服务器。

具体地，管理模块203将打包后的前端基础框架和业务代码发布至内容分发网络(CDN)中的离线包管理服务器，然后由离线包管理服务器将前端基础框架和业务代码发布至内容分发网络中的边缘节点服务器，使用户端能就近发送页面请求至边缘节点服务器，从而提高页面请求的速度。具体实施中，边缘节点服务器可以先将打包后的前端基础框架发送至使用户端，用户端缓存前端基础框架。用户端在发送页面请求至边缘节点服务器时，边缘节点服务器发送打包后的业务代码至用户端，用户端缓存业务代码，并根据打包后的前端基础框架和业务代码渲染请求的页面。当用户端二次请求同样的页面时，可以直接采用本地缓存的业务代码和前端基础框架渲染请求的页面，从而提高二次打开页面的速度。当边缘节点服务器接收到更新的前端基础框架时，也可以将更新后的前端基础框架发送至用户端，以使用户端更新缓存的前端基础框架。

可选地，管理模块203还用于，生成业务对应的页面离线骨架屏并将页面离线骨架屏发布至内容分发网络。内容分发网络在接收到用户端发送的页面请求时，发送页面离线骨架屏至用户端，以使用户端在渲染请求的页面之前显示页面离线骨架屏，从而避免用户请求的页面白屏。

基于图1所示的应用场景图和图2所示的前端开发平台的结构示意图，本发明实施例提供了一种前端开发方法的流程，该方法的流程可以由前端开发平台执行，如图3所示，包括以下步骤：

步骤S301，接收用户指令；

步骤S302，根据用户指令从基础框架模块中获取对应版本的前端基础框架以及从业务模块中确定获取对应的业务代码。

步骤S303，采用管理模块将前端基础框架和业务代码分别进行打包和管理。

进一步地，采用管理模块将打包后的前端基础框架和业务代码发布至离线包管理服务器。

由于前端开发平台中设置基础框架模块，用于保存前端基础框架，设置业务模块用于保存不同的业务的业务代码，将业务线的业务代码和前端基础框架分开进行保存，然后采用管理模块对基础框架模块中的前端基础框架和业务模块中的业务代码分别进行打包，减小了代码体积，便于对前端基础框架复用，从而减小了开发难度。其次，由于前端基础框架和业务代码分别进行打包，故可以先将前端基础框架缓存在用户端，用户请求页面时，只请求业务代码，从而提高了页面打开速度。

本发明实施例还提供了一种页面显示方法的流程，该方法的流程可以由离线包管理服务器和用户端交互执行，如图4所示，包括以下步骤：

步骤S401，用户端发送页面请求至离线包管理服务器。

步骤S402，离线包管理服务器确定用户端已缓存打包后的前端基础框架。

步骤S403，离线包管理服务器发送打包后业务代码至用户端。

具体地，打包后的前端基础框架和业务代码是由前端开发平台分别打包并发布至离线包管理服务器的。

步骤S404，用户端根据打包后的业务代码和已缓存的打包后的前端基础框架渲染请求的页面并缓存业务代码。

由于前端基础框架和业务代码分别进行打包，故前端开发平台将前端基础框架和业务代码发布至离线包管理服务器时，离线包管理服务器可以先将前端基础框架缓存在用户端，用户端请求页面时，离线包管理服务器只返回业务代码，从而减小了传输代码的体积，提高了页面打开速度。另外，用户端缓存离线包管理服务器发送的业务代码，当用户端二次请求同样的页面时，可以直接采用本地缓存的业务代码和前端基础框架渲染请求的页面，从而提高二次打开页面的速度。

可选地，离线包管理服务器接收用户端发送的页面请求之后，发送页面离线骨架屏至用户端，页面离线骨架屏是由前端开发平台生成并发布至离线包管理服务器的。用户端在渲染请求的页面之前显示页面离线骨架屏，从而避免页面白屏的情况。

本领域内的技术人员应明白，本发明的实施例可提供为方法、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (13)

1.一种前端开发平台，其特征在于，包括：

基础框架模块、业务模块和管理模块；

所述基础框架模块，用于封装基础工具，生成前端基础框架；

所述业务模块，用于保存不同业务的业务代码；

所述管理模块，用于对所述基础框架模块中的前端基础框架和所述业务模块中的业务代码分别进行打包发布并进行管理。

2.如权利要求1所述的前端开发平台，其特征在于，一个前端基础框架对应一类或多类业务的业务代码。

3.如权利要求1所述的前端开发平台，其特征在于，所述前端基础框架按照版本进行管理。

4.如权利要求1所述的前端开发平台，其特征在于，针对不同的渠道建立一个前端基础框架。

5.如权利要求1所述的前端开发平台，其特征在于，所述管理模块还用于，对打包后的前端基础框架和业务代码进行测试。

6.如权利要求1至5任一所述的前端开发平台，其特征在于，所述管理模块还用于，将打包后的前端基础框架和业务代码发布至离线包管理服务器。

7.如权利要求1至5任一所述的前端开发平台，其特征在于，所述管理模块还用于，将打包后的前端基础框架和业务代码发布至内容分发网络(CDN)，所述内容分发网络的源服务器为离线包管理服务器。

8.如权利要求7所述的前端开发平台，其特征在于，所述管理模块还用于，生成业务对应的页面离线骨架屏并将所述页面离线骨架屏发布至所述内容分发网络。

9.一种基于权利要求1至8任一所述的前端开发平台的前端开发方法，其特征在于，包括：

接收用户指令；

根据所述用户指令从基础框架模块中获取对应版本的前端基础框架以及从业务模块中确定获取对应的业务代码；

采用管理模块将所述前端基础框架和所述业务代码分别进行打包和管理。

10.一种基于权利要求1至8任一所述的前端开发平台的页面显示方法，其特征在于，包括：

离线包管理服务器接收用户端发送的页面请求；

所述离线包管理服务器在确定所述用户端已缓存打包后的前端基础框架时，发送打包后业务代码至所述用户端，以使所述用户端根据打包后的前端基础框架和业务代码渲染请求的页面并缓存业务代码，所述用户端缓存的打包后的前端基础框架和业务代码是所述离线包管理服务器发送的，所述打包后的前端基础框架和业务代码是由所述前端开发平台分别打包并发布至所述离线包管理服务器的。

11.如权利要求10所述的页面显示方法，其特征在于，所述离线包管理服务器接收用户端发送的页面请求之后，还包括：

所述离线包管理服务器发送页面离线骨架屏至所述用户端，以使所述用户端在渲染请求的页面之前显示所述页面离线骨架屏，所述页面离线骨架屏是由所述前端开发平台生成并发布至所述离线包管理服务器的。

12.一种基于权利要求1至8任一所述的前端开发平台的页面显示方法，其特征在于，包括：

用户端发送页面请求至离线包管理服务器；

所述用户端接收所述离线包管理服务器发送的打包后的业务代码并缓存，根据打包后的业务代码和已缓存的前端基础框架渲染请求的页面，所述打包后的前端基础框架和业务代码是由所述前端开发平台分别打包并发布至所述离线包管理服务器的。

13.如权利要求12所述的页面显示方法，其特征在于，还包括：

所述用户端接收所述离线包管理服务器发送的页面离线骨架屏，所述页面离线骨架屏是由所述前端开发平台生成并发布至所述离线包管理服务器的；

所述用户端在渲染请求的页面之前显示所述页面离线骨架屏。