4 ms·
For my sideproject (https://profilehunt.net https://profilehunt.net) I have been using a somewhat similar approach. I use Github ViewComponents (https://github.
by pvsukale3 5y ago
For my sideproject (https://profilehunt.net https://profilehunt.net) I have been using a somewhat similar approach. I use Github ViewComponents (https://github.com/github/view_component https://github.com/github/view_component) for componentization of Rails views. It helps with more modular views which are easier to debug (errors usually point directly to the line in view code, unlike Rails views). I use StimulusJS (https://stimulus.hotwire.dev/ https://stimulus.hotwire.dev/) for Javascript interactivity. Stimulus is great, it allows me to write more structured reusable JS controllers without global event listeners and ids. For my project I have heavily used these two to create a Trello like board which behaves like an SPA. State and routing is still on server. I just fetch HTML on clicks and render it using Stimulus. It is usually fast enough as I only fetch small components and append them to DOM, but in case it's not I use loading animations.
If you want to take a look at how it is done, this blog post (https://boringrails.com/articles/hovercards-stimulus/ https://boringrails.com/articles/hovercards-stimulus/) explains it really well.
edit: Fixed a link and grammar.
- ksec 5y agoI am still wondering if ViewComponent will ever officially make it into Rails.
- pvsukale3 5y agoIt is very easy to add. Rails 6.1 introduced a way to use the m without a monkeypatch (https://github.com/rails/rails/pull/36388 https://github.com/rails/rails/pull/36388). But yeah having them natively inside Rails will help with greater adoption of components into Rails way.
- ksec 5y agoGenerally speaking having a default way ( or option within default ) of doing things in Rails make things a lot easier for newcomer and maintenance. I sort of wish Rails is more of Github's Rails rather than Basecamp's rails.
- joelbluminator 5y agoHow do u append stuff to the DOM, new Hotwire or Rails ujs?
- pvsukale3 5y agoClicking on buttons triggers Ajax request via stimulus controller (this takes care of CSRF and session) and fetches just the required HTML from route and appends using innerHTML (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/inn...). an example following is an event listener in a JS controller. openAddJob(event) { this.openDialogAddClasses(); this.modalPanelTarget.innerHTML = MODAL_SPINNER_HTML; $.ajax({ type: "GET", url: `/job_items/new_form`, success: function (repsonse) { this.modalPanelTarget.innerHTML = repsonse; }.bind(this), error: function (repsonse) {}, }); } Currently there is a lot of scope for DRY a lot of things in the app but will be doing that once I have more feature tests coverage.
- joelbluminator 5y agoOK you kinda roll your own solution here, looks easy enough.