Escape the frontend hustle & easily create interactive web apps in pure Ruby.
Jonas Jabari
Hey! I’m Jonas
Creator and founder of matestack
Passionated Ruby developer
Creating web applications since 2012
The problem and our solution
We once loved to build Rails applications
We easily created our models, controllers and views
We used gems for authentication and authorisation and other cool stuff
Dataflow was managed easily and was often abstracted
We only needed to handle one repository, test suite, deployment, documentation….
We could focus on implementing business logic efficiently
And then we started to build Javascript SPAs
Well, we wanted that reactive UI feeling
But...
Had to handle two states
Had to handle dataflow between two completely different systems
Could no longer use holistic Ruby gems for typical requirements (e.g. devise for login)
Constantly had to switch between two different languages/architectures
Ended up drastically increasing complexity, iteration time and cost of our web development
We thought it should be easier
and created matestack-ui-core, an alternative UI-Layer for Rails applications, back in 2018
Our aims were…
matestack-ui-core building blocks
Apps, pages and components
An app is something similar to a Rails layout
A page is something similar to a Rails view
A component is something similar to a Rails partial
And they are all Ruby Classes defining a response method which will render HTML
App
Page
Component
Component
An app defines a layout and wraps a page
An app uses components in order to define the layout
In this case the core components nav, transition, button, main, div
An app yields an associated page with yield_page
An app can perform dynamic page transitions (more later)
A page orchestrates components
A page is associated with a controller action (and therefore a Rails route) and an app
A page uses components in order to define the view
In this case the core component plain
You can use registered custom components as well (more later)
A page can be structured with pure Ruby
The prepare method resolves data
Within a response method you can use other instance methods in order to structure your code
In this case the instance method item_card
You can use class inheritance or modules in order to clean up your code
A page can also be structured with custom components
When registered, a custom component can be used
You can inject data into your components: In this case item
A component itself can yield or use other components as well
matestack-ui-core core dynamics
An app can perform dynamic page transitions
The core component transition triggers an async HTTP request and..
...fetches the desired page from the server and
...updates the DOM without a full page reload
No Javascript required at your end
Actions perform async HTTP requests
The core component action triggers an async HTTP request...
...targeting a Rails controller action via Rails routing
...emits events when succeeded or failed to which other components may react
No Javascript required at your end
Forms can submit data asynchronously
The core component form submits data in an async HTTP request...
...targeting a Rails controller action via Rails routing
...emits events when succeeded or failed to which other components may react
...dynamically renders validation errors on each input
No Javascript required at your end
Async can rerender parts of the UI on events
The core component async re-renders parts of the UI within an async HTTP request...
...based on client side events
...or based on server side events pushed via ActionCable
...without any further implementation required
No Javascript required at your end
And much more cool stuff
matestack-ui-core custom dynamics
Custom components can be enriched with Vue.js
Custom components as described earlier can be associated with a custom vue.js component
Written in pure JavaScript and handled via Webpacker
Can be combined with third party JavaScript libraries
Can use matestack’s event hub and Vuex store in order to communicate with other components
Custom components can be enriched with Vue.js
Live side by side with core components on your pages, apps and components
Our philosophy: Use core components as much as possible (90%) and extend your UI with some custom JavaScript (10%) where required
matestack-ui-core live demo
Benefits of matestack’s approach
Some more infos
46,8 kb wire size including Vue.js
380+ capybara specs
thousands of lines of documentation
should even support IE11
made for Rails 5 and 6
compatible with Rails asset pipeline and webpacker
can be used on Rails views
If you like it, please support us
How to support us
We would really appreciate, if...
you star our projects at Github
follow us on Twitter (@matestack) and like or even retweet our posts
and consider Github sponsoring, especially if you’re interested in:
extended know how (e.g. guides on challenging topics)
add-on gems (e.g. bootstrap UI components)
If you need us, we’re happy to help you
Let’s succeed together
We offer...
Workshops
Refactoring services
Development services
Support
Thanks for listening & get in touch