Adobe recommends using the SPA Editor for projects that require single page application framework-based client-side rendering (e.g. React). Learn more.
Building an AEM Mobile On-Demand Services App is different than building an app that runs in the Cordova (or PhoneGap) shell directly. The developers should be familiar with the:
- Plugins that are supported out of the box as well as the AEM Mobile specific plugins.
To learn in-depth about plugins, see the following resources:
Guidelines for AEM Developers
The following guidelines will help experienced AEM developers for sites, who want to build mobile app templates and components:
Structure AEM sites templates to encourage reuse and extensibility
Optimize for on-device performance
- Article specific script and stylesheets should be included in the article payload, using the dps-article contentsync template
- Script and stylesheets shared by more than one article should be included in shared resources, via the dps-HTMLResources contentsync template
- Do not reference any external scripts that are render-blocking
You can learn more in detail about render-blocking external scripts here.
Prefer app-specific clientside JS and CSS libraries over web-specific
- To avoid overhead in libraries like jQuery Mobile to handle a huge breadth of devices and browsers
To learn more in-depth about jQuery mobile, click here.
Prefer micro libraries over full-stack
- The time it takes to get your content onto the glass of the device will be slowed down by every library your article(s) depend upon. This slowdown is compounded when a new webview is used to render every article, so each library must be initialized again from scratch
- If your articles are not built as SPAs (single page apps), you probably do not need to include a full stack library like Angular
- Prefer smaller, single purpose libraries to help add the interactivity your page requires, such as Fastclick or Velocity.js
Minimize size of article payload
- Use the smallest assets possible that can effectively cover the largest viewport you will be supporting, at a reasonable resolution
- Use a tool like ImageOptim on your images to remove any excess metadata
To understand more on the other two roles and responsibilities, see the resources below: