Rails: How to build a blog in 15 minutes. Phoenix: Hold my beer...
@RsZ789
4 жыл бұрын
More like hold my pipe
@giray2529
4 жыл бұрын
actually rails can build a blog with comments in a second.Also if you want to add user authentication well you can do it in 5 mins.
@TheDojoMX
4 жыл бұрын
Hold my live views.
@DevOpsFoodie
4 жыл бұрын
@@RsZ789 Nice, I see what you did there!
@KapnKregg
4 жыл бұрын
Phoenix < 16 years later > : Hold my beer
@carlheinz.conradie
4 жыл бұрын
Chris loved your energy on this video! Keep up the great work. Jumping into Phoenix ASAP!
@ParsclickTV
4 жыл бұрын
Man, this is a revolution ! I'm so excited.
@tonero5651
10 ай бұрын
the amount of effort it takes to do this on JS is insane. Phoenix deserves more flowers
@silviuiacob4013
7 ай бұрын
really..what do you use ?
@MartinJahn
4 жыл бұрын
Few years ago I watched a video how to write wiki in Django. I was impressed but nothing special. But this? I started to play with Phoenix two weeks ago. It is far easier to write in functional language than I initially thought. This video just blew mi mind. It seamed just too good to be true. But it works! I dreamed of something like this but in Python this would not work and you made it possible.
@RsZ789
4 жыл бұрын
Elixir seems too good to be true. Less code , more expressive, no inheritance. Don't get me started with testing being a first class citizen and how amazing the error messages are
@MartinJahn
4 жыл бұрын
For Python/Django or Elm programmer those error messages are not so impressive. Also integration with Sentry could be better. But I've seen Erlang. I think it's much better.
@losing_interest_in_everything
Жыл бұрын
The most interesting 17 minutes I have seen in my professional life. Your video made me want to program in Elixir
@Jckinthbxxx
16 күн бұрын
A year later and I still feel the same way
@losing_interest_in_everything
16 күн бұрын
@@Jckinthbxxx And you should do it ^^
@MrZiyak99
9 ай бұрын
can someone explain to me how this scales. im from a react spa/server components background. my understanding is websockets would mean multiple instances to handle load. if one client is connected to one instance and another to a second instance how would pub/sub communicate? is there some centralized manager to make sure events are propogated or are all instances interconnected? am i totally off track and does pub/sub actually send events to external services? also how would we scale this pub/sub for load? thanks a ton for this vid liveview looks sooo cool
@marcelaodev
5 ай бұрын
yes you need to make sure instances are propagating
@TheLeo328
4 жыл бұрын
Hey Chris, this is great. Thank You. You went a little fast at 6:50 - do you have the boilerplate html that you pasted in there? I'd like to follow along properly. I was trying to type it all out but couldn't get all the text from the video.
@_rohitag
4 жыл бұрын
You can find the repo here: github.com/dersnek/chirp/blob/master/lib/chirp_web/live/post_live/post_component.ex
@sbrugby1
3 жыл бұрын
The move at 6:50 wasn't cool. Just dropping a giant block of of that with almost no context feels so bad to me as a viewer. The github repo isn't even listed in the description. Luckily digging through the comments someone has found the file in question.
@thomasblevins5787
3 жыл бұрын
@@sbrugby1 Yeah its unfortunate but luckily Leo though for us.
@stevenstone307
Жыл бұрын
it's just html
@Jckinthbxxx
16 күн бұрын
@@sbrugby1 It is just a peace of simple HTML. If that scares you, I would recommend going through some HTML basics, there are plenty resources out there 👍
@peerhenry
2 жыл бұрын
As someone who is trying out Elixir and Phoenix for the first time, this is not a good guide. It does not show when or how style sheets are included, and the markup pasted at 6:50 is not properly visible.
@HubertRozmarynowski
Жыл бұрын
Do you know any god-tier guids for Phoenix v1.6? Learning as much as I can currently, mainly from the docs.
@Tobarja
4 жыл бұрын
Note: You get a completely different error at 1:49 if you don't have postgres installed(or running). [error] Postgrex.Protocol (#PID) failed to connect: ** (DBConnection.ConnectionError) tcp connect (localhost:5432): connection refused - :econnrefused
@Anonymous-np5hk
2 жыл бұрын
Is the real-time server-side validation something that you'd want to do at scale, e.g. Twitter scale? I'd imagine that this would consume quite a lot of resources that you'd have to pay for vs. letting the client pay for it.
@sergiopereira
2 жыл бұрын
Probably not at Twitter scale, but let's keep things in perspective. Nobody starts building something that can handle that kind of load. If you start getting that popular hopefully you'll have funds to address the situation. You'll also still have to run that validation on the server before accepting the user input, but I get what you're saying. All the "chatty" real-time validation working on the server definitely requires more resources.
@defnlife1683
Жыл бұрын
There is an argument to be made that it would actually consume a lot less than what we would imagine thanks to the Erlang VM. Whatsapp and Discord, etc.take advantage of that efficiency.
@_FFFFFF_
Жыл бұрын
I would disagree. The server side validation for length is very low and the beam VM easily handles this kind of work. It maintains the browser state in the server VM, so the string length comparison is tiny.
@georgemantzouranis5889
4 жыл бұрын
Fantastic work as always Chris! One question: do you have any css predefined? My result was a bit different and I use phx_new 1.5.1. Not very important, but it got me scratching my head if I have something wrong setup :) Fetching font-awesome fixed half the problem, but the popper notification and the look of the divs were a bit off still.
@masoomsanadi
Жыл бұрын
no reply (after 3 years) eye-brows up. still good explanation
@e79905
Жыл бұрын
This is fast to make but so friggin complex. So many magic and so brittle. New versions changed quite a lot and it’s really hard to debug.
@IgnorablePanda
Жыл бұрын
Mind explain what do you exactly find complex and/or hard to debug?
@masoomsanadi
Жыл бұрын
no reply to any comment can be called a problem. rest is fine
@HubertRozmarynowski
Жыл бұрын
One of the most exciting demos I've ever seen... Just wow.
@typingturtle5155
4 жыл бұрын
I'm skeptical, "easy" doesn't mean simple and sometimes the difficult but simple solution is better for maintenance. I don't know enough about phoenix to gauge simplicity here.
@timc3
4 жыл бұрын
Need many more videos like this. So much easier to learn from than the Phoenix docs.
@corynorris7300
4 жыл бұрын
I followed along and noticed that once phx-update is set to prepend, the delete no longer renders without a refresh. What's the right approach to also delete items in real time? Just stick to phx-update = reload?
@jackd942
4 жыл бұрын
I noticed that as well and am curious about the best practice for that situation.
@jose-valim
4 жыл бұрын
@@jackd942 Excellent question! Since LiveView tracks entries by DOM ID and each tweet has a DOM ID, you can delete a tweet by rendering an empty div with the DOM ID of said tweet. We want to add a phx-update="remove" in the future too, but the DOM ID trick works for now.
@cheng-hsuandannyhan1442
4 жыл бұрын
@@jose-valim Much appreciated, but is there anything, doc or code, that I can refer to for the implementation of this?
@d7ffab979
3 жыл бұрын
wheres the code. The html just magically appeared at 6:30
@LeCyProductions
2 жыл бұрын
1.6 Version code found here: github.com/Morzaram/phoenix-twitter-example-1.6
@hermiti
4 жыл бұрын
Impressive, yet another reason to switch.
@gabriela.ts_
4 жыл бұрын
I am very impressed and I want to try it out. But I have a question: what about charts or even web apis like localstorage? I would still need to use JS?
@JesseCooke
4 жыл бұрын
Here's the charting component: github.com/phoenixframework/phoenix_live_dashboard/blob/master/assets/js/metrics_live/index.js
@romenigld
4 жыл бұрын
Hey Chris I would like to know how to put the highlight colors on the Sigil ~L " " "? The mine is just one color... And I'm using the Elixir-ls for visual studio code.
@jarvj
4 жыл бұрын
I had both vscode-elixir and ElixirLS installed - disabling vscode-elixir enabled the syntax highlighting
@romenigld
4 жыл бұрын
@@jarvj I ask on the elixir-forum and it was this thank you for reply and your help!
@Houseready01
4 жыл бұрын
Impressive. I just wonder how well LiveView scales as it looks to good to be true.
@rsotelo14
Жыл бұрын
Yeah thought the same thing.
@Buri13
4 жыл бұрын
How do you get the html in the render function to do syntax highlighting?
@SergueiCambour
4 жыл бұрын
Reaaally awesome, Chris. I've heard a lot of Live Views but it's the first time I saw coding it in practice. Thank you very much!
@hsider
Жыл бұрын
Great video Chris, an update with current Phoenix version would be appreciated, I still don't get all of it though, I'm having hard time communicating the show page with the listing page for example, do I have to create another stream for the single post? I don't know, I'll experiment more to see.
@AdolfoNeto
3 жыл бұрын
5:41 An example of error-message driven programming
@ChaseGranberry
4 жыл бұрын
lol edit feature? That's not Twitter ;)
@SEKUNHO
4 жыл бұрын
This is awesome. I followed along and I was blown away by how far you developed this. It's not even 1.0 yet! Awesome work to you guys developing Phoenix!
@Code-Panda
11 ай бұрын
Wow! Really impressive! I wonder to how many hours of development this translates when using a SPA application.
@ThePandaGuitar
4 жыл бұрын
Wtf did I just watch. Did I just waste all my life writing this stuff by hand?
@marcoprins4880
3 жыл бұрын
Can anyone here tell my why people are still stupid enough to build in React.js and build a whole API when they can use this?
@marcoprins4880
3 жыл бұрын
@@Dima1415 I feel that React js is like writing your backend in C++, it takes way too long and doesn’t make sense for most companies
@torrentbits
4 жыл бұрын
I'm not even a dev and I, too, want to learn coding with Elixir!
@prakharsrivastav4120
4 жыл бұрын
Mind = blown! What a demo!
@KevinGenus
3 жыл бұрын
Man ... please tell me you have a video course. This is the style and pacing I love!
@jfjfjf
4 жыл бұрын
I'm confused - why does mix do all this work generating these files and then require you to manually add the live routes to the router file?
@Fran-td8zw
4 жыл бұрын
Because you might not need them at all, also it’s more easy to make a new file that editing an existing one
@BaskinTapkan
4 жыл бұрын
Great demo! got it all working as I followed along. quick question, how did you get the `font-awesome` pulled in - was there another process behind the scenes, some *magic* script? i usually end up mocking with the `webpack` and get it in, but outside of that, i got it all working. Quite impressive. Thanks for all the work
@johnraymon7743
4 жыл бұрын
Nice! First time getting into Elixir & Phoenix; building a prototype.
@saanjaaykumaar
4 жыл бұрын
Lockdown no worries. Awesome stuff to be with. 👍👍👍👍👍
@aissarmurad2973
11 ай бұрын
Thia is so amazing... I have the same filling I had when I saw the DHH 15 minutes presentation about how to create a blog using Rails. So cool
@Alsaraha.
3 жыл бұрын
nice video, but 6:47 you pasted the code that counts
@iaaf919
4 жыл бұрын
That was amazing, Please make more of these sweet videos.
@brucetate839
4 жыл бұрын
I said this on twitter. I can like a model, but I won't know it is right until I teach it. My LiveView classes at grox.io have been an incredible experience. The programming model just feels right because it layers seamlessly on top of what Joe, José, and other functional programmers have done. Beautiful work, Chris.
@LuveenWadhwani
6 ай бұрын
I'm intrigued by the minimal data generated for in-place DOM updates. How can shipping diff-only payloads instead of full fat GraphQL or REST JSON payloads scale to use cases beyond a single-page app? For instance, if I wanted my backend microservice to scale to a variety of clients, including other microservices, Phoenix would need to be backed by a more complex service layer instead of a DSL over the database. I get that this is a toy app made for demo purposes only. Just thinking out loud about how to use in real-world large-scale applications.
@SreyansJainSher
4 жыл бұрын
Awesome stuff. You life gets a lot easier if you use Live View. Thank you so much.
@valberm
4 жыл бұрын
cool presentation, but why do client validation on the server?
@pahazen496
4 жыл бұрын
I believe you always want to verify on the client and double verify on the server
@PRiKoL1ST1
4 жыл бұрын
Hi, cool stuff? Where i can find a code?
@Gydvbgds6564
4 жыл бұрын
@@jjcmp100 Thanks boss, I couldn't see the end of his screen
@buttonsplaymusic4896
4 жыл бұрын
Can I hire you to help me install Pheonix and Liveview on my Linux and help me start coding like this?
@MarkMark
Жыл бұрын
This is the only video I have ever watched w speed under x1.0. 😂
@geoffreyvanwyk4588
3 жыл бұрын
Wow! Instant lists, forms, etc. You can even specify columns for database tables on the commandline. Very impressive!
@MikkoRantalainen
3 ай бұрын
I find that access checking and managing user accounts is the hardest part to handle for this kind of web apps. Obviously this demo skips all of that and has no users and no access checks. And I wasn't too happy to hear that the developer is supposed to guess when the framework is going to do racy code by default and use correct workaround functions. Otherwise cool demo.
@hgezim
6 ай бұрын
An updated video would be great. I'm having trouble at 2:40 replacing component with textrea.
@adamaiken00
4 жыл бұрын
how to set visual studio code with html highlight for leex?
@teolcd
3 жыл бұрын
While it's quite impressive, I'm thinking about how to scale these WebSockets events. Can we customize the events queue somewhere?
@sapito169
3 жыл бұрын
too much magic
@KeithSalisbury
4 жыл бұрын
Very nice Chris, love how much you love it!
@_rohitag
4 жыл бұрын
For people looking for source code: github.com/dersnek/chirp
@bogdantb6136
4 жыл бұрын
Anybody is encountering this error in the console when updating a post: "found duplicate ID 4 for component ChirpWeb.PostLive.PostComponent w hen rendering template"? I tripple checked the code, I am missing something
@mubashirjamali
2 жыл бұрын
What?? As a reactjs dev, I would have spent whole week and still not implement that whole lot of features... What was I doing the whole time? Where were you guys this whole time????? Never wrote a single line of elixir, and still understood 80% of what he did...
@jordancotter5885
2 жыл бұрын
Have you tried it yourself yet tho? I'm having trouble...
@mubashirjamali
2 жыл бұрын
@@jordancotter5885 Not yet, but it's at top of my frameworks list, will be trying in few days. Gotta rid of nextjs project, which is generating 90% unused js in production.
@mubashirjamali
2 жыл бұрын
@@jordancotter5885 What problems are you facing??
@jordancotter5885
2 жыл бұрын
@@mubashirjamali the "mix phx.gen.live" command had normal input but I could never get it to compile after pasting the routes into my code and running the ecto db commands. Something it generated was undefined.
@HubertRozmarynowski
Жыл бұрын
@@jordancotter5885 Maybe I'm naive but are you sure your PosgreSQL username and password are both "postgres"?
@aliaksandrbadretdzinau1672
4 жыл бұрын
Hello, Chris. Can I get sources of this tutorial?
@DmitriDonRU
9 ай бұрын
Is there more recent version of the video... 3 years for elxir is too much, and this video is on the home page!
@yifanwang4906
4 жыл бұрын
Thank you, Chris! This is just beautiful!
@buttonsplaymusic4896
4 жыл бұрын
Can someone tell us what the downsides/flaws are of Phoenix? Because it looks very useful.
@michaelterry7647
4 жыл бұрын
None, really. It's the silver bullet.
@Mylsey4TheWin
3 ай бұрын
Is that a Wunderlist logo I see in the Mac top menu 😮
@PietroYT
4 жыл бұрын
This is the web framework of 2020!
@ИванКривцов
4 жыл бұрын
Thanks for the video. Great job!
@noeldacosta7621
7 күн бұрын
Ok. You lost me at `mix`.
@elxproBR
4 жыл бұрын
Hey Chris can I translate it to Portuguese to my Channel ?
@AdolfoNeto
4 жыл бұрын
Puxa, tive a mesma ideia. Não acho que tenha nada aí que tenha copyright.
@AdolfoNeto
4 жыл бұрын
Claro, mencione e link este vídeo.
@vkray
4 жыл бұрын
Gustavo Oliveira No.
@elxproBR
4 жыл бұрын
@@AdolfoNeto Boa Adolfo Vou fazer isso
@quicktips3858
2 жыл бұрын
Who is using this at scale?
@airbulb
4 жыл бұрын
Incredible - thanks.
@rasiel74
4 жыл бұрын
i try on 11/05/2020 it dont work like the video t-t
@jonocodes
4 жыл бұрын
It's not even 1.0 yet - it likely has changed a ton since then
@AndreasAltendorfer
4 жыл бұрын
Fascinating!
@wafflebatterify
4 жыл бұрын
Convinced.
@vkray
4 жыл бұрын
Nice tutorial.
@randito2387
4 жыл бұрын
you say "as-sings" i say "ass-ings". but seriously, this is amazing stuff.
@moshericoe
4 жыл бұрын
no javascript wow!
@sobreinquisidor
4 жыл бұрын
Holy crap this is amazing!
@NytronX
Жыл бұрын
As someone who hates using Javascript for backend programming, whatever this language is looks even worse than Javascript lol. The further the syntax gets from C/C++, the worse it is IMO.
@darkcl
4 жыл бұрын
this is cool as hell
@omattheuso
Жыл бұрын
i'm having problem right at the begin. At 1:49 when the localhost:4000/post indicates that's missing the DB and than the repos, he just click a button on the page to fix it. The same button isn't shown to me, how can I solve this problem? thanks in advance
@efreitorhabibulin238
4 жыл бұрын
I clicked on this being sceptical, cli file generator caught some attention, then creating DB and migrations from the error page? wut? O.o... validation through sockets! damn, quite impressed! Thanks for the video!
@MrFrumos
4 жыл бұрын
Just amazing!
@dmitriyobidin6049
Жыл бұрын
How efficient is it to keep alive thousands(and maybe even millions) of open websockets? Imagine twitch chat built with something like this - is it even possible to find a server to handle all of this?
@TravisRayLive
10 ай бұрын
Holy... crap. So, I've been developing websites since before CSS existed, and back when HTML was v1. Obviously, I learned CSS, PHP, JS as years went on, became a full on C/C++/C# developer, learned Java, learned Python, etc. But I have to say, I am in love with Elixir, and by virtue, Phoenix. This is some of the coolest tech I've seen in a long, long time. And I love the syntax in Elixir. Very, very cool. This video has helped me decide to dive deeper and learn more. Thank you for sharing.
@m3hr
4 жыл бұрын
If anyone looking for the codes, I manage to code an exact same project without font awesome over here. I wish it'd be helpful. github.com/mehrad/phx_twitter
@PercyMelody
3 ай бұрын
Totally blew my mind, rethinking life choices
@TravisRayLive
10 ай бұрын
Is there any chance you could produce an updated version of this tutorial? You can't really follow it anymore due to the many updates to Phoenix since this video was released, but it's such a good video in terms of the content and ideas behind it.
@thrillscience
4 жыл бұрын
"assings"?
@mammenj
2 жыл бұрын
Is there an update for phx 1.6 ? made it work with 1.6 but the styles are not showing up in the posts page. Any idea how to get the css styles working?
@ldon7319
4 жыл бұрын
So as a Front End Developer this intrigues me a lot. I really like the idea, but this was lightning fast to try and understand. It seems like it eliminates a lot of the complications from using JS. However, the thing I fear looking at this is that it becomes a bootstrap type thing where every site/application looks like it was from a template. Basically what im saying is it looks great for the functionality side but a lot to be desired from a design standpoint. You eliminate the pains of JS, but it seems like you trade them for design pains with this kinda weird template language. All in all i'm still a fan but Im wondering how does this work for a front end developer wanting to make fullstack applications? Or is this only meant to be used for backend developers who want to do fullstack? Either way great video though.
@torrentbits
4 жыл бұрын
I am waiting for a reply on this comment, please!
@DragosTudorache
4 жыл бұрын
i'm asking myself the same questions plus some additional ones, like, debugging code(sourcemaps?), importing libs from npm, lifecycle hooks, weird template syntax, pwas, translating the web apis to elixir, typescript(or other transpiled languages) and the list might go on... all in all this seems to be targeted at the ones that don't want to fiddle(or learn, nothing against that) js or a particular web framework. Regarding the up to speed part, one can just download a react/vue/angular starter pack from github and start building a clone in less than 15 minutes.
@lemmewaaatch
4 жыл бұрын
It's all just HTML with template functions/variables - nothing restricting you. Phoenix does have a lot of HTML helper stuff, but you don't have to use it and the second it becomes limiting you can either write your own functions instead (because again they're just producing HTML) or you just write plain HTML if that's easier. CSS and Javascript are still available too.
@dangggdennis
4 жыл бұрын
As said, you have total control of your styles still. Sane default CSS is totally acceptable and even productive.
@HubertRozmarynowski
Жыл бұрын
This is a non-issue. This video demonstrates how far can you go with limited time, while depending on default HTML layouts, CSS, etc. You can customize everything, at any time.
@pablobello0
4 жыл бұрын
Breathtaking!
@marutha109
4 жыл бұрын
Great thing! Why would not twitter use this? Any justifications? Just because it is too young, if so, reactJS young as well, @twitter #twitter, I assume you use react, any inputs?
@michaelterry7647
4 жыл бұрын
Twitter has too many engineering resources to care about any advantage from this approach at their scale. They have bigger fish to fry. Phoenix is great for prototyping and iterating new start-up ideas.
@AndrewScala
4 жыл бұрын
Question, at 11:54 you set up temporary assigns for the posts list. Does that mean you can assign :posts in the socket to [post] instead of prepending it to posts in the handle_info callbacks? Also how does phx-update handle the post edit? It's configured to prepend, but the edited post is clearly not duplicated at the top. Is it using the post.id to replace that post instead of prepending because the id matches?
@raffomania
2 жыл бұрын
I was wondering the same, and it seems the phx-update attribute can handle updates based on DOM container ids. The LiveView docs say: "When appending or prepending elements containing an ID already present in the container, LiveView will replace the existing element with the new content instead appending or prepending a new element." You can indeed see the id attribute being set in the source code here: github.com/dersnek/chirp/blob/master/lib/chirp_web/live/post_live/post_component.ex#L6 See hexdocs.pm/phoenix_live_view/dom-patching.html for more.
@Yaxqb
2 жыл бұрын
6:55 you can see he defined the id attribute in the html
@lagiator
4 жыл бұрын
nice!
@neilclay5835
Жыл бұрын
Blimey
@ensoxyz2737
3 жыл бұрын
I’m going to try and use this solely as a micro service. My startup is building a social media platform so this could be a good fit.
@evans8245
3 жыл бұрын
He almost shouted, HALLELLUJAH !!!
@hisuixiu336
3 жыл бұрын
can you also make this using sublime text please, stey by step. thank you
@nevermindjusme
2 жыл бұрын
I like how you are excited when the code works
@raymondloranger941
2 жыл бұрын
By moving the like and retweet event handlers to the parent (like for the delete event), the PostComponent can become a function component.
Пікірлер: 204