5 ms·

What are good examples of popular websites (not behind a login) that make use of Vue or React? I ask because I keep reading about it, all programmers seem to u

by TekMol 9y ago

What are good examples of popular websites (not behind a login) that make use of Vue or React? I ask because I keep reading about it, all programmers seem to use it, but I just don't come across websites that use it. Is it only used for backend dashboards? Or do all Vue/React sites fail to gain traction for some reason?

madeofpalk 9y ago
Mobile Twitter uses React. https://mobile.twitter.com/facebook https://mobile.twitter.com/facebook Airbnb uses React https://www.airbnb.com.au/rooms/432044 https://www.airbnb.com.au/rooms/432044 Facebook, Facebook Messenger, Instagram, Netflix, Reddit Mobile, new Reddit Profile pages are all high profile sites using React that aren't just 'backend dashboards'.
- TekMol 9y ago
  Interesting. The ones not behind a login (Twitter,AirBnB,Reddit Mobile) are sites that feel laggy and clunky to me. With slow loading content, loading animations, laggy scrolling, too much stuff opening in new tabs, confusing interfaces. I wonder if React causes/incentivises this or if it's design decisions by the coders/designers/managers. In contrast, pages like Reddit Desktop, Google and Amazon work much better for me.
  - andrewfong 9y ago
    > I wonder if React causes/incentivises this or if it's design decisions by the coders/designers/managers. Both. React makes it easier to write complex JavaScript web apps. Complex JavaScript means you have a lot of rope with which to hang yourself.
  - patrickaljord 9y ago
    Actually the new Twitter Mobile called Twitter Lite is super fast, did you try the latest version? It's a full progressive web app that works offline, has notifications and super fast scrolling. It was designed to work on low end Android device, give it a try: https://mobile.twitter.com https://mobile.twitter.com
    - TekMol 9y ago
      At first it gives me a white page with a little blue twitter logo. Then the twitter logo disappears and I see a white page for a second. Then it gives me a strange blue page with a giant twitter logo and two buttons glued to the bottom that tell me to log in.
      - matt4077 9y ago
        Are you perchance using a RFC6214 network? Because the page is around 600kb compressed and renders in less than 500ms for me, on an empty cache.
  - matt4077 9y ago
    I don't know why you're arbitrarily dividing the data into "behind a login" and, well, "not". I doesn't make any difference. For the rest: opening in tabs is obviously a design choice. So are "confusing interfaces"–whatever that may mean, because if those reddit and twitter mobile sites are confusing you, good luck with amazon. React build a DOM. You can make a table-based layout with a spinning e-mail icon if that's what you want. As for load times: mobile.reddit.com comes in at just under 1MB, but that's compressed to 400kb which is basically irrelevant once you expand the first image posts. JS is just about 200kb compressed. And once it's loaded, only the JSON-encoded data goes over the wire: on the first click anywhere, the data transfer is amortised because the hundreds of <div class="asdasda"> don't have to be transferred.
    - literallycancer 9y ago
      Presumably he wants to see more than just the landing page and doesn't want to bother registering.
  - sotojuan 9y ago
    Welcome to large JS apps. Doesn't matter what the library is—they'll always be slow.
  - madeofpalk 9y ago
    Twitter loads pretty well IMHO http://gfycat.com/SkinnyBlueCrane http://gfycat.com/SkinnyBlueCrane over a 4G connection. The new Reddit profile pages do not. JS libraries (like React) are just tools developers have. They can make fast sites with them, and they can make slow sites with them. We use React because it makes it easier to optimise our site to make it load very fast.
  - inimino 9y ago
    Big web properties like these tend to be developed by huge teams and tend to prioritize features over performance. It's partly Conway's law and partly the result of having lots of users and features being easier to add than take away. None of these things really have much to do with React. If your app was going to be slow anyway, React won't help you. However, like Angular, React makes it easier to break things down into components and work on them separately, so it's popular with the same big teams that make bulky and slow web pages, just like Angular was before it. Correlation, not causation. Unlike Angular, React is also fantastic for small teams making lean pages that load blazing fast, which is why it's become so popular so quickly.
  - beager 9y ago
    I don't contest that those sites feel laggy and clunky, whether by poor load time, poor UX/UI, or some larger dysfunction. However, I would offer that the usage of React is not so much the cause of poor performance but rather a step taken to remedy scale lag. Large apps like the one you mention are big behemoths that take months to adopt new architectures and patterns, but those activities are required to ensure the scalability of the infrastructure and product development. During the time those apps are not fully transitioned to React (and Redux, and isomorphic rendering, and a fully-featured API, and webpack, and a litany of other tools), they might feel half-baked or sluggish, because you may have a page loaded with server-side template rendering, but half of your components on the page are upgraded to React, and take a second to initialize. IMO, React is a tool that provides an appropriately rigorous rubric for component development and a structure for large-scale interplay of reusable/composable frontend components, which was required for it to have any viability for a large org like Facebook. A lot of web apps are on the long trek to avail that potential fully, but while they're in transition, the experience of those apps will be a little disjointed or degraded.
