Phoenix LiveView for web developers who don't know Elixir.
HTML-код
- Опубликовано: 4 ноя 2019
- To learn more about Elixir & Phoenix, checkout my course: "Elixir & Phoenix for Beginners" www.knowthen.com/elixir-and-p...
In this video, you'll learn about a new technology called Phoenix LiveView.
So What's Phoenix LiveView?
It's a library that allows you to build web applications that offer rich, real-time user experiences while avoiding the massive complexity associated with writing and maintaining Single Page Applications.
I like to think of it as a sensible alternative to Single Page Applications.
NOTE: This video was created for web developers who don't know Phoenix or Elixir, however if you do know Phoenix & Elixir, you should still find a lot of value in this video.
What to be notified when I create new videos like this?
Join my mailing list: www.knowthen.com/join/
Elixir: elixir-lang.org/
Phoenix: phoenixframework.org/
Phoenix LiveView: github.com/phoenixframework/p...
You had me at "avoiding all the front end technologies"
You have a rare talent for teaching. This is by far one of the best tech/how-to videos I've seen... and I've watched very, very many across multiple languages and frameworks. The only very tiny suggestion I would make is to change your expression "key" and "key in" to "type" and "type in". "key in" is a rather antiquated expression. Also, since so much development involves key/value pairs, it's probably good not to use the word "key" in places like this where there is a better option :).
😮m
You clearly know your audience when you opened the network tab and showed the traffic coming back to the browser. Good job man.
This introduction was really nice and get me hooked from the beginning, thanks for sharing.
I've been pondering starting a YT channel to produce engineering content; wow, this was the best piece of developer-centric content I've ever viewed. :clap:
People should hire you to develop compelling presentations if they don't already. You perfectly buried the lead to whet our appetites and then delivered a satisfying answer. That's damn rare on RUclips. Thanks for the education!
This is probably the most spot-on introduction video I've ever watched. You caught on almost every argument or question I came up with, even when I thought of spinning up a project and inspecting the network and the DOM.
I'm getting more and more excited about Phoenix and Elixir in general, so I'll definitely give this a go. I'm still concerned about the organization of the HTML templates, I feel as if they would quickly turn into a nightmare, but that might not just be the case. Only one way to find that out: make stuff.
Thank you, I am learning Elixir right now and this is first video on LiveView that maked sense for me.
How is server-side rendering better than client-side rendering? If only a part of the view needs to change, it can be easily done in SPAs without network latency. Why are you assuming that most people on the internet are on high speed network? And even if they are on a high speed network, network latency is always going to be the biggest factor in the time taken to update a page!
Phoenix LiveViews doesn't seem like a valid choice to make in most web development use-cases where data is being updated mostly on client-side rather than server-side.
But anyway, great video! I was confused as to whether it would be worth learning Phoenix or not and it seems like you have given me the perfect answer!
Despite having very basic understanding of web development, I could understand everything in this video clearly. Thank you!
Congrats for the best intro to LiveView on youtube until now!
Your teaching style is so clear and concise I'm tempted to spend the money for your course, haha
Since my last comment on this video, I purchased and have watched about half of James' course on Elixir and Phoenix. It is one of the best courses I've taken. Super thorough, well-paced, and explained in a manner/order that you rarely get from online courses. If you are looking to learn this "stack," I highly recommend purchasing the course. It's worth the money and then some.
This is amazing. Extremely good explanations and nice use of illustrations. Subscribed!
Fabulous video, as a web dev who prefers Elixir, this was the perfect intro to LiveView
One of the best videos about programming I’ve seen. Hats off.
Wow, Thank you! you solved my long time question about choosing from single app vs multi-page app vs frame
This is simply fantastic. Very well-explained, and no cruft!
Excellent. Your training course on Elixir and Phoenix is fantastic as well.
Thank you for putting this together! Well done!
I really enjoy your teaching style. Getting into Phoenix and having trouble finding good tutorials but this hit the spot
Amazingly explained the complex concepts in a much much simpler way
Very well explained, thanks for this. I'm actually thinking of getting into elixir/phoenix, and now I'm convinced.
"This is crazy", well you've perfectly captured my thoughts, but I am always open to new ideas. Great video!
Dude you are awesome, the explanation and demo really drives the point home without me cracking my head. You have a talent of presenting a seemingly difficult concept with easy such that a 5th grader can understand :) keep giving back to the community.
Fantastic!! Your animations make it much easier to understand!!
This presentation was glorious. Thank you!
This is a really well-done introduction. Thanks!
Thank you very much. This is one of the best overview I have watched.
Great video! This is super cool; thank you for the introduction.
Very well explained with simple example
Bravo. Best explanation I’ve seen on the subject
very undestandable and easy to munch video with detailed and great explanation....good work
Excellent video and intro to LiveView! :)
This was super awesome for getting the "how" in a really nice, digestible way. Successfully subscribed 🔔
Good job. As someone browsing this technology, you have me interested to learn more.
Stupefacente! 2 anni dopo ma ho avuto l'illuminazione! Grazie! Amazing! 2 years later but I got the enlightenment! Thank you
Good lean instructions, thank you !
Explains very nice, congratulations!
This is an amazingly well made intro to liveview (& elixir)
I really enjoyed this video, thank you!
I agree with previous comments that this is a very well done introduction to the subject. The only thing I am missing is exactly how the dataset changes would be reflected in user's browser when the change is triggered elsewhere. Something you lightly scratched close to the end of the clip.
Wow, very very very very nice explainer, thank you for doing all the hard work to make things simple for us newbies.
Awesome presentation. Thanks
Brilliantly explained!
High quality content. Thank you!
really nice explanation, thanks!
What an awesome introduction to such an awesome stack
wow! just wow, thanks for this mind-opening intro
I really add the arrows you put to point some text it really help.
the rhythm is good to.
Very well job :thumb_up: :)
Really good intro for liveview, thanks.
Thank you for sharing this! Super helpful. You almost sound just like Guy Raz on How I Built this.
All the best!! 🎉🎉🎉
Amazing video. Thanks
Really very nice intro on the technology
Thank you this is awesome
Very good introduction.
nicely explained ...
I love this presentation, and I love Pheonix LiveView, but it is not the only alternative to the "server rendered multipage application" "single page app" duality. Next.js is server-rendered and client "hydrated", all written in js/jsx, for example. Or how bout a simple SPA with Svelte using something like Firebase Realtime DB as the back end. Once again, single language, single paradigm, low complexity, extremely high ceiling for UX, with all the same or more low-latency realtime capabilities... I think this is a much more fair comparison, and may get the edge over Pheonix live view in terms of UX vs Complexity, in all honesty. I see Pheonix LiveView more like a vast improvement over websockets in rails.
IF you have and issue with missing @count:
mount needs to do pattern matching on 3 args, not 2. first being 'params'. This will fix it:
def mount(_params, _session, socket) do
....
Great video!
What software do you use to make the animations?
Keynote?
Thanks for share it, btw your course includes LiveView features??
Very well explained, comment for the algorithm
If it sends the new html on each state change how does it update only the specific part of the dom?
Great content!
Hi. Thank you for the video. It’s great. But one thing is not clear for me:
Can you help with socket=assign in handle_event function. Does it breaks the immutability rule?
Excellent!!
In case anyone is following along in 2022, mount now takes three arguments: params, session, and socket
Thank you, saved me so much time trying to debug!!
Thank you!!
God BLESS you the key error I was getting in no way implied that there was somerthing wrong with how I was parametising the mount function
Really well produced video! I'm thinking about doing your elixir/phoenix course. does it also cover liveview?
Thanks for the kind words! It doesn't include liveview at this point, mostly because liveview is still very young and I suspect there will be quite a few breaking changes to it before it reaches v 1.0
What about the latency between firing an event and it being handled on the server? Unfortunately for my current project LiveView is not an option, because it relies on the synchronicity with the DOM render, but I'll consider LiveView in the future
Just installed on Windows, but when Erland opens and I try to 'mix phx.new' I get the error:
'(CompileError) iex:22 undefined function mix/1'
How does this compare to C# Server-side Blazor?
Excellent intro
Just getting into Phoenix here. What happens if it's an app with multiple instances for load balancing and one of them goes out and comes back up or if the user is disconnected?
Hell yeah!!! Is this LiveView practice in the course as well?
LiveView is still a bit young, and it's being actively developed... so I didn't include it in the course... When LiveView hit's version 1.0, I'm strongly considering adding more videos to include it.
@@knowthen - Gotcha. So, it would be possible to make the voter app in the course using LiveView instead of React, right?
@@solvm1652 Yes totally doable, and it would be a much much simpler solution.
@@knowthen Would you be down to include a LiveView Voting app addition to the course anyway? I understand your reservations about it's youth, but these issues didn't stop React and Vue from blowing up. I feel like the entire JS development chain has pulled us through their infancy, API changes, stylistic changes, bugs, collisions and death even. So, I say go for it. Youth and active development is what we digest daily in this JS world. Much Respect! Thanks for all these exceptional resources you're created.
Is there any example that you can look/inspect? That is "online" on the Internet?
What's your thoughts on Hotwire?
With AnyCable?
is this similar on how livewire for laravel works?
Awesome presentation. Does Phoenix Live View automagically fallback to polling when web sockets are not feasible?
It can be configured to fallback to do this.
And for more complex applications - how does modules interact with each others? Thru the common state?
Hey, I'm unable to get the CounterLive page, I followed the same steps as you did.
I'm getting this
assign @count not available in eex template.
elixirforum.com/t/liveview-argumenterror-assign-count-not-available-in-eex-template/30580/2
Also, wouldn't it increase server costs if you are rendering views on the server?
** (ArgumentError) assign @count not available in eex template.
Is it realistic for a team of 20 to get a medium sized app from NodeJs to Elixir in a year?
Pretty cool
Great video, but what if you wanted to build a mobile app?
what version of elixir and phoenix your course was originally written? and can it work with the latest versions (with no code breaking or deprecation)?
Eric Chua Elixir version 1.9 and Phoenix version 1.4, so very recent, it should work fine with newer versions of Elixir as the language is very mature and seems feature complete at this point.. some would even say Elixir is "done" elixirforum.com/t/is-elixir-done/20830, I'd call it very stable, as there are no major breaking changes planned.
@@knowthen will you add new videos along the way like liveview, etc? how does it work? same course which you add on or new course which you will give free to existing ones?
@@ericchua3492 I'm not adding any videos right now, but at some point I'll evaluate a course update where I'd add videos...
@@knowthen one more question. Is your course follow along type from 1st video towards the last video building something? So I can follow it, step by step? hope it's beginner friendly too
@UCKYcvWYXVvTOilpIggQwx9A Yes it's mostly a follow along course and is best consumed sequentially. One thing to keep in mind, this isn't an ideal course for a beginner programmer, it designed for programmers who are new to Elixir/Phoenix & Functional Programming ... That's not to say a new programmer can't take this course and find great benefit, but it's important to know that I assume the student is already familiar with the basic concepts of programming (datatypes, algorithms, etc) and HTML/CSS.
A few comments.
1. How does this framework differ frim Next.Js? It looks like both do SSR.
2. The phoenix pattern looks like a re-coloring of React Class Based Components. Does Phoenix have a functional analog with hooks?
Single page app is sick with with all its dependences which breaks over time with every needed update, simple mistake in frontend that might break the whole app, The technology overhead.. speed problems, SEO problems,.. super expensive.
This is awesome. Simple, less code exposed, less code to ship, less code to maintain.
Now I need to lear how ;)
very nice, is it possible to write a stand alone Android application using Elixir/Fenix?
would do you mind explain me mount/2 and mount/3 difference please
I'm really sorry, it means arguments function, I hope I be well, Greetings from Mexico
I am from future, this video will help a lot even in 4 years later 😅
What font are you using in your code editor? :-)
Source Code Pro - fonts.google.com/specimen/Source+Code+Pro
Million websocket ability is surprising.
What's your editor font?
Great video!
Source Code Pro
this feels like its next level server side rendering lol
This is amazing. Why so few views?
FP os still a niche. That's why. Give it some time. :)
I would like to point out that the complexity for the SPAs is a bit exaggerated.
i'm crying man... i'm crying...
I don't understand how there's no latency