23 ms·

Rebuilding our tech stack for the new facebook.com

655 points by alexvoica 6y ago

ajayyy 6y ago
It looks a lot like the new Twitter. I guess the new trend is just to show multiple tabs from the mobile app at once as the desktop site.
- buboard 6y ago
  it is yahoo from the 90s https://cdn.searchenginejournal.com/wp-content/uploads/2006/04/132826009_254ee440c11.jpg https://cdn.searchenginejournal.com/wp-content/uploads/2006/... Nothing new under the sun
  - npongratz 6y ago
    The Yahoo I knew and loved from the 90s manifested as a web directory: https://www.ttcs.tt/wp-content/uploads/2014/09/screenshot-of-yahoo-home-page-circa-1997.jpg https://www.ttcs.tt/wp-content/uploads/2014/09/screenshot-of...
    - ViViDboarder 6y ago
      Wow. That made me way more nostalgic than I was expecting.
  - atestu 6y ago
    That's their redesign from 2006 https://techcrunch.com/2006/07/17/new-yahoo-home-page-goes-live-today/ https://techcrunch.com/2006/07/17/new-yahoo-home-page-goes-l...
- shp0ngle 6y ago
  I don’t get the hate for the new Twitter, to be honest. It loads fast, is simple, it’s to the point.
  - garaetjjte 6y ago
    It's slow, requires JS, and fails around.. 50% of loads, I think?
    - shp0ngle 6y ago
      ok I guess YMMV. It doesn’t fail for me, so I guessed it’s like that for everyone. everything requires javascript nowadays, that’s just a default
      - f1refly 6y ago
        "Oh there's radioactive material in every food now, why would you complain about that? That's just a default."
    - dbbk 6y ago
      It obviously does not fail on half of loads.
pathartl 6y ago
Great write up. Glad to see they're making some changes as the current interface still feels like 2005 with the main feed at 500px wide. And as always, dark mode is welcome. I really hope this helps performance on the site. In the past year or so I've been noticing that when the page sits in an unfocused tab for a while, clicking back usually takes 20+ seconds to actually load and I'm stuck at a white screen. It actually locks up the tab pretty well too, so navigating to other addresses and such takes a pretty long time.
- dehrmann 6y ago
  > And as always, dark mode is welcome. I don't get this infatuation with dark mode, beyond it looking cool. People claim it helps with eye strain, but a brighter background constricts your pupils, improving focus.
  - olcor 6y ago
    Just wanted to point out you might’ve pasted the wrong snippet, which is about eBay’s policies.
    - dehrmann 6y ago
      Oops! Thanks for the catch.
  - pathartl 6y ago
    In my experience light mode will work fine on things like e-paper displays, but when you have an emissive or transmissive display the bright light can be straining. I also feel like dark mode highlights text more, making it easier to identify the text. If I use light mode in text editors I get completely lost very quickly.
  - tgvaughan 6y ago
    It never occurred to me that this could be the reason for dark mode blurriness, but it makes sense intuitively. (Think you mean "constricts" rather than "dilates" though.)
gfodor 6y ago
This is 100% incidental complexity. It's painful to consider that this level of sophisticated engineering is needed to render a website quickly in 2020. What went wrong? I'm personally excited about things like turbolinks and phoenix liveview, which may provide a path out of this mess.
- dimitrisnl 6y ago
  ...but it's not a website. It doesn't list 10 cars, 1 family photo and the address on the footer.
  - gfodor 6y ago
    take a screenshot of facebook - it's a website.
    - Groxx 6y ago
      I can run Linux in my browser. Is Linux a website? https://bellard.org/jslinux/ https://bellard.org/jslinux/ You have to draw the line somewhere, or it becomes meaningless.
      - gfodor 6y ago
        sure, for me the line is clearly on the side of "scrolling through boxes of text and basic commenting" = website, since that was the case in 1995. my point was that if you took a screenshot of facebook today and when it launched, other than some cosmetic improvements, you couldn't tell me which version warranted extreme dynamic application logic and which was just a dumb server generated HTML page. the point being that it shouldn't be necessary to do all the stuff in this post to get this result, but it is, because our field has failed to build better generalized solutions to these problems.
        fastball 6y ago
        If you think websites from 1995 were driving the same levels of engagement that FB is in 2020 you would be really, very, extraordinarily mistaken.
motoboi 6y ago
I have been using Facebook for like +10years. Facebook used to be reference for speed and usability. I left it ~4 years ago. Last day I entered again for curiosity. It's so sad. Strange interface, slow, unresponsive. It's sad.
- wallawe 6y ago
  Did you try the new UI? It's a lot better but you may have to opt in
- reaperducer 6y ago
  Facebook used to be reference for speed and usability On web, for a while. Remember when Facebook's iPhone app came out, it was a disaster. It was so slow, I could open the app, then take the elevator down to the basement of my building, drop off some outgoing mail, and return to my apartment before it finished updating the news feed. It was legendary in its time for its slowness. At first, nobody complained because there weren't a lot of "apps" available. But then all the other apps came out, and everyone complained for years that all the other app-building companies could build responsive apps, but Facebook couldn't. Then one day Facebook updated its app and it was a little better. Then another update came and it was good enough, and everyone stopped complaining and forgot. Last day I entered again for curiosity. It's so sad. Strange interface, slow, unresponsive. It's sad. I only use Facebook once a week, to update the page for a web site I manage. It is terribly slow on web. On both of the computers I use it on, loading the first page takes upwards of 15 seconds. Clicking on the text field to enter a new post takes eight to ten seconds for the editor to load. I don't know how people who are addicted to Facebook manage to use it so much without going mad.
  - jtbayly 6y ago
    On their phones, perhaps? At least we already know that testing it on a computer browser is not testing it for the majority user.
  - delusional 6y ago
    Remember when they had to monkey patch the android runtime because their app had too many methods? https://www.facebook.com/notes/facebook-engineering/under-the-hood-dalvik-patch-for-facebook-for-android/10151345597798920 https://www.facebook.com/notes/facebook-engineering/under-th... It's a fun hack, and I enjoy spectacle, but it might be a sign that you are complicating your app more than you need.
deleted 6y ago
[deleted]
jariel 6y ago
Everything is in the past tense without dates. When was this massive re-write? 2010? 2018?
- amelius 6y ago
  Looking at the graphical design changes, they haven't rolled this out yet.
  - rvnx 6y ago
    They did roll this new interface on some users (like me), and this new experience genuinely sucks. It's easy to guess what happens under the hood: "Legacy" programmers implemented working solution. A newcomer comes into the company, doesn't really give a shit about the company because he is #XXXX, follows textbook processes, has a very nice pay-check so no pressure, and decides to rewrite because "code sucks". A second newcomer joins, still no pressure, because he knows he will get his pay-check. Tells his manager that he cannot work without refactoring (it's not true). 10 programmers later, you refactor code instead of producing features. You can do that for all your lifetime. To their defense, the FB initial codebase from the time of Mark Slee or Philip Fung was not a gift but because they had pressure to make revenues they were trying to do what was right. When you have 10 years of positive iterations regarding product experience and user feedback, revamping everything in a big bang boom is a terrible idea from both engineering and product perspective. Sometimes, full revamp are positive because the initial product sucked, but when you managed to onboard a billion user, it's dangerous to change their habits if you aren't 100% sure it's an improvement. Here, we have PO/PM pushing for change, for whatever reason (engineering pressure, or they get a bonus if they deliver the product, etc). Same story with all the Google Messengers.
    - underwater 6y ago
      This is not a big bang rewrite. All the technology here is stuff that's been built over the last decade. Haste is a decade old, React is 8 years old, GraphQL is around 7 years, Relay must by 5 years old by this stage. This is simply bringing them all together.
