matestack-ui-core
ships a growing library of pre-built reactive components implemented with Vue.js serving exactly that purpose: Enable you to skip the JavaScript implementation and focus on real Ruby business logic implementation!toggle
and onclick
component:onclick
and toggle
and pass in required options like emit: :hello
or show_on: :hello
and a block like button 'click me'
or span ...
onclick
and toggle
triggers the rendering of a special HTML <component>
tag containing the configuration hash as tag attributes (e.g emit: hello
) and the given block as the inner HTML (e.g. button 'click me'
)toggle
component which will show its content, in this case a span containing a string “hello world”.action
componentaction
component is designed to call server side Rails controller actions from the web browser. Within your Ruby response of a page or component, you simply call the action
component and configure it with a hash containing the rails controller action path and the desired HTTP method. Additionally you’re telling the action component to show a simple button with you specific block:action
Vue.js component performs a background HTTP PUT request towards the specified path, targeting a Rails controller action. The response of this controller action may be used to emit events to the event hub, triggering a toggle
component to show a success message for example. (fyi: we're not doing this in the above shown example, see next example)matestack_form
componentmatestack_form
component and pass in a configuration hash. This time we’re using a helper method as the configuration hash is a bit longer but we want to keep a clean UI implementation. We’re telling the form component to collect user input, in this case via an text input and when submitted, perform a background HTTP POST request containing this user input towards the specified Rails controller action:form
Vue.js component in the browser and then rendered next to the relevant form input fields.async
componentasync
component is designed to perform a partial UI update, requesting fresh content from the server. In the below shown example, we configure an async
component to rerender itself on a event coming from a matestack_form
component:async
Vue.js component. The async
component then performs a background HTTP request towards a Rails controller action. The controller action rerenders the UI on the server side and just sends back the relevant part of the HTML to the async
component in the browser. The component can now perform a DOM Update, rendering the fresh HTML just sent from the server!async
doesn’t care where the event is coming from! Thanks to a super simple ActionCable integration, events can be broadcasted from the server to all connected web clients and there passed through to Matestack's event hub!async
components on all connected web clients are doing their thing:cable
componentcable
component. The cable
component in this example is configured to append something on an event called “new_tweet”TweetComponent
rendering only one Tweet) on the server and push this specific HTML to all connected web clients:async
component! But it requires a bit more implementation effort: For simple use cases, the async
component serves you very well. If you need to take care of computation time and scalability towards higher traffic, use the cable
component!transition
componenttransition
components enabling dynamic transitions from one page to another without a full browser page reload. Well, you need at least two pages for that to work! Let’s define them:transition
components with different paths, targeting the Rails controller actions we just saw. Finally we're telling the app where to yield pages.transition
Vue.js component, the transition
will trigger a background HTTP GET request towards the desired Rails controller action which will only respond with the HTML string generated from the response of the desired Matestack pagepage content
Vue.js component which than switches the current page with the new one coming from the server! The rest of the layout stays untouched!collection
componentcollection
component displays ActiveRecord models or similar collections and add features like reactive filtering, paginating and ordering with ease. Each of these features requires no page reload to take effect, because the collection
component leverages a async
component in combination with the event hub to only reload the relevant content of the collection.