SHOWING PROGRESS OF BACKGROUND JOBS WITH TURBO

MICHAŁ ŁĘCICKI m.lecicki@visuality.pl @mlecicki https://maikhel.github.io

Before we start…

SHOWING PROGRESS OF BACKGROUND JOBS WITH TURBO

https://github.com/kenaniah/sidekiq-status Sidekiq-status

No content

Random flow chart from Internet

The app Two models: Joke belongs to JokeRequest Job fetching number of jokes from Chuck Norris API “Chuck Norris doesn't have a watch, HE decides what time it is.”

1. Broadcast from model 2. Broadcast from worker 3. Pseudo-background job 4. Updates with Stimulus 5. Bonus

1. Broadcast from model class class Joke Joke < < ApplicationRecord ApplicationRecord after_create_commit after_create_commit -> ->( (joke joke) ) do do broadcast_replace_to broadcast_replace_to([ ([ joke joke. .jokes_request jokes_request, , "jokes_progress_bar" "jokes_progress_bar" ], ], target: target: "jokes_progress_bar" "jokes_progress_bar", , partial: partial: "jokes_requests/jokes_progress_bar" "jokes_requests/jokes_progress_bar", , locals: locals: { { jokes_request: jokes_request: joke joke. .jokes_request jokes_request } } ) ) end end belongs_to belongs_to :jokes_request :jokes_request end end

# app/views/jokes_requests/_jokes_progress_bar.html.erb # app/views/jokes_requests/_jokes_progress_bar.html.erb <% <% progress_width progress_width = = jokes_request jokes_request. .jokes jokes. .count count / / jokes_request jokes_request. .amount amount. .to_f to_f * * 100 100 %> %>

PROS Fast Easy CONS Callbacks Polluting model CRUD operations with broadcasts Not always applicable 1. Broadcast from model Chuck Norris can nail a hammer into a wall.

2. Broadcast from worker # app/services/fetch_jokes_service.rb # app/services/fetch_jokes_service.rb def def update_progress_bar update_progress_bar( (number number) ) Turbo::StreamsChannel Turbo::StreamsChannel. .broadcast_replace_to broadcast_replace_to( ( [ [ jokes_request jokes_request, , "jokes_progress_bar" "jokes_progress_bar" ], ], target: target: "jokes_progress_bar" "jokes_progress_bar", , partial: partial: "jokes_requests/jokes_progress_bar" "jokes_requests/jokes_progress_bar", , locals: locals: { { actual: actual: number number, , limit: limit: jokes_request jokes_request. .amount amount } } ) ) end end

2. Broadcast from worker # app/views/jokes_requests/_jokes_progress_bar.html.erb # app/views/jokes_requests/_jokes_progress_bar.html.erb <% <% progress_width progress_width = = actual actual / / limit limit. .to_f to_f * * 100 100 %> %>

PROS No callbacks Easy to test Broadcast limited to one source place CONS More work? Still needs to bind to some record/ unique user ID 2. Broadcast from worker

3. Pseudo-background job # app/views/jokes_request/show.html.erb # app/views/jokes_request/show.html.erb <% <% jokes_request jokes_request. .amount amount. .times times do do %> %> <%= turbo_frame_tag "joke", src: fetch_joke_path do %> <%= turbo_frame_tag "joke", src: fetch_joke_path do %> <% <% end end %> %> <% end %> <% end %>

3. Pseudo-background job # app/controllers/jokes_controller.rb # app/controllers/jokes_controller.rb def def fetch_joke fetch_joke @joke @joke = = FetchJokeService FetchJokeService. .new new. .call call end end # app/views/jokes/fetch_joke.html.erb # app/views/jokes/fetch_joke.html.erb <%= <%= turbo_frame_tag turbo_frame_tag "joke" "joke" do do %> %> <% <% end end %> %>

PROS No background processing CONS Not always applicable 3. Pseudo-background job

What if there is more than 1 job? Chuck Norris gives cigarettes cancer

1. Broadcast from model 2. Broadcast from worker

4. Updates with Stimulus

4. Updates with Stimulus < <% %= = turbo_stream_from turbo_stream_from @jokes_request, @jokes_request, "jokes" "jokes" % %> > <

4. Updates with Stimulus That’s how I feel when I programm in JavaScript

4. Updates with Stimulus // app/javascript/controllers/progress_bar_controller.js // app/javascript/controllers/progress_bar_controller.js import import { { Controller Controller } } from from "@hotwired/stimulus" "@hotwired/stimulus" // Connects to data-controller="progress-bar" // Connects to data-controller="progress-bar" export export default default class class extends extends Controller Controller { { static static values values = = { { limit limit: : 0 0, , actual actual: : 0 0, , } } static static targets targets = = [ ["progress" "progress", , "count" "count"] ] connect connect() { () { // (...) // (...) } } } }