pier25 6y ago
> as little as possible I just opened FB with the cache disabled and it downloaded 5.85MB (19.76MB uncompressed). Most of it happens after the page has rendered, which is great, but that's a lot of stuff. There are 13.74MB of uncompressed JavaScript.
- panta 6y ago
  Stealing data about the users as accurately as possible requires more code than one would think.
  - dylkil 6y ago
    >Stealing data about the users its not stealing when the users agreed to it
    - infogulch 6y ago
      Using a website does not imply informed consent.
      - xd1936 6y ago
        No, but signing up for an account and agreeing to the Terms of Service does. The not-logged-into homepage is 1.3mb. Still not tiny, but definitely not the same as the web app.
        AlexandrB 6y ago
        No it doesn’t. Informed consent is not the same as shoving a ToS/EULA in front of someone who may not have the legal or technological education to understand it or its consequences. From the Wikipedia definition[1] of informed consent (in medicine): > An informed consent can be said to have been given based upon a clear appreciation and understanding of the facts, implications, and consequences of an action. Adequate informed consent is rooted in respecting a person's dignity. To give informed consent, the individual concerned must have adequate reasoning faculties and be in possession of all relevant facts. What tech companies do is obtain the minimum legally required consent - and sometimes not even that. This may be legal, but it’s far from ethical. [1] https://en.m.wikipedia.org/wiki/Informed_consent https://en.m.wikipedia.org/wiki/Informed_consent
amelius 6y ago
Did they fix the "back" button? (I.e. if you click a link in the middle of a feed, then "back", do you get back at the same position in the feed?)
- beefield 6y ago
  My guess is that they have a/b tested that if you remove the item from the feed user clicked, users become "more engaged" i.e. frustratingly scrolling to find the place where they were.
- aeyes 6y ago
  I think the Facebook feed is completely random on purpose to make it feel more up to date.If the app crashes on your phone then good luck on finding a post in your feed again.
- sophiebits 6y ago
  Yes. (Source: Was involved in early planning for the rewrite and fixing the Back button was one of the primary goals.)
deleted 6y ago
[deleted]
raphaelj 6y ago
Quite sincerely, it's a total failure. I got the chance to try the new interface, and it's so slow that it's barely usable. It's even slower than the old website, that was already painfully slow. Loading a random profile takes 8 seconds. Opening a messenger discussion takes 6 seconds. It reminds me of the new Reddit website. Facebook was more enjoyable to use 12 years ago. It's really sad that in 2020, 10k+ engineers can't make a photo, video, post and message sharing website that is not a pain to use. We collectively failed as a profession. If one needs 2MB of CSS for such a website, there is clearly a problem.
- SheinhardtWigCo 6y ago
  The 2MB of CSS is needed to justify that headcount.
  - robertoandred 6y ago
    Where are you getting 2MB from?
    - agluszak 6y ago
      "On our old site, we were loading more than 400 KB of compressed CSS (2 MB uncompressed) when loading the homepage, but only 10 percent of that was actually used for the initial render. We didn’t start out with that much CSS; it just grew over time and rarely decreased. This happened in part because every new feature meant adding new CSS."
      - robertoandred 6y ago
        Read the first four words.
- starpilot 6y ago
  Comments like these remind of an old post on Slashdot, "What makes a good website?" Ask "geeks" what they prefer, it's usually minimalism, no images, consistent text styling. In the end, the ideal format becomes a text file without markup. I think we need to accept the opinions of techies are increasingly irrelevant in tech. It's like being fine artist getting paid to design flyers or a chef making burgers.
vosper 6y ago
I saw no mention of Reason or ReasonReact. I thought they rewrote Messenger in Reason, and so I figured facebook.com would be next. Did Reason fall out of favor or something?
- dgellow 6y ago
  Was Reason ever more than an experiment?
  - frou_dh 6y ago
    The repos have some activity, but it looks bad that the most recent post on the official blog was in August 2018.
  - vosper 6y ago
    ReactReact just had a release (0.8) a few days ago, so it's apparently not dead https://github.com/reasonml/reason-react/blob/master/HISTORY.md https://github.com/reasonml/reason-react/blob/master/HISTORY...
- swyx 6y ago
  lol no, "Did Reason fall out of favor" does not logically follow from "I figured facebook.com would be next". you were simply too optimistic on Reason.
- rickyvetter 6y ago
  Hey - maintainer of ReasonReact here. We don't believe in mandating the tools that people use and there are plenty of good reasons to use TS, Flow, PureScript, Rust, etc. Folks on the Messenger Web team in Facebook like Reason as their language of choice. Reason is used heavily on Messaging code in the old facebook.com and in this rebuilt version. The rebuilding of facebook.com was done quickly and involves almost every web team at Facebook. Almost all of these folks are familiar with Flow and only some are familiar with Reason. Asking every engineer at FB to learn Reason at the same time in addition to the already massive number of new things would have been adding unnecessary risk to this already incredibly risky project.
liquid153 6y ago
Do they still use PHP on backend. If so ick
- innocenat 6y ago
  They use Hack if you really needed to know.
- benbristow 6y ago
  AFAIK they use 'Hack', a language designed to be very similar to PHP. https://hacklang.org/ https://hacklang.org/ PHP is a lot better than it used to be now though! It's got a bad rep but newer versions are fast and surprisingly modern-feeling.
29athrowaway 6y ago
I don't like it. Round borders with misplaced text, cannot go to a specific time on my timeline anymore, does not feel very responsive. Overall, the UI does not look very appealing and feels like a downgrade.
- crocodiletears 6y ago
  Reminds me of the new Chrome UI. Not a fan of this soft, rounded-off aesthetic that seems to be spreading about.
polote 6y ago
> We knew we wanted Facebook.com to start up fast, respond fast, and provide a highly interactive experience. And we forgot about it while developing it, this is just common mistake in product management, when projects are not iterative, things are so long, that you even forget why you are doing them
nickbauman 6y ago
Tech stack? This is only stuff they put in the browser.
- suyash 6y ago
  exactly it's missing all the backend information which is most critical.
