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 :).
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 TH-cam. 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.
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.
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:
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!
like all the other comments I was really blown away by how remarkably effective and clear your video was - thank you for a great resource! I’m excited to go through your channel!
Great video! I'm devops and I was looking to see Elixir in action and best of all with Phoenix together in the same package without knowing Elixir... Wonderful!! Thanks
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.
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.
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.
If I misunderstood what was said in the video, please feel free to correct me. But what was mentioned at the 21:19 minute mark in the video discusses how Phoenix's front-end works and inefficiency in SPAs. However, this is not necessary true, LiveView works differently from other frameworks like Django. If you make a state change in a web application, the entire page won't be reset; only the necessary part will be updated. When updating the state of a page in Phoenix LiveView, the server does not send the entire HTML or anything like that to the client to refresh the page, but rather only the necessary values via WebSocket. If anyone is interested in this topic, you can check this video th-cam.com/video/U_Pe8Ru06fM/w-d-xo.html , at the 20:18 minute mark to see how the server sends information to the client, and at the 21:26 minute mark to see specifically how only one HTML element is updated.
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 ....
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?
I find multipage is more complex than a single page when you said using a framework (React/Vue) that bar should decrease and not increase because they make the process easier and not complex
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 ;)
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?
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
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 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.
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
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?
For you Elixir veterans out there, I'm finding the Elixir syntax to be quite daunting and unintuitive. Is this a normal feeling for a beginner? Will it get better over time? Also, things seem very verbose. At least in this example.
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.
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 TH-cam. 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.
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.
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:
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!
Your teaching style is so clear and concise I'm tempted to spend the money for your course, haha
like all the other comments I was really blown away by how remarkably effective and clear your video was - thank you for a great resource! I’m excited to go through your channel!
Despite having very basic understanding of web development, I could understand everything in this video clearly. Thank you!
One of the best videos about programming I’ve seen. Hats off.
Stupefacente! 2 anni dopo ma ho avuto l'illuminazione! Grazie! Amazing! 2 years later but I got the enlightenment! Thank you
Amazingly explained the complex concepts in a much much simpler way
Thank you, I am learning Elixir right now and this is first video on LiveView that maked sense for me.
Great video! I'm devops and I was looking to see Elixir in action and best of all with Phoenix together in the same package without knowing Elixir... Wonderful!! Thanks
Fabulous video, as a web dev who prefers Elixir, this was the perfect intro to LiveView
I really enjoy your teaching style. Getting into Phoenix and having trouble finding good tutorials but this hit the spot
Very well explained, thanks for this. I'm actually thinking of getting into elixir/phoenix, and now I'm convinced.
This presentation was glorious. Thank you!
Congrats for the best intro to LiveView on youtube until now!
Excellent. Your training course on Elixir and Phoenix is fantastic as well.
Very well explained with simple example
So well explained! thanks!
This is amazing. Extremely good explanations and nice use of illustrations. Subscribed!
Wow, Thank you! you solved my long time question about choosing from single app vs multi-page app vs frame
very undestandable and easy to munch video with detailed and great explanation....good work
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.
This is an amazingly well made intro to liveview (& elixir)
God tier explanation
Thank you very much. This is one of the best overview I have watched.
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
Good lean instructions, thank you !
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.
"This is crazy", well you've perfectly captured my thoughts, but I am always open to new ideas. Great video!
Thank you for putting this together! Well done!
Bravo. Best explanation I’ve seen on the subject
Thank you for sharing this! Super helpful. You almost sound just like Guy Raz on How I Built this.
This is simply fantastic. Very well-explained, and no cruft!
Wow, very very very very nice explainer, thank you for doing all the hard work to make things simple for us newbies.
Good job. As someone browsing this technology, you have me interested to learn more.
High quality content. Thank you!
Awesome presentation. Thanks
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.
Very well explained, comment for the algorithm
nicely explained ...
Fantastic!! Your animations make it much easier to understand!!
All the best!! 🎉🎉🎉
What an awesome introduction to such an awesome stack
This was super awesome for getting the "how" in a really nice, digestible way. Successfully subscribed 🔔
Great video, but what if you wanted to build a mobile app?
Thank you this is awesome
Amazing video. Thanks
Really very nice intro on the technology
Really good intro for liveview, thanks.
I really enjoyed this video, thank you!
Great video! This is super cool; thank you for the introduction.
Great video!
What software do you use to make the animations?
Keynote?
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.
I really add the arrows you put to point some text it really help.
the rhythm is good to.
Very well job :thumb_up: :)
Brilliantly explained!
Explains very nice, congratulations!
Excellent intro
If I misunderstood what was said in the video, please feel free to correct me.
But what was mentioned at the 21:19 minute mark in the video discusses how Phoenix's front-end works and inefficiency in SPAs. However, this is not necessary true, LiveView works differently from other frameworks like Django. If you make a state change in a web application, the entire page won't be reset; only the necessary part will be updated. When updating the state of a page in Phoenix LiveView, the server does not send the entire HTML or anything like that to the client to refresh the page, but rather only the necessary values via WebSocket.
If anyone is interested in this topic, you can check this video th-cam.com/video/U_Pe8Ru06fM/w-d-xo.html , at the 20:18 minute mark to see how the server sends information to the client, and at the 21:26 minute mark to see specifically how only one HTML element is updated.
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
....
This is a really well-done introduction. Thanks!
And for more complex applications - how does modules interact with each others? Thru the common state?
really nice explanation, thanks!
Excellent!!
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?
wow! just wow, thanks for this mind-opening intro
Excellent video and intro to LiveView! :)
I find multipage is more complex than a single page when you said using a framework (React/Vue) that bar should decrease and not increase because they make the process easier and not complex
What's your editor font?
Great video!
Source Code Pro
very nice, is it possible to write a stand alone Android application using Elixir/Fenix?
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 ;)
Thanks for share it, btw your course includes LiveView features??
** (ArgumentError) assign @count not available in eex template.
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?
Really good content, thanks. Does someone know, how it compare with livewire from laravel?
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
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.
Very good introduction.
Is there any example that you can look/inspect? That is "online" on the Internet?
What's your thoughts on Hotwire?
With AnyCable?
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
We made it to 1.0
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?
Million websocket ability is surprising.
this feels like its next level server side rendering lol
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'
For you Elixir veterans out there, I'm finding the Elixir syntax to be quite daunting and unintuitive. Is this a normal feeling for a beginner? Will it get better over time?
Also, things seem very verbose. At least in this example.
Hey, know then website isn't working bro. Anyway you can help?
I am from future, this video will help a lot even in 4 years later 😅
Great content!
If it sends the new html on each state change how does it update only the specific part of the dom?
Pretty cool
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
How does this compare to C# Server-side Blazor?
I would like to point out that the complexity for the SPAs is a bit exaggerated.