5 ms·

Has anyone written a large React application yet? Preferably open source?

by asdad 12y ago

jypepin 12y ago
I don't have any open source examples, but I have multiple friends at different mid-size startups who replaced backbone with react and they are all super happy about it. I'm looking forward to try React myself, but haven't yet. Seems like React is here to stay and become really really awesome, I haven't heard anybody say bad things about it.
- Fishkins 12y ago
  > I have multiple friends at different mid-size startups who replaced backbone with react They all replaced backbone with react? I haven't really used either, but I thought a lot of people used backbone and react together, since they excel at different things.
  - findjashua 12y ago
    i'm assuming he meant 'replaced backbone views with react'
spicyj 12y ago
At Khan Academy most of our frontend is now using React (including our personalized learning dashboard, coach reports, question editor [1], etc.) and we're really happy with it. We have about 750 React components and 50,000 lines of JSX now. We've migrated pieces incrementally and React is really great for doing that because it doesn't try to own your whole app. My friends and I also just launched Vim Awesome [2], which is not "large" but is completely written in React and is open source if you're curious to look at it. [1]: https://github.com/Khan/perseus https://github.com/Khan/perseus [2]: http://vimawesome.com/ http://vimawesome.com/
- subsection1h 12y ago
  When I scroll down the Vim Awesome home page, click a link, and then go back to the home page (Alt-Left), I'm directed to the top of the home page rather than the location on the home page where I left off. Is this issue caused by React? (Every site I've evaluated that's powered by Meteor has this issue, and I hate it.)
  - spicyj 12y ago
    No, this is most likely an artifact of react-nested-router (https://github.com/rpflorence/react-nested-router https://github.com/rpflorence/react-nested-router) not currently preserving the scroll position. Definitely not a constraint imposed by React. Edit: Or this may be due to the fact that we don't properly cache the fetched plugin list on the client side so we end up re-fetching it when you go back. Either way, this is not a React problem.
    - divad12 12y ago
      Yes, this is my bad. :) I added an issue to GitHub about it: https://github.com/divad12/vim-awesome/issues/14 https://github.com/divad12/vim-awesome/issues/14 Pull requests welcome!
deleted 12y ago
[deleted]
FreezerburnV 12y ago
The Atom text editor being created by github just introduced a react back end for all of its rendering, and it recently went open source. :)
dustingetz 12y ago
I've architected two enterprise-class business apps - both projects would have failed without react IMO. Neither are open source, but both use this library for widgets: https://github.com/wingspan/wingspan-forms https://github.com/wingspan/wingspan-forms
Pephers 12y ago
Not enterprise kind-of large, but I'm in the process of building a booking web app (https://zapla.co https://zapla.co) using React and Backbone Models/Collections. I made the decision to switch from Backbone.View to React about ~2 weeks into the project, and so far I'm extremely pleased with it and have not regretted it! Unfortunately, the code isn't open source though.
- linhmtran168 12y ago
  How do you bind Backbone Models/Collections to React Components as in the case with Backbone.View?
  - UberMouse 12y ago
    I use React.Backbone for this. Very easy to use, makes sure the components rerender whenever the model or collection they are bound to changes. https://github.com/usepropeller/react.backbone https://github.com/usepropeller/react.backbone
  - Pephers 12y ago
    What I've settled with for now is to attach an instance of the Model/Collection as a prop on the React component and syncing it to Reacts' state. I do this by attaching a callback on the sync, add, change, remove events and use the the toJSON() method to copy it to the React state like so: this.setState({data: this.props.model.toJSON()}); When saving a form, I have a method which handles the form submission. It copies over the state to the model and then saves it using: this.props.model.set(this.state.data); this.props.model.save(); In additional to this, I've built a tiny dispatcher to instantitiate my models and collections only once. In this way all parts of the app will always work on the same data and by in sync.
presty 12y ago
instagram.com but not open source
stevejohnson 12y ago
Literally Canvas uses React for its GUI: http://literallycanvas.com http://literallycanvas.com It isn't using JSX yet because CoffeeScript integration didn't exist until recently, but it was still a joy to use.
- nacs 12y ago
  If you hold the mouse down and drag off-canvas to the left or bottom sides, the painting cursor shoots up to y = 0 and leaves a streak.
  - stevejohnson 12y ago
    Thanks for the bug report. I've saved it in the GitHub issue tracker. Pretty weird behavior, definitely fixable.
