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.
Phoenix LiveView allows developers to build rich, real-time Elixir web applications without the complexity of traditional client-side solutions. LiveView turns existing JavaScript models around by running a stateful connection on the server which pushes rendered content to the browser. Using a highly optimized rendering engine, LiveView applications often send less data than traditional client-side frameworks, minimizing latency thanks to persistent server connections.
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
As demonstrated by the community, so much can change in a year. LiveView has transformed from an idea into something that is being implemented in the real world to create games such as Tetris, Hippo, and Flappy Bird. The community has also built practical use cases with LiveView — such as calculators, calendars, and to-do apps — all without writing a single line of JavaScript. See the LiveView collection on the Heroku app here for more impressive examples of LiveView out 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.
So when does LiveView really shine? If you’re looking to implement “no fuss” SEO — and don’t want to pay a service to render HTML for your JavaScript app — LiveView can readily render HTML. LiveView can also help to minimize JavaScript and payloads sent across the wire in a way that is better than anything that could ever be written by hand.
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.
- JavaScript hooks: act as an “escape hatch” to enable JavaScript, which remains a requirement for certain projects.
- 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.
