Enact Framework

Enact is an app development framework built on top of React designed for performance, customizability, and ease of use. It provides a cohesive ecosystem of building blocks for creating robust applications by integrating solutions for:

• Internationalization (i18n)
• Accessibility (a11y)
• Focus management
• Linting, testing, and building

The framework is distributed as a collection of specialized modules under the @enact npm namespace.

Enact utilizes the following core tools for unit testing:

• Jest: The primary test framework used for setting up, asserting, and running tests, as well as providing mocking capabilities.
• React Testing Library: A library specifically for testing React components, allowing you to render components and inspect their output.
• jsdom: A pure-JavaScript implementation of web standards (DOM and HTML) used to provide a browser-like environment within Node.js.

The @enact/core package provides several fundamental abstractions designed for use within React-based applications:

• core/kind: A factory for creating stateless functional components (SFCs).
• core/jobs: A smart wrapper for window.setTimeout to manage asynchronous tasks.
• core/hoc: A factory for creating Higher Order Components (HOCs).

The @enact/webos library provides specialized modules for interacting with the webOS platform. Use these modules to access platform-specific APIs and metadata.

Available modules:

• @enact/webos/application: Access application metadata.
• @enact/webos/deviceinfo: Retrieve details about the specific webOS device.
• @enact/webos/keyboard: Check if the on-screen keyboard is currently visible.
• @enact/webos/LS2Request: Interface for communicating with webOS Luna Services (required for most platform service integrations).
• @enact/webos/platform: Retrieve details about the webOS platform type (e.g., SmartTV, Open webOS, legacy devices).
• @enact/webos/pmloglib: Access system-level logging for your application.
• @enact/webos/speech: Interface for working with webOS speech APIs.

The kind() method from @enact/core/kind is a factory for creating React components. It is designed to reduce mental load by providing a consistent structure for component creation, making components more readable and maintainable.

Instead of writing a standard Stateless Functional Component (SFC) or a Class component, you pass a configuration object to kind(). This object defines how props are transformed, how styles are applied, and how the component renders. The result is a standard React component that can be used anywhere in your application.

import kind from '@enact/core/kind';

export default kind({
	render: (props) => <div {...props}>Hooray!</div>
});

A kind is a component constructor created using the @enact/core/kind factory method.

When using kind, you can define computed properties. These are functions that receive the component's props (but not other computed properties) and return a value. These computed values are then automatically made available in the props object at render time.

For non-trivial applications, the Enact framework team recommends using Redux for state management. This helps maintain a predictable state container across complex component trees. Recommended learning resources include:

• Official Redux Documentation: redux.js.org
• Fundamentals of Redux (Dan Abramov): Egghead Course
• Architectural Pattern: Presentational and Container Components (often used in conjunction with Redux to separate logic from UI).

Enact components follow a 'visually divorced' naming strategy. This means APIs, classes, and components are named using semantic concepts rather than visual ones.

For example, instead of naming a prop isBold, you would use a semantic name like strong. This allows a theme to decide exactly how that semantic concept is visually represented (e.g., bold text, a different color, or a specific font weight) without being constrained by the component's internal naming.