PROGRAMMING PHOENIX LIVEVIEW : interactive elixir web programming without writing any javascript

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. Cover 1 Table of Contents 5 Change History 9 B7.0 March 30th, 2022 9 B6.0 Jan 28th, 2022 9 B5.0 July 1st, 2021 9 B4.0 April 29th, 2021 10 B3.0 April 2nd, 2021 10 B2.0 March 11th, 2021 10 B1.0: February 24, 2021 10 Introduction 11 Is This Book for You? 12 About this Book 14 Online Resources 19 1. Get To Know LiveView 20 Single-Page Apps are Distributed Systems 21 LiveView Makes SPAs Easy 24 Program LiveView Like a Professional 27 Install Elixir, Postgres, Phoenix, and LiveView 28 Create a Phoenix Project 29 The LiveView Lifecycle 33 Build a Simple LiveView 34 LiveView Transfers Data Efficiently 41 Your Turn 45 Part I—Code Generation 47 2. Phoenix and Authentication 48 CRC: Constructors, Reducers, and Converters 50 Phoenix is One Giant Function 54 Generate The Authentication Layer 58 Explore Accounts from IEx 62 Protect Routes with Plugs 65 Authenticate The Live View 68 Access Session Data in The Live View 73 Your Turn 76 3. Generators: Contexts and Schemas 78 Get to Know the Phoenix Live Generator 79 Run the Phoenix Live Generator 80 Understand The Generated Core 84 Understand The Generated Boundary 91 Boundary, Core, or Script? 98 Your Turn 101 4. Generators: Live Views and Templates 103 Application Inventory 104 Mount and Render the Product Index 107 Handle Change for the Product Edit 113 LiveView Layers: The Modal Component 117 LiveView Layers: The Form Component 125 Your Turn 131 Part II—LiveView Composition 133 5. Forms and Changesets 134 Model Change with Changesets 134 Model Change with Schemaless Changesets 136 Use Schemaless Changesets in LiveView 138 LiveView Form Bindings 146 Live Uploads 149 Your Turn 161 6. Function Components 163 The Survey 164 Organize Your LiveView with Components 167 Build The Survey Context 168 Organize The Application Core and Boundary 173 Build The Survey Live View 177 Build a Simple Function Component 183 Build the Demographic Show Function Component 185 Your Turn 189 7. Live Components 191 Build the Live Demographic Form Component 191 Manage Component State 196 Build The Ratings Components 200 List Ratings 202 Show a Rating 206 Show the Rating Form 209 Your Turn 215 Part III—Extend LiveView 217 8. Build an Interactive Dashboard 218 The Plan 219 Define The Admin.DashboardLive LiveView 221 Represent Dashboard Concepts with Components 223 Fetch Survey Results Data 225 Initialize the Admin.SurveyResultsLive Component State 227 Render SVG Charts with Contex 228 Add Filters to Make Charts Interactive 237 Refactor Chart Code with Macros 247 Your Turn 251 9. Build a Distributed Dashboard 253 LiveView and Phoenix Messaging Tools 253 Track Real-Time Survey Results with PubSub 255 Track Real-Time User Activity with Presence 261 Display User Tracking 267 Your Turn 274 10. Test Your Live Views 275 What Makes CRC Code Testable? 276 Unit Test Test Survey Results State 279 Integration Test LiveView Interactions 287 Verify Distributed Realtime Updates 297 Your Turn 301 Part IV—Graphics and Custom Code Organization 303 11. Build the Game Core 304 The Plan 305 Represent a Shape With Points 307 Group Points Together in Shapes 321 Track and Place a Pentomino 323 Track a Game in a Board 328 Your Turn 333 12. Render Graphics With SVG 336 Plan the Presentation Layer 336 Define a Skinny GameLive View 338 Render Points with SVG 339 Compose With Components 345 Put It All Together 353 Your Turn 358 13. Establish Boundaries and APIs 363 It’s Alive: Plan User Interactions 363 Process User Interactions in the Core 365 Build a Game Boundary Layer 369 Extend the Game Live View 371 Your Turn 374 Bibliography 376