It worked perfectly, and the animation was completely smooth.Ĭhris was quick to point out that this is not something that you’d actually want to do, but this definitely helps validate the scaling story. He set a timer in the LiveView that went off every 16ms and pushed updated div tags down to the client. With these two working together, updates on the client appeared instantaneously during the demos.īut the real “are-you-kidding-me” moment happened when Chris showed off an animation that ran at 60FPS, completely driven by the server. The Phoenix channels implementation is super efficient, and Phoenix’s template rendering is blazingly fast. Once again, Elixir benefits greatly from all the amazing tools that Erlang and the BEAM provide. And stateful processes running on a server has been OTP’s bread and butter for the past two decades. Phoenix channels have been part of the framework for a few years. Time will tell, of course, but LiveView is built on solid ground. This means that we can take the same changesets we use in our contexts and controllers to perform realtime client-side form validation. The demos included the classic React-style Clock app (shown above), but instead of the timer running on the client, it ran in a LiveView on the server, and pushed the updated time to the client every second.Ĭhris also showed the form validation example discussed earlier, but in this example, the LiveView responded to the key press events, and the server handled validation and sent error messages back down to the client. LiveView uses DOM diffing, so the updates are as efficient as possible. Changing any part of the LiveView’s state triggers a call to the render function, and the LiveView pushes the updated view code down the wire to the client. Server-side clock demo - the ~E sigil provides HTML-safe EExĪ LiveView has a persistent connection to the web page via Phoenix channels, and it can respond to events coming from the client, or from the server. But as near as I can tell, a LiveView is lot like a React component running in a GenServer - it even has a render function! And with the EEx sigil (which I didn’t know was a thing) the code feels a lot like JSX: The project hasn’t been released yet, so we don’t have any code to look at, other than what Chris showed in the presentation. In our experience at Infinite Red, just about every web app we’ve built that used Ember or React could instead have used LiveView, and it might have saved a mountain of work. Many (possibly most) work well with pages rendered on the server, with realtime interaction added where it makes sense.įor these apps, LiveView looks like it would be a perfect fit. Of course there are some apps that need, or would greatly benefit from, a front end implemented completely in JavaScript. For those of us who love Elixir, we’d like to be spending more time in Elixir, not less. But not everyone is going to want to do that. To work around that, we’re told to put the whole app logic into the front end, and simply have the back end expose an API. So we have to duplicate the validation logic on the server to protect against an attacker sneaking in bad data. That seems like an awful lot of work just to be able to say “Email address is required.”Īnd even if we do all that work, we can’t rely solely on client-side validation to maintain data integrity. And for many developers, this quickly turns into a bewildering array of questions: should we use a framework for this? If so, which one? How should we bundle up the JavaScript: webpack, or some other tool? And everyone is saying we should be using ES6, so how do we set that up? Nowadays to do that, we turn to JavaScript. We’d like to provide feedback right away. We don’t want them to have to fill out the entire form, submit it to the server, then wait for a complete page re-render to discover they made an error. We want to provide immediate feedback to our users when the information they’re providing is missing or incorrect. Think of a registration form on a web page. If that doesn’t immediately make sense, let’s take a step back and consider the problem. The new feature, tentatively called “LiveView”, allows developers to add dynamic, client-side interactions to web pages, using code that runs in Elixir on the server. In his keynote at ElixirConf last week, Chris McCord announced a new feature for the Phoenix web framework that caused many jaws to hit the floor, and had the hall buzzing when the talk was over.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |