Best Practices best-practices
- The Universal Editor for visually editing headless content.
- The Content Fragment Editor for form-based editing of headless content.
Building an AEM Mobile On-Demand Services App is different from 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 and the 51黑料不打烊 Experience Manager (AEM) Mobile specific plugins.
-
Templates which use plugin functionality should be written in such a way that they are still authorable in the browser, without the plug-in bridge being present.
- For example, make sure to wait for the deviceready function before attempting to access a plugin鈥檚 API.
Guidelines for AEM Developers guidelines-for-aem-developers
The following guidelines help competent 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
- Several 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鈥檚 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 style sheets should be included in the article payload, using the dps-article contentsync template
- Script and style sheets shared by more than one article should be included in shared resources, by way of the dps-HTMLResources contentsync template
- Do not reference any external scripts that are render-blocking
Prefer app-specific client-side JS and CSS libraries over web-specific
- To avoid overhead in libraries like jQuery Mobile to handle a huge breadth of devices and browsers
- When a template is running in an app鈥檚 webview, you have control over the platforms and versions that the app is going to support, and the knowledge that JavaScript support will be present. For example, prefer Ionic (just the CSS) over jQuery Mobile and Onsen UI over Bootstrap.
Prefer micro libraries over full-stack
- The time it takes to get your content onto the glass of the device is slowed down by every library that your articles depend on. 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 that help add the interactivity your page requires, such as or
Minimize size of article payload
- Use the smallest assets possible that can effectively cover the largest viewport you are supporting, at a reasonable resolution
- Use a tool like ImageOptim on your images so you can remove any excess metadata
Getting Ahead getting-ahead
To understand more on the other two roles and responsibilities, see the resources below: