
Build a real-time Twitter clone with LiveView and Phoenix 1.5 - chrismccord
https://www.phoenixframework.org/blog/build-a-real-time-twitter-clone-in-15-minutes-with-live-view-and-phoenix-1-5
======
neya
I was a Rails user for almost a decade. I switched to Phoenix/Elixir 3 years
ago. Elixir is a super simple language. It has no OO concepts and everything
is functions first. In fact, it's so good that I started teaching it for
universities. All my production web applications are now fully on Elixir.

Elixir is one of those languages where everything has been done perfectly as
of the time of this comment. When I say perfect, I mean, there has been never
once in my career where I hit a roadblock due to the language's limitation or
complexity or flawed assumption. I faced this with other languages, but not
Elixir.

I'm currently a full time consultant writing, teaching and deploying
production apps for clients in Elixir. Most of my apps have served my clients
well beyond my contractual agreement. It's almost deploy and forget because of
Phoenix. It also scales amazingly well. It's extremely performant.

I just re-wrote the entire crappy mess Wordpress core in Elixir and enjoyed
the process. In any other language, I wouldn't be saying the same. It's really
an enjoyable language that forces you to rethink the way you write code. Don't
be put off by this statement, I mean that in a really good way. And once you
start thinking interms of functions, you just won't touch any of those
terrible OO programming paradigms (Eg. writing for loops, nesting
conditionals, etc.). You will start writing maintainable, beautiful code.

You will appreciate Elixir a lot especially if you have a background in
horrible programming languages like Javascript. You will literally start
finding ways to use Elixir in your entire stack like I am. It's that good.

Enough said. Give it a shot.

~~~
mcintyre1994
> When I say perfect, I mean, there has been never once in my career where I
> hit a roadblock due to the language's limitation or complexity or flawed
> assumption. I faced this with other languages, but not Elixir.

This is pretty amazing praise! Are many of the other languages you've used
strongly typed? That's the thing that gives me pause - I feel like I rely on
the compiler a lot in languages where it can do a lot for me, and that I'd be
really frustrated managing a large project without it.

I'm not sure what other languages you have a lot of experience with, but does
anything in Elixir stand out to you as the reason dynamic typing works well
there? I think dynamic typing is the main reason I nod along with "horrible
programming languages like Javascript", for instance.

~~~
AlchemistCamp
Static typing is far from a panacea. Don't forget that the rise of Perl and
PHP, and then later Ruby and Python was _in response_ to statically typed
languages like Java.

There are trade-offs.

~~~
nickcox
Don't Perl and PHP both predate Java? By quite a bit in Perl's case.

~~~
pmontra
The rise in popularity can happen later than the creation of a language, see
Python (1991).

In my case I left Java for Ruby for web programming in 2006 because working
with Rails was infinitely easier than working with Structs. I didn't even know
that Ruby was a programming language before Rails.

------
benja123
Congratulations Chris, Jose and the Phoenix core team on Phoenix 1.5 and the
livedashboard.

