diff --git a/_data/sidebars/scos_dev_sidebar.yml b/_data/sidebars/scos_dev_sidebar.yml index 66f95f36fad..f0ae58c4793 100644 --- a/_data/sidebars/scos_dev_sidebar.yml +++ b/_data/sidebars/scos_dev_sidebar.yml @@ -3830,6 +3830,61 @@ entries: url: /docs/scos/dev/front-end-development/yves/custom-twig-functions-for-yves.html - title: Multi-theme url: /docs/scos/dev/front-end-development/yves/multi-theme.html + - title: Oryx + include_versions: + - "202212.0" + url: /docs/scos/dev/front-end-development/oryx/oryx.html + nested: + - title: Set up + url: /docs/scos/dev/front-end-development/oryx/set-up-oryx.html + - title: Boilerplate + url: /docs/scos/dev/front-end-development/oryx/oryx-boilerplate.html + - title: Feature sets + url: /docs/scos/dev/front-end-development/oryx/oryx-feature-sets.html + - title: Packages + url: /docs/scos/dev/front-end-development/oryx/oryx-packages.html + - title: Routing + url: /docs/scos/dev/front-end-development/oryx/oryx-routing.html + - title: Versioning + url: /docs/scos/dev/front-end-development/oryx/oryx-versioning.html + - title: Presets + url: /docs/scos/dev/front-end-development/oryx/oryx-presets.html + - title: Supported browsers + url: /docs/scos/dev/front-end-development/oryx/oryx-supported-browsers.html + - title: Dependency injection + url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection.html + nested: + - title: Oryx service layer + url: /docs/scos/dev/front-end-development/oryx/dependency-injection/oryx-service-layer.html + - title: Using services + url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-using-services.html + - title: Defining services + url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-defining-services.html + - title: Providing services + url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-providing-services.html + - title: Advanced strategies + url: /docs/scos/dev/front-end-development/oryx/dependency-injection/dependency-injection-advanced-strategies.html + - title: Application orchestration + url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-orchestration.html + nested: + - title: Application + url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application.html + - title: Application environment + url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-environment.html + - title: Application feature + url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-feature.html + - title: Application plugins + url: /docs/scos/dev/front-end-development/oryx/oryx-application-orchestration/oryx-application-plugins.html + - title: Reactivity + url: /docs/scos/dev/front-end-development/oryx/reactivity/reactivity.html + nested: + - title: Key concepts + url: /docs/scos/dev/front-end-development/oryx/reactivity/key-concepts-of-reactivity.html + - title: Reactive components + url: /docs/scos/dev/front-end-development/oryx/reactivity/reactive-components.html + - title: Integration of backend APIs + url: /docs/scos/dev/front-end-development/oryx/reactivity/oryx-integration-of-backend-apis.html + - title: Migration guide - Remove support of IE11 url: /docs/scos/dev/front-end-development/migration-guide-remove-support-of-ie11.html - title: Migration guide - Switch from Yarn to NPM v8 diff --git a/_drafts/oryx/reactivity/index.md b/_drafts/oryx/reactivity/index.md deleted file mode 100644 index 3f2b48b0f75..00000000000 --- a/_drafts/oryx/reactivity/index.md +++ /dev/null @@ -1,20 +0,0 @@ -# Reactivity table of contents - -- [Reactivity](./reactivity.md) - -- [Key concepts of Reactivity](./key-concepts-of-reactivity.md) - - - [Reactive data streams](./key-concepts-of-reactivity.md#reactive-data-streams) - - [Application state](./key-concepts-of-reactivity.md#application-state) - - [Application layers](./key-concepts-of-reactivity.md#application-layers) - - [Updating data in the DOM]('./key-concepts-of-reactivity.md#updating-data-in-the-DOM') - -- [Reactive components](./reactive-components.md) - - - [Updating data in the DOM](./reactive-components.md#updating-data-in-the-DOM) - - [Multiple data streams](./reactive-components.md#multiple-data-streams) - -- [Integration of backend APIs](./integration-backend-api.md) - - - [Data models](./integrate-backend-api.md#data-models) - - [Qualification of requests](./integrate-backend-api.md#qualification-of-requests) diff --git a/_includes/diagrams/oryx/backend-integration.svg b/_includes/diagrams/oryx/backend-integration.svg new file mode 100644 index 00000000000..8a2c9417a9a --- /dev/null +++ b/_includes/diagrams/oryx/backend-integration.svg @@ -0,0 +1,228 @@ + + + + + + + + + + + + + + + + + + + + + + + + Service + + + + + + + + + Adapter + + + + + + + + + Normalizer + + + + + + + + + API + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + loop + + [each normalizer] + + + + get() + + 1 + Sends + API call + + 2 + Returns + response + + 3 + Normalizes + response + + 4 + Returns + normalized response + + 5 + Returns + response + + 6 + + + + Service + + + + + + Adapter + + + + + + Normalizer + + + + + + API + + + \ No newline at end of file diff --git a/_includes/diagrams/oryx/packages.svg b/_includes/diagrams/oryx/packages.svg new file mode 100644 index 00000000000..ea8a9836f47 --- /dev/null +++ b/_includes/diagrams/oryx/packages.svg @@ -0,0 +1,233 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ use presets
(e.g. b2c) +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + + + + +
+ Application +
+ + + + + + + + +
+ Template packages +
+ + + + + + + + +
+ Domain packages +
+ + + + + + + + +
+ Platform packages +
+ + + + + + + + +
+ Base packages +
+ + + + + + + \ No newline at end of file diff --git a/_includes/diagrams/oryx/reactivity-high-level.svg b/_includes/diagrams/oryx/reactivity-high-level.svg new file mode 100644 index 00000000000..f519a227044 --- /dev/null +++ b/_includes/diagrams/oryx/reactivity-high-level.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + ProductComponent + + + + + + + + + AsyncStateController + + + + + + + + + ProductService + + + + + + + + + API + + + + + + + + + + + + + + + + + + + + + + + + + + + Observes updates of product + + + + + + + + + + + + + + + @asyncState() + product + + 1 + + observe + + 2 + + get() + + 3 + Requests/response + data + + 4 + returns + data + + 5 + indicates + update + + 6 + + requestUpdate() + + 7 + update + view + + 8 + + + + ProductComponent + + + + + + AsyncStateController + + + + + + ProductService + + + + + + API + + + \ No newline at end of file diff --git a/_includes/diagrams/oryx/reactivity-interaction.svg b/_includes/diagrams/oryx/reactivity-interaction.svg new file mode 100644 index 00000000000..930a572643b --- /dev/null +++ b/_includes/diagrams/oryx/reactivity-interaction.svg @@ -0,0 +1,274 @@ + + + + + + + + + + + + + + + + + + + + + + + + ProductTitleComponent + + + + + + + + + ProductController + + + + + + + + + ProductService + + + + + + + + + ProductAdapter + + + + + + + + + HttpService + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + alt + + [Successful fetch] + + [Error] + + + get() + + 1 + + get() + + 2 + + load() + + 3 + + request() + + 4 + + fetch() + + 5 + Return + product data + + 6 + Return + error + + 7 + Return + product data + + 8 + Return + product data + + 9 + Return + product data + + 10 + + + + ProductTitleComponent + + + + + + ProductController + + + + + + ProductService + + + + + + ProductAdapter + + + + + + HttpService + + + \ No newline at end of file diff --git a/_drafts/oryx/dependency-injection/dependency-injection-advanced-strategies.md b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-advanced-strategies.md similarity index 96% rename from _drafts/oryx/dependency-injection/dependency-injection-advanced-strategies.md rename to docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-advanced-strategies.md index cd765e431a7..7c4e03f8030 100644 --- a/_drafts/oryx/dependency-injection/dependency-injection-advanced-strategies.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-advanced-strategies.md @@ -5,7 +5,7 @@ template: concept-topic-template last_updated: Apr 13, 2023 --- -This document describes advanced strategies of using [dependency injection (DI)](_drafts/oryx/dependency-injection/dependency-injection.html). +This document describes advanced strategies of using [dependency injection (DI)](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html). ## The INJECTOR token diff --git a/_drafts/oryx/dependency-injection/dependency-injection-defining-services.md b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-defining-services.md similarity index 91% rename from _drafts/oryx/dependency-injection/dependency-injection-defining-services.md rename to docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-defining-services.md index 85ea9cb8a60..f1b31301155 100644 --- a/_drafts/oryx/dependency-injection/dependency-injection-defining-services.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-defining-services.md @@ -56,4 +56,4 @@ export class DefaultCartService implements CartService { ## Next step -[Providing services](./dependency-injection-providing-services.md) +[Providing services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-providing-services.html) diff --git a/_drafts/oryx/dependency-injection/dependency-injection-providing-services.md b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-providing-services.md similarity index 91% rename from _drafts/oryx/dependency-injection/dependency-injection-providing-services.md rename to docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-providing-services.md index 9e5924d5165..e1e15a19e68 100644 --- a/_drafts/oryx/dependency-injection/dependency-injection-providing-services.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-providing-services.md @@ -38,4 +38,4 @@ In this example, the customized cart service is provided by specifying the provi ## Next steps -[Advanced dependency injection strategies](/_drafts/oryx/dependency-injection/advanced-dependency-injection-strategies.html) +[Advanced strategies](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-advanced-strategies.html) diff --git a/_drafts/oryx/dependency-injection/dependency-injection-using-services.md b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-using-services.md similarity index 90% rename from _drafts/oryx/dependency-injection/dependency-injection-using-services.md rename to docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-using-services.md index c0d07a7e420..59f0f191eb0 100644 --- a/_drafts/oryx/dependency-injection/dependency-injection-using-services.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection-using-services.md @@ -37,4 +37,4 @@ A typical Oryx application usually uses one global DI container, which is set up ## Next steps -[Defining services](./dependency-injection-defining-services.md) +[Defining services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-defining-services.html) diff --git a/_drafts/oryx/dependency-injection/dependency-injection.md b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection.md similarity index 89% rename from _drafts/oryx/dependency-injection/dependency-injection.md rename to docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection.md index b2f3eddd7eb..41c81807d81 100644 --- a/_drafts/oryx/dependency-injection/dependency-injection.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/dependency-injection.md @@ -13,4 +13,4 @@ The key advantage of using Oryx's DI implementation is that it is vanilla JavaSc ## Next step -[Oryx service layer](./oryx-service-layer.md) +[Oryx service layer](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/oryx-service-layer.html) diff --git a/_drafts/oryx/dependency-injection/oryx-service-layer.md b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/oryx-service-layer.md similarity index 91% rename from _drafts/oryx/dependency-injection/oryx-service-layer.md rename to docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/oryx-service-layer.md index b5836235d34..70a0cfc40c7 100644 --- a/_drafts/oryx/dependency-injection/oryx-service-layer.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/dependency-injection/oryx-service-layer.md @@ -22,4 +22,4 @@ In a typical Oryx application, the application orchestrator automatically handle ## Next steps -[Using services](./dependency-injection-using-services.md) +[Using services](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection-using-services.html) diff --git a/_drafts/oryx/oryx-application-orchestration/oryx-application-environment.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-environment.md similarity index 100% rename from _drafts/oryx/oryx-application-orchestration/oryx-application-environment.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-environment.md diff --git a/_drafts/oryx/oryx-application-orchestration/oryx-application-feature.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md similarity index 91% rename from _drafts/oryx/oryx-application-orchestration/oryx-application-feature.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md index 35f9aca2068..3a02e48799a 100644 --- a/_drafts/oryx/oryx-application-orchestration/oryx-application-feature.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-feature.md @@ -10,11 +10,11 @@ template: concept-topic-template - Components - Providers -- [Plugins](./app-plugins.md) +- [Plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-plugins.html) - Resources - [Feature options](#feature-options) -- [Builder options](./index.md#options) +- [Builder options](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-orchestration.html#customization-of-options) Features are useful to structure and organize code and functionality into logical groups and to make them easier to reuse in different scenarios. diff --git a/_drafts/oryx/oryx-application-orchestration/oryx-application-orchestration.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md similarity index 57% rename from _drafts/oryx/oryx-application-orchestration/oryx-application-orchestration.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md index a8df4925516..6730d2314d7 100644 --- a/_drafts/oryx/oryx-application-orchestration/oryx-application-orchestration.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-orchestration.md @@ -6,15 +6,15 @@ template: concept-topic-template An Oryx application starts with the application orchestration. It lets you bootstrap and configure your application from reusable bits and pieces, such as the following: -- [Features](./app-feature.md) +- [Features](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html) - Components - Providers - Themes -- [Resources](./resources.md) -- [Environment](./app-environment.md) +- Resources +- [Environment](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-environment.html) Application orchestration is used to configure and customize Oryx applications. As Oryx is a framework, it provides different pieces of functionality for different use cases, like B2B, B2C, Back Office, or Fulfillment. And orchestration lets you select specific functionality from Oryx to match your use case. @@ -22,24 +22,24 @@ Also, application orchestration defines how functionality is loaded in an applic ## Application builder -To start using orchestration, you need to import [`appBuilder`](./app-builder.md) from `@spryker-oryx/core`. Then, you can add functionality, like features and theme, to your application. +To start using orchestration, you need to import `appBuilder`from `@spryker-oryx/core`. Then, you can add functionality, like features and theme, to your application. -`appBuilder` uses a chain pattern where each customization is added using a respective `.with*` method. This is the minimum boilerplate code required for an application to work. Once you start building more complex use cases, instead of using a preset, we recommend extending a preset or creating your own feature set. +`appBuilder` uses a chain pattern where each customization is added using a respective `.with*` method. This is the minimum boilerplate code required for an application to work. Once you start building more complex use cases, instead of using a [preset](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html), we recommend extending a preset or creating your own feature set. Application builder lets you compose and customize different pieces of functionality. The builder is chainable and pluggable, and it supports the following built-in plugins: -- [Features](./app-feature.md) (`withFeature`) +- [Features](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html): `withFeature` -- Components (`withComponents`) +- Components: `withComponents` -- Providers (`withProviders`) +- Providers: `withProviders` -- Themes (`withTheme`) -- [Options](#options) (`withAppOptions`) -- [FeatureOptions](./app-feature.md) (`withOptions`) -- [Environment](./app-environment.md) (`withEnvironment`) -- [Resources](./resources.md) (`withResources`) -- [Plugins](./app-plugins.md) (`with`) +- Themes: `withTheme` +- [Options](#customization-of-options): `withAppOptions` +- [FeatureOptions](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html): `withOptions` +- [Environment](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-environment.html): `withEnvironment` +- Resources: `withResources` +- [Plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-plugins.html): `with` Also, you can add custom plugins by using the `with` API. @@ -49,7 +49,7 @@ Here is an example of a simple B2C application setup: ```ts import { appBuilder } from '@spryker-oryx/core'; -import { b2cFeatures, b2cTheme } from '@spryker-oryx/presets'; +import { b2cFeatures, b2cTheme } from '@spryker-oryx/oryx-presets'; const app = appBuilder() .withFeature(b2cFeatures) @@ -86,8 +86,8 @@ appBuilder().withAppOptions({ components: { root: 'my-root-app' } }); For more details about application orchestration, see the following documents: -- [Setup the environment](./app-environment.md) -- [Add features](./app-feature.md) +- [Set up the environment](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-environment.html) +- [Add features](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-feature.html) - Add components @@ -96,5 +96,5 @@ For more details about application orchestration, see the following documents: - Add resources - Add theme -- [Add plugins](./app-plugins.md) -- [Interact with application](./app.md) +- [Add plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-plugins.html) +- [Interact with application](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application.html) diff --git a/_drafts/oryx/oryx-application-orchestration/oryx-application-plugins.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-plugins.md similarity index 96% rename from _drafts/oryx/oryx-application-orchestration/oryx-application-plugins.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-plugins.md index aecbb009f1b..1d857790823 100644 --- a/_drafts/oryx/oryx-application-orchestration/oryx-application-plugins.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application-plugins.md @@ -121,7 +121,7 @@ Instead of relying on the order of registration of the plugins to the Oryx appli {% endinfo_block %} -For more information on how to access registered plugins, see [interacting with plugins](./app.md#interacting-with-plugins). +For more information on how to access registered plugins, see [interacting with plugins](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application.html#interact-with-plugins). ## Plugin use cases diff --git a/_drafts/oryx/oryx-application-orchestration/oryx-application.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application.md similarity index 87% rename from _drafts/oryx/oryx-application-orchestration/oryx-application.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application.md index 3a351c659a0..15a9db04f82 100644 --- a/_drafts/oryx/oryx-application-orchestration/oryx-application.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-application-orchestration/oryx-application.md @@ -12,7 +12,7 @@ It lets you do the following: - Wait for application ready state when all plugins have been initialized: `whenReady`. - Destroy and cleanup the application: `destroy`. -The `App` instance is available in the Dependency Injection under the `AppRef` token, which you can inject: +The `App` instance is available in the [Dependency Injection](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html) under the `AppRef` token, which you can inject: ```ts import { AppRef } from '@spryker-oryx/core'; diff --git a/_drafts/oryx/boilerplate.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md similarity index 82% rename from _drafts/oryx/boilerplate.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md index d9a6ca8379a..7a666eea54e 100644 --- a/_drafts/oryx/boilerplate.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-boilerplate.md @@ -1,5 +1,5 @@ --- -title: Oryx boilerplate +title: "Oryx: Boilerplate" description: Create maintainable and upgradeable applications using the Oryx boilerplate last_updated: Apr 3, 2023 template: concept-topic-template @@ -14,11 +14,11 @@ The Oryx boilerplate is provided in the [Composable Frontend repository](https:/ In Oryx, we use the following tactics to prevent boilerplate code: 1. Bootstrap the application from [npm packages](https://www.npmjs.com/org/spryker-oryx) instead of source. -2. Expose a function to set up the [app orchestrator](./app-orchestrator.md) conveniently. -3. Provide [presets](./presets.md) for the standard application setup, including the feature sets and UI themes. +2. Expose a function to set up the [app orchestrator](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-application-orchestration/oryx-application-orchestration.html) conveniently. +3. Provide [presets](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html) for the standard application setup, including the feature sets and UI themes. 4. Provide the source code in a [public repository](https://github.com/spryker/oryx) to enable developers to read the source code. 5. Provide configurable components and business logic. -6. Allow for customizations with [dependency injection](./dependency-injection.md). +6. Allow for customizations with [dependency injection](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html). By using these tactics, we greatly reduced the amount of boilerplate code required in Oryx projects. This simplifies maintaining and upgrading code over time, and lets you focus on building features instead of maintaining the underlying framework. @@ -32,7 +32,7 @@ By separating out the application logic, we eliminated the boilerplate code from Another source of boilerplate code is the configuration required to get your application up and running. To simplify this process, we introduced the concept of presets in Oryx. -The [preset packages](https://www.npmjs.com/package/@spryker-oryx/presets) provide configurations and data structures that are designed to get your project up and running quickly without providing a lot of configuration yourself. Presets can be considered as "demo applications", as they typically represent a demo application for a specific business model, like a B2C Demo Shop. By using presets, you can quickly configure an application without writing any code. This is useful for starting the first project, running a demo, or for testing things out. +The [preset packages](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) provide configurations and data structures that are designed to get your project up and running quickly without providing a lot of configuration yourself. Presets can be considered as "demo applications", as they typically represent a demo application for a specific business model, like a B2C Demo Shop. By using presets, you can quickly configure an application without writing any code. This is useful for starting the first project, running a demo, or for testing things out. ### appBuilder @@ -68,7 +68,7 @@ The bare minimum `package.json` includes the following dependencies: { ... "dependencies": { - "@spryker-oryx/presets": "^1.0.0" + "@spryker-oryx/oryx-presets": "^1.0.0" }, "devDependencies": { "vite": "^4.0.0" @@ -84,7 +84,7 @@ We recommend fronting the dependencies with a caret notation (`^`), so that the {% endinfo_block %} -Vite is the recommended build system, but you can use alternative build systems. For more details, see [Set up Oryx](./set-up-oryx.md). +Vite is the recommended build system, but you can use alternative build systems. For more details, see [Set up Oryx](/docs/scos/dev/front-end-development/{{page.version}}/oryx/set-up-oryx.html). ### `index.html` @@ -102,7 +102,7 @@ While `index.html` can have a few more details, the following is the required ba - + ``` @@ -114,7 +114,7 @@ Oryx can be installed and used next to other applications' code. You could there ```ts import { appBuilder } from "@spryker-oryx/core"; -import { b2cFeatures } from "@spryker-oryx/presets"; +import { b2cFeatures } from "@spryker-oryx/oryx-presets"; import { storefrontTheme } from "@spryker-oryx/themes"; export const app = appBuilder() diff --git a/_drafts/oryx/feature-sets.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-feature-sets.md similarity index 85% rename from _drafts/oryx/feature-sets.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-feature-sets.md index 5356f0f4cb0..e537aadb565 100644 --- a/_drafts/oryx/feature-sets.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-feature-sets.md @@ -1,11 +1,11 @@ --- -title: Feature sets +title: "Oryx: Feature sets" description: Feature sets are collections of standard features last_updated: May 24, 2023 template: concept-topic-template --- -A *feature set* is a group of related features that can be added to an Oryx application with a single reference. Feature sets simplify the process of setting up an application by reducing the amount of [boilerplate code](./boilerplate.md) required to configure and initialize the application. +A *feature set* is a group of related features that can be added to an Oryx application with a single reference. Feature sets simplify the process of setting up an application by reducing the amount of [boilerplate code](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html) required to configure and initialize the application. There are two types of feature sets: domain and application feature sets. @@ -21,7 +21,7 @@ Application feature sets can be seen as _demo apps_, because one such set lets y ### Available application feature sets -Oryx includes predefined feature sets that cover common use cases for web applications. The application feature sets are provided in the [presets package](./presets.md). The following feature sets are available: +Oryx includes predefined feature sets that cover common use cases for web applications. The application feature sets are provided in the [presets package](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html). The following feature sets are available: - b2cFeatures: features commonly used in B2C applications. - fulfillmentFeatures: features used in PWAs, used for picking products for fulfillment. @@ -36,7 +36,7 @@ In addition to the provided feature sets, you can create custom sets tailored to ```ts import { appBuilder } from "@spryker-oryx/core"; -import { customFeature1, customFeature2 } from "./my-features"; +import { customFeature1, customFeature2 } from "/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-features"; const customFeatures = [customFeature1, customFeature2]; diff --git a/_drafts/oryx/packages.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-packages.md similarity index 80% rename from _drafts/oryx/packages.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-packages.md index a8d5598c86f..79135233bf1 100644 --- a/_drafts/oryx/packages.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-packages.md @@ -1,5 +1,5 @@ --- -title: Oryx packages +title: "Oryx: Packages" description: Use Oryx packages from npm to ensure you can easily upgrade to newer versions. last_updated: Apr 19, 2023 template: concept-topic-template @@ -7,52 +7,29 @@ template: concept-topic-template The Oryx code base is [available on Github](https://github.com/spryker/oryx/), and the code is published and distributed as npm packages. [npmjs.com](https://www.npmjs.com/) is a widely used registry of packages. Package managers, like npm, yarn, deno, or bun, are used to install dependencies in a project. The dependencies are typically configured in the [package.json](https://docs.npmjs.com/cli/v9/configuring-npm/package-json) file of an application. -Oryx packages are distributed under the [spryker-oryx](https://www.npmjs.com/org/spryker-oryx) organization. Each time a new version is published, the version number is bumped. For more information on the versioning strategy, see Versioning. +Oryx packages are distributed under the [spryker-oryx](https://www.npmjs.com/org/spryker-oryx) organization. Each time a new version is published, the version number is bumped. For more information on the versioning strategy, see [Versioning](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-versioning.html). - - -We recommend [installing](./set-up-oryx.md) the packages instead of cloning the Oryx repository. By depending on packages, you can easily upgrade to later versions of the packages. +We recommend [installing](/docs/scos/dev/front-end-development/{{page.version}}/oryx/set-up-oryx.html) the packages instead of cloning the Oryx repository. By depending on packages, you can easily upgrade to later versions of the packages. ## Layers While packages are distributed as a flat list, there is an architectural hierarchy. The hierarchy protects from cyclic dependencies. Packages inside a layer can depend on sibling packages inside the layer without any issues. Packages can never depend on a layer above. -While the package layering might be irrelevant during your development, it might help you to better understand the package dependencies. The following diagram shows four package layers. The top layer is the [boilerplate application](./boilerplate.md), which is set up using a preset. - - - -```mermaid -%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#fff','primaryBorderColor': '#aaa'}}}%% - -flowchart TD -classDef app fill:#fff,stroke:#fff; - -app("Application"):::app -template(Template packages):::template -domain(Domain packages) -platform(Platform packages) -base(Base packages) - -app-..->|"use presets\n(e.g. b2c)"|template -app-->domain +While the package layering might be irrelevant during your development, it might help you to better understand the package dependencies. The following diagram shows four package layers. The top layer is the [boilerplate application](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html), which is set up using a [preset](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html). -template --> domain -domain --> platform -platform --> base -domain --> base -``` +{% include diagrams/oryx/packages.svg %} ## Template packages The template layer contains packages that can be used as quick starters for demos and projects. Templated packages follow semantic versioning and ensure upgradability. Some packages in the template layer, like presets, are opinionated and might not be used inside your final setup. Their main purpose is to quickly get up and running a standard frontend application. -| PACKAGES | LOCATION | -| -------------------------------------------------------------- | --------------------------- | -| | | -| [Application](https://www.npmjs.com/package/@spryker-oryx/) | `@spryker-oryx/application` | -| [Presets](https://www.npmjs.com/package/@spryker-oryx/presets) | `@spryker-oryx/presets` | -| [Labs ](https://www.npmjs.com/package/@spryker-oryx/labs) | `@spryker-oryx/labs` | -| [Themes ](https://www.npmjs.com/package/@spryker-oryx/themes) | `@spryker-oryx/themes` | +| PACKAGES | LOCATION | +| ------------------------------------------------------------------------ | ----------------------------------------------------------------------- | +| | | +| [Application](https://www.npmjs.com/package/@spryker-oryx/application) | `@spryker-oryx/oryx-application-orchestration/oryx-applicationlication` | +| [Presets](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) | `@spryker-oryx/oryx-presets` | +| [Labs ](https://www.npmjs.com/package/@spryker-oryx/labs) | `@spryker-oryx/labs` | +| [Themes ](https://www.npmjs.com/package/@spryker-oryx/themes) | `@spryker-oryx/themes` | {% info_block infoBox %} diff --git a/_drafts/oryx/presets.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.md similarity index 74% rename from _drafts/oryx/presets.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.md index a4debe4d5c2..151b47c63a4 100644 --- a/_drafts/oryx/presets.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-presets.md @@ -1,17 +1,17 @@ --- -title: Presets +title: "Oryx: Presets" description: Presets are used to install predefined applications template: concept-topic-template last_updated: Apr 4, 2023 --- -The [presets package](https://www.npmjs.com/package/@spryker-oryx/presets) contains standard feature sets and resources that are used to create sample applications without writing [boilerplate](./boilerplate.md). Presets might be too opinionated to use for a production application, but they let you get started quickly. +The [presets package](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html) contains standard feature sets and resources that are used to create sample applications without writing [boilerplate](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html). Presets might be too opinionated to use for a production application, but they let you get started quickly. Presets are typically used to demonstrate or try out Oryx applications. In product applications, the boilerplate is set up in more optimized way, by leaving out the features that are not used. ## Dependencies -Presets are provided in a separate [npm package](https://www.npmjs.com/package/@spryker-oryx/presets). +Presets are provided in a separate [npm package](https://www.npmjs.com/package/@spryker-oryx/oryx-presets.html). The standard boilerplate uses the presets as the single package to install Oryx applications. To simplify the installation, the preset application contains dependencies on _all_ [Oryx npm packages](https://www.npmjs.com/org/spryker-oryx). Because a production application is unlikely to use all the packages, it makes sense to leave out the unneeded ones. @@ -21,7 +21,7 @@ A feature set contains a group of features that can be added with a single refer ```ts import { appBuilder } from "@spryker-oryx/core"; -import { b2cFeatures } from "@spryker-oryx/presets"; +import { b2cFeatures } from "@spryker-oryx/oryx-presets"; export const app = appBuilder().withFeature(b2cFeatures).create(); ``` @@ -37,7 +37,7 @@ export const b2cFeatures: AppFeature[] = [ ... ``` -For more information about feature sets, see [Feature sets](./feature-sets.md) +For more information about feature sets, see [Feature sets](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-feature-sets.html) ## Themes @@ -45,7 +45,7 @@ The overarching UI of the application is driven by themes. To get started with a ```ts import { appBuilder } from "@spryker-oryx/core"; -import { b2cFeatures, b2cTheme } from "@spryker-oryx/presets"; +import { b2cFeatures, b2cTheme } from "@spryker-oryx/oryx-presets"; export const app = appBuilder() .withFeature(b2cFeatures) @@ -81,9 +81,9 @@ import { Resources } from "@spryker-oryx/core"; const myResources: Resources = { graphics: { - logo: { source: () => import("./my-logo").then((m) => m.default) }, + logo: { source: () => import("/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-logo").then((m) => m.default) }, otherImg: { - source: () => import("./my-other-img").then((m) => m.default), + source: () => import("/docs/scos/dev/front-end-development/{{page.version}}/oryx/my-other-img").then((m) => m.default), }, }, }; diff --git a/_drafts/oryx/routing.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-routing.md similarity index 92% rename from _drafts/oryx/routing.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-routing.md index 7ca856be4a0..9e1318e30dd 100644 --- a/_drafts/oryx/routing.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-routing.md @@ -1,11 +1,11 @@ --- -title: Routing +title: "Oryx: Routing" description: template: concept-topic-template last_updated: May 25, 2023 --- -Routing lets users navigate between different pages and components within an application. This document describes how to set up routing: add `RouterFeature`, render router outlets, and provide routes using [Dependency Injection (DI)](/_drafts/oryx/dependency-injection/dependency-injection.html). +Routing lets users navigate between different pages and components within an application. This document describes how to set up routing: add `RouterFeature`, render router outlets, and provide routes using [Dependency Injection (DI)](/docs/scos/dev/front-end-development/{{page.version}}/oryx/dependency-injection/dependency-injection.html). `@spryker-oryx/router` provides the infrastructure for routing capabilities. Its main component is `RouterService`, which enables navigation from one view to the next as users perform application tasks. diff --git a/_drafts/oryx/browser-compatibility.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-supported-browsers.md similarity index 100% rename from _drafts/oryx/browser-compatibility.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-supported-browsers.md diff --git a/_drafts/oryx/oryx-versioning.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-versioning.md similarity index 98% rename from _drafts/oryx/oryx-versioning.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx-versioning.md index 2c9cc10c1c0..037d6c59fd4 100644 --- a/_drafts/oryx/oryx-versioning.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx-versioning.md @@ -1,5 +1,5 @@ --- -title: Oryx versioning +title: "Oryx: Versioning" description: Oryx framework uses semantic versioning to ensure stability template: concept-topic-template last_updated: Mar 3, 2023 @@ -57,9 +57,11 @@ Specific package names and versions may vary depending on your project and its d A major upgrade may require significant code changes that may be incompatible with previous versions of Oryx. To perform a major upgrade of the Oryx framework, refer to a respective migration or upgrade guide provided in the documentation. +. +Oryx consists of a range of packages, applications, and tools. To avoid inadvertent use of private APIs and get a clear understanding of what's included or excluded from the private API, see public API](//TODO: add link)-->. ## Backward compatibility diff --git a/_drafts/oryx/getting-started-with-oryx.md b/docs/scos/dev/front-end-development/202212.0/oryx/oryx.md similarity index 91% rename from _drafts/oryx/getting-started-with-oryx.md rename to docs/scos/dev/front-end-development/202212.0/oryx/oryx.md index e23052189ee..5510d6c99de 100644 --- a/_drafts/oryx/getting-started-with-oryx.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/oryx.md @@ -1,5 +1,5 @@ --- -title: Getting started with Oryx +title: Oryx description: Get a general idea of Oryx template: concept-topic-template last_updated: Apr 4, 2023 @@ -7,7 +7,7 @@ last_updated: Apr 4, 2023 Oryx is a framework that empowers developers to build composable frontends with ease. It provides a rich library of components, including a design system, which lets developers create modern and visually appealing user interfaces. The components integrate with Spryker APIs by default, providing a seamless experience for developers. -There are different ways to learn Oryx. To start developing with Oryx right away, see the [setup guide](./set-up-oryx.md). If you want to first learn more about Oryx, continue reading this document. +There are different ways to learn Oryx. To start developing with Oryx right away, see the [setup guide](/docs/scos/dev/front-end-development/{{page.version}}/oryx/set-up-oryx.html). If you want to first learn more about Oryx, continue reading this document. ## Key characteristics diff --git a/_drafts/oryx/reactivity/key-concepts-of-reactivity.md b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/key-concepts-of-reactivity.md similarity index 87% rename from _drafts/oryx/reactivity/key-concepts-of-reactivity.md rename to docs/scos/dev/front-end-development/202212.0/oryx/reactivity/key-concepts-of-reactivity.md index e0a949f405e..a0f6500cf58 100644 --- a/_drafts/oryx/reactivity/key-concepts-of-reactivity.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/key-concepts-of-reactivity.md @@ -44,33 +44,16 @@ Some layers can be considered optional if you build your own domains or componen The following diagram shows the interaction between layers using the product domain as an example. -```mermaid -sequenceDiagram - autonumber - - ProductTitleComponent->>ProductController: get() - ProductController->>ProductService: get() - ProductService->>ProductAdapter: load() - ProductAdapter->>HttpService: request() - HttpService->>HttpService: fetch() - alt Successful fetch - HttpService-->>ProductAdapter: Return product data - else Error - HttpService-->>ProductAdapter: Return error - end - ProductAdapter-->>ProductService: Return product data - ProductService-->>ProductController: Return product data - ProductController-->>ProductTitleComponent: Return product data -``` +{% include diagrams/oryx/reactivity-interaction.svg %} Description: 1. `ProductTitleComponent` is a web component that renders titles in the DOM. A title is typically an `

