Home

JSX for APL

Introduction

• This project ask-sdk-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 ask-sdk-jsx-for-apl components as XML-style definition for the APL and shorten the APL definition code length, making the development more manageable.

Why should you use Ask-Sdk-Jsx-For-Apl?

• Ask-Sdk-Jsx-For-Apl has many benefits over standard JSON-based APL templates, such as the following aspects.

1. Code-First Approach

• Ask-Sdk-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.

2. Dynamic APL Response

• By leveraging React's component render lifecycle, ask-sdk-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 ask-sdk-jsx-for-apl, the complexity is reduced since the spacing calculation is done on the Lambda, freeing up the APL document for more details.

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 ask-sdk-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.

4. IDE Auto-completion Ability

• IDEs like Visual Studio code or IntelliJ IDEA provides auto-completion feature since ask-sdk-jsx-for-apl provides APL React components with the relevant properties.

Which APL Components does Ask-Sdk-Jsx-For-Apl provide?

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

Important: Ask-Sdk-Jsx-For-Apl provides APL 1.3 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: Ask-Sdk-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.

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.