On document ready, the homepage uses jQuery to request the JSON targeter results from the JSP pages. You can follow the execution flow starting with horizontal-list.js and the initHorizontalListSliders() JavaScript function call in ProductsHorizontialList.jsp. Promotional content starts with promo.js and the initPromoSlider() JavaScript function call.
The index.jsp calls the Invoke Assembler with /content/mobile/home.
The advantage of using a template is that it can be sent in the initial request and reduces the size of the payload that the targeting JSP files need to send. This also makes it easier to switch between mechanisms for fetching data, for example, from JSP files that produce JSON to components invoked through REST that produce JSON. The client is expecting JSON in either case; so the format should remain the same.
Each cartridge has a JSP renderer
The promotional area is rendered with ScrollablePromotionalContent-ATGSlot.jsp
The products area is rendered with ScrollableProductSpotlight-ATGSlot.jsp
Performance Considerations
These PromotionalContent items have been specifically created for presentation on mobile devices. There is no text embedded in the promotional content item images. PNG images with translucent backgrounds of the same dimensions overlay the images rather than embedding text. This was done in order to attain a higher level of compression without blurring the text. While this may not appear to be a best practice (for example, images of text rather than actual strings) it allows for higher quality, crisper text and makes it possible to align the text over the images in exactly the required format for the cleanest appearance and hopefully the best first impression to users of the homepage.
The products and promotionalcontent items are stored in the browser’s HTML 5 session storage cache. The cache is currently used to store only the products that are not currently in view and to redraw the sliders during orientation changes. The redraw is needed in order update properties on the JavaScript slider instance that change due to the change in screen width, which is in turn due to the orientation change.
This caching is of course a performance optimization and in the current implementation the page empties the cache on every load. However, this functionality could be extended to allow more aggressive caching between browser sessions for better homepage performance, should a particular case be deemed suitable for such behavior.
While jQuery was used in the creation of the homepage, none of the common/most popular third party touch-specific frameworks were used in the creation of the homepage carousels. Not choosing a particular touch framework frees implementers to use whichever mechanism is most suitable to their specific needs, while providing an example of what can be done independently of such frameworks.
