matestack-ui-core
, which enables us to implement our UI in some Ruby classes rather than writing ERB, HAML or Slim views. Furthermore we don't need to touch JavaScript in order to create reactive UI features, such as updating the DOM without a full browser page reload or syncing multiple web clients through Action Cable!matestack-ui-core
as a complete substitute for Rails views. If you only want to create UI components in pure Ruby on existing Rails views, please check out this guidedb/migrate/12345_create_posts.rb
Post
model:app/models/post.rb
app/javascript/packs/application.js
or in another pack if you need.matestack-ui-core
and deactivate turbolinks
:app/javascript/packs/application.js
app/views/layouts/application.html.erb
do:matestack-ui
ID to a DOM element within (not on!) the body
tagapp/views/layouts/application.html.erb
app/views/posts
views - we don't need them!app/controllers/application_controller.rb
app/controllers/posts_controller.rb
matestack
folder and create a Matestack app and a Matestack Post
index page file:app/matestack/twitter_clone/app.rb
app/matestack/twitter_clone/pages/posts/index.rb
index
action:app/controllers/posts_controller.rb
localhost:3000/posts
form
to create one!form
to the index pageform_config_helper
method returning a config hash in order to inject a hash into the form without polluting the codeapp/matestack/twitter_clone/pages/posts/index.rb
create
action in order to support the new form:app/controllers/posts_controller.rb
localhost:3000/posts
async
component.success: {emit: "submitted"}
to the form configpost_list_partial
with an async
, configured to rerender when the event submitted
is receivedapp/matestack/twitter_clone/pages/posts/index.rb
localhost:3000/posts
action
components in order to "like" the posts.like
route:config/routes.rb
like
action on the controller:app/controllers/posts_controller.rb
like
action component and emit a post-specific eventapp/matestack/twitter_clone/pages/index.rb
localhost:3000/posts
toggle
Componentfailure: {emit: "form_failed"},
toggle
component in order to render the success message for 5 secondstoggle
component in order to render the failure message for 5 secondsapp/matestack/twitter_clone/pages/index.rb
localhost:3000/posts
app/javascript/channels/matestack_ui_core_channel.js
app/channels/matestack_ui_core_channel.rb
cable__created_post
event from the create
action on the posts controllercable__liked_post_xyz
event from the like
action on the posts controllerapp/controllers/posts_controller.rb
app/matestack/twitter_clone/pages/posts/index.rb
app/matestack/twitter_clone/pages/index.rb
localhost:3000/posts
on one browser tablocalhost:3000/posts
on another browser tabcontext.post.id
)app/matestack/components/post.rb
app/matestack/twitter_clone/posts/index.rb
localhost:3000/posts
Components::Post.(post: post)
). But sometimes the namespace can get a little long and in the interest of keeping our code beautiful, we can register our components so we can call them like:app/matestack/components/registry.rb
app/matestack/twitter_clone/posts/index.rb
localhost:3000/posts
async
rerenders it's whole body. The async
wrapping the whole post list therefore rerenders ALL posts. If our list of posts grows, the performance of the rerendering will decrease. In a lot of usecases, this will not be an issue since the UI is not too big/too complex. So go ahead and use async
everywhere you're not rerendering big or complex UIs and enjoy the simplicity of that rerendering approach!cable
component alongside our already added ActionCable introduction and reuse pretty much all written code!cable
Component For List Rerenderingcable
instead of the async
componentapp/matestack/twitter_clone/posts/index.rb
create
action on the post controllerapp/controllers/posts_controller.rb
localhost:3000/posts