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