OSCON 2014: How Instagram.com Works; Pete Hunt
Why Stack Overflow recommends it
Stack Overflow users link it when explaining module loading, bundling with Webpack or Browserify, and loading only the JS and CSS a page needs.
Recommended by 1 people across 1 different months, 2014 to 2016.
What it is
A 40-minute OSCON 2014 talk by Pete Hunt on how Instagram.com renders nearly all of its UI in JavaScript. It covers the packaging and push systems, which combine existing open-source tools, and what the team learned running a large JavaScript-heavy site.
What people said
Recommends Matt Smith · 2015-11 · Stack Overflow · on “Importing components from react-bootstrap”
React-Bootstrap has been optimized for use with tools like Webpack [LINK] or Browserify [LINK] . When you grab the minified distribution we provide you are forced to download the entire library, even if you don't necessarily use all of it in your application. For a great run down on the benefits of those tools checkout Pete Hunt - How Instagram Works [this video] . If that is an option you are not ready to explore you can re-assign the ReactBootstrap variable to something shorter like var rb = ReactBootstrap; requiring less typing. I understand your concern about perceived simplicity of raw Bootstrap vs React-Bootstrap. Though when using React, React-Bootstrap's JavaScript implementation of the v
Cites wenjun.yan · 2014-12 · Stack Overflow · on “Turbolinks and Controller-specific assets”
Put your controller specific js in the body tag. Since turbolinks won't touch the html body, you will reload that piece of js code every time you visit the page. In your case <body> <%= javascript_include_tag params[:controller] %> ... </body> But if you have lots of code in your controller js, you may notice that the solution above is kind of time-consuming. Because when you visit the page, that big chunk of code will get reloaded. So how to deal with it? ■ The following method may cause some of the jquery events get bound multiple times. This is a problem of turbolinks. Read this article [LINK] A more effective solution Basically when user first visits your site, you load all the js code,
Cites narvoxx · 2016-10 · Stack Overflow · on “require css in React component affects other components too”
CSS is still loaded into the browser to affect the whole page. The importing of css files is only to modularize your css along with your js, so that when you use your module loader to the fullest, not only are you not loading unnecessary js, you also aren't loading unnecessary css. EDIT: a video on how Instagram works with module loading: [this video] Your best solution is still to namespace your css. Concerning clashing issues, you could use even more verbose classnames than what I used below like mjb-appname-componentname Have your ComonentA's render be: render: function() { return ( <div className="component-a">component a</div> ); } and its css file be .component-a div { width: 100px; height: