Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5
Chris McCord7 HN recommenders · recommended in 6 months, 2020-2025
237K views · 6 years ago · tutorial · dated
Phoenix creator Chris McCord builds a real-time Twitter-style app live with Phoenix LiveView 1.5 in about 15 minutes. It shows interactive, real-time updates without writing JavaScript.
HN points people to it as the demo that shows why LiveView and Elixir are worth a look.
1:05:33Keynote: The Road To LiveView 1.0 by Chris McCord | ElixirConf EU 2023
Code Sync
27K views • 3 years ago
1:12:41Chris McCord - Keynote: Phoenix LiveView - Interactive Apps without Javascript - ElixirConf EU 2019
Code Sync
47K views • 7 years ago
57:50ElixirConf 2018 - Keynote - Chris McCord
ElixirConf
32K views • 8 years ago
55:28Erlang Factory SF 2016 Keynote Phoenix and Elm – Making the Web Functional
Erlang Solutions
23K views • 10 years ago
28:34RailsConf 2016 - Rails to Phoenix by Brian Cardarella
Confreaks
12K views • 10 years ago
59:31ClojureScript in the Age of TypeScript — David Nolen
ChariotSolutions
29K views • 5 years ago
5:27Live ClojureScript Game Editor
ibdknox
34K views • 14 years ago
1:50:07JSON Parser 100% From Scratch in Haskell (only 111 lines)
Tsoding
205K views • 6 years ago
50:11Twitter’s Quest for a Wholly Graal Runtime by Chris Thalinger
Scala Days Conferences
3K views • 8 years ago
37:34Zach Oakes - Making Games at Runtime with Clojure
ClojureTV
31K views • 11 years ago
45:31Bruce Hauman - Developing ClojureScript With Figwheel
ClojureTV
56K views • 11 years ago
16:04Redoing Make - Haskell from Scratch #1
jekor
57K views • 13 years ago
1:18:42Web Development in Emacs, Common Lisp and Clojurescript - Emacs SG
Engineers.SG
14K views • 10 years ago
41:09ClojureScript for Skeptics - Derek Slager
ClojureTV
72K views • 10 years ago
1:11:55ElixirConf 2019 - Day 1 Morning Keynote - Brian Cardarella, Luke Imhoff, Paul Schoenfelder
ElixirConf
8K views • 7 years ago
1:10:16Saša Jurić - Parsing from first principles - WebCamp Zagreb 2019
WebCamp Zagreb
6K views • 6 years ago
43:37Lambda World 2018 - What FP can learn from Smalltalk by Aditya Siram
Lambda World
25K views • 7 years ago
46:18Om Next - David Nolen
ClojureTV
44K views • 11 years ago
1:06:26Over the Shoulder 1 - Text Preprocessing in Forth
Andreas Wagner
25K views • 12 years ago
28:39Netflix JavaScript Talks - Async JavaScript with Reactive Extensions
Matt Marenghi
69K views • 12 years ago
13 comments from Hacker News
I've been impressed but what I've seen of the Phoenix web framework. ▶ this video On the F# side: "Where are the F# jobs? I've checked the various FP-centric job-sites - they're as barren as everywhere else. It almost seems as if Haskell jobs are more plentiful! Haskell!" link
HamiltonPractice, REMOTE, INTERNS, ~1000$ pm, 3 months HamiltonPractice is an AI Practice Manager built on the cutting-edge stack. We optimize and encrypt every HTTP call to automate complex healthcare and financial data operations. Our web stack is built on top of Elixir Phoenix MQTT protocol, and our backend processing works on distributed Postgres pub-sub to build efficient and fault-tolerant platforms. We are looking for full-stack functional programmer interns who could join us full-time. Prior experience in open-source projects and functional programming is plus but optional. Assignment (Waived for anyone with meaningful open-source web experience including but not limited to GSOC) Build an authenticated website on elixir live-view ( link , tutorial ▶ this video ). After logging, the user name should be displayed on the logged-in page. There should be an icon on the password button to change the password element to text. Bonus points on deploying the code to fly dot io. Interest candidates please email to hh AT hamiltonpractice.com
The Live View demo or the Rails one? :-) Rails, it was this one 17 years ago: link Live View, I'm not sure which is the first demo. There's "Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5" ( ▶ this video )
Liveview solves the "write a fully dynamic and interactive application with next to zero Javascript that you need to write by hand" or, if you will, "server-driven UI apps". And it's hard to overstate, but to also properly explain, how important this is and how it feels like magic when you do it. Because it lets you tap into everything Elixr (and Erlang VM) have to offer on the backend without ever having to think of "how the hell do I bring all that to the client". My use-cases are: a big chunk of data is being processed, and while its being processed regular updates are sent over PubSub. Most actions a user initiates are long-ish-running and their updates are also sent over PubSub. Things that other users are doing are sent over PubSub and possibly need to be reflected in the UI. In "traditional" JS-on-the-client-whatever-on-the-server model you have a plethora of questions of how to get that to UI: which endpoints to query, which updates to send over the wire, the formats, the frequence, authorisation, auth... With LiveView your "client" is an Elixir view living on the server which just updates the view based on those PubSubs (or timers, or Kafka streams, or user-initiated actions, or...) and LiveView takes care of upating the DOM/HTML in the browser. "Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5" will give a good overview of this: ▶ this video [1] Built-in in Phoenix, link
> 16 years ago, David Heinemeier Hansson (DHH) took the stage and delivered one of the most impressive code demos the world has ever seen. 16 years later there's no tech stack that can replicate this demo (except Elixir LiveView [1]). And yet we're told tech has progressed. [1] ▶ this video
Yes and no. The real answer (with an Erlang bias) is to look at Elixir + Phoenix + LiveView. Here's a neat demo. No JavaScript required. ▶ this video
Good place to post the "Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5" ;) ▶ this video
Even with tooling getting better, you're still faced with creating an API to the backend that has a high chance of your frontend being the only ever consumer of it. You're also faced with duplicating logic on both front and backends in many scenarios (though of course this can be mitigated with a node backend? I don't know... I've never used node). As for latency, this is over websockets. It becomes a problem if you are connecting to a server across the ocean but otherwise, it's incredibly fast and feels just as snappy as JS. I actually also haven't used Stimulus Reflex, just Phoenix LiveView so I'm not sure if they are exactly the same, but the TL;DR is that they are sending VERY tiny payloads over websockets. This video explains it well (though it's also a demo of LiveView): ▶ this video
> But I'm wondering if it brings enough other advantages that I shouldn't view it that simplistically. So to start with, Phoenix LiveView really is a game changer, you should have a look at Elixir just for that. This is the talk which really bluffed me when I first saw it: ▶ this video . For the other upsides, I like a little bit better the way everything is architectured in Phoenix, there's much less magic and it's easier to follow the data flow and what is going on.
I think the "talk" by Chris McCord should apply here "Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5", while not really a talk this year was special and the demo completely blew my mind. it's available here: ▶ this video
My favorite talk is the Live View twitter demo on my case: ▶ this video . Never before I've been so bluffed by a new technology, he's building a small twitter clone in 20min with live reload, browser sync and everything, this would take days with any other traditional tech I know.
This one's also pretty good: ▶ this video (Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5)
> I don't like the idea of needing to learn both Elixir and Erlang You dont need to learn Erlang to use Elixir, rather you would need to know Elixir to use Phoenix; like you need to know Ruby to use Rails. Also you can build a Twitter timeline clone in under 18 minutes using Phoenix LiveView: ▶ this video