HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

Hacker Way: Rethinking Web App Development at Facebook

Meta Developers5 HN recommenders · recommended in 5 months, 2014-2024
YouTube
900K views · 12 years ago · talk · evergreen

Facebook engineers explain why they abandoned the traditional MVC paradigm for a more functional architecture, introducing Flux and React. They use the unread-message-count bug as a case study of the problems of bidirectional data flow at scale.

HN points to it as the original talk that explains the motivation behind React, Flux and Redux, and that sold some commenters on React.

Web developmentSoftware architecture & designFunctional programming#react#flux#mvc#redux#facebook#statemanagement

11 comments from Hacker News

@phailhaus2024 · in “React 19”

If you have state changes within your render cycle, then you can't write pure functions anymore, you have a stateful class. And if you have a stateful class, then React can't control when you render, because it can't know when you update a variable. So the onus is on you to decide when your component needs to re-render. This is extremely easy to screw up. You will end up in scenarios where the UI does not match the underlying state, just because the two have gone out of sync. React inverts the MVC paradigm and says "no, you don't get to decide when to render." So if you want to update state, React will manage that for you and queue up the render. With React, your UI and state literally cannot go out of sync (except for refs), and all the data dependencies are managed for you. Facebook gave a great talk on Flux architecture vs MVC ten years ago that you should check out here: ▶ this video > what's the point of the setXXX() functions? Why not just make them constant explicitly Look at the code again: it is explicitly constant! `const [myState, setMyState] = useState(0)`. `myState` is a const, and will literally not change its value for the entire render cycle. There is no mutable state to manage, no race conditions. You just tell React what to render based on what the value is now, and React injects the current value for you. The first time, `myState` is 0 since that's the initial value. Every subsequent render, React will give you the latest value. You can pretend everything is con

RecommendsView on HN
@Zanfa2024 · in “Web Crap Has Taken Control”

Apparently Facebook can't do it with React either. They still experience the exact same state inconsistency bug as described [0] during React announcement as rationale for using React. [0] ▶ this video

CriticalView on HN
@yazaddaruvala2023 · in “React is 10 years old”

I'll try one last time: > Sorry none of this makes any sense to me. If you're not familiar with the MVC variants (MVVM, MVP, MVI, MOVE)[0][1] we should start there. Next you should read through some common mistakes of Backbone.js like applications link and some criticisms of MVC on HackerNews in 2012[0]. Finally if you haven't before these talks, they are the ones that sold me on React: - link - link - ▶ this video [0] link [1] link

Strongly recommendsView on HN
@franciscop2023 · in “React is 10 years old”

