#Elixir phoenix components software#

Phoenix is an Elixir-based web development framework that uses the server-side Model View Controller (MVC) design pattern. Currently I'm fascinated by distributed systems and cloud computing.

#Elixir phoenix components software#

Gives you out of the box, and building upon its programming model, you can avoid writing most application-level JavaScript.Alexander Godwin Follow I'm a software developer and writer that likes to write code and build things. We don’t really need to worry about optimizations like separating client and application state, optimistic updates, etc. The benefits of not needing to constantlyĬontext switch is incredibly valuable (and arguably one of the greatest benefits of LiveView).Īt the end of the day, we want to be able to write performant, real-time applications and not have to worry too much about the underlying details. However, once things are solid, extract it. To start out implementing functionality directly in your application. To be more pointed, application developers should not deal with this. A pattern I believe more teams should adopt is writing small libraries toĮncapsulate parts of your system that need to use JavaScript. One thing that is underdiscussed is how all of this code gets organized. Implement Elixir functions that can output serializable instructions, embed those somewhere your JavaScript code can pick it up, and write the JavaScriptĬode you need to parse and execute those instructions. Instead of implementing your application logic in JavaScript, you can do something similar to how the JS commands work: Or maybe you want to be able to write applications on top of the HTML5 canvas, but don’t want developers to have to write Okay, but I need to do more stuff?Įven with these tools, you may want to do more than is possible by listening to DOM events or diffing your HTML. Modules which can power functional (stateless) and stateful components, respectfully. For components, LiveView has the Phoenix.Component and Phoenix.LiveComponent Write event listeners to handle the dispatch. To a DOM event, but can’t do what you need with the other built-in JS commands, this can help. There’s the JS.dispatch function which allows developers to emit custom events. When you get to a point when you need to support custom event dispatch, or want to create complex and/or reusable components, thereĪre more tools available to us. The latter has the benefit of being nestable, in theĮvent you need to render some nested or recursive data. Or use a for-comprehension in your Elixir code. If you wanted to iterate over some data, you could useĪlpineJS’s x-for declaration. There isn’t much you can do with AlpineJS that you can’t do with LiveView on its own. Let’s contrast an example in the AlpineJS docs with similar code inĭefmodule ExampleComponent do use Phoenix.LiveComponent def mount ( socket ) do end def render ( assigns ) do ~H ''' In something like React, AlpineJS provides declarations for most of this, while being significantly smaller than comparable tools.īut we have the ability to do all of that with LiveView. Instead of writing these on your own, or pulling Many of the attributes and properties in AlpineJS deal with the fact that the DOMĭoesn’t have built-in ways to bind data, iterate over collections, etc. So none of these require server communication once they are on the page.īefore the JS commands were added, many developers would use AlpineJS.

These work by generating serialized instructions which are embedded in the DOM and executed by the JavaScriptĬode that powers LiveView in the client. Reach for, which containsĬommands for toggling visibility, setting focus, and adding / removing classes or attributes, etc. First stop, JS commandsįor simple visual changes (hiding a modal, adding a class to an element when the user clicks a button), you can Where you need JavaScript, how you use it can make a big difference to your developers.

And even when you do eventually hit a point Way that you don’t need to write any JavaScript for most workflows. How much functionality we were able to implement without significant tradeoffs. That said, we stuck to the requirement, and it was an interesting learning experience. On its own, it’s pretty common to reach for JavaScript packages when you start doing more and more client-side While Phoenix LiveView has enough tooling to help you write robust applications I was recently working on a Phoenix LiveView project and we had a requirement to not write any JavaScript.