I used liveview in [https://readastorytome.com](https://readastorytome.com). I
posted it here last week and it stayed on the front page for a good few hours.
I was concerned about load, so before I posted it I upgraded my $5 DO box to a
4 core box which turned out to be completely unnecessary. The CPU load stayed
in the 2-3% range the entire time it was on the front page, which is pretty
amazing considering how much traffic was coming in. Funnily enough I came
across the livedashboard repo just before I posted it, so I set it up and I
was using it to monitor my app live while it was on the frontpage of HN.

The dev experience is pretty amazing - I don't think I would have been able to
write this app as quickly and to add new features at the pace I have been in
any other language.

So thank you Chris, Jose and the Phoenix/Elixir team.

If anyone has questions about my experience with liveview free free to ask -
either here or by email - ben@readastorytome.com

~~~
hartator
Are the people videos streamed via LiveView as well? Super impressive.
Congrats!

~~~
benja123
No - video stream is webrtc, pdf viewer is pdf.js

We use liveview + hooks(where necessary) for all of the interactive parts on
the site, switching pages, changing books etc...

------
chrismccord
We are really excited about this release! I also wanted the screencast to be a
single take, so I'm happy to answer questions if there are gaps to fill in for
things I could have explained more clearly.

~~~
miki123211
Any hope of getting this as a text article, or even a git repo? Blind user
here who can't see code embedded in a video, but can read ascii-text with a
screen-reader perfectly fine.

People who don't enjoy videos for various reasons would probably like a text
version too.

~~~
anw
Hi miki123211, I wrote up a transcription for you. It details the code he's
talking about, along with the context of what's going on, and why.

[https://pastebin.com/raw/WxH0uAsf](https://pastebin.com/raw/WxH0uAsf)

If Pastebin doesn't work for you, let me know and I can get it hosted at a
different location.

My apologies if there are any mistakes in this. I'm not familiar with Phoenix,
but found this video very interesting, so wanted to make sure it could be
shared.

~~~
miki123211
Thanks, that works. The raw link is perfect for accessibility, as there's no
garbage on the page.

------
rubyn00bie
Oh, holy crap, I'm stoked, as someone who has just started using LiveView
after like too many years of single page apps... all I can say, is "oh fuck,
did we get it wrong." The experience is truly great. Also, LiveComponents are
pretty awesome since they don't have their own process, just mount in existing
LiveView, it makes 'em really easy to reuse and performant (at least from my
experience so far).

Writing UI code, in a language/environment that has first class support of
pattern matching is like a dream for me. Seriously, pattern matching is sooo
good when you don't have fucking classes and objects and bullshit
"abstractions" in the way of your data.

Also, if you took a stab at it before 1.5, try it again. This release has all
the goodies to make it nice and documentation to go with it... I'm stoked to
delete the phx.live generators I copy-pasta'd into my repo from phx master a
couple weeks ago trying to get my bearings.

Truly awesome work on this! Thank you so much.

Also, pro-tip, use the generators at least once, even if you have already used
live view without 'em, because now there's more or less an official pattern
for how to organize yer live code and it really helps.

~~~
czbond
I feel your pain on SPA's.... I feel like code velocity drops on small teams.

What about LiveView/Phoenix made the process more enjoyable - let's call it
'less painful'?

~~~
rubyn00bie
Oh, yeah, here we go:

1\. Tooling, yeah, you gotta have node installed, but that's pretty much the
last time you have to touch it. I'm not anti-node or anti-js by any means, but
the tooling around them often turns me off. Getting to do front-end work
without _having_ to think about 'em is a breath of fresh air.

2\. Less duplication of effort. I don't need to define schemas twice... once
in the "backend" and once in the "frontend" application. You don't think this
is bad until you spend two hours adding a adding, removing, or changing a
simple property to your application because you have to update the backend,
the backend's api docs, its tests. Then on the frontend, adjust the schema,
adjust the frontend tests, and finally see if it's working.

3\. Faster iteration. I prepare a new context, and can immediately consume it
in a view. Views are reloaded instantly when changes are made during
development reducing the time it takes to get feedback and increasing how fast
I get shit done. Also less duplication of effort REALLY helps here...

4\. We (at least me) got S(F)PA idea totally fucking backwards. The idea isn't
to make you're entire web site a Single Fucking Page Application, but to make
individual (single) pages which NEED TO function like applications do so...
Quintessential examples that do _NOT_ need an SPA: a fucking FAQ, about, or
contact pages. In fact, having an "application" on top of them is more burden
than not.

5\. CSS is really powerful these days and provides a lot of what the 2008-2012
JS movement was trying to do. If I combine that, with being able to re-render
only part of the page, I've got almost the entire flexibility of what SPAs
offer with almost none of the complexity.

6\. Going to a new page, and causing a page refresh, but totally knowing the
next page isn't going to be broken because of the previous page's state. Page
refreshes are awesome. Growing up on 28.8k that wasn't the case, but ever
since I got above 10Mbps its really not something I ever even notice (though I
do notice when pages are broken that shouldn't be because they're SPAs and not
just fucking content).

I could probably keep rambling but I'll stop here...

~~~
theonething
For point #2, it gets even worse if you're doing GraphQL. Another layer of
data abstraction on the backend to update and worry about and another layer on
the frontend as well (using Apollo, etc)

------
chriszhu12
I've been following this project for 5 years now, and I've really hoped it
would take off. However, part of what made (and to some extent, still makes)
the Rails framework so great is the surrounding ecosystem of well supported
gems that makes building tedious things a breeze.

I built a few things in Phoenix in the past, and while the core framework is
very simple and elegant to use, I recall having to write my own file uploading
library because the one that existed had almost no documentation. This made me
really hesitant to adopt Elixir / Phoenix stack for any projects I'm serious
about.

I was hoping there was a world where most of the old rails community moved
onto phoenix, but in the time this project has been around, it seems the
backend web stack has really fragmented into a multitude of Node, Go, python,
etc, while Phoenix hasn't really grown its mindshare.

For former Rails / Django devs who has made the switch: what are your thoughts
on this?

~~~
ithrow
This happened to me with Clojure. You really get to appreciate languages with
big ecosystems when working on niche languages. It's sad because these
languages are more enjoyable to work with IMO. Thy are better cause they had
the advantage of being created much later than the mainstream ones but that
also means they had hard competition.

~~~
jtth
Seriously. I would love to work at this level of abstraction in Clojure, but
to do something that is trivial in Rails with something like Devise is a chore
in Clojure, and you have to put it all together yourself. Of course this makes
it excellent for learning, but not so great for deadlines. More and more I
think I might've made a mistake trying to do basic CRUD web stuff in Clojure
for my current project.

~~~
syspec
Interestingly one of the creators of Devise is the creator of Elixr

~~~
bostonvaulter2
And is currently working on an authentication "framework" (more like
generators IIRC)

------
rozap
I wrote a little app recently to test out live-view. It was my first time
really working with it, though I've been writing elixir for years.
[https://gif.energy](https://gif.energy)

Didn't really have any issues. There were maybe one or two gotchas but they
were explained clearly by the docs (appending vs updating elements) and I was
able to get it sorted easily. That whole app took a couple days, but more than
half the time was wasted on iOS not supporting mp4 and webm formats for the
animated shots in the chat messages. Unfortunately, liveview does not fix
Apple's stupid walled garden.

Overall it was a great way to minimize the javascript involved. It doesn't
make sense for certain types of apps, but it really adds a ton of value and
saves a lot of time when the use case is right. And it performs really well.
Loading and rendering a chatroom full of messages (with animated gifs in each
message) makes a couple requests and happens in less than a second.

And combined with phoenix presence it was like...5 lines of code to add
realtime online/offline statuses for users. Super cool.

~~~
ishwarn
> It doesn't make sense for certain types of apps, but it really adds a ton of
> value and saves a lot of time when the use case is right

What are some of these use cases?

~~~
nathan_long
The common retort from SPA devs is "what about offline?" Since LiveView keeps
state on the server, it doesn't really work offline.

However, 1) you can add custom JS using LiveView's hooks, which might be
enough for very simple offline behavior and 2) many SPAs don't work offline
either.