bryanmgreen 6y ago
I wonder what the Mobile App versus Mobile Browser versus Desktop Browser usage percentages look like. Generally speaking, how important is it to actually update the desktop version other than for the sake of updating tech? I only use desktop as part of my marketing work, if I do it use it at all. (Side Note: I can't believe it took this long for Dark Mode to be a normal option for all software)
Groxx 6y ago
>We addressed this by generating atomic CSS at build time. Atomic CSS has a logarithmic growth curve because it’s proportional to the number of unique style declarations rather than to the number of styles and features we write. I've always wondered... has anyone checked to see if this strategy of CSS (which AFAICT is slowly growing in popularity, since it's a super simple minification trick) ends up costing more in bandwidth? It seems like it would, because 1) you frequently need multiple classes per html element, and 2) those html classes need to be sent on every page load, where CSS caches well if used "normally". I can see it being smaller on any individual page, especially with class-name minifying, but across many? And infinite scrolling loading many more elements?
- axyz 6y ago
  we use this approach since more than a year with very good results. Regarding the data transfer it is not much of a problem because those classes usually get repeated a lot across the elements and having lot of repeated string is the best case scenario for gzip compression leading to basically no size impact. https://github.com/utilitycss/atomic https://github.com/utilitycss/atomic This is the framework we developed to create atomic CSS component libraries if you want to have a look (documentation needs some love, but is quite stable)
  - Groxx 6y ago
    Your HTML is still undeniably larger than something with dramatically fewer class attributes though, if you minify the same way. Hence my "single page" vs "many" difference. gzip helps for sure, but I doubt `<class="card">...` ends up larger than `<class="a b c d e"><class="sub-a sub-b q etc"><class="repeat per element">...`.
    - axyz 6y ago
      there is of course a bit of difference in some use cases, my point is that in a real world scenario you often do not have <class="card"> vs <class="a b c d e"> but more something like <class="card"><class="stuff-inside-card"><class="other-stuff"> vs <class="a b c d e"><class="b c f"><class="c d e g"> so in the long run you tend to have more repeated strings across even completely unrelated elements and that usually balances out the possible increase in non gzipped bytes. But to be honest we did not had a detailed comparison with edge cases and it would be interesting to see when it actually may be a bad idea and when it is totally fine
