DEV Community

loading...
CodeFund

Build a real-time Twitter clone in 10 mins with Rails and StimulusReflex

hopsoft profile image Hopsoft ・1 min read

Demo

Learn how to build interactive real-time applications with Ruby on Rails, CableReady, and StimulusReflex. We'll create a Twitter style timeline that broadcasts updates to all users in real-time ...and we'll build the entire application in less than 10 minutes.

StimulusReflex

Conceptual Compression

These tools and techniques take conceptual compression to a new level by helping developers of all experience levels build real-time reactive applications faster than ever. We've been able to accomplish this with a sustained focus on developer happiness and productivity that has reduced much of the complexity associated with "modern" web development.

We use these tools at CodeFund to build some of the most sophisticated parts of our application.

CodeFund Form

The best part is that we're open source, so you can see exactly how we do it. For example, here's the backend reflex code used to build the form shown in the video. https://github.com/gitcoinco/code_fund_ads/blob/master/app/reflexes/campaign_bundles_reflex.rb

Keep an eye out for an in depth write up on the CodeFund blog where we'll dig into more detail. Coming soon...

Discussion (16)

pic
Editor guide
Collapse
stevepolitodesign profile image
Steve Polito

"These tools and techniques take conceptual compression to a new level by helping developers of all experience levels build real-time reactive applications faster than ever."

I am the perfect use case for these tools. Thanks for all your work on this!

Collapse
gafemoyano profile image
Felipe Moyano

Hi Nate!

Thanks for the video. I've been meaning to try stimulus reflex for a while now and this video finally gave me the push to plug it into a project. I've been really liking it so far! The library in itself it's great, but honestly I thought Cable Ready was the most impressive part of it all. I just didn't know that it could make it so easy to broadcast changes to clients. I'd never really had any reason to dive into Action Cable, I guess it just seemed.. daunting. But Cable Ready just kind of works, which is great.
Thanks for your work!

On a side note, digging into Stimulus Reflex has made me a bit.. conflicted, about the way I handle some front end code. I recently discovered Alpine.js, and I've loved it so far. The declarative approach works better for me than toggling classes on Stimulus Controllers and I personally like just having the behavior in the HTML. And I wouldn't really know how to handle animations and transitions in Stimulus. But it does make me wonder how Alpine would fit in a Stimulus Reflex app? Maybe you could push 'hidden' content and toggle it with alpine.

I know the point of Stimulus Reflex is that you wont need to write as much javascript, but still... I feel that with Stimulus Reflex things just POP into the screen, which is OK most of the time, but sometimes you'd want to make it a bit smoother. For example adding a little fade in to a modal, or an opacity/fade-in transition when displaying dynamic content.

Anyway, just kind of thinking out loud. Thanks again for your work!

Collapse
hopsoft profile image
Hopsoft Author

You're correct that CableReady really is the unsung hero of the demo. It provides the foundation for tools like StimulusReflex to be built on top of it... and it's capable of so much more.

I've never used Alpine.js before, but we have had some discussions in the Discord channel about allowing users to add some intentional latency to morph so they and do things like visual transitions etc..., so this is a feature others have asked for. I don't have a great answer for the best way to use Alpine.js in a StimulusReflex project other than to suggest some experimenting. I don't believe these tools are mutually exclusive, but figuring out how they can best work together will take some trial and error.

Collapse
mtomov profile image
Martin Tomov

Hi,

For Stimulus only transitions, take a look at cnpmjs.org/package/stimulus-reveal

Collapse
leastbad profile image
leastbad

@ben @jess this is a AAA big deal in the Rails world

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
leastbad profile image
leastbad

It doesn't seem like you watched the video, which is a direct response to the Phoenix video you are linking to.

If you watch them both back-to-back, there's no credible way to claim that building this functionality in LiveView is easier, faster or simpler to reason than StimulusReflex.

To be clear: we think Phoenix, Elixir and Erlang are awesome tools for the folks who are using them. The army of Rails developers working on codebases is conservatively 10x larger than the folks working in Phoenix, which means that StimulusReflex has a much larger opportunity to get used in far more real projects in the near term. There's nothing wrong with that. The communities overlap by something like 80%, after all.

Anyhow, if you're working in Elixir, LiveView is incredible news. For everyone else, StimulusReflex is incredible news.

Collapse
Sloan, the sloth mascot
Comment deleted
leastbad profile image
leastbad

What do you mean by "which part will start breaking first"? Are you commenting on the fact that there's a logical separation between a general component that updates the browser and a library that happens to depend on one aspect of it?

Do your applications not have dependencies?

Watch the video and you will realize that what you're saying doesn't hold water. You are the only person here treating this as though it's a conflict to be resolved.

Collapse
cescquintero profile image
Francisco Quintero πŸ‡¨πŸ‡΄

Stimulus on its own looked very cool but never really gave it a try. I'm making a space in my workload to try Stimulus reflex anytime soon for sure.

Looks like the missing part in the Rails stack to never look away πŸ™ƒ

Collapse
leastbad profile image
leastbad

Stimulus is freaking amazing. The way it uses the MutationObserver to subtly create life-cycle events has completely transformed how I approach client-side coding.

Collapse
loumarven profile image
loumarven

Hey Nate,

I've heard you talk about StimulusReflex in the Remote Ruby podcast and I've been wanting to try it out (I'm relatively new in Rails). My question is, would you recommend that I try out StimulusJS and Turbolinks first before I dive into StimulusReflex?

I'm kind of reluctant to learn other frontend frameworks as "I think" that they could complicate app development. But looking at job postings, companies prefer Rails developers who can also work in one of the popular frontend frameworks.

Would love to contribute to this project someday as I gain more experience in Rails.

Collapse
hopsoft profile image
Hopsoft Author

Your intuition is 100% correct. Start with standard Rails tooling first. Then, once you’ve learned what’s possible there and what the limitations are, then reach for CableReady and StimulusReflex. Also, we’d love to have you contributing whenever you’re ready to jump in. ❀️

Collapse
eayurt profile image
Ender Ahmet Yurt

Hi. It was a great tutorial to understand how Rails approches to reactive web applications. Cheers.

Collapse
belgoros profile image
Serguei Cambour • Edited

Awesome! Looks like Phoenix Live View...

Collapse
kirantpatil profile image
kirantpatil

Can we build a simple Uber clone using stimulus reflex ?