Last year at ElixirConf, Chris McCord took the stage to introduce Phoenix LiveView: a project he’d been working on with the support of DockYard to help programmers create rich user experiences without complexity. Sounds simple, right? While his vision was simple, the path to making LiveView a reality has been dynamic and not without challenges.
This year, Chris closed out another spectacular ElixirConf with a keynote discussing LiveView in action, when it works best, what’s new since last year, and what’s next as the Phoenix Core Team, now including DockYard’s Alex Garibay and Scott Newcomer, continues to refine and improve upon all LiveView can offer.
LiveView in the Wild
Do This (Not That) with LiveView
There are seemingly endless possibilities when it comes to what LiveView can do; however, Chris did address best case scenarios for LiveView and when another approach might be a better fit.
When Not to Use LiveView
If an application will require offline support, you’ll need to write client-side code. That being said, with the introduction of Lumen, there may be a future in which LiveView works for offline instances. Additionally, if an app requires high latency clients, you’ll need to run code on the client. Some native features and complex UI experiences may also require client-side code and should be evaluated on a case-by-case basis.
When to Use LiveView
While there may be a “line” distinguishing what LiveView can and can’t do, Chris and the team are continuing to push that boundary further back. Last year, the team thought LiveView may not work to build chat apps yet a year later Alex Garibay and Chris Freeze hosted a training on how to do just that with LiveView.
Above all else, LiveView is an ideal solution to increase productivity while simultaneously reducing complexity.
What’s New: phoenix_live_view v0.1.0
LiveView has officially transitioned from a prototype to a full-fledged release with a variety of improvements and updates. Chris discussed some of the most critical updates that came to fruition over the past year, including:
- LiveEEx: built by José Valim, the Live EEx engine enables efficient change tracking and DOM diffing using familiar EEx templating.
- LiveViewTest: programmers can now test the code they are writing without having to spin up a headless WebKit browser.
- Live navigation: enables pushState on the client to allow updates to the URL bar without having to refresh the page. This feature makes it impossible to navigate to an invalid URL page.
- Prepend/append updates: create greater efficiency when adding new elements to a page.
- IE11 support: many older browsers require IE11 support and LiveView can now meet those requirements.
What’s Next: Coming Soon to a Hex Near You
LiveView continues to evolve to meet the needs of the community. Over the next few months, the Phoenix team will be working diligently to deliver a number of new updates that further improve LiveView’s functionality, including:
- phx-debounce: as the most requested feature, debouncing will soon be available to reduce unnecessary bouncing or web page task performances.
- Exception translation: will address exceptions that come through over WebSockets and redirect accordingly.
- File uploads: this feature will soon be available and will simplify upload progress by only requiring as few as five lines of code to work.
- Stash for client state: will automate the process of storing client side state in the event of a disconnect.
- Automatic form recovery: similar to stash for client state, this will automate form recovery in the event of a disruption.
In the longer term, the Phoenix Core Team also will be working on simplifying intelligent collections by eliminating the need to update previous values when adding to a collection. The team also is looking to implement acknowledgement-based updates to ensure more latent connections have a more seamless experience.
“Cheating” the System with LiveView
Switching from an implementer — focused on the lowest level abstractions — to a LiveView end user has been a “mind-blowing” experience, Chris highlighted in the presentation. “This happens over and over again with Elixir: [it’s so easy to use], it feels like cheating… Whether it’s LiveView or any other Phoenix or Elixir feature, [I’m pleasantly surprised by what we’ve achieved together.] ”
Watch Chris’ keynote presentation below to hear when Phoenix LiveView works best, what’s new, and what’s next as LiveView continues to help web app developers and programmers in their pursuit of creating flawless, cutting-edge digital experiences.
And don’t miss the opportunity to show off your LiveView skills by entering the Phoenix Phrenzy coding challenge!
DockYard is a digital product agency offering custom software, mobile, and web application development consulting. We provide exceptional professional services in strategy, user experience, design, and full stack engineering using Ember.js and Elixir. With staff nationwide, we’ve got consultants in key markets across the United States, including San Francisco, San Diego, Phoenix, Dallas, Detroit, Miami, Pittsburgh, Baltimore, and New York.