scalableUnicon 6y ago
I rarely use Facebook, but when I do I use https://m.facebook.com https://m.facebook.com instead of the main site. Similarly i.reddit.com and the HTML version of Gmail. Which aren't great looking, but pretty usable. I hope these versions will be maintained for a long time.
- Drip33 6y ago
  >Similarly i.reddit.com Try https://old.reddit.com https://old.reddit.com It's so bad that people made Browser Extensions for Firefox[0] and Chrome[1] [0] https://addons.mozilla.org/en-US/firefox/addon/old-reddit-redirect/ https://addons.mozilla.org/en-US/firefox/addon/old-reddit-re... [1] https://chrome.google.com/webstore/detail/old-reddit-redirect/dneaehbmnbhcippjikoajpoabadpodje https://chrome.google.com/webstore/detail/old-reddit-redirec...
  - benbristow 6y ago
    Old Reddit is so damn ugly though apart from the Subreddits which have nice custom themes (although does make for a 00's Myspace-like inconsistent interface) The new Reddit definitely seems a lot faster nowadays than it did when it first launched.
    - ccmcarey 6y ago
      I don't think old reddit is ugly, though it takes some getting used to. Combined with RES for some minor enhancements (navigation etc) and it's great. It's similar to HN. Not fantastic design, but incredible information density and usability.
      - Supermancho 6y ago
        Not to go off on a rant about reddit here, but I still use the old reddit (old.reddit.com). The new reddit layout is horrid,. Using additional whitespace to improve readability, has done the opposite. Counter-productive iconography sizing and font styling, it goes on and on. Some of this is to make it more mobile-friendly. I get it, but as a singular design, it's worse for desktop users.
janpot 6y ago
I don't really care about their end result because I don't use facebook. But in spite of all the negative comments here, I'm actually interested in how their styling solution works.
- kall 6y ago
  If I had to guess, I would expect it to be similar to react-native-web. They say the api is inspired by RN (StyleSheet.create) and the atomic classes look similar to what react-native-web produces. Also the author of RNW works at facebook. It‘s called xstyle and you can see some examples in a talk from last year that presented the new tech for new faceook. I will update if I find the link (can‘t right now). Edit: starts at about 28:00 here, but the rest about react+relay data fetching is interesting as well if you care about that stuff https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/ https://developers.facebook.com/videos/2019/building-the-new...
chx 6y ago
The most irritating "feature" of Facebook is they insert themselves like eight deep in the history when opening their page so the back button doesn't work.
- AlexandrB 6y ago
  This kind of thing is normally the domain of sites you find after searching “office 365 warez”. Pretty bad.
kichu37 6y ago
Faceb OMEGALUL OMEGALUL k.
thesz 6y ago
It uses scrolling as cookie consent, apparently. Which is wrong as discussed here: https://news.ycombinator.com/item?id=23090393 https://news.ycombinator.com/item?id=23090393
- Nextgrid 6y ago
  It's not like Facebook is concerned about GDPR compliance, and given the lack of enforcement I can't really fault them for this.
lgl 6y ago
Can we now sanely read comment threads with several hundreds or thousands of comments without clicking 200 times on "show previous comments" only to then lose all "progress" if we click somewhere else? Also looking at you Instagram.
- marcodave 6y ago
  One minute of contemplation for those who scroll for 10 minutes on mobile, to finally find something interesting to read/click, just to click by mistake the back button, and the whole timeline completely changed. Youtube recommendation feed also terribly guilty of that.
suyash 6y ago
There is nothing about backend here, that's where the heavy lifting is done. Is that all in PHP still and GraphQL ?
suyash 6y ago
Atomic CSS is a bad idea, read more here https://www.browserlondon.com/blog/2019/06/10/functional-css-perils/ https://www.browserlondon.com/blog/2019/06/10/functional-css...
- axyz 6y ago
  nowadays is quite rare to write classes in pure html, using any framework like react, vue and similar we are used to pass classes in a JS environment. Obscure and minified class names can be imported from a package using a perfectly meaningful name, also the same set of classes can be exported with many different names to even better usage specificity with no cost in size. We overcome most of those issues using a mix of postcss compose and css modules with a custom hashing solution based on the actual css rule content, this allowed us to have virtually infinite semantically named components with a css bundle size that tend to stabilize around 20/25kb gzipped for a very big e-commerce use case and I doubt any other use case would go much higher than that size. https://github.com/utilitycss/atomic https://github.com/utilitycss/atomic If you want to have a look (documentation needs some love, but the samples generated by the init do give a good idea of the concept)
3PS 6y ago
I'm actually really surprised by the number of comments in this thread about how the new redesign is slower. I've had it since yesterday and it genuinely feels much faster and more responsive than the old Facebook UI - though, to be fair, that's not a huge accomplishment give that the old UI would take forever to finish painting or respond to input. I'd consider it a success, especially when compared to the disaster that was and continues to be Reddit's redesign.
- dhimes 6y ago
  Are you using desktop of phone? I've found the desktop quite slow lately- I thought it was probably due to high usage.
  - 3PS 6y ago
    Desktop, for Facebook. I've tried to avoid installing their phone apps for privacy reasons.
- vbezhenar 6y ago
  Yep, works fast for me too. Random profile opens in 2-3 seconds max for me. But for some people websites are slow for some reason. I've heard complains about Gmail loading 30 seconds, while it takes 2-3 seconds cold start for me.
  - hetspookjee 6y ago
    I don't understand how you think a 2-3 second load time is "fast" for such an enormous platform and the actual content the user sees. I sure get that Facebook is way more than that, but to think a page loading in 2-3 seconds is fast is something you could've gotten away with in 2000, but in 2020..? I genuinely don't understand why you find it quick.
    - Kinrany 6y ago
      My guess is that Facebook is popular enough that they are not optimizing for first impression.
aboringusername 6y ago
For me, I consider the real test for a website's performance to be how it reacts under JS disabled conditions. Using NoScript has completely changed the way I use the internet. Combine that with DoH and filtering and you can remove a large part of the jank that fills browsers needlessly. It's a delicate balancing act, but it puts you in control. Sometimes it's just not worth the hassle, and I suspect it's why you see many comments like "just read the f* article", except sites are so slow and cause so much rendering and CPU cycles it's just an abuse of the platform. Websites are capable of serving text without JS being required.
- Drip33 6y ago
  With increasing adoption of reCaptcha v3 which won't let you browse on any page without Javascript, it will become harder and harder to use the internet with NoScript enabled.
- encom 6y ago
  I've tried several times to get used to NoScript, but there's just too much friction in day-to-day usage. I already get regular breakage due to agressive uBlock configuration.
yepthatsreality 6y ago
Facebook folded to the "quit changing the UI" crowd years ago when they opened registration up beyond colleges.
whalesalad 6y ago
The use of Monokai is so off-brand for FB.
atlgator 6y ago
Advancing technology doesn't make up for destroying humanity, IMO. Fuck Facebook.
fossuser 6y ago
I miss information density. HN is great for this and you can change enough settings on reddit to get it where it used to be, but FB is really bad for it and Twitter is just ok (though with the tweet deck app you can get a lot on macOS). In that FB screenshot you can see half of one post?
trevor-e 6y ago
What I find weird about the article is that they spend so much time talking about the performance of the new design, yet fail to include any hard numbers comparing the old vs new implementations. They do throw out a few numbers like how the new page only downloads 20% of the previous 400kb CSS for the homepage, etc, but I'm surprised to see no actual browser benchmarks for what they claim. How else would they be measuring this internally?
deleted 6y ago
[deleted]
didibus 6y ago
I understand the new stack is React + Relay, but what was the old stack?
- sophiebits 6y ago
  A hodgepodge of (mostly proprietary) technologies.
cat199 6y ago
interesting to see these kinds of details, but this is hardly 'rebuilding the the stack' - just UI<->API layer
- swyx 6y ago
  there is such a thing as a frontend stack
brailsafe 6y ago
A browser extension that automatically filters out Karen from your feed would yield better results, but they wouldn't want to alienate their core users
polote 6y ago
Future will tell, but I do think this is a good strategic move by FB. FB is now seen as an app for old people and not fun at all, and probably one of the reason is because of how it looks. With the new design, things are more shiny, and the product now looks cool. How a product is perceived has a big influence on how people use it, (for example why people use snap when they can send the same videos on insta). I wouldn't be surprised that this is a beginning of a lot of changes on FB
- Panini_Jones 6y ago
  What other changes would you forecast?
- kart23 6y ago
  It's not seen as an app for old people. A lot of college students use fb religiously, and it's still the place to go for nearly any college discussion.
jedberg 6y ago
I can't remember the last time I loaded FB on a computer. At this point it's clear that they care far more about the mobile experience than the desktop. Even if I'm sitting at my computer I'll still use my phone for FB.
aylmao 6y ago
A big point of contention in the comments here lies around the concept of what a website should be. A school of thought in web development believes the web to be the next frontier in application development. For them it makes sense that websites like this feel and act like apps, both as an end-user (animations, transitions without full-page reloading, rich dynamic content, etc) and as a developer (client-side state management, frontend/backend separation, with an API in between, modular application structure, etc). Apps don't load in 10ms, but they also can support some offline functionality given their independence from the server. Overriding browser behaviour and managing your own loading behaviour makes sense, because the default browser behaviour is not the experience you're striving for; it's not the app experience. These people are usually those who have worked on large web projects too— the developer experience that web developers have built for themselves in "userland" (JavaScript) is pretty good, and has evolved a lot to have features that makes developing the exact behaviour you want easier, and correctly iterating on a codebase, quicker. A separate school of thought wish websites stayed true to their origins as enriched documents, and think trying to evolve them in the direction of applications is counter-productive to their true purpose as interactive surfaces to get and send information. If I am just going to scroll and see a few pictures, why do I need to download anything other than the structure of the page and the pictures themselves? If all the building blocks are already there, in the browser, why do people need to re-invent them and ship them as yet more JavaScript? What should a website be though? The fact there isn't consensus about this is indication that there really doesn't seem to be a clear answer. Per the document-like school of thought, facebook.com just keeps straying further and further away from the ideal, but as far as as the app-like school of thought goes, the new facebook.com is a pretty remarkable achievement.
- deleted 6y ago
  [deleted]
- ng12 6y ago
  Thank you. This is one of the first things I tell people in my web-dev workshop. They're probably not going to be building websites, they most likely will be building web applications.
- saagarjha 6y ago
polymorph1sm 6y ago
I opt in when Facebook prompted me to test out the new UI in Chrome browser, immediately I regretted and frustrated to find the button to revert back to the old one. But then I found out my "old" Safari browser wasn't supported in their new fancy UI. Now I only check my Facebook once per day in Safari and never sign in again from Chrome.
HABytes 6y ago
I think the only HoC I consistently use these days is `connect` from `react-redux`.
dopamean 6y ago
I don't think there's a single piece of software (if you can call facebook's website a piece of software) that I've used longer than facebook.com. I was one of the earliest users in 2004 and have had an account the entire time. It's really interesting, in sort of a morbid way, to see how it really has become a shittier experience every year. I'm sure it's hard to get right and I wouldn't claim to know better than them but it is quite amazing that they have so many engineers being paid so much money and the product from a usability standpoint manages to get worse. I really think that will be their ultimate downfall one day.
Chyzwar 6y ago
I like the approach to css with stylex. I hope that now linaria and astroturf will get more support.
longlho 6y ago
There doesn't seem to be any mention of actual KPIs/metrics changes in the relaunch?
pmlnr 6y ago
> We knew we wanted Facebook.com to start up fast, respond fast, You failed. mbasic.facebook.com on the other hand, is actually fast. Oh. Wait. That's no js at all.
Bnshsysjab 6y ago
My browser constantly pegs the CPU, Firefox performance manager indicates it might be Facebook but CPU metics never seem accurate. I use the new layout and swear the issue occurs after a tab has been left open for a long period of time (8-16 hours). Anyone else experience this?
lonk 6y ago
Title says tech stack but content is about css
sys_64738 6y ago
The new interface caused my iPad to heat up severely so I switched back to the old clunker interface. It might be ancient but it doesn't cause my iPad to heat up.
jonny383 6y ago
I hope this speeds things up for Facebook. On the rare occasions I use it these days to check up on family photos or something, the entire site is fucking painfully slow. Even on my quad core I7 desktop on a fibre backbone connection, I'm routinely waiting 10+ seconds each time I click on the "notification" icon (or any other action).
jrururufuf666 6y ago
who shat in all your brains?
dzonga 6y ago
impressive attack on would be competitors. now new start-ups will look up this doc and say, ahya let's build our interfaces with react + relay. & the new css | js wizardry. when they don't have the manpower and time to do so. end of day can't launch. when they forget this rewrite is implemented 15 years later when fb is already making money. and likewise, as other commentators have said in the thread - we have failed as an industry due to usability regression
cjohansson 6y ago
I hope the new fb works with Javascript disabled, like it did in the old days
xxxmaster 6y ago
I wonder how much time and how many managers/PMs/engineers (a.k.a. Prod Dev) did it take to refactor/rebuild it? Or you can throw a number in terms of money?
lovetocode 6y ago
They reduced CSS by 80% but the new site looks like garbage! On the desktop, It looks like a mobile app just really stretched out.
slorber 6y ago
If you want to know more about the atomic css-in-js Facebook is using, check my article https://sebastienlorber.com/atomic-css-in-js https://sebastienlorber.com/atomic-css-in-js
tectonic 6y ago
https://saagarjha.com/blog/2020/05/10/why-we-at-famous-company-switched-to-hyped-technology/ https://saagarjha.com/blog/2020/05/10/why-we-at-famous-compa...

655 points by alexvoica 6y ago

It looks a lot like the new Twitter. I guess the new trend is just to show multiple tabs from the mobile app at once as the desktop site.

buboard 6y ago
it is yahoo from the 90s https://cdn.searchenginejournal.com/wp-content/uploads/2006/04/132826009_254ee440c11.jpg https://cdn.searchenginejournal.com/wp-content/uploads/2006/... Nothing new under the sun
- npongratz 6y ago
  The Yahoo I knew and loved from the 90s manifested as a web directory: https://www.ttcs.tt/wp-content/uploads/2014/09/screenshot-of-yahoo-home-page-circa-1997.jpg https://www.ttcs.tt/wp-content/uploads/2014/09/screenshot-of...
  - ViViDboarder 6y ago
    Wow. That made me way more nostalgic than I was expecting.
- atestu 6y ago
  That's their redesign from 2006 https://techcrunch.com/2006/07/17/new-yahoo-home-page-goes-live-today/ https://techcrunch.com/2006/07/17/new-yahoo-home-page-goes-l...
shp0ngle 6y ago
I don’t get the hate for the new Twitter, to be honest. It loads fast, is simple, it’s to the point.
- garaetjjte 6y ago
  It's slow, requires JS, and fails around.. 50% of loads, I think?
  - shp0ngle 6y ago
    ok I guess YMMV. It doesn’t fail for me, so I guessed it’s like that for everyone. everything requires javascript nowadays, that’s just a default
    - f1refly 6y ago
      "Oh there's radioactive material in every food now, why would you complain about that? That's just a default."
  - dbbk 6y ago
    It obviously does not fail on half of loads.

pathartl 6y ago

Great write up. Glad to see they're making some changes as the current interface still feels like 2005 with the main feed at 500px wide. And as always, dark mode is welcome. I really hope this helps performance on the site. In the past year or so I've been noticing that when the page sits in an unfocused tab for a while, clicking back usually takes 20+ seconds to actually load and I'm stuck at a white screen. It actually locks up the tab pretty well too, so navigating to other addresses and such takes a pretty long time.

dehrmann 6y ago
> And as always, dark mode is welcome. I don't get this infatuation with dark mode, beyond it looking cool. People claim it helps with eye strain, but a brighter background constricts your pupils, improving focus.
- olcor 6y ago
  Just wanted to point out you might’ve pasted the wrong snippet, which is about eBay’s policies.
  - dehrmann 6y ago
    Oops! Thanks for the catch.
- pathartl 6y ago
  In my experience light mode will work fine on things like e-paper displays, but when you have an emissive or transmissive display the bright light can be straining. I also feel like dark mode highlights text more, making it easier to identify the text. If I use light mode in text editors I get completely lost very quickly.
- tgvaughan 6y ago
  It never occurred to me that this could be the reason for dark mode blurriness, but it makes sense intuitively. (Think you mean "constricts" rather than "dilates" though.)

gfodor 6y ago

This is 100% incidental complexity. It's painful to consider that this level of sophisticated engineering is needed to render a website quickly in 2020. What went wrong? I'm personally excited about things like turbolinks and phoenix liveview, which may provide a path out of this mess.

dimitrisnl 6y ago
...but it's not a website. It doesn't list 10 cars, 1 family photo and the address on the footer.
- gfodor 6y ago
  take a screenshot of facebook - it's a website.
  - Groxx 6y ago
    I can run Linux in my browser. Is Linux a website? https://bellard.org/jslinux/ https://bellard.org/jslinux/ You have to draw the line somewhere, or it becomes meaningless.
    - gfodor 6y ago
      sure, for me the line is clearly on the side of "scrolling through boxes of text and basic commenting" = website, since that was the case in 1995. my point was that if you took a screenshot of facebook today and when it launched, other than some cosmetic improvements, you couldn't tell me which version warranted extreme dynamic application logic and which was just a dumb server generated HTML page. the point being that it shouldn't be necessary to do all the stuff in this post to get this result, but it is, because our field has failed to build better generalized solutions to these problems.
      - fastball 6y ago
        If you think websites from 1995 were driving the same levels of engagement that FB is in 2020 you would be really, very, extraordinarily mistaken.

motoboi 6y ago

I have been using Facebook for like +10years. Facebook used to be reference for speed and usability. I left it ~4 years ago. Last day I entered again for curiosity. It's so sad. Strange interface, slow, unresponsive. It's sad.

wallawe 6y ago
Did you try the new UI? It's a lot better but you may have to opt in
reaperducer 6y ago
Facebook used to be reference for speed and usability On web, for a while. Remember when Facebook's iPhone app came out, it was a disaster. It was so slow, I could open the app, then take the elevator down to the basement of my building, drop off some outgoing mail, and return to my apartment before it finished updating the news feed. It was legendary in its time for its slowness. At first, nobody complained because there weren't a lot of "apps" available. But then all the other apps came out, and everyone complained for years that all the other app-building companies could build responsive apps, but Facebook couldn't. Then one day Facebook updated its app and it was a little better. Then another update came and it was good enough, and everyone stopped complaining and forgot. Last day I entered again for curiosity. It's so sad. Strange interface, slow, unresponsive. It's sad. I only use Facebook once a week, to update the page for a web site I manage. It is terribly slow on web. On both of the computers I use it on, loading the first page takes upwards of 15 seconds. Clicking on the text field to enter a new post takes eight to ten seconds for the editor to load. I don't know how people who are addicted to Facebook manage to use it so much without going mad.
- jtbayly 6y ago
  On their phones, perhaps? At least we already know that testing it on a computer browser is not testing it for the majority user.
- delusional 6y ago
  Remember when they had to monkey patch the android runtime because their app had too many methods? https://www.facebook.com/notes/facebook-engineering/under-the-hood-dalvik-patch-for-facebook-for-android/10151345597798920 https://www.facebook.com/notes/facebook-engineering/under-th... It's a fun hack, and I enjoy spectacle, but it might be a sign that you are complicating your app more than you need.

deleted 6y ago

[deleted]

jariel 6y ago

Everything is in the past tense without dates. When was this massive re-write? 2010? 2018?

amelius 6y ago
Looking at the graphical design changes, they haven't rolled this out yet.
- rvnx 6y ago
  They did roll this new interface on some users (like me), and this new experience genuinely sucks. It's easy to guess what happens under the hood: "Legacy" programmers implemented working solution. A newcomer comes into the company, doesn't really give a shit about the company because he is #XXXX, follows textbook processes, has a very nice pay-check so no pressure, and decides to rewrite because "code sucks". A second newcomer joins, still no pressure, because he knows he will get his pay-check. Tells his manager that he cannot work without refactoring (it's not true). 10 programmers later, you refactor code instead of producing features. You can do that for all your lifetime. To their defense, the FB initial codebase from the time of Mark Slee or Philip Fung was not a gift but because they had pressure to make revenues they were trying to do what was right. When you have 10 years of positive iterations regarding product experience and user feedback, revamping everything in a big bang boom is a terrible idea from both engineering and product perspective. Sometimes, full revamp are positive because the initial product sucked, but when you managed to onboard a billion user, it's dangerous to change their habits if you aren't 100% sure it's an improvement. Here, we have PO/PM pushing for change, for whatever reason (engineering pressure, or they get a bonus if they deliver the product, etc). Same story with all the Google Messengers.
  - underwater 6y ago
    This is not a big bang rewrite. All the technology here is stuff that's been built over the last decade. Haste is a decade old, React is 8 years old, GraphQL is around 7 years, Relay must by 5 years old by this stage. This is simply bringing them all together.

pier25 6y ago

> as little as possible I just opened FB with the cache disabled and it downloaded 5.85MB (19.76MB uncompressed). Most of it happens after the page has rendered, which is great, but that's a lot of stuff. There are 13.74MB of uncompressed JavaScript.

panta 6y ago
Stealing data about the users as accurately as possible requires more code than one would think.
- dylkil 6y ago
  >Stealing data about the users its not stealing when the users agreed to it
  - infogulch 6y ago
    Using a website does not imply informed consent.
    - xd1936 6y ago
      No, but signing up for an account and agreeing to the Terms of Service does. The not-logged-into homepage is 1.3mb. Still not tiny, but definitely not the same as the web app.
      - AlexandrB 6y ago
        No it doesn’t. Informed consent is not the same as shoving a ToS/EULA in front of someone who may not have the legal or technological education to understand it or its consequences. From the Wikipedia definition[1] of informed consent (in medicine): > An informed consent can be said to have been given based upon a clear appreciation and understanding of the facts, implications, and consequences of an action. Adequate informed consent is rooted in respecting a person's dignity. To give informed consent, the individual concerned must have adequate reasoning faculties and be in possession of all relevant facts. What tech companies do is obtain the minimum legally required consent - and sometimes not even that. This may be legal, but it’s far from ethical. [1] https://en.m.wikipedia.org/wiki/Informed_consent https://en.m.wikipedia.org/wiki/Informed_consent

amelius 6y ago

Did they fix the "back" button? (I.e. if you click a link in the middle of a feed, then "back", do you get back at the same position in the feed?)

beefield 6y ago
My guess is that they have a/b tested that if you remove the item from the feed user clicked, users become "more engaged" i.e. frustratingly scrolling to find the place where they were.
aeyes 6y ago
I think the Facebook feed is completely random on purpose to make it feel more up to date.If the app crashes on your phone then good luck on finding a post in your feed again.
sophiebits 6y ago
Yes. (Source: Was involved in early planning for the rewrite and fixing the Back button was one of the primary goals.)

deleted 6y ago

[deleted]

raphaelj 6y ago

Quite sincerely, it's a total failure. I got the chance to try the new interface, and it's so slow that it's barely usable. It's even slower than the old website, that was already painfully slow. Loading a random profile takes 8 seconds. Opening a messenger discussion takes 6 seconds. It reminds me of the new Reddit website. Facebook was more enjoyable to use 12 years ago. It's really sad that in 2020, 10k+ engineers can't make a photo, video, post and message sharing website that is not a pain to use. We collectively failed as a profession. If one needs 2MB of CSS for such a website, there is clearly a problem.

SheinhardtWigCo 6y ago
The 2MB of CSS is needed to justify that headcount.
- robertoandred 6y ago
  Where are you getting 2MB from?
  - agluszak 6y ago
    "On our old site, we were loading more than 400 KB of compressed CSS (2 MB uncompressed) when loading the homepage, but only 10 percent of that was actually used for the initial render. We didn’t start out with that much CSS; it just grew over time and rarely decreased. This happened in part because every new feature meant adding new CSS."
    - robertoandred 6y ago
      Read the first four words.
starpilot 6y ago
Comments like these remind of an old post on Slashdot, "What makes a good website?" Ask "geeks" what they prefer, it's usually minimalism, no images, consistent text styling. In the end, the ideal format becomes a text file without markup. I think we need to accept the opinions of techies are increasingly irrelevant in tech. It's like being fine artist getting paid to design flyers or a chef making burgers.

vosper 6y ago

I saw no mention of Reason or ReasonReact. I thought they rewrote Messenger in Reason, and so I figured facebook.com would be next. Did Reason fall out of favor or something?

dgellow 6y ago
Was Reason ever more than an experiment?
- frou_dh 6y ago
  The repos have some activity, but it looks bad that the most recent post on the official blog was in August 2018.
- vosper 6y ago
  ReactReact just had a release (0.8) a few days ago, so it's apparently not dead https://github.com/reasonml/reason-react/blob/master/HISTORY.md https://github.com/reasonml/reason-react/blob/master/HISTORY...
swyx 6y ago
lol no, "Did Reason fall out of favor" does not logically follow from "I figured facebook.com would be next". you were simply too optimistic on Reason.
rickyvetter 6y ago
Hey - maintainer of ReasonReact here. We don't believe in mandating the tools that people use and there are plenty of good reasons to use TS, Flow, PureScript, Rust, etc. Folks on the Messenger Web team in Facebook like Reason as their language of choice. Reason is used heavily on Messaging code in the old facebook.com and in this rebuilt version. The rebuilding of facebook.com was done quickly and involves almost every web team at Facebook. Almost all of these folks are familiar with Flow and only some are familiar with Reason. Asking every engineer at FB to learn Reason at the same time in addition to the already massive number of new things would have been adding unnecessary risk to this already incredibly risky project.

liquid153 6y ago

Do they still use PHP on backend. If so ick

innocenat 6y ago
They use Hack if you really needed to know.
benbristow 6y ago
AFAIK they use 'Hack', a language designed to be very similar to PHP. https://hacklang.org/ https://hacklang.org/ PHP is a lot better than it used to be now though! It's got a bad rep but newer versions are fast and surprisingly modern-feeling.

29athrowaway 6y ago

I don't like it. Round borders with misplaced text, cannot go to a specific time on my timeline anymore, does not feel very responsive. Overall, the UI does not look very appealing and feels like a downgrade.

crocodiletears 6y ago
Reminds me of the new Chrome UI. Not a fan of this soft, rounded-off aesthetic that seems to be spreading about.

polote 6y ago

> We knew we wanted Facebook.com to start up fast, respond fast, and provide a highly interactive experience. And we forgot about it while developing it, this is just common mistake in product management, when projects are not iterative, things are so long, that you even forget why you are doing them

nickbauman 6y ago

Tech stack? This is only stuff they put in the browser.

suyash 6y ago
exactly it's missing all the backend information which is most critical.

bryanmgreen 6y ago

I wonder what the Mobile App versus Mobile Browser versus Desktop Browser usage percentages look like. Generally speaking, how important is it to actually update the desktop version other than for the sake of updating tech? I only use desktop as part of my marketing work, if I do it use it at all. (Side Note: I can't believe it took this long for Dark Mode to be a normal option for all software)

Groxx 6y ago

>We addressed this by generating atomic CSS at build time. Atomic CSS has a logarithmic growth curve because it’s proportional to the number of unique style declarations rather than to the number of styles and features we write. I've always wondered... has anyone checked to see if this strategy of CSS (which AFAICT is slowly growing in popularity, since it's a super simple minification trick) ends up costing more in bandwidth? It seems like it would, because 1) you frequently need multiple classes per html element, and 2) those html classes need to be sent on every page load, where CSS caches well if used "normally". I can see it being smaller on any individual page, especially with class-name minifying, but across many? And infinite scrolling loading many more elements?