4. Updates with Stimulus export export default default class class extends extends Controller Controller { { // (..) // (..) connect connect() { () { addEventListener addEventListener( ("turbo:before-stream-render" "turbo:before-stream-render", (( , ((event event) ) => => { { const const fallbackToDefaultActions fallbackToDefaultActions = = event event. .detail detail. .render render event event. .detail detail. .render render = = ( (streamElement streamElement) ) => => { { if if ( (streamElement streamElement. .action action === === "append" "append" && && streamElement streamElement. .target target === === "jokes_grid" "jokes_grid") { ) { this this. .increment increment() () } } fallbackToDefaultActions fallbackToDefaultActions( (streamElement streamElement) ) } } })) })) } } } }

4. Updates with Stimulus export export default default class class extends extends Controller Controller { { increment increment() { () { this this. .actualValue actualValue++ ++ this this. .updateProgress updateProgress() () this this. .updateCount updateCount() () } } updateProgress updateProgress() { () { let let progress progress = = ( (this this. .actualValue actualValue / / this this. .limitValue limitValue) ) * * 100 100 this this. .progressTarget progressTarget. .style style. .width width = = `${ `${progress progress}%` }%` } } updateCount updateCount() { () { this this. .countTarget countTarget. .innerText innerText = = `${ `${this this. .actualValue actualValue} } / ${ / ${this this. .limitValue limitValue}` }` } } } }

Sometimes you just need to move more logic to the frontend 4. Updates with Stimulus

Bonus Chuck Norris does infinit loops in 4 seconds.

Bonus: PAGINATION # app/services/fetch_jokes_service.rb # app/services/fetch_jokes_service.rb class class FetchJokesService FetchJokesService # ... # ... def def add_joke add_joke( (joke joke, , jokes_count jokes_count) ) last_page last_page = = jokes_count jokes_count / / Joke::PER_PAGE Joke::PER_PAGE + + 1 1 if if jokes_count jokes_count % % Joke::PER_PAGE Joke::PER_PAGE == == 1 1 # change page to next one # change page to next one clear_all_jokes clear_all_jokes add_joke_card add_joke_card( (joke joke) ) replace_pagination replace_pagination( (jokes_count jokes_count, , last_page last_page) ) else else add_joke_card add_joke_card( (joke joke) ) end end end end end end

Bonus: PAGINATION # app/services/fetch_jokes_service.rb # app/services/fetch_jokes_service.rb def def clear_all_jokes clear_all_jokes Turbo::StreamsChannel Turbo::StreamsChannel. .broadcast_replace_to broadcast_replace_to( ( [ [ jokes_request jokes_request, , "jokes" "jokes" ], ], target: target: "jokes_grid" "jokes_grid", , partial: partial: "jokes_requests/empty_jokes_grid" "jokes_requests/empty_jokes_grid" ) ) end end # app/services/fetch_jokes_service.rb # app/services/fetch_jokes_service.rb def def add_joke_card add_joke_card( (joke joke) ) Turbo::StreamsChannel Turbo::StreamsChannel. .broadcast_append_to broadcast_append_to( ( [ [ jokes_request jokes_request, , "jokes" "jokes" ], ], target: target: "jokes_grid" "jokes_grid", , partial: partial: "jokes/joke" "jokes/joke", , locals: locals: { { joke: joke: joke joke } } ) ) end end

Bonus: PAGINATION # app/services/fetch_jokes_service.rb # app/services/fetch_jokes_service.rb def def replace_pagination replace_pagination( (jokes_count jokes_count, , last_page last_page) ) pagy pagy = = Pagy Pagy. .new new( (count: count: jokes_count jokes_count, , page: page: last_page last_page, , items: items: Joke::PER_PAGE Joke::PER_PAGE, , link_extra: link_extra: 'data-turbo-action="advance"' 'data-turbo-action="advance"') ) Turbo::StreamsChannel Turbo::StreamsChannel. .broadcast_replace_to broadcast_replace_to( ( [ [ jokes_request jokes_request, , "jokes_pagination" "jokes_pagination" ], ], target: target: "jokes_pagination" "jokes_pagination", , partial: partial: "jokes_requests/jokes_pagination" "jokes_requests/jokes_pagination", , locals: locals: { { pagy: pagy: pagy pagy } } ) ) end end

No content

Use Hotwire

LINKS https://www.visuality.pl/posts/showing-progress-of- background-jobs-with-turbo https://www.visuality.pl/posts/smooth-concurrent- updates-with-hotwire-stimulus https://www.driftingruby.com/episodes/broadcasting- progress-from-background-jobs https://onrails.blog/2022/11/07/displaying-progress-in-a- long-running-background-job-hotwire/ Chuck Norris doesn't need glasses. He just gets new eyeballs.

github.com/maikhel/hotwire-jokes

Thank you! “Chuck Norris is the reason Waldo is hiding”

Questions? https://maikhel.github.io Chuck Norris silenced noise.