- frik 9y ago
  What part of Facebook? I know the search page on Facebook mobile web version uses React. But what else? It's not like every Facebook page uses React, most pages are still the PHP rendered legacy stuff, that is around for many years.
Klathmon 9y ago
Reddit's new profile pages and their mobile web app both use react.
- TekMol 9y ago
  These? https://www.reddit.com/user/spez https://www.reddit.com/user/spez Aren't those just static html pages rendered serverside? Is there a blog post about them or something?
  - Klathmon 9y ago
    If they made a technical post about them I haven't seen it, but there was an announcement for them as a feature. I just know that my react-devtools extension and the redux state inspector both lit up when I went on that page.
  - zepolen 9y ago
    That page is using React.
  - Macha 9y ago
    The new pages like above are React apps. The old pages like below: https://www.reddit.com/user/HeinieKaboobler https://www.reddit.com/user/HeinieKaboobler Are server side rendered. It's not a popular change. Mostly because of people feeling it'd pull focus from subreddits to profiles, but also some complaints about the performance loss and lower density: https://www.reddit.com/r/announcements/comments/60p3n1/tldr_today_were_testing_out_a_new_feature_that/ https://www.reddit.com/r/announcements/comments/60p3n1/tldr_...
drewjaja 9y ago
https://www.ubereats.com/ https://www.ubereats.com/ uses React
golergka 9y ago
Facebook.com, for example. Here's a more detailed list: https://github.com/facebook/react/wiki/sites-using-react https://github.com/facebook/react/wiki/sites-using-react
- TekMol 9y ago
  Facebook is behind a login.
  - patrickaljord 9y ago
    Vue and React are mostly done for building web apps behind login, public facing websites are usually static html and that's not such a great use case for Vue and React except maybe in the comment section which is usually in an iframe anyway such as a disqus or Facebook comments (which uses react.js).
louisgeo 9y ago
Vuejs is also a good match for single-page demos and apps within a larger website. Here is an example where a product demo was built with VueJS while the rest of the site is not. https://sightengine.com/demo https://sightengine.com/demo
- wand3r 9y ago
  cool site. It did flag a cardboard box full of beer as nudity. That said, it looks pretty sharp and works well on this terrible old phone I have
sotojuan 9y ago
Slack will. From https://slack.engineering/rebuilding-slacks-emoji-picker-in-react-bfbd8ce6fbfe https://slack.engineering/rebuilding-slacks-emoji-picker-in-... > Rebuilding the Emoji Picker in React resulted in faster rendering and simplified code that’s easier to maintain. We’re extending these gains to the rest of our codebase by transitioning fully to React Can't wait to see Slack's app be just as slow.
biscotti 9y ago
Gitlab uses Vue: https://about.gitlab.com/2017/02/06/vue-big-plan/ https://about.gitlab.com/2017/02/06/vue-big-plan/
literallycancer 9y ago
Here you go https://wappalyzer.com/applications/vue-js https://wappalyzer.com/applications/vue-js (first page of google results) From what I understand, Vue is quite popular with the laravel community.
- theSpaceOctopus 9y ago
  Aside - Jeffrey Way, who runs a popular tutorial site called Laracasts, maintains a free Learning Vue series. It's worth checking out, Jeffrey is a great teacher. https://laracasts.com/series/learn-vue-2-step-by-step https://laracasts.com/series/learn-vue-2-step-by-step