axyz 6y ago
we use this approach since more than a year with very good results. Regarding the data transfer it is not much of a problem because those classes usually get repeated a lot across the elements and having lot of repeated string is the best case scenario for gzip compression leading to basically no size impact. https://github.com/utilitycss/atomic https://github.com/utilitycss/atomic This is the framework we developed to create atomic CSS component libraries if you want to have a look (documentation needs some love, but is quite stable)
- Groxx 6y ago
  Your HTML is still undeniably larger than something with dramatically fewer class attributes though, if you minify the same way. Hence my "single page" vs "many" difference. gzip helps for sure, but I doubt `<class="card">...` ends up larger than `<class="a b c d e"><class="sub-a sub-b q etc"><class="repeat per element">...`.
  - axyz 6y ago
    there is of course a bit of difference in some use cases, my point is that in a real world scenario you often do not have <class="card"> vs <class="a b c d e"> but more something like <class="card"><class="stuff-inside-card"><class="other-stuff"> vs <class="a b c d e"><class="b c f"><class="c d e g"> so in the long run you tend to have more repeated strings across even completely unrelated elements and that usually balances out the possible increase in non gzipped bytes. But to be honest we did not had a detailed comparison with edge cases and it would be interesting to see when it actually may be a bad idea and when it is totally fine

scalableUnicon 6y ago

I rarely use Facebook, but when I do I use https://m.facebook.com https://m.facebook.com instead of the main site. Similarly i.reddit.com and the HTML version of Gmail. Which aren't great looking, but pretty usable. I hope these versions will be maintained for a long time.

Drip33 6y ago
>Similarly i.reddit.com Try https://old.reddit.com https://old.reddit.com It's so bad that people made Browser Extensions for Firefox[0] and Chrome[1] [0] https://addons.mozilla.org/en-US/firefox/addon/old-reddit-redirect/ https://addons.mozilla.org/en-US/firefox/addon/old-reddit-re... [1] https://chrome.google.com/webstore/detail/old-reddit-redirect/dneaehbmnbhcippjikoajpoabadpodje https://chrome.google.com/webstore/detail/old-reddit-redirec...
- benbristow 6y ago
  Old Reddit is so damn ugly though apart from the Subreddits which have nice custom themes (although does make for a 00's Myspace-like inconsistent interface) The new Reddit definitely seems a lot faster nowadays than it did when it first launched.
  - ccmcarey 6y ago
    I don't think old reddit is ugly, though it takes some getting used to. Combined with RES for some minor enhancements (navigation etc) and it's great. It's similar to HN. Not fantastic design, but incredible information density and usability.
    - Supermancho 6y ago
      Not to go off on a rant about reddit here, but I still use the old reddit (old.reddit.com). The new reddit layout is horrid,. Using additional whitespace to improve readability, has done the opposite. Counter-productive iconography sizing and font styling, it goes on and on. Some of this is to make it more mobile-friendly. I get it, but as a singular design, it's worse for desktop users.

janpot 6y ago

I don't really care about their end result because I don't use facebook. But in spite of all the negative comments here, I'm actually interested in how their styling solution works.

kall 6y ago
If I had to guess, I would expect it to be similar to react-native-web. They say the api is inspired by RN (StyleSheet.create) and the atomic classes look similar to what react-native-web produces. Also the author of RNW works at facebook. It‘s called xstyle and you can see some examples in a talk from last year that presented the new tech for new faceook. I will update if I find the link (can‘t right now). Edit: starts at about 28:00 here, but the rest about react+relay data fetching is interesting as well if you care about that stuff https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/ https://developers.facebook.com/videos/2019/building-the-new...

chx 6y ago

The most irritating "feature" of Facebook is they insert themselves like eight deep in the history when opening their page so the back button doesn't work.

AlexandrB 6y ago
This kind of thing is normally the domain of sites you find after searching “office 365 warez”. Pretty bad.

kichu37 6y ago

Faceb OMEGALUL OMEGALUL k.

thesz 6y ago

It uses scrolling as cookie consent, apparently. Which is wrong as discussed here: https://news.ycombinator.com/item?id=23090393 https://news.ycombinator.com/item?id=23090393

Nextgrid 6y ago
It's not like Facebook is concerned about GDPR compliance, and given the lack of enforcement I can't really fault them for this.

lgl 6y ago

Can we now sanely read comment threads with several hundreds or thousands of comments without clicking 200 times on "show previous comments" only to then lose all "progress" if we click somewhere else? Also looking at you Instagram.

marcodave 6y ago
One minute of contemplation for those who scroll for 10 minutes on mobile, to finally find something interesting to read/click, just to click by mistake the back button, and the whole timeline completely changed. Youtube recommendation feed also terribly guilty of that.

suyash 6y ago

There is nothing about backend here, that's where the heavy lifting is done. Is that all in PHP still and GraphQL ?

suyash 6y ago

Atomic CSS is a bad idea, read more here https://www.browserlondon.com/blog/2019/06/10/functional-css-perils/ https://www.browserlondon.com/blog/2019/06/10/functional-css...

axyz 6y ago
nowadays is quite rare to write classes in pure html, using any framework like react, vue and similar we are used to pass classes in a JS environment. Obscure and minified class names can be imported from a package using a perfectly meaningful name, also the same set of classes can be exported with many different names to even better usage specificity with no cost in size. We overcome most of those issues using a mix of postcss compose and css modules with a custom hashing solution based on the actual css rule content, this allowed us to have virtually infinite semantically named components with a css bundle size that tend to stabilize around 20/25kb gzipped for a very big e-commerce use case and I doubt any other use case would go much higher than that size. https://github.com/utilitycss/atomic https://github.com/utilitycss/atomic If you want to have a look (documentation needs some love, but the samples generated by the init do give a good idea of the concept)

3PS 6y ago

I'm actually really surprised by the number of comments in this thread about how the new redesign is slower. I've had it since yesterday and it genuinely feels much faster and more responsive than the old Facebook UI - though, to be fair, that's not a huge accomplishment give that the old UI would take forever to finish painting or respond to input. I'd consider it a success, especially when compared to the disaster that was and continues to be Reddit's redesign.

dhimes 6y ago
Are you using desktop of phone? I've found the desktop quite slow lately- I thought it was probably due to high usage.
- 3PS 6y ago
  Desktop, for Facebook. I've tried to avoid installing their phone apps for privacy reasons.
vbezhenar 6y ago
Yep, works fast for me too. Random profile opens in 2-3 seconds max for me. But for some people websites are slow for some reason. I've heard complains about Gmail loading 30 seconds, while it takes 2-3 seconds cold start for me.
- hetspookjee 6y ago
  I don't understand how you think a 2-3 second load time is "fast" for such an enormous platform and the actual content the user sees. I sure get that Facebook is way more than that, but to think a page loading in 2-3 seconds is fast is something you could've gotten away with in 2000, but in 2020..? I genuinely don't understand why you find it quick.
  - Kinrany 6y ago
    My guess is that Facebook is popular enough that they are not optimizing for first impression.

aboringusername 6y ago

For me, I consider the real test for a website's performance to be how it reacts under JS disabled conditions. Using NoScript has completely changed the way I use the internet. Combine that with DoH and filtering and you can remove a large part of the jank that fills browsers needlessly. It's a delicate balancing act, but it puts you in control. Sometimes it's just not worth the hassle, and I suspect it's why you see many comments like "just read the f* article", except sites are so slow and cause so much rendering and CPU cycles it's just an abuse of the platform. Websites are capable of serving text without JS being required.

Drip33 6y ago
With increasing adoption of reCaptcha v3 which won't let you browse on any page without Javascript, it will become harder and harder to use the internet with NoScript enabled.
encom 6y ago
I've tried several times to get used to NoScript, but there's just too much friction in day-to-day usage. I already get regular breakage due to agressive uBlock configuration.

yepthatsreality 6y ago

Facebook folded to the "quit changing the UI" crowd years ago when they opened registration up beyond colleges.

whalesalad 6y ago

The use of Monokai is so off-brand for FB.

atlgator 6y ago

Advancing technology doesn't make up for destroying humanity, IMO. Fuck Facebook.

fossuser 6y ago

I miss information density. HN is great for this and you can change enough settings on reddit to get it where it used to be, but FB is really bad for it and Twitter is just ok (though with the tweet deck app you can get a lot on macOS). In that FB screenshot you can see half of one post?

trevor-e 6y ago

What I find weird about the article is that they spend so much time talking about the performance of the new design, yet fail to include any hard numbers comparing the old vs new implementations. They do throw out a few numbers like how the new page only downloads 20% of the previous 400kb CSS for the homepage, etc, but I'm surprised to see no actual browser benchmarks for what they claim. How else would they be measuring this internally?

deleted 6y ago

[deleted]

didibus 6y ago

I understand the new stack is React + Relay, but what was the old stack?

sophiebits 6y ago
A hodgepodge of (mostly proprietary) technologies.

cat199 6y ago

interesting to see these kinds of details, but this is hardly 'rebuilding the the stack' - just UI<->API layer

swyx 6y ago
there is such a thing as a frontend stack

brailsafe 6y ago

A browser extension that automatically filters out Karen from your feed would yield better results, but they wouldn't want to alienate their core users

polote 6y ago

Future will tell, but I do think this is a good strategic move by FB. FB is now seen as an app for old people and not fun at all, and probably one of the reason is because of how it looks. With the new design, things are more shiny, and the product now looks cool. How a product is perceived has a big influence on how people use it, (for example why people use snap when they can send the same videos on insta). I wouldn't be surprised that this is a beginning of a lot of changes on FB

Panini_Jones 6y ago
What other changes would you forecast?
kart23 6y ago
It's not seen as an app for old people. A lot of college students use fb religiously, and it's still the place to go for nearly any college discussion.

jedberg 6y ago

I can't remember the last time I loaded FB on a computer. At this point it's clear that they care far more about the mobile experience than the desktop. Even if I'm sitting at my computer I'll still use my phone for FB.

aylmao 6y ago

A big point of contention in the comments here lies around the concept of what a website should be. A school of thought in web development believes the web to be the next frontier in application development. For them it makes sense that websites like this feel and act like apps, both as an end-user (animations, transitions without full-page reloading, rich dynamic content, etc) and as a developer (client-side state management, frontend/backend separation, with an API in between, modular application structure, etc). Apps don't load in 10ms, but they also can support some offline functionality given their independence from the server. Overriding browser behaviour and managing your own loading behaviour makes sense, because the default browser behaviour is not the experience you're striving for; it's not the app experience. These people are usually those who have worked on large web projects too— the developer experience that web developers have built for themselves in "userland" (JavaScript) is pretty good, and has evolved a lot to have features that makes developing the exact behaviour you want easier, and correctly iterating on a codebase, quicker. A separate school of thought wish websites stayed true to their origins as enriched documents, and think trying to evolve them in the direction of applications is counter-productive to their true purpose as interactive surfaces to get and send information. If I am just going to scroll and see a few pictures, why do I need to download anything other than the structure of the page and the pictures themselves? If all the building blocks are already there, in the browser, why do people need to re-invent them and ship them as yet more JavaScript? What should a website be though? The fact there isn't consensus about this is indication that there really doesn't seem to be a clear answer. Per the document-like school of thought, facebook.com just keeps straying further and further away from the ideal, but as far as as the app-like school of thought goes, the new facebook.com is a pretty remarkable achievement.

deleted 6y ago
[deleted]
ng12 6y ago
Thank you. This is one of the first things I tell people in my web-dev workshop. They're probably not going to be building websites, they most likely will be building web applications.
saagarjha 6y ago

polymorph1sm 6y ago

I opt in when Facebook prompted me to test out the new UI in Chrome browser, immediately I regretted and frustrated to find the button to revert back to the old one. But then I found out my "old" Safari browser wasn't supported in their new fancy UI. Now I only check my Facebook once per day in Safari and never sign in again from Chrome.

HABytes 6y ago

I think the only HoC I consistently use these days is `connect` from `react-redux`.

dopamean 6y ago

I don't think there's a single piece of software (if you can call facebook's website a piece of software) that I've used longer than facebook.com. I was one of the earliest users in 2004 and have had an account the entire time. It's really interesting, in sort of a morbid way, to see how it really has become a shittier experience every year. I'm sure it's hard to get right and I wouldn't claim to know better than them but it is quite amazing that they have so many engineers being paid so much money and the product from a usability standpoint manages to get worse. I really think that will be their ultimate downfall one day.

Chyzwar 6y ago

I like the approach to css with stylex. I hope that now linaria and astroturf will get more support.

longlho 6y ago

There doesn't seem to be any mention of actual KPIs/metrics changes in the relaunch?

pmlnr 6y ago

> We knew we wanted Facebook.com to start up fast, respond fast, You failed. mbasic.facebook.com on the other hand, is actually fast. Oh. Wait. That's no js at all.

Bnshsysjab 6y ago

My browser constantly pegs the CPU, Firefox performance manager indicates it might be Facebook but CPU metics never seem accurate. I use the new layout and swear the issue occurs after a tab has been left open for a long period of time (8-16 hours). Anyone else experience this?

lonk 6y ago

Title says tech stack but content is about css

sys_64738 6y ago

The new interface caused my iPad to heat up severely so I switched back to the old clunker interface. It might be ancient but it doesn't cause my iPad to heat up.

jonny383 6y ago

I hope this speeds things up for Facebook. On the rare occasions I use it these days to check up on family photos or something, the entire site is fucking painfully slow. Even on my quad core I7 desktop on a fibre backbone connection, I'm routinely waiting 10+ seconds each time I click on the "notification" icon (or any other action).

jrururufuf666 6y ago

who shat in all your brains?

dzonga 6y ago

impressive attack on would be competitors. now new start-ups will look up this doc and say, ahya let's build our interfaces with react + relay. & the new css | js wizardry. when they don't have the manpower and time to do so. end of day can't launch. when they forget this rewrite is implemented 15 years later when fb is already making money. and likewise, as other commentators have said in the thread - we have failed as an industry due to usability regression

cjohansson 6y ago

I hope the new fb works with Javascript disabled, like it did in the old days

xxxmaster 6y ago

I wonder how much time and how many managers/PMs/engineers (a.k.a. Prod Dev) did it take to refactor/rebuild it? Or you can throw a number in terms of money?

lovetocode 6y ago

They reduced CSS by 80% but the new site looks like garbage! On the desktop, It looks like a mobile app just really stretched out.

slorber 6y ago

If you want to know more about the atomic css-in-js Facebook is using, check my article https://sebastienlorber.com/atomic-css-in-js https://sebastienlorber.com/atomic-css-in-js

tectonic 6y ago

https://saagarjha.com/blog/2020/05/10/why-we-at-famous-company-switched-to-hyped-technology/ https://saagarjha.com/blog/2020/05/10/why-we-at-famous-compa...