Listen "132: Embed Friendly Alternative to LiveView?"
Episode Synopsis
LiveView isn't always the right answer. Chris Nelson created LiveState to enable embedding custom HTML components in other websites and connect over Phoenix channels to keep UI state on the server! LiveState takes an interesting approach that tries to keep many of the benefits of LiveView but apply it to situations like custom components in static sites hosted by other people. Chris explains how it works and what problems it solves. Check it out!
Show Notes online - http://podcast.thinkingelixir.com/132 (http://podcast.thinkingelixir.com/132)
Elixir Community News
- Happy New Year! Welcome to 2023!
- https://elixir-lang.org/blog/2022/12/22/cheatsheets-and-8-other-features-in-exdoc-that-improve-the-developer-experience/ (https://elixir-lang.org/blog/2022/12/22/cheatsheets-and-8-other-features-in-exdoc-that-improve-the-developer-experience/) – ElixirLang blog post highlighting some ExDoc features
- https://twitter.com/hugobarauna/status/1605283803668221952 (https://twitter.com/hugobarauna/status/1605283803668221952) – Hugo Baraúna used the new ExDoc Cheatsheet feature to add a couple Cheatsheets for Ecto.
- https://hexdocs.pm/ecto/crud.html (https://hexdocs.pm/ecto/crud.html)
- https://hexdocs.pm/ecto/associations.html (https://hexdocs.pm/ecto/associations.html)
- https://github.com/lukegalea/LiveBookGoogleColab/blob/main/GoogleColabhostedElixirLiveBook%2BBumbleeBeeonGPU(StableDiffusion%2BGPT2)v10.ipynb (https://github.com/lukegalea/LiveBook_GoogleColab/blob/main/Google_Colab_hosted_Elixir_LiveBook_%2B_BumbleeBee_on_GPU_(Stable_Diffusion_%2B_GPT_2)_v1_0.ipynb) – Luke Galea created a Livebook online with an “Open in Colab” link at the top that goes through Jupyter notebooks to run Livebook on Google Colab's free tier.
- https://www.reddit.com/r/elixir/comments/zq5d2z/runelixirlivebookwbumbleebeeongpuforfree/ (https://www.reddit.com/r/elixir/comments/zq5d2z/run_elixir_livebook_w_bumbleebee_on_gpu_for_free/)
- https://github.com/am-kantox/finitomata (https://github.com/am-kantox/finitomata) – Aleksei Matiushkin released a library called Finitomata that reads your PlantUML or Mermaid chart and create a state machine from it
- https://twitter.com/elixirmembrane/status/1605519154689310721 (https://twitter.com/elixirmembrane/status/1605519154689310721) – The membrane library “membranertcengine” announced v0.8.
- https://github.com/membraneframework/membranertcengine (https://github.com/membraneframework/membrane_rtc_engine)
- https://elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/12 (https://elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/12) – Owen Bickford has released some early support for passkeys in browsers and mobile devices
- https://blog.chromium.org/2022/12/introducing-passkeys-in-chrome.html (https://blog.chromium.org/2022/12/introducing-passkeys-in-chrome.html)
- https://support.apple.com/guide/iphone/sign-in-with-passkeys-iphf538ea8d0/16.0/ios/16.0 (https://support.apple.com/guide/iphone/sign-in-with-passkeys-iphf538ea8d0/16.0/ios/16.0)
- https://hex.pm/packages/webauthnlivecomponent (https://hex.pm/packages/webauthn_live_component) – Owen's library on Hex
Do you have some Elixir news to share? Tell us at @ThinkingElixir (https://twitter.com/ThinkingElixir) or email at [email protected] (mailto:[email protected])
Discussion Resources
- https://launchscout.com/ (https://launchscout.com/)
- https://launchscout.com/blog/embedded-web-apps-with-livestate (https://launchscout.com/blog/embedded-web-apps-with-livestate) – Blog post talking about LiveState
- https://github.com/launchscout/live_state (https://github.com/launchscout/live_state) – server-side of LiveState
- https://github.com/launchscout/live-state (https://github.com/launchscout/live-state) – npm package for client-side of LiveState
- https://github.com/launchscout/livestate-comments (https://github.com/launchscout/livestate-comments) – demo showing how LiveState works
- https://www.youtube.com/watch?v=jLamITBMoVI (https://www.youtube.com/watch?v=jLamITBMoVI) – ElixirConf 2022 video
- https://www.w3.org/TR/css-shadow-parts-1/ (https://www.w3.org/TR/css-shadow-parts-1/)
- https://developer.mozilla.org/en-US/docs/Web/Web_Components (https://developer.mozilla.org/en-US/docs/Web/Web_Components)
- https://hexdocs.pm/phoenix/channels.html (https://hexdocs.pm/phoenix/channels.html)
- https://disqus.com/ (https://disqus.com/)
- https://www.w3.org/TR/css3-cascade/#inherit-initial (https://www.w3.org/TR/css3-cascade/#inherit-initial)
- https://developer.mozilla.org/en-US/docs/Web/WebComponents/Usingcustom_elements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
Guest Information
- https://twitter.com/superchris (https://twitter.com/superchris) – on Twitter
- https://github.com/superchris/ (https://github.com/superchris/) – on Github
- https://launchscout.com/blog/ (https://launchscout.com/blog/) – Blog
- [email protected]
Find us online
- Message the show - @ThinkingElixir (https://twitter.com/ThinkingElixir)
- Message the show on Mastadon - @[email protected] (https://genserver.social/ThinkingElixir)
- Email the show - [email protected] (mailto:[email protected])
- Mark Ericksen - @brainlid (https://twitter.com/brainlid)
- Mark Ericksen on Mastadon - @[email protected] (https://genserver.social/brainlid)
- David Bernheisel - @bernheisel (https://twitter.com/bernheisel)
- David Bernheisel on Mastadon - @[email protected] (https://genserver.social/dbern)
- Cade Ward - @cadebward (https://twitter.com/cadebward)
- Cade Ward on Mastadon - @[email protected] (https://genserver.social/cadebward)
Show Notes online - http://podcast.thinkingelixir.com/132 (http://podcast.thinkingelixir.com/132)
Elixir Community News
- Happy New Year! Welcome to 2023!
- https://elixir-lang.org/blog/2022/12/22/cheatsheets-and-8-other-features-in-exdoc-that-improve-the-developer-experience/ (https://elixir-lang.org/blog/2022/12/22/cheatsheets-and-8-other-features-in-exdoc-that-improve-the-developer-experience/) – ElixirLang blog post highlighting some ExDoc features
- https://twitter.com/hugobarauna/status/1605283803668221952 (https://twitter.com/hugobarauna/status/1605283803668221952) – Hugo Baraúna used the new ExDoc Cheatsheet feature to add a couple Cheatsheets for Ecto.
- https://hexdocs.pm/ecto/crud.html (https://hexdocs.pm/ecto/crud.html)
- https://hexdocs.pm/ecto/associations.html (https://hexdocs.pm/ecto/associations.html)
- https://github.com/lukegalea/LiveBookGoogleColab/blob/main/GoogleColabhostedElixirLiveBook%2BBumbleeBeeonGPU(StableDiffusion%2BGPT2)v10.ipynb (https://github.com/lukegalea/LiveBook_GoogleColab/blob/main/Google_Colab_hosted_Elixir_LiveBook_%2B_BumbleeBee_on_GPU_(Stable_Diffusion_%2B_GPT_2)_v1_0.ipynb) – Luke Galea created a Livebook online with an “Open in Colab” link at the top that goes through Jupyter notebooks to run Livebook on Google Colab's free tier.
- https://www.reddit.com/r/elixir/comments/zq5d2z/runelixirlivebookwbumbleebeeongpuforfree/ (https://www.reddit.com/r/elixir/comments/zq5d2z/run_elixir_livebook_w_bumbleebee_on_gpu_for_free/)
- https://github.com/am-kantox/finitomata (https://github.com/am-kantox/finitomata) – Aleksei Matiushkin released a library called Finitomata that reads your PlantUML or Mermaid chart and create a state machine from it
- https://twitter.com/elixirmembrane/status/1605519154689310721 (https://twitter.com/elixirmembrane/status/1605519154689310721) – The membrane library “membranertcengine” announced v0.8.
- https://github.com/membraneframework/membranertcengine (https://github.com/membraneframework/membrane_rtc_engine)
- https://elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/12 (https://elixirforum.com/t/webauthnlivecomponent-passwordless-auth-for-liveview-apps/49941/12) – Owen Bickford has released some early support for passkeys in browsers and mobile devices
- https://blog.chromium.org/2022/12/introducing-passkeys-in-chrome.html (https://blog.chromium.org/2022/12/introducing-passkeys-in-chrome.html)
- https://support.apple.com/guide/iphone/sign-in-with-passkeys-iphf538ea8d0/16.0/ios/16.0 (https://support.apple.com/guide/iphone/sign-in-with-passkeys-iphf538ea8d0/16.0/ios/16.0)
- https://hex.pm/packages/webauthnlivecomponent (https://hex.pm/packages/webauthn_live_component) – Owen's library on Hex
Do you have some Elixir news to share? Tell us at @ThinkingElixir (https://twitter.com/ThinkingElixir) or email at [email protected] (mailto:[email protected])
Discussion Resources
- https://launchscout.com/ (https://launchscout.com/)
- https://launchscout.com/blog/embedded-web-apps-with-livestate (https://launchscout.com/blog/embedded-web-apps-with-livestate) – Blog post talking about LiveState
- https://github.com/launchscout/live_state (https://github.com/launchscout/live_state) – server-side of LiveState
- https://github.com/launchscout/live-state (https://github.com/launchscout/live-state) – npm package for client-side of LiveState
- https://github.com/launchscout/livestate-comments (https://github.com/launchscout/livestate-comments) – demo showing how LiveState works
- https://www.youtube.com/watch?v=jLamITBMoVI (https://www.youtube.com/watch?v=jLamITBMoVI) – ElixirConf 2022 video
- https://www.w3.org/TR/css-shadow-parts-1/ (https://www.w3.org/TR/css-shadow-parts-1/)
- https://developer.mozilla.org/en-US/docs/Web/Web_Components (https://developer.mozilla.org/en-US/docs/Web/Web_Components)
- https://hexdocs.pm/phoenix/channels.html (https://hexdocs.pm/phoenix/channels.html)
- https://disqus.com/ (https://disqus.com/)
- https://www.w3.org/TR/css3-cascade/#inherit-initial (https://www.w3.org/TR/css3-cascade/#inherit-initial)
- https://developer.mozilla.org/en-US/docs/Web/WebComponents/Usingcustom_elements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
Guest Information
- https://twitter.com/superchris (https://twitter.com/superchris) – on Twitter
- https://github.com/superchris/ (https://github.com/superchris/) – on Github
- https://launchscout.com/blog/ (https://launchscout.com/blog/) – Blog
- [email protected]
Find us online
- Message the show - @ThinkingElixir (https://twitter.com/ThinkingElixir)
- Message the show on Mastadon - @[email protected] (https://genserver.social/ThinkingElixir)
- Email the show - [email protected] (mailto:[email protected])
- Mark Ericksen - @brainlid (https://twitter.com/brainlid)
- Mark Ericksen on Mastadon - @[email protected] (https://genserver.social/brainlid)
- David Bernheisel - @bernheisel (https://twitter.com/bernheisel)
- David Bernheisel on Mastadon - @[email protected] (https://genserver.social/dbern)
- Cade Ward - @cadebward (https://twitter.com/cadebward)
- Cade Ward on Mastadon - @[email protected] (https://genserver.social/cadebward)
More episodes of the podcast Thinking Elixir Podcast
283: Erlang Turns 27 and React at Risk
16/12/2025
282: Type Systems and View Transitions
09/12/2025
281: Planning for the Unexpected
02/12/2025
280: Dark Matter Developers
25/11/2025
279: Hot Code Upgrades and Hotter AI Takes
18/11/2025
278: WAL-ing Through Database Changes
11/11/2025
277: Searching Across the Hexiverse
04/11/2025
276: Elixir v1.19 Types and Speed
28/10/2025
275: From Slop to Success?
21/10/2025
274: Protocols, Permissions, and Performance
14/10/2025
ZARZA We are Zarza, the prestigious firm behind major projects in information technology.