Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5

Posted on April 22nd, 2020 by Chris McCord


Phoenix v1.5 has been released with LiveView integration. This release makes it easier than ever to build interactive, real-time applications. We put together a quick screencast to show just how much you can accomplish in 15 minutes with LiveView:

Outside of Phoenix LiveView integration, this release brings other exciting features, including integration with the new Phoenix LiveDashboard. There have been a few deprecations, but this ugprade should be quick and easy for most folks.

Phoenix LiveDashboard

On the heels of the official LiveDashboard release, Phoenix 1.5 projects now ship with LiveDashboard by default, for real-time performance monitoring and debugging tools. It’s at this point I also want to welcome Michael Crumm to the phoenix-core team! He has been heading up the Dashboard work with José Valim, and we can thank them both for the amazing results we have today.

The Dashboard brings you immediate insight into your Phoenix applications with focus on production data. Even if you are just starting with Phoenix, we have tooltips on the widgets so you can learn more about them and if/when you should worry about system limits and the health of your system. With telemetry integration, we also include charting of Phoenix events, along with user-defined metrics.

Check José’s twitter thread to see a breakdown of features and screenshots: https://twitter.com/josevalim/status/1250846714665357315

The dashboard also includes a streaming request logger. This is super convenient for diagnosing an issue in production where you need logs for specific requests but the regular logs drown out your requests in noise. With a button click, you can have all of your own request logs streamed to the dashboard instead of sifting thru a flood of production logs.

We also include a process tab, which is similar to observer, allowing you to sort processes in the system to find large message queues, memory hogs, etc.

Did we mention this Just Works™ for a cluster of distributed nodes? Using the node drop-down selector, you can access all the data/features listed above for any node on the cluster, regardless of what web node you happened to load-balance to when loading the dashboard.

Phoenix LiveView generators

The phx.new project generator now includes a --live flag to include everything you need to get up and running developing with LiveView. Additionally, we have also added a phx.gen.live generator for boostrapping CRUD LiveView context/interfaces similar to phx.gen.html/phx.gen.json. We recommend taking these generators for a test drive to see all the existing improvements to LiveView that recently shipped:

  • Revamped LiveViewTest APIs for more powerful, workflow driven testing
  • Deep diff tracking for LiveView templates, dramatically reducing server payloads in many cases
  • Large performance improvements on client rendering
  • Live Navigation with Live Flash

PubSub 2.0

Phoenix.PubSub 2.0 has been released with a more flexible and powerful fastlane mechanism. We took this opportunity to also move Phoenix.PubSub out of the endpoint and explicitly into your supervision tree. This prevents race conditions at startup and decouples your PubSub system from the endpoint. Follow the upgrade guides linked below to get up to speed.

Revamped Guides and more

Thanks to efforts by José Valim, the Phoenix built-in guides have been restructured and revamped, providing a better navigation structure and more content. Be sure to take a look if you’d like to freshen up on your phoenix knowledge.

Other notable improvements include built-in support for MSSQL databases via the tds adapter, and inclusion of the Phoenix.Ecto.CheckRepoStatus plug in new projects to detect and prompt for database creation/migration directly from the comfort of your browser.

As always, we have provided upgrade guides to bring your existing applications up to speed: https://gist.github.com/chrismccord/e53e79ef8b34adf5d8122a47db44d22f

For the complete list of changes, see the CHANGELOG.

Find us on elixir slack/irc if you have questions. Happy coding!