What We Do

Company

Resources

Events

Blog

Free Consultation

ahoy@headway.io

(920) 309 - 5605

Drag and Drop with Elixir - Phoenix LiveView and JavaScript Interop

January 11, 2021

January 11, 2021

10:00 am

Presented By

Get updates on future events!

Spread the Word!

Bring co-workers, friends, and anyone else you think would benefit from the community.

Drag and Drop with Elixir - Phoenix LiveView and JavaScript Interop

minimal drag and drop graphic with phoenix liveview logolive stream

What you'll learn

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.

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

Example of drag and drop:

drag and drop with elixir example animated

Source code

https://github.com/kelseyleftwich/phoenix-liveview-hook-demo

Blog post

Create a Client-Side Drag and Drop in Phoenix LiveView 


Phoenix LiveView resources

Phoenix LiveView documentation about JavaScript interoperability

Walk-Through of Elixir LiveView | Elixir School

Another approach: LiveView Trello clone by Pedro Assunção

Source code for Trello Clone by Pedro

JavaScript for Trello Clone by Pedro

Reserve Your Spot

What you'll learn

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.

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

Example of drag and drop:

drag and drop with elixir example animated

Source code

https://github.com/kelseyleftwich/phoenix-liveview-hook-demo

Blog post

Create a Client-Side Drag and Drop in Phoenix LiveView 


Phoenix LiveView resources

Phoenix LiveView documentation about JavaScript interoperability

Walk-Through of Elixir LiveView | Elixir School

Another approach: LiveView Trello clone by Pedro Assunção

Source code for Trello Clone by Pedro

JavaScript for Trello Clone by Pedro

January 11, 2021

10:00 am

live stream

Spread the Word!

Bring co-workers, friends, and anyone else you think would benefit from the community.

Subscribe for future events

Stay up to date on upcoming events like this one and get valuable resources delivered to your inbox.

Thanks for signing up!
Oops! Something went wrong while submitting the form.

More events and videos

The Manifest

Receive the latest articles, resources, events, and more!