Phoenix LiveView for web developers who don't know Elixir.
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...
Пікірлер: 155
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 :).
@gerardopadilla8527
Ай бұрын
😮m
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:
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.
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 KZread. Thanks for the education!
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!
You clearly know your audience when you opened the network tab and showed the traffic coming back to the browser. Good job man.
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.
Congrats for the best intro to LiveView on youtube until now!
Wow, Thank you! you solved my long time question about choosing from single app vs multi-page app vs frame
Fabulous video, as a web dev who prefers Elixir, this was the perfect intro to LiveView
Excellent. Your training course on Elixir and Phoenix is fantastic as well.
Thank you for putting this together! Well done!
Despite having very basic understanding of web development, I could understand everything in this video clearly. Thank you!
This is simply fantastic. Very well-explained, and no cruft!
"This is crazy", well you've perfectly captured my thoughts, but I am always open to new ideas. Great video!
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.
One of the best videos about programming I’ve seen. Hats off.
Thank you, I am learning Elixir right now and this is first video on LiveView that maked sense for me.
This presentation was glorious. Thank you!
This is amazing. Extremely good explanations and nice use of illustrations. Subscribed!
This is a really well-done introduction. Thanks!
Great video! This is super cool; thank you for the introduction.
Fantastic!! Your animations make it much easier to understand!!
Excellent video and intro to LiveView! :)
Good job. As someone browsing this technology, you have me interested to learn more.
I really enjoy your teaching style. Getting into Phoenix and having trouble finding good tutorials but this hit the spot
Stupefacente! 2 anni dopo ma ho avuto l'illuminazione! Grazie! Amazing! 2 years later but I got the enlightenment! Thank you
Thank you very much. This is one of the best overview I have watched.
wow! just wow, thanks for this mind-opening intro
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.
Good lean instructions, thank you !
Explains very nice, congratulations!
Awesome presentation. Thanks
very undestandable and easy to munch video with detailed and great explanation....good work
Brilliantly explained!
High quality content. Thank you!
Really good intro for liveview, thanks.
What an awesome introduction to such an awesome stack
Bravo. Best explanation I’ve seen on the subject
I really enjoyed this video, thank you!
really nice explanation, thanks!
This was super awesome for getting the "how" in a really nice, digestible way. Successfully subscribed 🔔
Very well explained with simple example
Amazing video. Thanks
This is an amazingly well made intro to liveview (& elixir)
All the best!! 🎉🎉🎉
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.
Very good introduction.
I really add the arrows you put to point some text it really help. the rhythm is good to. Very well job :thumb_up: :)
Thank you for sharing this! Super helpful. You almost sound just like Guy Raz on How I Built this.
Really very nice intro on the technology
Great content!
Thanks for share it, btw your course includes LiveView features??
nicely explained ...
Very well explained, comment for the algorithm
Great video! What software do you use to make the animations? Keynote?
Thank you this is awesome
In case anyone is following along in 2022, mount now takes three arguments: params, session, and socket
@jamievaughn9845
2 жыл бұрын
Thank you, saved me so much time trying to debug!!
@jasonpaden8641
Жыл бұрын
Thank you!!
@rapidsnailshellzz
11 ай бұрын
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
Excellent!!
Excellent intro
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.
Awesome presentation. Does Phoenix Live View automagically fallback to polling when web sockets are not feasible?
@knowthen
4 жыл бұрын
It can be configured to fallback to do this.
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
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?
Really well produced video! I'm thinking about doing your elixir/phoenix course. does it also cover liveview?
@knowthen
4 жыл бұрын
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
@SamOween
16 күн бұрын
We made it to 1.0
Great video, but what if you wanted to build a mobile app?
And for more complex applications - how does modules interact with each others? Thru the common state?
Hell yeah!!! Is this LiveView practice in the course as well?
@knowthen
4 жыл бұрын
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.
@solvm1652
4 жыл бұрын
@@knowthen - Gotcha. So, it would be possible to make the voter app in the course using LiveView instead of React, right?
@knowthen
4 жыл бұрын
@@solvm1652 Yes totally doable, and it would be a much much simpler solution.
@solvm1652
4 жыл бұрын
@@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.
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 ....
What's your editor font? Great video!
@knowthen
3 жыл бұрын
Source Code Pro
Pretty cool
very nice, is it possible to write a stand alone Android application using Elixir/Fenix?
What's your thoughts on Hotwire? With AnyCable?
If it sends the new html on each state change how does it update only the specific part of the dom?
How does this compare to C# Server-side Blazor?
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 ;)
Is there any example that you can look/inspect? That is "online" on the Internet?
Also, wouldn't it increase server costs if you are rendering views on the server?
is this similar on how livewire for laravel works?
Million websocket ability is surprising.
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?
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 font are you using in your code editor? :-)
@knowthen
4 жыл бұрын
Source Code Pro - fonts.google.com/specimen/Source+Code+Pro
I am from future, this video will help a lot even in 4 years later 😅
Is it realistic for a team of 20 to get a medium sized app from NodeJs to Elixir in a year?
would do you mind explain me mount/2 and mount/3 difference please
@marco70183
3 жыл бұрын
I'm really sorry, it means arguments function, I hope I be well, Greetings from Mexico
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'
This is amazing. Why so few views?
@MMMF2023
4 жыл бұрын
FP os still a niche. That's why. Give it some time. :)
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.
@hkrazy8
3 жыл бұрын
elixirforum.com/t/liveview-argumenterror-assign-count-not-available-in-eex-template/30580/2
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)?
@knowthen
4 жыл бұрын
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.
@ericchua3492
4 жыл бұрын
@@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?
@knowthen
4 жыл бұрын
@@ericchua3492 I'm not adding any videos right now, but at some point I'll evaluate a course update where I'd add videos...
@ericchua3492
4 жыл бұрын
@@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
@knowthen
4 жыл бұрын
@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.
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
** (ArgumentError) assign @count not available in eex template.
i'm crying man... i'm crying...
I would like to point out that the complexity for the SPAs is a bit exaggerated.