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:
- Templates which use plugin functionality should be written in such a way that they are still authorable in the browser, without the plugin bridge being present.
For example, make sure to wait for the deviceready function before attempting to access a plugin's API.
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
- Prefer multiple component script files over a single monolithic one
- A number of empty extension points are provided, such as customheaderlibs.html and customfooterlibs.html, which allow the developer to change the page template while duplicating as little core code as possible
- Templates can then be extended and customized via Sling's sling:resourceSuperType mechanism
- Prefer Sightly/HTL over JSP as the templating language
- Using this encourages a separation of code from markup, offers built in XSS protection, and has a more familiar syntax
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