- sudhirj 12y ago
  Where does JSX + Coffeescript integration exist now?
  - mambodog 12y ago
    I wrote a JSX transformer for Coffeescript, it's quite stable now: https://github.com/jsdf/coffee-react-transform https://github.com/jsdf/coffee-react-transform
    - stevejohnson 12y ago
      I used this for a small app (drawplz.com) and liked it quite a bit. Thanks for your work.
ssorallen 12y ago
Our UI for Marathon[1], a framework on top of Apache Mesos, is written in React and uses Backbone models. It uses Require JS for modules and compiling the source into a single file for distribution. The JS root is in the assets directory[2]. There are a few guidelines we have adopted through trial and error so far: * Use React.addons.classSet[3] liberally. Class name generation becomes simpler for future developers to read. * Define propTypes[4] for every component. Debugging becomes easier because React gives you informative warnings about mismatched propTypes. [1] https://github.com/mesosphere/marathon https://github.com/mesosphere/marathon [2] https://github.com/mesosphere/marathon/tree/master/src/main/resources/assets/js https://github.com/mesosphere/marathon/tree/master/src/main/... [3] https://facebook.github.io/react/docs/class-name-manipulation.html https://facebook.github.io/react/docs/class-name-manipulatio... [4] https://facebook.github.io/react/docs/reusable-components.html#prop-validation https://facebook.github.io/react/docs/reusable-components.ht...
zbyte64 12y ago
We just launched a Drag and Drop website builder made in React: http://buildicus.com/ http://buildicus.com/ I have been distilling all the lessons learned into a lesson plan: https://github.com/zbyte64/reactjs-crashcourse https://github.com/zbyte64/reactjs-crashcourse
- lumpypua 12y ago
  I downloaded and took a look at your lesson plan. Nice. It's solid and covers a bunch of usage patterns that aren't clear in the react tutorial. My one suggestion: host it on github pages and put a link to that in the README. It's already basically ready to roll. Way more accessible than downloading a zip and opening an html file.
