Step by step guide for creating the stopwatch

[SimonLab]

Create the Elixir/Phoenix version of https://github.com/dwyl/stopwatch using LiveView.

• Use mount to initialise the timer state and start :timer on server
• Use handle_info to list to the timer event
• Send new timer state to client

Inspired by: https://elixirforum.com/t/livecomponent-updating-itself-at-regular-intervals/37047/8

[SimonLab]

Create new Phoenix stopwatch app ⏱️

Run mix phx.new stopwatch --no-ecto --no-mailer --no-dashboard --no-gettext
Run mix help phx.new to see the documentation and list of options for phx.new command
Install dependencies, then cd stopwatch and make sure the tests are passing mix test and the application is running mix phx.server

Create liveview structure:

• Create live folder for liveview controllers: mkdir lib/stopwatch_web/live
• Create controller for liveview: touch lib/stopwatch_web/live/stopwatch_live.ex This is where the liveview logic happen
• Create view view file for liveview templates: touch lib/stopwatch_web/views/stopwatch_view.ex
• Create new template folder for liveview templates: mkdir lib/stopwatch_web/templates/stopwatch
• Finally create the template file itself: touch lib/stopwatch_web/templates/stopwatch/stopwatch.html.heex

See doc about colocating section

Update created files above to make liveview magic happen

[nelsonic]

@SimonLab have you looked at using Alpine.js for the counter bit?
If not, I was thinking of adding a basic stopwatch in Alpine + Tailwind now.

[SimonLab]

I've just finished my spike on using only liveView for the timer:

And was going to look at creating a section in the Readme using liveView + js (can be Alpine). The block button simulate latency on the server side with Process.sleep, this to show that the timer can be blocked if there are events on the server blocking the timer messages hence using js for incrementing the timer.

But I'll start writing the documentation of the liveview version first so you're welcome to start on the Alpine + tailwind timer

[nelsonic]

@SimonLab OK, cool. gonna take a look at this: dwyl/learn-alpine.js#2 ⏳

[SimonLab]

I've created a draft PR which initialised the Phoenix application and I've updated the Readme with the steps to create the stopwatch (I've deleted by error the readme containing the steps, I need to rewrite this!), still need to:

• Follow the steps on the Readme and update the Phoenix code
• Add Github CI to run the tests on Github
• Deploy the application on Fly
• Update the tests

[SimonLab]

Application deployed at https://liveview-stopwatch.fly.dev/

[nelsonic]

@SimonLab same: https://dwyl.github.io/learn-alpine.js/stopwatch.html

[nelsonic]

Pretty confident I/we could integrate Alpine.js into the LiveView stopwatch
and only send the start|stop time and events to the server for synch to connected clients.

[nelsonic]

@SimonLab your PR #2 is merged. Anything else to do for this issue? 💭

[SimonLab]

I think we can close this issue now and focus on #3