Programming Phoenix LiveView: Interactive Elixir Web Programming Without Writing Any JavaScript

Build highly interactive applications without ever leaving Elixir, the way the experts do. Let LiveView take care of performance, scalability, security, and keeping the browser up to date.

The days of the traditional request-response web application are long gone, but you don't have to wade through oceans of JavaScript to build the interactive applications today's users crave. The innovative Phoenix LiveView library empowers you to build applications that are fast and highly interactive, without sacrificing reliability. This definitive guide to LiveView isn't a reference manual. Learn to think in LiveView. Write your code layer by layer, the way the experts do. Explore techniques with experienced teachers to get the best possible performance.

Instead of settling for traditional manuals and tutorials, get insights that can only be learned from experience. Start with the Elixir language techniques that effortlessly marry your client templates and server-side handlers. Design your systems with the right layers in the right places so that your code is easier to understand, change, and support. Explore features like multi-part uploads and learn how to comprehensively test your live views. Roll into advanced techniques to tie your code to other services through the powerful publish-subscribe interface.

LiveView brings the most important programming techniques from the popular Elm and JavaScript React frameworks to Elixir. You'll experience firsthand how to harness that power by working side by side with some of the first LiveView users. You will write your programs to change data on the server, and you'll see how LiveView efficiently detects those changes and reflects them on the web page. Start from scratch, use built-in generators, and craft reusable components. Your single-purpose reducers will transform server data that your renderers can turn into efficient client-side diffs.

Don't settle for knowing how things work. To get the most out of LiveView, you need to know why they work that way. Co-authored by one of the most prolific authors and teachers in all of Elixir, this book is your perfect guide to one of the most important new frameworks of our generation.

What You Need:

Programming Phoenix LiveView uses Phoenix version 1.5, and any Elixir version compatible with it. You will also want PostgreSQL and JavaScript Node.

• CRC: Constructors, Reducers, and Converters
• Phoenix Is One Giant Function
• Generate the Authentication Layer
• Explore Accounts from IEx
• Protect Routes with Plugs
• Authenticate the Live View
• Access Session Data in the Live View
• Your Turn

• Get to Know the Phoenix Live Generator
• Run the Phoenix Live Generator
• Understand the Generated Core
• Understand the Generated Boundary
• Boundary, Core, or Script?
• Your Turn

• Application Inventory
• Mount and Render the Product Index
• Use Components to Render HTML
• Handle Change for the Product Edit
• Manage Data with Streams
• Phoenix 1.8’s Dedicated Form Live View
• Your Turn

• Model Change with Changesets
• Model Change with Embedded Schemas
• Use Embedded Schemas in LiveView
• LiveView Form Bindings
• Live Uploads
• Your Turn

• The Survey
• Organize Your Live View with Components
• Build the Survey Context
• Organize the Application Core and Boundary
• Build the Survey Live View
• Build a Simple Function Component
• Build the Demographic Show Function Component
• Your Turn

• Build the Live Demographic Form Component
• Manage Component State
• Build the Ratings Components
• List Ratings
• Show a Rating
• Show the Rating Form
• Your Turn

• The Plan
• Define the Admin.DashboardLive Live View
• Represent Dashboard Concepts with Components
• Fetch Survey Results Data
• Initialize the Admin.SurveyResultsLive Component State
• Render SVG Charts with Contex
• Add Filters to Make Charts Interactive
• Refactor Chart Code with Macros
• Your Turn

• LiveView and Phoenix Messaging Tools
• Track Real-Time Survey Results with PubSub
• Track Real-Time User Activity with Presence
• Display User Tracking
• Your Turn

• What Makes CRC Code Testable?
• Unit Test for Survey Results State
• Integration Test LiveView Interactions
• Verify Distributed Real-Time Updates
• Your Turn

• The Plan
• Represent a Shape with Points
• Group Points Together in Shapes
• Track and Place a Pentomino
• Track a Game in a Board
• Your Turn

• Plan the Presentation Layer
• Define a Skinny GameLive View
• Render Points with SVG
• Compose with Components
• Put It All Together
• Your Turn

• It's Alive: Plan User Interactions
• Process User Interactions in the Core
• Build a Game Boundary Layer
• Extend the Game Live View
• Add Help with JavaScript
• Build a Picker to Control Navigation
• Your Turn

Bruce Tate is a programmer and CEO of Groxio where he is helping to redefine how computer languages are taught and learned. He's the author of Seven Languages in Seven Weeks and Programming Phoenix, among other titles and has been involved with Elixir from the very beginning. He's written more than 10 books.

Sophie DeBenedetto is an engineer at GitHub. She is a graduate of, and former teacher at, The Flatiron School and has a love of coding education. She has been an active member of the Elixir community for several years---she is co-organizer of, and speaker at, different Elixir conferences around the world, a podcast host, and a blogger.