aboodman 12y ago
The majority of the UI for Camlistore is written in React. Unfortunately it's not running anywhere publicly, so you can't play with it. But you could run it locally and poke around. www.camlistore.org https://camlistore.googlesource.com/camlistore/+/master/server/camlistored/ui/ https://camlistore.googlesource.com/camlistore/+/master/serv...
hcarvalhoalves 12y ago
I'm finishing a commercial project now and the experience has been very positive. Shorter time to ship, fast UIs and less bugs (because it's easier to reason about state).
peterarmstrong 12y ago
At Ruboss, we rewrote Dashcube (https://dashcube.com/ https://dashcube.com/) in React, after having performance issues with another JS framework. The rewrite took 4 months, and was totally worth it. We're extremely happy with React...
strager 12y ago
http://facebook.github.io/react/docs/examples.html http://facebook.github.io/react/docs/examples.html
fuzzythinker 12y ago
According to their blog post in May, "Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) are using React in production." http://facebook.github.io/react/blog/2014/05/29/one-year-of-open-source-react.html http://facebook.github.io/react/blog/2014/05/29/one-year-of-...
avanderhoorn 12y ago
Glimpse v2 is using React/Flux for pretty much everything client related and all parts are open source and on github. For those who don't know, Glimpse is an OSS diagnostics platform and we are in the process of building out v2 (including NodeJS and .NET backends) - http://getglimpse.com http://getglimpse.com. Current work on the front end can be tracked here - https://github.com/glimpse/glimpse.client/tree/version-2 https://github.com/glimpse/glimpse.client/tree/version-2. Very much a work in progress but all good so far. The system is quite large. In the end it will contain several major "sub applications" that users can switch between and each "application" has large number of components, major interactions, etc. We are currently using the following stack: - Views - ReactJS, - Server Comms - Superagent + Primus (SocketIO), - Build - Gulp, - Packaging components - Webpack, - Module System - CommonJS, - Message Bus/Dispatcher - Postal.js, - Testing - Jasmine, Jest, Chance, Karma, etc

Has anyone written a large React application yet? Preferably open source?

by asdad 12y ago

Has anyone written a large React application yet? Preferably open source?

I don't have any open source examples, but I have multiple friends at different mid-size startups who replaced backbone with react and they are all super happy about it. I'm looking forward to try React myself, but haven't yet. Seems like React is here to stay and become really really awesome, I haven't heard anybody say bad things about it.

Fishkins 12y ago
> I have multiple friends at different mid-size startups who replaced backbone with react They all replaced backbone with react? I haven't really used either, but I thought a lot of people used backbone and react together, since they excel at different things.
- findjashua 12y ago
  i'm assuming he meant 'replaced backbone views with react'

spicyj 12y ago

At Khan Academy most of our frontend is now using React (including our personalized learning dashboard, coach reports, question editor [1], etc.) and we're really happy with it. We have about 750 React components and 50,000 lines of JSX now. We've migrated pieces incrementally and React is really great for doing that because it doesn't try to own your whole app. My friends and I also just launched Vim Awesome [2], which is not "large" but is completely written in React and is open source if you're curious to look at it. [1]: https://github.com/Khan/perseus https://github.com/Khan/perseus [2]: http://vimawesome.com/ http://vimawesome.com/

subsection1h 12y ago
When I scroll down the Vim Awesome home page, click a link, and then go back to the home page (Alt-Left), I'm directed to the top of the home page rather than the location on the home page where I left off. Is this issue caused by React? (Every site I've evaluated that's powered by Meteor has this issue, and I hate it.)
- spicyj 12y ago
  No, this is most likely an artifact of react-nested-router (https://github.com/rpflorence/react-nested-router https://github.com/rpflorence/react-nested-router) not currently preserving the scroll position. Definitely not a constraint imposed by React. Edit: Or this may be due to the fact that we don't properly cache the fetched plugin list on the client side so we end up re-fetching it when you go back. Either way, this is not a React problem.
  - divad12 12y ago
    Yes, this is my bad. :) I added an issue to GitHub about it: https://github.com/divad12/vim-awesome/issues/14 https://github.com/divad12/vim-awesome/issues/14 Pull requests welcome!

deleted 12y ago

[deleted]

FreezerburnV 12y ago

The Atom text editor being created by github just introduced a react back end for all of its rendering, and it recently went open source. :)

dustingetz 12y ago

I've architected two enterprise-class business apps - both projects would have failed without react IMO. Neither are open source, but both use this library for widgets: https://github.com/wingspan/wingspan-forms https://github.com/wingspan/wingspan-forms

Pephers 12y ago

Not enterprise kind-of large, but I'm in the process of building a booking web app (https://zapla.co https://zapla.co) using React and Backbone Models/Collections. I made the decision to switch from Backbone.View to React about ~2 weeks into the project, and so far I'm extremely pleased with it and have not regretted it! Unfortunately, the code isn't open source though.

linhmtran168 12y ago
How do you bind Backbone Models/Collections to React Components as in the case with Backbone.View?
- UberMouse 12y ago
  I use React.Backbone for this. Very easy to use, makes sure the components rerender whenever the model or collection they are bound to changes. https://github.com/usepropeller/react.backbone https://github.com/usepropeller/react.backbone
- Pephers 12y ago
  What I've settled with for now is to attach an instance of the Model/Collection as a prop on the React component and syncing it to Reacts' state. I do this by attaching a callback on the sync, add, change, remove events and use the the toJSON() method to copy it to the React state like so: this.setState({data: this.props.model.toJSON()}); When saving a form, I have a method which handles the form submission. It copies over the state to the model and then saves it using: this.props.model.set(this.state.data); this.props.model.save(); In additional to this, I've built a tiny dispatcher to instantitiate my models and collections only once. In this way all parts of the app will always work on the same data and by in sync.

presty 12y ago

instagram.com but not open source

stevejohnson 12y ago

Literally Canvas uses React for its GUI: http://literallycanvas.com http://literallycanvas.com It isn't using JSX yet because CoffeeScript integration didn't exist until recently, but it was still a joy to use.