by TekMol 9y ago

madeofpalk 9y ago

Mobile Twitter uses React. https://mobile.twitter.com/facebook https://mobile.twitter.com/facebook Airbnb uses React https://www.airbnb.com.au/rooms/432044 https://www.airbnb.com.au/rooms/432044 Facebook, Facebook Messenger, Instagram, Netflix, Reddit Mobile, new Reddit Profile pages are all high profile sites using React that aren't just 'backend dashboards'.

TekMol 9y ago
Interesting. The ones not behind a login (Twitter,AirBnB,Reddit Mobile) are sites that feel laggy and clunky to me. With slow loading content, loading animations, laggy scrolling, too much stuff opening in new tabs, confusing interfaces. I wonder if React causes/incentivises this or if it's design decisions by the coders/designers/managers. In contrast, pages like Reddit Desktop, Google and Amazon work much better for me.
- andrewfong 9y ago
  > I wonder if React causes/incentivises this or if it's design decisions by the coders/designers/managers. Both. React makes it easier to write complex JavaScript web apps. Complex JavaScript means you have a lot of rope with which to hang yourself.
- patrickaljord 9y ago
  Actually the new Twitter Mobile called Twitter Lite is super fast, did you try the latest version? It's a full progressive web app that works offline, has notifications and super fast scrolling. It was designed to work on low end Android device, give it a try: https://mobile.twitter.com https://mobile.twitter.com
  - TekMol 9y ago
    At first it gives me a white page with a little blue twitter logo. Then the twitter logo disappears and I see a white page for a second. Then it gives me a strange blue page with a giant twitter logo and two buttons glued to the bottom that tell me to log in.
    - matt4077 9y ago
      Are you perchance using a RFC6214 network? Because the page is around 600kb compressed and renders in less than 500ms for me, on an empty cache.
- matt4077 9y ago
  I don't know why you're arbitrarily dividing the data into "behind a login" and, well, "not". I doesn't make any difference. For the rest: opening in tabs is obviously a design choice. So are "confusing interfaces"–whatever that may mean, because if those reddit and twitter mobile sites are confusing you, good luck with amazon. React build a DOM. You can make a table-based layout with a spinning e-mail icon if that's what you want. As for load times: mobile.reddit.com comes in at just under 1MB, but that's compressed to 400kb which is basically irrelevant once you expand the first image posts. JS is just about 200kb compressed. And once it's loaded, only the JSON-encoded data goes over the wire: on the first click anywhere, the data transfer is amortised because the hundreds of <div class="asdasda"> don't have to be transferred.
  - literallycancer 9y ago
    Presumably he wants to see more than just the landing page and doesn't want to bother registering.
- sotojuan 9y ago
  Welcome to large JS apps. Doesn't matter what the library is—they'll always be slow.
- madeofpalk 9y ago
  Twitter loads pretty well IMHO http://gfycat.com/SkinnyBlueCrane http://gfycat.com/SkinnyBlueCrane over a 4G connection. The new Reddit profile pages do not. JS libraries (like React) are just tools developers have. They can make fast sites with them, and they can make slow sites with them. We use React because it makes it easier to optimise our site to make it load very fast.
- inimino 9y ago
  Big web properties like these tend to be developed by huge teams and tend to prioritize features over performance. It's partly Conway's law and partly the result of having lots of users and features being easier to add than take away. None of these things really have much to do with React. If your app was going to be slow anyway, React won't help you. However, like Angular, React makes it easier to break things down into components and work on them separately, so it's popular with the same big teams that make bulky and slow web pages, just like Angular was before it. Correlation, not causation. Unlike Angular, React is also fantastic for small teams making lean pages that load blazing fast, which is why it's become so popular so quickly.
