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

Cover....1

Table of Contents....7

Acknowledgments....11

Introduction....13

Is This Book for You?....14

About This Book....17

Online Resources....21

1. Get to Know LiveView....22

Single-Page Apps Are Distributed Systems....23

LiveView Makes SPAs Easy....25

Program LiveView Like a Professional....29

Install Elixir, Postgres, Phoenix, and LiveView....30

Create a Phoenix Project....31

The LiveView Life Cycle....35

Build a Simple Live View....36

LiveView Transfers Data Efficiently....44

Your Turn....47

Part ICode Generation....50

2. Phoenix and Authentication....51

CRC: Constructors, Reducers, and Converters....53

Phoenix Is One Giant Function....57

Generate the Authentication Layer....62

Explore Accounts from IEx....69

Protect Routes with Plugs....74

Authenticate the Live View....79

Access Session Data in the Live View....84

Your Turn....88

3. Generators: Contexts and Schemas....91

Get to Know the Phoenix Live Generator....92

Run the Phoenix Live Generator....93

Understand the Generated Core....100

Understand the Generated Boundary....107

Boundary, Core, or Script?....114

Your Turn....117

4. Generators: Live Views and Templates....119

Application Inventory....120

Mount and Render the Product Index....124

Use Components to Render HTML....131

Handle Change for the Product Edit....138

Manage Data with Streams....143

Phoenix 1.8s Dedicated Form Live View....147

Your Turn....152

Part IILiveView Composition....154

5. Forms and Changesets....155

Model Change with Changesets....155

Model Change with Embedded Schemas....157

Use Embedded Schemas in LiveView....160

LiveView Form Bindings....172

Live Uploads....174

Your Turn....187

6. Function Components....190

The Survey....191

Organize Your Live View with Components....193

Build the Survey Context....194

Organize the Application Core and Boundary....201

Build the Survey Live View....206

Build a Simple Function Component....213

Build the Demographic Show Function Component....219

Your Turn....227

7. Live Components....229

Build the Live Demographic Form Component....230

Manage Component State....235

Build the Ratings Components....240

List Ratings....242

Show a Rating....247

Show the Rating Form....249

Your Turn....255

Part IIIExtend LiveView....258

8. Build an Interactive Dashboard....259

The Plan....260

Define the Admin.DashboardLive Live View....261

Represent Dashboard Concepts with Components....263

Fetch Survey Results Data....264

Initialize the Admin.SurveyResultsLive Component State....267

Render SVG Charts with Contex....268

Add Filters to Make Charts Interactive....277

Refactor Chart Code with Macros....289

Your Turn....293

9. Build a Distributed Dashboard....294

LiveView and Phoenix Messaging Tools....294

Track Real-Time Survey Results with PubSub....296

Track Real-Time User Activity with Presence....303

Display User Tracking....309

Your Turn....315

10. Test Your Live Views....316

What Makes CRC Code Testable?....317

Unit Test for Survey Results State....319

Integration Test LiveView Interactions....329

Verify Distributed Real-Time Updates....340

Your Turn....344

Part IVGraphics and Custom Code Organization....346

11. Build the Game Core....347

The Plan....348

Represent a Shape with Points....350

Group Points Together in Shapes....362

Track and Place a Pentomino....364

Track a Game in a Board....369

Your Turn....374

12. Render Graphics with SVG....376

Plan the Presentation Layer....376

Define a Skinny GameLive View....378

Render Points with SVG....379

Compose with Components....385

Put It All Together....394

Your Turn....399

13. Establish Boundaries and APIs....403

Its Alive: Plan User Interactions....403

Process User Interactions in the Core....405

Build a Game Boundary Layer....409

Extend the Game Live View....411

Add Help with JavaScript....414

Build a Picker to Control Navigation....417

Your Turn....422

Bibliography....424

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.