` element, but this is configurable to make the component reusable in other contexts—for example, inside a cart entry component. The product title component relies on a controller to get the context and associated product data. The product title `name` is mapped from the product data. 2. `ProductController` uses finds out the relevant _context_ for the component and resolves the product qualifier (SKU) in order to make the right request. Whenever the product data is resolved, an update to the DOM is requested. This is actually done in `AsyncStateController`, which is left out on this diagram. The `ProductController` controller uses `ProductService` to resolve the product data. -`ProductService` is a business service that controls the application state for the product. It makes sure that multiple requests for the same product do not result in multiple requests to the backend. `ProductService` delegates the actual loading of the data to `ProductAdapter`. -4. `ProductAdapter` integrates with the backend, by creating an HTTP request. The `ProductAdapter` knows the backend endpoint and it's contract so that it can create the right request. The `ProductAdapter` delegates actual HTTP requests to the `HttpService`. - When an alternative backend is integrated, the `ProductAdapter` can be replaced. The adapter converts the API data model to the client-side model in case of a mismatch. This is done by using normalizers. For details, see [Designing the data model](./best-practice.md#designing-the-data-model. -5. `HttpService` is a small wrapper that is used to provide additional features such as support for interceptors. + `ProductService` is a business service that controls the application state for the product. It makes sure that multiple requests for the same product do not result in multiple requests to the backend. `ProductService` delegates the actual loading of the data to `ProductAdapter`. +3. `ProductAdapter` integrates with the backend, by creating an HTTP request. The `ProductAdapter` knows the backend endpoint and it's contract so that it can create the right request. The `ProductAdapter` delegates actual HTTP requests to the `HttpService`. + When an alternative backend is integrated, the `ProductAdapter` can be replaced. The adapter converts the API data model to the client-side model in case of a mismatch. This is done by using normalizers. For details, see [Designing the data model](/docs/scos/dev/front-end-development/{{page.version}}/oryx/best-practice.html#designing-the-data-model. +4. `HttpService` is a small wrapper that is used to provide additional features such as support for interceptors. ## Updating data in the DOM @@ -82,4 +65,4 @@ Oryx offers the `@asyncState` decorator for Lit components, which simplifies the ## Next steps -[Reactive components](./reactive-components.md) +[Reactive components](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/reactive-components.html) diff --git a/_drafts/oryx/reactivity/integration-of-backend-apis.md b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/oryx-integration-of-backend-apis.md similarity index 87% rename from _drafts/oryx/reactivity/integration-of-backend-apis.md rename to docs/scos/dev/front-end-development/202212.0/oryx/reactivity/oryx-integration-of-backend-apis.md index 92083362ea3..d8edd0d42bf 100644 --- a/_drafts/oryx/reactivity/integration-of-backend-apis.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/oryx-integration-of-backend-apis.md @@ -1,5 +1,5 @@ --- -title: Integration of backend APIs +title: "Oryx: Integration of backend APIs" description: Compose a frontend application from backend APIs template: concept-topic-template last_updated: Apr 3, 2023 @@ -9,7 +9,7 @@ To compose a frontend application from different backend APIs, Oryx provides a f ## Data models -In modern web applications, it is common to communicate with an API to retrieve data. However, the response from an API can be complex and not suitable to be directly used in a component. This is where client models come into play. A *client model* is a representation of data that is tailored specifically for the needs of a client-side application. +In modern web applications, it is common to communicate with an API to retrieve data. However, the response from an API can be complex and not suitable to be directly used in a component. This is where client models come into play. A _client model_ is a representation of data that is tailored specifically for the needs of a client-side application. In the Oryx framework, adapters transform API responses into a client model. Adapters make HTTP requests to load data from APIs and provide normalizers or serializers to transform the data into a more readable format. This is especially important when working with complex data standards like JSON-API, as they can be difficult for a component to work with directly. @@ -17,29 +17,7 @@ By transforming the data from an API into a client model, adapters abstract away The following is a sequence diagram of this high-level architecture: -```mermaid -sequenceDiagram -autonumber - -participant Service -participant Adapter -participant Normalizer -participant API - -activate Service -Service->>Adapter: get() -activate Adapter -Adapter->>API: Sends API call -API-->>Adapter: Returns response -loop each normalizer - Adapter->>Normalizer: Normalizes response - Normalizer-->>Adapter: Returns normalized response -end -Adapter-->>Service: Returns response -deactivate Adapter -deactivate Service - -``` +{% include diagrams/oryx/backend-integration.svg %} The following steps are visualized: diff --git a/_drafts/oryx/reactivity/reactive-components.md b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactive-components.md similarity index 89% rename from _drafts/oryx/reactivity/reactive-components.md rename to docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactive-components.md index 62d03051864..1c078b3d386 100644 --- a/_drafts/oryx/reactivity/reactive-components.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactive-components.md @@ -26,7 +26,7 @@ export class ProductPriceComponent extends LitElement { } ``` -To emit values, [observables](./key-concepts-of-reactivity.md) require to be subscribed to and unsubscribed when the values are no longer needed. To avoid such boilerplate code, you can use a decorator to subscribe and unsubscribe from observables. The decorator subscribes to the observable but also unsubscribes when the component is destroyed. This ensures that there's no leaking memory in the application. In the following snippet, an observable is assigned to the local `product$` field. +To emit values, [observables](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/key-concepts-of-reactivity.html) require to be subscribed to and unsubscribed when the values are no longer needed. To avoid such boilerplate code, you can use a decorator to subscribe and unsubscribe from observables. The decorator subscribes to the observable but also unsubscribes when the component is destroyed. This ensures that there's no leaking memory in the application. In the following snippet, an observable is assigned to the local `product$` field. ```ts export class ProductPriceComponent { @@ -97,4 +97,4 @@ In this example, the product data is observed from `ProductService`, but switche ## Next steps -[Integration of backend APIs](./integration-of-backend-apis.md) +[Integration of backend APIs](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/oryx-integration-of-backend-apis.html) diff --git a/_drafts/oryx/reactivity/reactivity.md b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactivity.md similarity index 78% rename from _drafts/oryx/reactivity/reactivity.md rename to docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactivity.md index 7b58bfcd0a1..9354eaa7501 100644 --- a/_drafts/oryx/reactivity/reactivity.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/reactivity/reactivity.md @@ -5,8 +5,6 @@ template: concept-topic-template last_updated: Apr 3, 2023 --- -# Reactivity - Reactivity is a fundamental concept in modern web development that enables dynamic, real-time updates to the user interface. In interactive applications, and single-page application (SPA) in particular, reactivity ensures that the displayed data is constantly in sync with the underlying data model, even as that data is loaded asynchronously and in real time from a backend API. In a reactive frontend, data is treated as _streams_ that continue to emit new values in an asynchronous manner. This allows for a highly responsive and engaging user experience, as updates to the data are immediately reflected in the user interface. Examples of reactive behavior include searching for products, adding products to cart, and navigating the application. @@ -19,29 +17,7 @@ Implementing reactivity in a web application is a complex challenge, especially The following is a high-level overview of the reactivity patterns available in Oryx. In the diagram, it is shown using a product component. -```mermaid -sequenceDiagram -autonumber - -ProductComponent-->AsyncStateController: @asyncState() product - -note right of AsyncStateController: Observes updates of product -AsyncStateController-->AsyncStateController: observe -activate AsyncStateController -ProductComponent->>ProductService: get() -activate ProductService -ProductService-->>API: Requests/response data -ProductService-->>ProductComponent: returns data -deactivate ProductService -AsyncStateController->>AsyncStateController: indicates update -activate AsyncStateController -AsyncStateController-->>ProductComponent: requestUpdate() -activate ProductComponent -deactivate AsyncStateController -ProductComponent-->ProductComponent:update view -deactivate ProductComponent -deactivate AsyncStateController -``` +{% include diagrams/oryx/reactivity-high-level.svg %} {% info_block infoBox "Note" %} @@ -62,4 +38,4 @@ The following steps are identified in the diagram: ## Next steps -[Key concepts of reactivity](./key-concepts-of-reactivity.md) +[Key concepts of reactivity](/docs/scos/dev/front-end-development/{{page.version}}/oryx/reactivity/key-concepts-of-reactivity.html) diff --git a/_drafts/oryx/set-up-oryx.md b/docs/scos/dev/front-end-development/202212.0/oryx/set-up-oryx.md similarity index 83% rename from _drafts/oryx/set-up-oryx.md rename to docs/scos/dev/front-end-development/202212.0/oryx/set-up-oryx.md index be4506a3bbc..5720fb8dad5 100644 --- a/_drafts/oryx/set-up-oryx.md +++ b/docs/scos/dev/front-end-development/202212.0/oryx/set-up-oryx.md @@ -28,9 +28,9 @@ npm i npm run dev ``` -The application gets available at [localhost:3000](http://localhost:3000). +The application gets available at `localhost:3000`. -For more information about the boilerplate project, see the [boilerplate guide](./boilerplate.md). +For more information about the boilerplate project, see the [boilerplate guide](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-boilerplate.html). ## Builders and bundlers for Oryx @@ -38,4 +38,4 @@ The recommended build tool for Oryx is [Vite](https://vitejs.dev/). However, Ory ## Packages -Oryx [packages](./packages.md) are distributed on [npmjs.com](https://www.npmjs.com/org/spryker-oryx). +Oryx [packages](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-packages.html) are distributed on [npmjs.com](https://www.npmjs.com/org/spryker-oryx).