If offline support is a major part of your app's design, LiveView isn't a good
fit. But you could still use Phoenix Channels (the building block underneath
LiveView) to provide fast push updates to your client. See the channels docs
for an idea of how they work -
[https://hexdocs.pm/phoenix/channels.html](https://hexdocs.pm/phoenix/channels.html)

------
voppe
This just keeps getting better and better. Thank you for your effort.

I'm a big fan, Elixir + Phoenix is excellent enough, and LiveView is what
really sealed the deal for me as the perfect web development stack. It's
simple, it's fast, it works. Sure, it has a few rough spots that have to be
worked around when you start to push its limits, but as this blog post showed
it's perfect to quickly have a working web application by completely skipping
having to write client-side code. I developed a couple of prototypes and
single-use applications in hours that with any other stack would have taken me
days. Hell, I'd argue that in some cases it took me less time to complete my
app with LiveView than it would have taken me to setup Webpack with Frontend
Framework.

I don't believe it to be a silver bullet for sure, and it has to prove its
worth at scale, but it gives excellent results with little effort, and
honestly the reduced tedium is worth it on its own.

Also, protip: try LiveView with Tailwind CSS.

------
banashark
For those wondering how this works under the hood, there is a great
presentation:
[https://www.youtube.com/watch?v=9eOo8hSbMAc](https://www.youtube.com/watch?v=9eOo8hSbMAc)

I wrote out a quick analysis of the details there along with some looking into
the backing code in text format here:
[https://github.com/SaturnFramework/Saturn/issues/228#issueco...](https://github.com/SaturnFramework/Saturn/issues/228#issuecomment-614317426)

------
msie
I recommend this free Phoenix course:

[https://shankardevy.com/phoenix-inside-out-mpf/#mastering-
ph...](https://shankardevy.com/phoenix-inside-out-mpf/#mastering-phoenix-
framework)

I found it more approachable than the PragProg book. Helps if you've dabbled
in Rails a little bit.

------
faizshah
Question to the former Rails devs out there:

We mostly see threads fawn over Elixir and Phoenix, have you experienced any
downsides to switching? Anything you miss from Rails?

I'm convinced to give it a try after that demo!

~~~
itake
It seems like a lot of companies are moving to Go for fast services. As a
rails dev for 10+ years, I am looking at Go instead of Elixir and Phoenix, b/c
Go is a much more popular language than Elixir.

~~~
aczerepinski
I’ve invested a lot of time into both Go and Elixir. I like both languages a
lot.

My anecdotal view of the marketplace is that Elixir recruitment emails tend to
come from startups looking for their 2nd or 3rd dev, usually full stack, and
the salaries are nothing special. Go recruitment emails tend to come from
bigger companies looking for backend devs, often hoping for kubernetes
experience too, and the pay is higher.

I built an internal service with LiveView at work and I loved it. I gave a
presentation about how it all works and was hoping it would catch on. It
didn’t. The front end team would probably mutiny if we told them to give up
React and level up their LiveView skills.

If I were running a web business as a solo founder I would 100% want to use
LiveView. As a dev on a larger team that already has specialization it’s a
tougher sell.

~~~
leorio
what would you say are the benefits of using LiveView over react?

~~~
rvense
With LiveView, you've got one code base. There's no frontend/backend split, so
you don't think about the API, you don't worry about going back and forth
between JSON and all the associated error handling, you don't worry about
versioning and keeping deployments in sync when/if you break APIs.

You shouldn't really compare it to React, you should compare it to your whole
stack, and see how a lot of the code and the worries just kind of go away.

This is much like how it used to be with classic server-side rendered
Rails/PHP/Phoenix... except with LiveView you can update part of the page
running on the client, in response to events coming from the client without a
page refresh.

------
brightball
This is by far the most amazing demonstration of framework capability that
I've ever seen. I'm stunned.

 _HOW_ do you manage to broadcast only the minuscule change of a number to all
of the connected clients with server side rendering? I'm trying to wrap my
brain around it.

~~~
nathan_long
Chris McCord has given some talks and explained this - eg see
[https://www.youtube.com/watch?v=8xJzHq8ru0M](https://www.youtube.com/watch?v=8xJzHq8ru0M)
at about 22 minutes in

------
gprasanth
I've been writing code for close to 10 years now and I see this and feel like
what a beginner would feel trying to understand assembly code. Or someone
hearing a similar but new language.

Looks to me hours of work and learning got abstracted as under the hood
"magic".

It's like saying: Oh, so I've been weight training for the last 17 years and I
should tell you Olympic silver is not too hard, see?

Am I right in my thinking? or is learning to be this proficient with the
framework not as time taking for a novice developer as I think it to be?

~~~
brightball
There's no magic. It's functionality that's made possible by the BEAM. It's
just one of those things that came out of realizing how powerful the runtime
was for handling certain types of problems.

When you combine a couple of those bits together, you end up with this.

The only modern web problem that Elixir isn't ideally suited for is heavy
number crunching. Otherwise it gives this amazing balance of efficiency,
scalability, reliability, maintainability and capability that can't be
replicated in any language that has a shared memory model.

~~~
IanCal
I'm of a similar view to them, this felt like lots of magic or at least lots
of gotchas I can see myself hitting. I saw two function definition types (def
and defp), pattern matching input then requiring a caret for the variable name
(?), passing in "assigns" but then referring directly to other variable names,
pipes, etc. There's a lot there compared to when I've worked in Erlang.

~~~
lawik
Gotchas, probably some of those. Both in Elixir and Phoenix. It is an entire
language plus an entire web framework.

A lot of people find Elixir more approachable than Erlang. But I wouldn't be
surprised if Erlang is technically simpler and as such potentially easier to
learn. The syntax is quite foreign to most people coming from more
conventional languages while Elixir reads and writes fairly conventionally.

Now Phoenix LiveView does a lot for you, so I wouldn't dismiss the claim of
having some magic in there. But once someone starts to get familiar with the
stateful approach the model is fairly simple and the "magic" is less mystical.
A lot of the things you don't need to pay attention to would be optimizations
in markup and templates and how the JS does its job. That's where a bit of
magic happens.

Most of the things you mention sound like things about the language. Which I
found to be very approachable and the onboarding documentation to be great.

------
leeoniya
> On the heels of the official LiveDashboard release, Phoenix 1.5 projects now
> ship with LiveDashboard by default, for real-time performance monitoring and
> debugging tools.

and it uses uPlot [1][2] in the metrics panel :D

[1]
[https://news.ycombinator.com/item?id=21207132](https://news.ycombinator.com/item?id=21207132)

[2]
[https://news.ycombinator.com/item?id=22567922](https://news.ycombinator.com/item?id=22567922)

------
codegeek
I have been watching Phoenix/Elixir for a while and wondering if it has gained
a lot more traction compared to say 2 years ago ? My choice of full web app
framwork is Symfony/Laravel (PHP) or Python (Flask/Django) but I really like
what Phoenix has to offer.

However, does it have a mature ecosystem now ? What about deployments and
tools around it ? Does it work with generic web servers like Nginx or does it
run its own http server ?

~~~
thruflo
I’m a long time Python dev converted to Elixir (for ~3 years now, mainly web
dev and data pipelines).

The tooling and developer experience in Elixir is first class and the
ecosystem is highly mature.

~~~
neillyons
Coming from Python as well I'm really impressed with the tooling. `mix new` is
just amazing.

------
dangerboysteve
The video is hilarious in a good way. You can hear the disbelief and amazement
in Chris McCord's voice when Liveview works as he (and team) developed it.

~~~
dyren
Disbelief might be a stretch, but he is clearly extremely excited about the
recent advancements and proud of what the team has been able to accomplish.

I agree that it's fun to witness that level of passion and it makes me happy
that Chris is so amped about this.

------
darepublic
Looks interesting but I am not interested in making timelines .. is this
Phoenix framework general enough to make arbitrary real time web apps?

~~~
rglover
Yes, think of it like Rails for the Elixir language.

Phoenix -> Elixir

Rails -> Ruby

~~~
bostonvaulter2
But without requiring all of the ActiveSupport patches to the base language!

------
jamil7
I've been observing Elixir and Phoenix from the outside for 4 years or so now.
There was a lot of initial hype and it died down a little bit but I'm really
happy to see how far it's come and how polished everything looks. The lack of
static typing initially made me pause but maybe it's time to get over it. As
someone who tends to program in a functional style anyway (if a language
supports it), losing the overhead of OO paradigms would not be a deal breaker
and probably pretty liberating.

------
namelosw
When I see a Phoenix post, I upvote. It's so great in terms of almost
everything - simple, productive, powerful, and fast. If you're a web
developer, go try it out if you haven't.

I might be too greedy, but if there could be a solid JavaSript support
Elixir/Phoenix just like ClojureScript that would be perfect. Phoenix and
Liveview are great, but I really hope it can extend its reach to React Native
and Electron so that we don't have to write too many extra things for those
platforms.

~~~
nathan_long
Lumen may be the answer to this in the future:
[https://www.youtube.com/watch?v=uMgTIlgYB-U&list=PLqj39LCvnO...](https://www.youtube.com/watch?v=uMgTIlgYB-U&list=PLqj39LCvnOWYTNs1n3ZNMSNO3Svv_XweT&index=3&t=0s)

~~~
namelosw
Yeah, really looking forward to see this project keeps growing! I really hope
we can use it in projects soon.

Implementing runtime for Elixir in JavaScript is quite challenging IMO. Kudos
for Dockyard trying to tackle this.

------
overcast
Lack of built in user authentication kills this project for me, that's just
something I don't want to deal with building my own anymore after django.

~~~
chrismccord
We are actually working on a `mix phx.gen.auth` generator. Check Dashbit's
blog about it:

[https://dashbit.co/blog/a-new-authentication-solution-for-
ph...](https://dashbit.co/blog/a-new-authentication-solution-for-phoenix)

------
anthony_doan
I'm so happy. Just got back to my side project and Phoenix 1.5 is released.

Thank you Chris and Jose and all those who were and are involve with Phoenix.

------
holtalanm
This is pretty darn awesome. I remember looking at LiveView a few months ago
and being impressed. Elixir and Phoenix are still my favorite backend to use
for personal projects, but now with LiveView I'm thinking I'm going to start
using it fullstack.

------
Pmop
I like the smell of new, well designed technologies.

------
jakearmitage
How would this scale for, I don't know, 10k concurrent users? Would a live
chat app be reasonable?

~~~
dorian-graph
Here's an example of using it with 2 millions users:
[https://www.youtube.com/watch?v=c6JcVwbOGXc](https://www.youtube.com/watch?v=c6JcVwbOGXc)

~~~
pdr2020
I'm assuming the parent meant how would this specific configuration of elixir
+ phoenix + liveview scale.

~~~
nathan_long
The answer is applicable. LiveView is implemented using Phoenix Channels.

------
AlchemistCamp
It's so great to see this released. The community has been excited about
LiveView for a long time!

------
jakearmitage
Wish they had an example on data tables, real-time search and other dashboard-
like functionality.

~~~
neillyons
[https://github.com/phoenixframework/phoenix_live_dashboard](https://github.com/phoenixframework/phoenix_live_dashboard)
has tables and real time search.

------
showkhill
Fantastic!

For rails people who are unaware there is already a lib that has copied this
approach.

[https://expo.stimulusreflex.com/demos/tabular](https://expo.stimulusreflex.com/demos/tabular)

------
cvaidya1986
This seems ideal for a social network idea I am cooking up. Is there a
tutorial or course I can purchase like beginner to all the way to deployment
on Digital Ocean or something like that ?

~~~
theagilecoder
Elixir : [https://pragprog.com/book/elixir16/programming-
elixir-1-6](https://pragprog.com/book/elixir16/programming-elixir-1-6) Phoenix
: [https://pragprog.com/book/phoenix14/programming-
phoenix-1-4](https://pragprog.com/book/phoenix14/programming-phoenix-1-4)
Deployment :
[https://www.youtube.com/playlist?list=PLZZkJeUxu6QmO83Z1esRh...](https://www.youtube.com/playlist?list=PLZZkJeUxu6QmO83Z1esRhp3lOeaNKZuXY)

~~~
cvaidya1986
Thanks!

------
swat535
This is excellent and I’d love to look into this .

That being said why would I pick this over go or scala for example ?

I’m having a hard time finding a decent argument in the thread bedside syntax.

Can someone elaborate?

~~~
namelosw
What? It's anything but the syntax. The automatical live updates and the
latency, the diff algorithm and the size of the payload, no
client/api/controllers/routes needed, the scalability and stability, and the
free clustering behind the framework.

Can you rebuild this demo in Go or Scala in 15 mins or in 1 hour, correctly
push any updates to the client while maintaining the robustness and sharding
across the cluster? Writing stateful services correctly is very hard using an
average web framework.

I need at least 1 day to implement the same in Go or Scala, only the
functionality but neither the clustering nor the optimization. And I'm
considering I myself a functional programmer that is very familiar with Scala.

------
julioo
What if you get disconnected due to bad network (LTE in transport). The
reconnect will recover the state from the server or you loose everything ?

~~~
josevalim
It automatically reconnects. I wrote about the client/server state here:
[https://news.ycombinator.com/item?id=22897436](https://news.ycombinator.com/item?id=22897436)

In a nutshell, temporary state in the client (URLs, forms) are resubmitted on
reconnect. The server state is typically backed by a database.

------
PudgePacket
Anyone know where you'd get started with T&C's/PrivacyPolicy if you were
actually taking something like this live?

