Home

JSX for APL

1. Introduction

This project JSX for APL is a React-based APL templating framework that allows developers to define APL document within the code. By using the React-style JSX/TSX file format, developers can include JSX for APL components as XML-style definition for the APL and shorten the APL definition code length, making the development more manageable.

1.1 Why should you use JSX for APL?

JSX for APL has many benefits over standard JSON-based APL templates, such as the following aspects.

1.1.1. Code-First Approach

JSX for APL uses React-based components to define each APL document. By using JSX files to include XML-based APL document declaration and defining the document in an encapsulated React component, skill developers can simply import and include the component into the response as a natural Javascript/Typescript code.

1.1.2. Dynamic APL Response

By leveraging React's component render lifecycle, JSX for APL can dynamically change the custom component's behaviour and minimize the returned APL document size.

For example, suppose a chess game skill is developed using APL. In traditional JSON-based APL definition, the positions and padding for each board slot must be defined most likely in datasource section and each piece will need to refer to the spacing definition in the datasource. With JSX for APL, the complexity is reduced since the spacing calculation is done on the Lambda, freeing up the APL document for more details.

1.1.3. Readability, Reusability and Reliability

In the traditional JSON-based APL, a reuse of components can get complicated. Without use of layouts, multiple copies of same structure can exist and code change management can get very complex. With JSX for APL, however, the reusability issue is resolved by simply creating new instances of a defined component class, making changes very fast and reliable.

1.1.5. IDE Auto-completion Ability

IDEs like Visual Studio code or IntelliJ IDEA provides auto-completion feature since JSX for APL provides APL React components with the relevant properties.

2. Which APL Components does JSX for APL provide?

• Primitive APL Components: Container, EditText, Frame, GridSequence, Image, Pager, ScrollView, Sequence, Text, TouchWrapper, VectorGraphic, Video

Important: JSX for APL provides APL 1.4 version features. These components can be imported into skill code from ask-sdk-jsx-for-apl package.

• APL Commands: AnimateItem, AutoPage, ClearFocus, ControlMedia, PlayMedia, Finish, Idle, OpenURL, Parallel, Scroll, ScrollToComponent, ScrollToIndex, Select, SendEvent, Sequential, SetFocus, SetPage, SetState, SetValue, SpeakItem, SpeakList

Important: Because commands are not React Components but defined interfaces, to utilize APL Commands fully using typescript is recommended. These types can be imported into skill code from ask-sdk-jsx-for-apl package.

• ARL Components (Responsive): AlexaBackground, AlexaButton, AlexaDivider, AlexaFooter, AlexaHeader, AlexaIconButton, AlexaImage, AlexaImageListItem, AlexaOrdinal, AlexaPageCounter, AlexaRating, AlexaTextListItem, AlexaTransportControls, AlexaHeadline, AlexaImageList, AlexaLists, AlexaPaginatedList, AlexaTextList

Important: JSX for APL provides alexa-layouts-1.1.0 version. These components can be imported into skill code from ask-sdk-jsx-for-apl/alexa-layouts package.

3. Skill Samples

Fruit Nutrition Facts - A skill sample that demonstrates the usage of multiple React Components for listing a predefined fruits data and showing the nutrition facts for the selected one.