Learn how to create a drag and drop app in Elixir Lang with Phoenix LiveView and how to leverage JavaScript interoperability. Interactions like drag and drop are either better handled by the client or can only be handled by the client. Phoenix LiveView server-side rendering is very fast. However, there are situations where client-side implementation results in a better user experience.
In this tutorial, Kelsey Leftwich, Senior Developer at Headway will teach you how to make client-side events communicated to the server-side modules using client hooks. After watching this Phoenix LiveView tutorial, you should be able to implement drag and drop in your own Elixir Lang project.
Source Code:
https://github.com/kelseyleftwich/phoenix-liveview-hook-demo
Segments:
- 00:00 - Overview
- 01:15 - Drag and Drop Example
- 01:39 - Intro to Phoenix LiveView
- 03:10 - Why Use JavaScript?
- 03:47 - Starting with Empty Phoenix LiveView Project
- 04:23 - Styling and JS Dependencies
- 04:55 - PageLive
- 5:45 - Dropzone LiveComponent
- 07:25 - PageLive EEx Template
- 07:55 - Pool Dropzone
- 08:19 - What We Have So Far
- 08:35 - Adding a Drag Hook
- 09:13 - Lifecycle Functions
- 10:15 - Hooking Up Our Hooks
- 11:45 - Adding SortableJS
- 14:05 - Almost Done
- 14:40 - Events
- 15:47 - Push Event to LiveView
- 17:08 - Handling Event Payload
- 18:16 - Helper Functions
- 18:29 - We’re Done!
- 18:54 - Next Steps & Resources
- 20:40 - Questions
#javascript #programming #web-development #developer
