Borstch data flow

Anton Ioffe - November 4th 2021 - 2 minutes read

Data in Borstch is organized into several conceptual layers:

  1. Store
  2. Component data
  3. Component props
  4. Method and function props

Store

Store is a global reactive object. Global means that it is shared between pages. At this moment each time you navigate between pages the page is loaded from scratch, it does not behave as a single page application. But in future SPA behavior will be supported. With this in mind consider the store to be shared when you navigate between pages. Currently it will be reset to its default value upon navigaion. In fact when SPA behavior will be enabled even though the store will keep its values when user will navifate between pages, user will still be able to reload a page navigation having the store reset with its default value.

Being global the store is available everywhere - in functions, methods and components for css and other settings across the project.

Since you can use different domains within a project the store is shared between pages on different domains as well.

Component data

Each component instance has its own local reactive data object. Component data is available in the instance's local environment: methods, css, attribbutes and other settings.

Store and components data are the source of application data-reactivity. Props, methods , and functions reactivity derives from the reactivity of store and data. Meaning for example that if a method internally relies on the component's data to return a computed value for a CSS property - once data is updated, method automatically recalculates its resulting value and updates the CSS property.

Component props

Components can pass props to its child components. It can be any data including part of the store, component's local data, or component's own props. Or even methods.

Top page component can receive its props from the URL. So you can have the same component reused in different URLs as a top level component but behaving in a different way based on its props specific for a URL.

Method and function props

Like components can be used one inside another functions can be used in other functions and methods. And of course as it is expected when calling a function we can pass props to the function.

These can be any props like above: parts of store, component's data, components props, methods, functions.

And of course again as expected when passing reactive data for computations in dependency functions all the reactivity stays in place.

Don't Get Left Behind:
The Top 5 Career-Ending Mistakes Software Developers Make
FREE Cheat Sheet for Software Developers