7 ms·

Do you guys use any public websites that are based Vue, React or alike? Everytime I search for sites that use frameworks like Vue or React, I came up with most

by TekMol 9y ago

Do you guys use any public websites that are based Vue, React or alike? Everytime I search for sites that use frameworks like Vue or React, I came up with mostly empty hands. Except for example pages or pages by coders for coders. Or pages that "use" one of the frameworks but seem to make no use at all of the functionality. When I ask around people usually tell me "Well, at my company we make a dashboard for another company and it's based on ..." Any popular public sites (Aka no login needed to access it. So Facebook doesn't count.) for non-coders out there that use these frameworks?

Method-X 9y ago
Here's a project I'm working on that uses react: https://edabit.com https://edabit.com
- TekMol 9y ago
  Thanks! Tried it a bit and thought: "Hmm.. it's probably react that causes all these spinning "loaders" everytime I click somewhere. Wouldn't it be better without?". How do you see that? EDIT: Ups, why the downvotes? With spinning "loaders" I mean the "loading" animation the website shows. The spinning circle. Anything bad about this question?
  - JasonSage 9y ago
    > Anything bad about this question? You didn't ask a question, you jumped to a (wildly inaccurate) conclusion.
    - TekMol 9y ago
      In which sense inaccurate? If the server would just send a rendered page, why would a loading animation be needed?
      - JasonSage 9y ago
        > it's probably react that causes all these spinning "loaders" everytime I click somewhere Statistically speaking it's _probably_ jQuery or pure JavaScript. These loading spinners have been around to make site loading more attractive for a long time, predating React, Vue, Ember, even Backbone. I have tons of clients on Wordpress that love this kind of thing even if all it does is make their site load without a flash of unstyled content (FOUC). > If the server would just send a rendered page React is primarily a client-side framework, but it's possible to render it on the server using Node. However, a lot of sites still use React to enhance an existing frontend, and therefore do not port their entire server to Node to render with React. > why would a loading animation be needed? Alright so lets assume you've server-rendered with React, do you still need a loading animation? Maybe. All these sites you click on that have loading spinners are all server-rendered pages too, but that doesn't stop people from throwing jQuery plugins at it to make their sites look fancy and prevent a FOUC. It's more a question of how many images the site wants to display above the fold. If there's a bunch of images, your site will not load fast and you can choose between letting users see a gappy page gradually get filled in or sit and look at a spinner for 1.5s. EDIT: not to mention all the advertising trackers these sites have enabled. This makes your image-loading all the more laggy.
  - Method-X 9y ago
    The loading spinners happen when data is being fetched from the database. The app itself is downloaded upon initial load and anything from the database will trigger a loading spinner as it's being fetched.
    - TekMol 9y ago
      Yup, I got that. But couldn't a bit of text be loaded instantly instead? Is the time the spinners run determined by the time the server needs to deliver the data? Would they go away when you put the site behind a CDN that delivers the data faster?
      - chickenfries 9y ago
        > But couldn't a bit of text be loaded instantly instead? Yep. You could code your website in such a way to use a mix of serverside rendering and ajax components. This has always been true. Consider something like a server-rendered blog post that has a client-rendered Disqus widget. > Is the time the spinners run determined by the time the server needs to deliver the data? Basically. But you can also render your react app or vue on the server and then have client side rendering take over once the page is loaded. This is perhaps the ideal case but it's more complicated and takes some work to set up (I haven't actually done it).
    - Hedja 9y ago
      Just thought I'd share my experience with this, since I had a similar problem. Spinners make it look like the app is taking ages to load data, even if it's not. If you delay showing the spinner until around a second of loading, it makes things feel a lot faster. The user doesn't need to always know when the app is loading data until there's a significant pause and they need to know stuff is happening.
  - wehere1 9y ago
    lol what kind of websites do you make? internationaloilandgas.com? drbronvillesfootcream.com?
jameshush 9y ago
We're using React on NFL.com's new home page and Vue on https://nextgenstats.nfl.com/ https://nextgenstats.nfl.com/ (two different teams). AirBnB is mostly React too.
- TekMol 9y ago
  Interesting. What would you say are the main advantages over simply passing the data through a server side rendering library?
  - ericmcer 9y ago
    You don't have to render stuff on the server?
    - TekMol 9y ago
      I never felt any pain that my servers do rendering. Did you encounter any problems with it?
      - deleted 9y ago
        [deleted]
  - IgorPartola 9y ago
    Not the grandparent, but it makes things a lot easier. Basically, think of something as trivial as form validation. You need to do it both client and server-side regardless, but client side you might have additional complexity, like "if paying by credit card, show those fields, and if paying by PayPal, redirect." This means that your server might need to be aware of these branches of state that might happen, and it means complexity. On the other hand, if you keep UI state to the UI layer on the client, the server side becomes super simple: you have an API that says something like "here are the shipping and billing details using a credit card. Charge it" or "shipping and billing details + PayPal token. Charge it." There is no "if we are rendering a PayPal processing error, re-render the entire state of the page, preserving all the checkboxes and showing the right bits of the DOM." It's just pure business logic. Something like Vue is also much better geared at doing a UI than a server-side rendered template. It's dynamic by nature, and directly affects the DOM. The state is kept in such a way that it pertains to the UI. If you are processing something like a request to /orders?filter=recent&order=amount&page=3, you have to re-parse the state from the URL and then get the results every time. Vue/VueX will keep the state in a convenient fashion and the URL can be instructed to reflect it. No need to write custom code to interpret it. Simple CRUD stuff is super easy with Vue + VueX + Bootstrap + Django. That's been my stack and I like it. Complicated stuff if much faster to develop using this than to try to use something like Django templates + jQuery.
djmashko2 9y ago
New york times uses React: https://www.nytimes.com/ https://www.nytimes.com/
eat_veggies 9y ago
Quizlet uses react.
jdavis703 9y ago
At issuu we do a lot of React work. Our document viewer and document page are built with it: https://issuu.com/mintymagazine/docs/minty_magazine_issue_10_spring_2017 https://issuu.com/mintymagazine/docs/minty_magazine_issue_10.... Our search page also uses React for everything: https://issuu.com/search?language=all&q=fashion&sortby=date&type=publication https://issuu.com/search?language=all&q=fashion&sortby=date&....
timdorr 9y ago
https://mobile.twitter.com/ https://mobile.twitter.com/ uses React, Redux, and React Router.
CapnCrunchie 9y ago
We use Vue at GitLab. You can see why we chose Vue as written by our front-end lead. https://about.gitlab.com/2016/10/20/why-we-chose-vue/ https://about.gitlab.com/2016/10/20/why-we-chose-vue/
- ElatedOwl 9y ago
  >A simple, but practical example we're using in production: on a GitLab Issue, the issue's state is displayed as either closed or open. That simple value can change often and needs to be represented in several views. With JQuery, we had about 30 or so lines of code to propagate those changes, and those lines involved multiple classes and querying the DOM by hand. Yep, been there. That type of jQuery gobbledygook has resulted in more bugs than I'd like to admit slipping past my team. Vue has been an absolute life saver.
- pythonaut_16 9y ago
  Is there any plan to do a follow up post to this? I'd love to see what work flows or examples you guys are using to progressively upgrade pieces of the application to use Vue. For example, it would be really great to see a blog post with a before and after for a feature that you've converted from jQuery to Vue.
  - CapnCrunchie 9y ago
    This was the followup post our front-end lead wrote: https://about.gitlab.com/2017/02/06/vue-big-plan/ https://about.gitlab.com/2017/02/06/vue-big-plan/ I don't think it's exactly what you were asking for, but I'll pass this suggestion along to our front-end lead that wrote these two posts.
arcosdev 9y ago
https://www.thestar.com/ https://www.thestar.com/ uses React
tylerlh 9y ago
Netflix.com is built using React, including the non-authenticated experience (sign up, sign in, title pages, etc)
zackify 9y ago
react / react router for 100% of https://constructionjobs.com https://constructionjobs.com
bricej13 9y ago
I built my side project with Vue: https://wherecaniwatchmy.team https://wherecaniwatchmy.team Client side rendering saved my bacon when it went mini-viral a few weeks ago. My little home server probably would have keeled over and died had it been rendering all the pages, but just serving static files is a piece of cake.
- nickthemagicman 9y ago
  How do you do SEO?
zer0tonin 9y ago
Pick one : https://github.com/facebook/react/wiki/sites-using-react https://github.com/facebook/react/wiki/sites-using-react
abledon 9y ago
Just install the React Developer Tool extension on chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en https://chrome.google.com/webstore/detail/react-developer-to... It will light up whenever you are navigating a page built w/ React. Plus, you can dig around and see how they structured it. Some times you get funny surprises, like how the Microsoft node js page was using React, but they had deployed a Development build instead of a Production build.
- literallycancer 9y ago
  For Vue, you can use the Vue Devtools extension to do the same. If they deploy in production mode you won't see any details though.
- dingle_thunk 9y ago
  ... Microsoft keep doing that. They've deployed development builds to Office 365 production. Incidentally, Office 365 SharePoint is built on React.
- tym0 9y ago
  Isn't it Slack that deploys a Dev build because "it's easier to debug people's problems this way"?
Zalastax 9y ago
https://youpic.com/ https://youpic.com/ (press explore) uses React and Redux.
christilut 9y ago
My new headless CMS uses Vue: https://www.headless.rest https://www.headless.rest It uses webpack with alot of code splitting so instead of 1 big bundle its many small bundles which should help loading times alot.
jensvdh 9y ago
Airbnb uses React extensively FWIW
jazoom 9y ago
Uses all features of Vue, including SSR, async-loaded components, etc.: https://pricehipster.com https://pricehipster.com
- TekMol 9y ago
  Man, this is so slow that I am typing this comment while the page is loading... Now it loaded. It says: Connection timed out The initial connection between Cloudflare's network and the origin web server timed out. As a result, the web page can not be displayed.
  - jazoom 9y ago
    That's odd because this website is lightning fast. Perhaps there was a network issue? It may be slower for you if you're on the other side of the world, but you shouldn't be able to do much more than switch tabs during the load even if that is the case.
holtalanm 9y ago
I built my (super simple) budgeting app with the vue-pwa template with vue-cli. https://budgetme.surge.sh https://budgetme.surge.sh Disregard the extremely bootstrap-esque css. I threw it together in a matter of hours to just experiment with Vue. Not popular at all, as far as I know, but then I don't even have analytics on it to even know if it is popular or not.

by TekMol 9y ago

Method-X 9y ago

Here's a project I'm working on that uses react: https://edabit.com https://edabit.com

TekMol 9y ago
Thanks! Tried it a bit and thought: "Hmm.. it's probably react that causes all these spinning "loaders" everytime I click somewhere. Wouldn't it be better without?". How do you see that? EDIT: Ups, why the downvotes? With spinning "loaders" I mean the "loading" animation the website shows. The spinning circle. Anything bad about this question?
- JasonSage 9y ago
  > Anything bad about this question? You didn't ask a question, you jumped to a (wildly inaccurate) conclusion.
  - TekMol 9y ago
    In which sense inaccurate? If the server would just send a rendered page, why would a loading animation be needed?
    - JasonSage 9y ago
      > it's probably react that causes all these spinning "loaders" everytime I click somewhere Statistically speaking it's _probably_ jQuery or pure JavaScript. These loading spinners have been around to make site loading more attractive for a long time, predating React, Vue, Ember, even Backbone. I have tons of clients on Wordpress that love this kind of thing even if all it does is make their site load without a flash of unstyled content (FOUC). > If the server would just send a rendered page React is primarily a client-side framework, but it's possible to render it on the server using Node. However, a lot of sites still use React to enhance an existing frontend, and therefore do not port their entire server to Node to render with React. > why would a loading animation be needed? Alright so lets assume you've server-rendered with React, do you still need a loading animation? Maybe. All these sites you click on that have loading spinners are all server-rendered pages too, but that doesn't stop people from throwing jQuery plugins at it to make their sites look fancy and prevent a FOUC. It's more a question of how many images the site wants to display above the fold. If there's a bunch of images, your site will not load fast and you can choose between letting users see a gappy page gradually get filled in or sit and look at a spinner for 1.5s. EDIT: not to mention all the advertising trackers these sites have enabled. This makes your image-loading all the more laggy.
- Method-X 9y ago
  The loading spinners happen when data is being fetched from the database. The app itself is downloaded upon initial load and anything from the database will trigger a loading spinner as it's being fetched.
  - TekMol 9y ago
    Yup, I got that. But couldn't a bit of text be loaded instantly instead? Is the time the spinners run determined by the time the server needs to deliver the data? Would they go away when you put the site behind a CDN that delivers the data faster?
    - chickenfries 9y ago
      > But couldn't a bit of text be loaded instantly instead? Yep. You could code your website in such a way to use a mix of serverside rendering and ajax components. This has always been true. Consider something like a server-rendered blog post that has a client-rendered Disqus widget. > Is the time the spinners run determined by the time the server needs to deliver the data? Basically. But you can also render your react app or vue on the server and then have client side rendering take over once the page is loaded. This is perhaps the ideal case but it's more complicated and takes some work to set up (I haven't actually done it).
  - Hedja 9y ago
    Just thought I'd share my experience with this, since I had a similar problem. Spinners make it look like the app is taking ages to load data, even if it's not. If you delay showing the spinner until around a second of loading, it makes things feel a lot faster. The user doesn't need to always know when the app is loading data until there's a significant pause and they need to know stuff is happening.
- wehere1 9y ago
  lol what kind of websites do you make? internationaloilandgas.com? drbronvillesfootcream.com?

jameshush 9y ago

We're using React on NFL.com's new home page and Vue on https://nextgenstats.nfl.com/ https://nextgenstats.nfl.com/ (two different teams). AirBnB is mostly React too.

TekMol 9y ago
Interesting. What would you say are the main advantages over simply passing the data through a server side rendering library?
- ericmcer 9y ago
  You don't have to render stuff on the server?
  - TekMol 9y ago
    I never felt any pain that my servers do rendering. Did you encounter any problems with it?
    - deleted 9y ago
      [deleted]
- IgorPartola 9y ago
  Not the grandparent, but it makes things a lot easier. Basically, think of something as trivial as form validation. You need to do it both client and server-side regardless, but client side you might have additional complexity, like "if paying by credit card, show those fields, and if paying by PayPal, redirect." This means that your server might need to be aware of these branches of state that might happen, and it means complexity. On the other hand, if you keep UI state to the UI layer on the client, the server side becomes super simple: you have an API that says something like "here are the shipping and billing details using a credit card. Charge it" or "shipping and billing details + PayPal token. Charge it." There is no "if we are rendering a PayPal processing error, re-render the entire state of the page, preserving all the checkboxes and showing the right bits of the DOM." It's just pure business logic. Something like Vue is also much better geared at doing a UI than a server-side rendered template. It's dynamic by nature, and directly affects the DOM. The state is kept in such a way that it pertains to the UI. If you are processing something like a request to /orders?filter=recent&order=amount&page=3, you have to re-parse the state from the URL and then get the results every time. Vue/VueX will keep the state in a convenient fashion and the URL can be instructed to reflect it. No need to write custom code to interpret it. Simple CRUD stuff is super easy with Vue + VueX + Bootstrap + Django. That's been my stack and I like it. Complicated stuff if much faster to develop using this than to try to use something like Django templates + jQuery.

djmashko2 9y ago

New york times uses React: https://www.nytimes.com/ https://www.nytimes.com/

eat_veggies 9y ago

Quizlet uses react.

jdavis703 9y ago

At issuu we do a lot of React work. Our document viewer and document page are built with it: https://issuu.com/mintymagazine/docs/minty_magazine_issue_10_spring_2017 https://issuu.com/mintymagazine/docs/minty_magazine_issue_10.... Our search page also uses React for everything: https://issuu.com/search?language=all&q=fashion&sortby=date&type=publication https://issuu.com/search?language=all&q=fashion&sortby=date&....

timdorr 9y ago

https://mobile.twitter.com/ https://mobile.twitter.com/ uses React, Redux, and React Router.

CapnCrunchie 9y ago

We use Vue at GitLab. You can see why we chose Vue as written by our front-end lead. https://about.gitlab.com/2016/10/20/why-we-chose-vue/ https://about.gitlab.com/2016/10/20/why-we-chose-vue/

ElatedOwl 9y ago
>A simple, but practical example we're using in production: on a GitLab Issue, the issue's state is displayed as either closed or open. That simple value can change often and needs to be represented in several views. With JQuery, we had about 30 or so lines of code to propagate those changes, and those lines involved multiple classes and querying the DOM by hand. Yep, been there. That type of jQuery gobbledygook has resulted in more bugs than I'd like to admit slipping past my team. Vue has been an absolute life saver.
pythonaut_16 9y ago
Is there any plan to do a follow up post to this? I'd love to see what work flows or examples you guys are using to progressively upgrade pieces of the application to use Vue. For example, it would be really great to see a blog post with a before and after for a feature that you've converted from jQuery to Vue.
- CapnCrunchie 9y ago
  This was the followup post our front-end lead wrote: https://about.gitlab.com/2017/02/06/vue-big-plan/ https://about.gitlab.com/2017/02/06/vue-big-plan/ I don't think it's exactly what you were asking for, but I'll pass this suggestion along to our front-end lead that wrote these two posts.

arcosdev 9y ago

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

tylerlh 9y ago

Netflix.com is built using React, including the non-authenticated experience (sign up, sign in, title pages, etc)

zackify 9y ago

react / react router for 100% of https://constructionjobs.com https://constructionjobs.com

bricej13 9y ago

I built my side project with Vue: https://wherecaniwatchmy.team https://wherecaniwatchmy.team Client side rendering saved my bacon when it went mini-viral a few weeks ago. My little home server probably would have keeled over and died had it been rendering all the pages, but just serving static files is a piece of cake.

nickthemagicman 9y ago
How do you do SEO?

zer0tonin 9y ago

Pick one : https://github.com/facebook/react/wiki/sites-using-react https://github.com/facebook/react/wiki/sites-using-react

abledon 9y ago

Just install the React Developer Tool extension on chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en https://chrome.google.com/webstore/detail/react-developer-to... It will light up whenever you are navigating a page built w/ React. Plus, you can dig around and see how they structured it. Some times you get funny surprises, like how the Microsoft node js page was using React, but they had deployed a Development build instead of a Production build.

literallycancer 9y ago
For Vue, you can use the Vue Devtools extension to do the same. If they deploy in production mode you won't see any details though.
dingle_thunk 9y ago
... Microsoft keep doing that. They've deployed development builds to Office 365 production. Incidentally, Office 365 SharePoint is built on React.
tym0 9y ago
Isn't it Slack that deploys a Dev build because "it's easier to debug people's problems this way"?

Zalastax 9y ago

https://youpic.com/ https://youpic.com/ (press explore) uses React and Redux.

christilut 9y ago

My new headless CMS uses Vue: https://www.headless.rest https://www.headless.rest It uses webpack with alot of code splitting so instead of 1 big bundle its many small bundles which should help loading times alot.

jensvdh 9y ago

Airbnb uses React extensively FWIW

jazoom 9y ago

Uses all features of Vue, including SSR, async-loaded components, etc.: https://pricehipster.com https://pricehipster.com

TekMol 9y ago
Man, this is so slow that I am typing this comment while the page is loading... Now it loaded. It says: Connection timed out The initial connection between Cloudflare's network and the origin web server timed out. As a result, the web page can not be displayed.
- jazoom 9y ago
  That's odd because this website is lightning fast. Perhaps there was a network issue? It may be slower for you if you're on the other side of the world, but you shouldn't be able to do much more than switch tabs during the load even if that is the case.

holtalanm 9y ago

I built my (super simple) budgeting app with the vue-pwa template with vue-cli. https://budgetme.surge.sh https://budgetme.surge.sh Disregard the extremely bootstrap-esque css. I threw it together in a matter of hours to just experiment with Vue. Not popular at all, as far as I know, but then I don't even have analytics on it to even know if it is popular or not.