nacs 12y ago
If you hold the mouse down and drag off-canvas to the left or bottom sides, the painting cursor shoots up to y = 0 and leaves a streak.
- stevejohnson 12y ago
  Thanks for the bug report. I've saved it in the GitHub issue tracker. Pretty weird behavior, definitely fixable.
sudhirj 12y ago
Where does JSX + Coffeescript integration exist now?
- mambodog 12y ago
  I wrote a JSX transformer for Coffeescript, it's quite stable now: https://github.com/jsdf/coffee-react-transform https://github.com/jsdf/coffee-react-transform
  - stevejohnson 12y ago
    I used this for a small app (drawplz.com) and liked it quite a bit. Thanks for your work.

ssorallen 12y ago

Our UI for Marathon[1], a framework on top of Apache Mesos, is written in React and uses Backbone models. It uses Require JS for modules and compiling the source into a single file for distribution. The JS root is in the assets directory[2]. There are a few guidelines we have adopted through trial and error so far: * Use React.addons.classSet[3] liberally. Class name generation becomes simpler for future developers to read. * Define propTypes[4] for every component. Debugging becomes easier because React gives you informative warnings about mismatched propTypes. [1] https://github.com/mesosphere/marathon https://github.com/mesosphere/marathon [2] https://github.com/mesosphere/marathon/tree/master/src/main/resources/assets/js https://github.com/mesosphere/marathon/tree/master/src/main/... [3] https://facebook.github.io/react/docs/class-name-manipulation.html https://facebook.github.io/react/docs/class-name-manipulatio... [4] https://facebook.github.io/react/docs/reusable-components.html#prop-validation https://facebook.github.io/react/docs/reusable-components.ht...

zbyte64 12y ago

We just launched a Drag and Drop website builder made in React: http://buildicus.com/ http://buildicus.com/ I have been distilling all the lessons learned into a lesson plan: https://github.com/zbyte64/reactjs-crashcourse https://github.com/zbyte64/reactjs-crashcourse

lumpypua 12y ago
I downloaded and took a look at your lesson plan. Nice. It's solid and covers a bunch of usage patterns that aren't clear in the react tutorial. My one suggestion: host it on github pages and put a link to that in the README. It's already basically ready to roll. Way more accessible than downloading a zip and opening an html file.

aboodman 12y ago

The majority of the UI for Camlistore is written in React. Unfortunately it's not running anywhere publicly, so you can't play with it. But you could run it locally and poke around. www.camlistore.org https://camlistore.googlesource.com/camlistore/+/master/server/camlistored/ui/ https://camlistore.googlesource.com/camlistore/+/master/serv...

hcarvalhoalves 12y ago

I'm finishing a commercial project now and the experience has been very positive. Shorter time to ship, fast UIs and less bugs (because it's easier to reason about state).

peterarmstrong 12y ago

At Ruboss, we rewrote Dashcube (https://dashcube.com/ https://dashcube.com/) in React, after having performance issues with another JS framework. The rewrite took 4 months, and was totally worth it. We're extremely happy with React...

strager 12y ago

http://facebook.github.io/react/docs/examples.html http://facebook.github.io/react/docs/examples.html

fuzzythinker 12y ago

According to their blog post in May, "Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) are using React in production." http://facebook.github.io/react/blog/2014/05/29/one-year-of-open-source-react.html http://facebook.github.io/react/blog/2014/05/29/one-year-of-...

avanderhoorn 12y ago

Glimpse v2 is using React/Flux for pretty much everything client related and all parts are open source and on github. For those who don't know, Glimpse is an OSS diagnostics platform and we are in the process of building out v2 (including NodeJS and .NET backends) - http://getglimpse.com http://getglimpse.com. Current work on the front end can be tracked here - https://github.com/glimpse/glimpse.client/tree/version-2 https://github.com/glimpse/glimpse.client/tree/version-2. Very much a work in progress but all good so far. The system is quite large. In the end it will contain several major "sub applications" that users can switch between and each "application" has large number of components, major interactions, etc. We are currently using the following stack: - Views - ReactJS, - Server Comms - Superagent + Primus (SocketIO), - Build - Gulp, - Packaging components - Webpack, - Module System - CommonJS, - Message Bus/Dispatcher - Postal.js, - Testing - Jasmine, Jest, Chance, Karma, etc