Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/guillaumebriday/modern-datatables

They are many ways to build reactive web interfaces but do we really need to add the complexity of JavaScript frameworks like Vue.js or React?
https://github.com/guillaumebriday/modern-datatables

datatables hotwire kamal rails spa stimulusjs turbo vuejs

Last synced: 4 days ago
JSON representation

They are many ways to build reactive web interfaces but do we really need to add the complexity of JavaScript frameworks like Vue.js or React?

Awesome Lists containing this project

README

        

# Modern datatables

## Concept Overview

This project shows how to build a **modern** real life application with in two different ways.

They are many ways to build **reactive** web interfaces but do we really need to add the complexity of JavaScript frameworks like [Vue.js](https://vuejs.org/) or [React](https://reactjs.org/)?

These tools are very powerful but the complexity they add to a full-stack developer's workflow is **INSANE**.

In this repo, you'll find two apps:

πŸ‘‰ One is build with [Rails](https://rubyonrails.org/) and [Hotwire](https://hotwire.dev/) aka NEW MAGIC.

πŸ‘‰ The other with Rails as a backend API and Vue.js as a full static SPA in the frontend.

They have the exact same features and level of responsiveness.

πŸ‘‰ Here is a blog post with some details of how it works under the hood: https://guillaumebriday.fr/hotwire-reactive-search-form-without-javascript

πŸ‘‰ You can already use [Stimulus Rails Autosave](https://www.stimulus-components.com/docs/stimulus-rails-autosave) to auto-submit your forms with Stimulus without writing a single line of custom JavaScript.

## Demo

Both example are available online πŸ₯³:

- [https://rails-hotwire.guillaumebriday.fr](https://rails-hotwire.guillaumebriday.fr)
- [https://rails-vuejs.guillaumebriday.fr](https://rails-vuejs.guillaumebriday.fr)

## Resources

More and more developers come back from building dedicated SPAs and just want to use the power of Vue or React in a classic Backend application.

Many projects help you in multiples frameworks:
- [Hotwire](https://hotwire.dev/)
- [Laravel Livewire](https://laravel-livewire.com/)
- [htmx](https://github.com/bigskysoftware/htmx)
- [Inertiajs](https://inertiajs.com/)
- [Stimulus Reflex](https://docs.stimulusreflex.com/)
- [Phoenix Live_View](https://github.com/phoenixframework/phoenix_live_view)
- [Turbolinks](https://github.com/turbolinks/turbolinks)

If you're still perplex about this old school approach, you should watch this video from Sam Stephenson:

[Turbolinks 5: I Can’t Believe It’s Not Native! ](https://www.youtube.com/watch?v=SWEts0rlezA).

## Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

## License

This project is released under the [MIT](http://opensource.org/licenses/MIT) license.