ElixirConf 2021 - Chris McCord - The Future of Full-stack - Summarize

A quick summarize of Chris McCord video of the future of full stack.

Based on this video, I just do a quick summarized of all the things that Chris McCord is talking about, hopefully not missing anything. Feel free to comment below if you do find it.

Table of contents with timestamps

• 4:48 New changes for Phoenix
• 12:00 Allow hooks for LiveView lifecycle
• 16:08 HEEx ( previously Surface UI )
• 21:32 Current problem with LiveComponent, how HEEx solves that
• 28:35 Component slots
• 33:31 Capture phx events using JS module
• 42:14 Event for live_patch
• 51:00 LiveView roadmap
• 55:03 Influence by LiveView, aka LiveApps
• 1:01:00 Conclusion

LiveView changes, merging changes from Heex

• Allow function to be on_mount hooks on LiveView lifecycle, essentially bringing React hooks kind of feature to LiveView

• Allow direct attributes without the needs for eex template string in component attribute. So before is like:
  

<input id="<%= @id =>" required="<%= @required %>" />

Now:

<input id={@id} required={@required} />

Really similar to JS. If you take a look at Heex documentation page, you can take a closer look at these examples.

With Heex:

• LiveComponent shorthand using .
• Slots using :
• let keyword allow for passing down parameter in form
• Using JS.dispatch to allow binding of phx- prefix event to use the events without the need for Alpine related syntax. These events are also DOM-patch aware.
• The JS.dispatch are actually an Elixir way to declare event and event chaining which eventually compiled into JS.
• This allow for event phx-event capture and the control of how the front end is being patched on the client side.

LiveView roadmap:

• Declarative assigns
• Intelligent collections
• Unified LiveView/component messaging
• Stashed transport data
• Re-imagined form API