最佳实践

注意

Adobe建议对需要基于单页应用程序框架的客户端渲染(例如,React)的项目使用SPA编辑器。 了解更多.

构建AEM Mobile On-demand Services应用程序与构建直接在Cordova(或PhoneGap)外壳程序中运行的应用程序不同。 开发人员应熟悉:

  • 开箱即用支持的插件以及特定于AEM Mobile的插件。
注意
  • 使用插件功能的模板的编写方式应当使其仍可在浏览器中授权,而不必存在插件桥。

    • 例如,请确保在尝试访问插件的API之前等待​deviceready​函数。

AEM开发人员指南

以下准则将帮助需要构建移动应用程序模板和组件的有经验的AEM站点开发人员:

构建AEM站点模板以鼓励重复使用和可扩展性

  • 比单个单片脚本文件更喜欢多个组件脚本文件

    • 提供了许多空扩展点,如​customheaderlibs.html​和​customfooterlibs.html,它们允许开发人员在复制尽可能少的核心代码的同时更改页面模板
    • 然后,可以通过Sling的​sling:resourceSuperType​机制扩展和自定义模板
  • 将Sightly/HTL作为模板语言优先于JSP

    • 使用它可以将代码与标记分离,在XSS保护中构建的优惠具有更熟悉的语法

优化设备性能

  • 应使用dps-article contentsync模板将文章特定脚本和样式表包含在文章有效负荷中
  • 由多篇文章共享的脚本和样式表应通过dps-HTMLResources contentsync模板包括在共享资源中
  • 不引用任何渲染阻止的外部脚本
注意

您可以在此处](https://developers.google.com/speed/docs/insights/BlockingJS)详细了解渲染阻止外部脚本[。

与Web特定的JS和CSS库相比,首选应用程序特定的客户端JS和CSS库

  • 避免jQuery Mobile等库的开销以处理大量设备和浏览器
  • 当模板在应用程序的Web视图中运行时,您可以控制应用程序将支持的平台和版本以及JavaScript支持将存在的知识。 例如,比起jQuery Mobile和Onsen UI,更喜欢Ion(可能只是CSS),而不是Bootstrap。
注意

要详细了解jQuery Mobile,请单击此处

优先使用微型库,而不是全堆栈

  • 您的文章所依赖的每个库都会减慢将内容放到设备玻璃上所需的时间。 当使用新的Web视图渲染每篇文章时,速度会进一步放缓,因此必须从头开始重新初始化每个库
  • 如果您的文章不是作为SPA(单页应用程序)构建的,则可能不需要包括像Angular这样的完整堆栈库
  • 希望使用较小的单用途库来帮助添加页面所需的交互性,如FastclickVelocity.js

将文章有效负荷的大小降至最低

  • 以合理的分辨率使用尽可能小的资源,以有效覆盖您将支持的最大视区
  • 在图像上使用​ImageOptim​等工具删除任何多余的元数据

领先

要进一步了解其他两个角色和职责,请参阅以下资源:

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now