Exactly, this is the same as saying Redux has two methodologies, the "setter system" and the "event system"; since it wasn't that well documented initially doesn't mean that the setter way was ever recommended (it's not). In fact if you watched the Flux youtube talk, something highly recommended to learn the philosophy behind Redux, it was pretty clear. Edit: here's the video (from 10:20) ▶ this video

RecommendsView on HN
@acemarke2022 · in “UIs are not pure functions of the model (2018)”

> React is a child of the Flux architecture philosophy FWIW, this isn't actually the case. React was first announced in 2013: - link The "Flux Architecture" was first announced a year later, in 2014: - ▶ this video React's original influences were things like Facebook's internal PHP-based UI definition layers: link

CitesView on HN
@Zanfa2022 · in “Ask HN: Why is the Instagram desktop website so unreliable?”

That would definitely explain why facebook.com still has had the exact same unread messages counter bug from 2014 that they used as a case-study for the React/Flux announcement video[1]. They just don't care. [1]: ▶ this video

CriticalView on HN
@franciscop2021 · in “Show HN: SimpleR State – simple state management for React”

It formalizes how data is created, accessed and modified. Instead of multiple places trying to modify some specific data ad-hoc and with possible collisions/changes, now you have a mores strict way of dealing with data. Basically the Flux architecture. See from 10:20: ▶ this video

CitesView on HN
@alexanderchr2019 · in “Facebook Hit by Apple’s Crackdown on Messaging Feature”

I don't think it's intentional. Facebook has had this bug for several years. Interestingly one of the reasons they created react/flux was to fix it: ▶ this video (15 minute mark)

CitesView on HN
@danesparza2017 · in “How to optimize React applications that use Redux”

Redux is an implementation of Flux. I don't use Redux, but the original Facebook engineering announcement videos helped me understand React and Flux tremendously: ▶ this video If you're talking about Redux specifically -- I agree with you. I think it's ugly and confusing.

RecommendsView on HN
@liscovich2014 · in “Meteor hits 1.0”

I wonder if the criticism that the Flux team at Facebook has directed at two-way data binding is also applicable to Meteor. Jing Chen is her intro of Flux ( ▶ this video ) says that two-way data binding creates a major challenge for scaling applications because views can trigger changes in data, and data changes can trigger cascading changes in views, which makes it very difficult to predict the behavior of the app as a whole. Wouldn't Meteor face the same challenges? In other words, if you believe that the Flux design pattern (which involves a central dispatcher as the only entity capable of updating the data) is sound, shouldn't you stay away from Meteor's model when building large applications? Or am I missing something?

CitesView on HN
@rattray2014 · in “Flux Application Architecture”

Video seems to start discussion of Flux just after the 10 minute mark. Direct Link: ▶ this video EDIT: So far, the video is much more helpful to me in terms of bringing the concepts of Flux to life. Jing does a terrific job explaining in my opinion.

RecommendsView on HN
[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook18:55

[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook

JSConf
45K views • 13 years ago
Cheng Lou - On the Spectrum of Abstraction at react-europe 201635:32

Cheng Lou - On the Spectrum of Abstraction at react-europe 2016

ReactEurope
63K views • 10 years ago
React.js Conf 2015 - Immutable Data and React31:11

React.js Conf 2015 - Immutable Data and React

Meta Developers
159K views • 11 years ago
Pete Hunt: React: Rethinking best practices -- JSConf EU29:32

Pete Hunt: React: Rethinking best practices -- JSConf EU

JSConf
548K views • 13 years ago
React.js Conf 2016 - Ben Alpert - What Lies Ahead27:45

React.js Conf 2016 - Ben Alpert - What Lies Ahead

Meta Developers
50K views • 10 years ago
Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 201340:58

Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 2013

JSConf
58K views • 12 years ago
React Helsinki February 20201:16:07

React Helsinki February 2020

Fraktio
42K views • 6 years ago
React.js Conf 2015 - The complementarity of React and Web Components25:47

React.js Conf 2015 - The complementarity of React and Web Components

Meta Developers
22K views • 11 years ago
Jordan Walke - React to the Future36:45

Jordan Walke - React to the Future

ReasonConf
48K views • 6 years ago
Keynote - JSON Graph: Reactive REST at Netflix54:58

Keynote - JSON Graph: Reactive REST at Netflix

Association for Computing Machinery (ACM)
41K views • 11 years ago
Sebastian Markbage: Minimal API Surface Area | JSConf EU 201424:28

Sebastian Markbage: Minimal API Surface Area | JSConf EU 2014

JSConf
71K views • 12 years ago
Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 201530:41

Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015

ReactEurope
472K views • 11 years ago
"Controlling Time and Space: understanding the many formulations of FRP" by Evan Czaplicki40:55

"Controlling Time and Space: understanding the many formulations of FRP" by Evan Czaplicki

Strange Loop Conference
69K views • 12 years ago
React Today and Tomorrow and  90% Cleaner React With Hooks1:35:30

React Today and Tomorrow and 90% Cleaner React With Hooks

React Conf
1.2M views • 8 years ago
Keynote: What is a Component (and Why)? - Luke Wagner, Distinguished Engineer, Fastly29:51

Keynote: What is a Component (and Why)? - Luke Wagner, Distinguished Engineer, Fastly

The Linux Foundation
7K views • 3 years ago
Om Next - David Nolen46:18

Om Next - David Nolen

ClojureTV
44K views • 11 years ago
Nicholas Zakas: Scalable JavaScript Application Architecture52:23

Nicholas Zakas: Scalable JavaScript Application Architecture

YUI Library
68K views • 15 years ago
Rich Harris - Rethinking reactivity36:45

Rich Harris - Rethinking reactivity

You Gotta Love Frontend
334K views • 7 years ago
F8 2015 - Big Code: Developer Infrastructure at Facebook's Scale46:22

F8 2015 - Big Code: Developer Infrastructure at Facebook's Scale

Meta Developers
99K views • 11 years ago
"Data Driven UIs, Incrementally" by Yaron Minsky36:18

"Data Driven UIs, Incrementally" by Yaron Minsky

Strange Loop Conference
20K views • 8 years ago