- beager 9y ago
  I don't contest that those sites feel laggy and clunky, whether by poor load time, poor UX/UI, or some larger dysfunction. However, I would offer that the usage of React is not so much the cause of poor performance but rather a step taken to remedy scale lag. Large apps like the one you mention are big behemoths that take months to adopt new architectures and patterns, but those activities are required to ensure the scalability of the infrastructure and product development. During the time those apps are not fully transitioned to React (and Redux, and isomorphic rendering, and a fully-featured API, and webpack, and a litany of other tools), they might feel half-baked or sluggish, because you may have a page loaded with server-side template rendering, but half of your components on the page are upgraded to React, and take a second to initialize. IMO, React is a tool that provides an appropriately rigorous rubric for component development and a structure for large-scale interplay of reusable/composable frontend components, which was required for it to have any viability for a large org like Facebook. A lot of web apps are on the long trek to avail that potential fully, but while they're in transition, the experience of those apps will be a little disjointed or degraded.
frik 9y ago
What part of Facebook? I know the search page on Facebook mobile web version uses React. But what else? It's not like every Facebook page uses React, most pages are still the PHP rendered legacy stuff, that is around for many years.

Klathmon 9y ago

Reddit's new profile pages and their mobile web app both use react.

TekMol 9y ago
These? https://www.reddit.com/user/spez https://www.reddit.com/user/spez Aren't those just static html pages rendered serverside? Is there a blog post about them or something?
- Klathmon 9y ago
  If they made a technical post about them I haven't seen it, but there was an announcement for them as a feature. I just know that my react-devtools extension and the redux state inspector both lit up when I went on that page.
- zepolen 9y ago
  That page is using React.
- Macha 9y ago
  The new pages like above are React apps. The old pages like below: https://www.reddit.com/user/HeinieKaboobler https://www.reddit.com/user/HeinieKaboobler Are server side rendered. It's not a popular change. Mostly because of people feeling it'd pull focus from subreddits to profiles, but also some complaints about the performance loss and lower density: https://www.reddit.com/r/announcements/comments/60p3n1/tldr_today_were_testing_out_a_new_feature_that/ https://www.reddit.com/r/announcements/comments/60p3n1/tldr_...

drewjaja 9y ago

https://www.ubereats.com/ https://www.ubereats.com/ uses React

golergka 9y ago

Facebook.com, for example. Here's a more detailed list: https://github.com/facebook/react/wiki/sites-using-react https://github.com/facebook/react/wiki/sites-using-react

TekMol 9y ago
Facebook is behind a login.
- patrickaljord 9y ago
  Vue and React are mostly done for building web apps behind login, public facing websites are usually static html and that's not such a great use case for Vue and React except maybe in the comment section which is usually in an iframe anyway such as a disqus or Facebook comments (which uses react.js).

louisgeo 9y ago

Vuejs is also a good match for single-page demos and apps within a larger website. Here is an example where a product demo was built with VueJS while the rest of the site is not. https://sightengine.com/demo https://sightengine.com/demo

wand3r 9y ago
cool site. It did flag a cardboard box full of beer as nudity. That said, it looks pretty sharp and works well on this terrible old phone I have

sotojuan 9y ago

Slack will. From https://slack.engineering/rebuilding-slacks-emoji-picker-in-react-bfbd8ce6fbfe https://slack.engineering/rebuilding-slacks-emoji-picker-in-... > Rebuilding the Emoji Picker in React resulted in faster rendering and simplified code that’s easier to maintain. We’re extending these gains to the rest of our codebase by transitioning fully to React Can't wait to see Slack's app be just as slow.

biscotti 9y ago

Gitlab uses Vue: https://about.gitlab.com/2017/02/06/vue-big-plan/ https://about.gitlab.com/2017/02/06/vue-big-plan/

literallycancer 9y ago

Here you go https://wappalyzer.com/applications/vue-js https://wappalyzer.com/applications/vue-js (first page of google results) From what I understand, Vue is quite popular with the laravel community.

theSpaceOctopus 9y ago
Aside - Jeffrey Way, who runs a popular tutorial site called Laracasts, maintains a free Learning Vue series. It's worth checking out, Jeffrey is a great teacher. https://laracasts.com/series/learn-vue-2-step-by-step https://laracasts.com/series/learn-vue-2-step-by-step