Async
componentasync
component can be used to either defer some content on page loads or to rerender a parts of the UI on events. For example it's possible to rerender a table of data after a "reload" or "delete" button click or to defer rendering of complex components on inital page load and render these components asynchronously afterwards in order to increase the initial page load time.async
can be used to rerender a part of the UI via an event emitted by the onclick
component. async
will trigger the rendering of the whole surrounding page or view and just sending back the requested part to the frontend. Cable
componentcable
component is designed to asynchronously manipulate its DOM based on ActionCable events and data triggered and rendered on the serverside. Imagine a list of Todos and a form
below that list. After creating a new Todo, the new list item can be rendered on the serverside and pushed to the cable
component, which can be configured to pre or append the current list with the new item:cable
component again will only manipulate the specific DOM elements and not the whole list.async
component, the cable
component does not request and rerender the whole list after receiving a specific event. This requires more implementation effort but gives you more flexibility and performance while creating reactive UIs compared to the async
component. As usual, no JavaScript is required at your end in order to implement this sophisticated reactivity.cable
vs async
componentcable
and async
might seem similar. They indeed can be used for similar use cases - imagine implementing a reactive list of todo items (using ActiveRecord) created via a form
below the list. You can either use async
or cable
in order to create that reactive list!async
component rerenders its whole body via a background HTTP GET request when receiving clientside or serverside eventscable
component may receive serverside (ActionCable) events including...async
does not require any further setup. A Matestack UI class and a corresponding controller is all you need to implement.cable
component requires an ActionCable setup and ActionCable event emission on the serverside.async
requires less implementation but will always simply request and rerender its whole body and therefore needs more computation time on the serversidecable
requires more implementation but rerenders only very specific parts of UI and therefore needs less computation time on the serversidecable
!async
!async
components. Isolated components can be deferred or asynchronously rerendered like async
components. In difference to async
components, isolated components are resolved completely independently from the rest of the UI. If an isolated component gets rerendered or loaded, Matestack will directly render this component without touching the surrounding UI implementation. async
- in contrast - is executing the surrounding UI implementation in order to render the relevant UI part. On complex UIs this makes a difference performance wise!async
, instead you need to create a component inheriting from Matestack::Ui::IsolatedComponent
. Creation of the custom component works similar to other components, except you need to implement an authorized?
method. As said above, isolated components are completely independent and could be called directly via an URL, therefore they need custom authorization.:defer
option to keep your page loads fast and present the result to the user asynchronously.