Skip to content
Hallway
0:00 / 0:00

#react#jsx#virtualdom

Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 2013

JSConf

286K subscribers • 28 videos on Hallway

YouTube
  • Recommended by 5 people: 5 on Hacker News.
  • A classic. People kept recommending it from 2014 to 2023.
  • Presented by Pete Hunt, developer at Facebook
  • Linked in the descriptionSlides on SlideShare
  • May be out of date. Uploaded 12 years ago, in an area where tools change fast.
  • An opinion. It argues one side of a question engineers disagree on.

Intermediate. Assumes working knowledge.

57K views12 years ago5 recommendations

Web developmentSoftware designReactVue, Svelte, Angular and othersSoftware architecture

Pete Hunt explains the design philosophy behind React, arguing for combining templates with logic and using a virtual DOM.

Announcement of the React Chrome Developer Tools facebook.github.io/react/blog/2014/01/02/react-chrome-develo… "React, the new open-source JS library from Facebook and Instagram, is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React's philosophy quite accurately: twitter.com/cowboy/status/339858717451362304 At Facebook and Instagram, we're trying to push the limits of what's possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, 're-rendering' your entire application when your data changes, and a lightweight implementation of the DOM and events." Pete is a member of the React core team at Facebook and also the sole engineer on Instagram.com. He has also designed and implemented the video encode backend infrastructure for Facebook and Instagram and computer vision infrastructure and general front-end web engineering for Facebook photos. Pete likes to play guitar and rock climbing when he is not hacking. JSConf.Asia is the JavaScript, web and mobile developer conference for Asia. Hotel H2O and Manila Ocean Park, Philippines - 28 + 29 November 2013. Source: 2013.jsconf.asia/blog/2013/10/31/jsconfasia-2013-pete-hunt-r… Slides: slideshare.net/floydophone/react-preso-v2 License: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.

Why it's here

5 people recommend this

What people say. Recommended as a classic talk that explains the core philosophy of React, specifically why separating technologies is not the same as separating concerns.

jasimon Hacker News • Recommends

On “React Hot Loader: Tweak React Components in Real Time”

…his is amazing stuff, thanks Dan! Hopefully it is the beginning of the end of refresh-driven-development. If you are a web developer (front-end/back-end), and you haven't switched to React yet, take this for a spin, and read "Facebook just taught us all how to build websites" ( link ), and watch 'React - Rethinking Best Practices' by Pete Hunt ( link to this video ). The distinction between the back-end and front-end is a product of the complexity introduced by the web with its 'worse is better' mix of badly integrated tools. It made building user interfaces a dark art with all its quirks: - a layouting system that had an active vendetta against humans - Javascript with all its deficiencies - Connasc…
View on Hacker News

yazaddaruvalaon Hacker News • Recommends

On “React is 10 years old”

I'll try one last time: > Sorry none of this makes any sense to me. If you're not familiar with the MVC variants (MVVM, MVP, MVI, MOVE)01 we should start there. Next you should read through some common mistakes of Backbone.js like applications link and some criticisms of MVC on HackerNews in 20120. Finally if you haven't before these talks, they are the ones that sold me on React: - link - link to this video - link 0 link 1 link
View on Hacker News

baddoxon Hacker News • Recommends

On “Compiling JSX with Sweet.js using Readtables”

Pete Hunt addresses this specifically in this React talk starting at 3 minutes: link to this video Basically, the idea is that most JS templating solutions separate technologies (HTML , JS, templating languages), but don't actually separate concerns, because the concern is simply generating and updating DOM regardless of how many technologies you use. Most JavaScript frameworks or libraries that handling generating and updating DOM, like Ember's two-way binding with Handlebars and Angular's dirty checking with directives, don't really separate markup from logic. They just invent a new language to mix with your HTML, and that new language is deliberately made extremely weak.
View on Hacker News

bsimpsonon Hacker News • Recommends

On “Choosing the Right JavaScript Framework”

I've always found it weird that many people put the HTML, JS, and CSS for one component in three different files, but never thought enough about it to put it into words. Pete Hunt (one of React's maintainers) does that here: link to this video React is about separating concerns, not technologies. Everything you need to know to draw an App Bar is in AppBar.jsx. You can dynamically generate the markup with JavaScript, but that doesn't change your separation of concerns, because everything concerning that component lives in that file.
View on Hacker News

chrisco255on Hacker News • Recommends

On “Vue.js vs. React”

JSX & React were literally built to solve Facebook's maintainability concerns, which is one of the most complex client side web apps I can think of. JSX was a hard sell at first 4 years ago, but Pete Hunt did a great job then, explaining how the false separation of concerns between HTML and JS really is unavoidable. You end up with logic in HTML tightly coupled to your JS no matter which way you shake it. link to this video And HTML string template languages have been shown to have numerous shortcomings at scale.
View on Hacker News

toddmatthewson Hacker News • Mentions

On “Things every React.js beginner should know”

Hence why Peter Hunt (react.js developer) named his presentation "Rethinking Best Practices" link to this video
View on Hacker News

emaddaon Hacker News • Mentions

On “VanillaJSX.com”

Respectfully, my experience says otherwise: link - JS object appears to be at least 2x faster than document.createElement() (Chrome) - Note: JS object only loosely represents JSX element so it is a bit unfair. But with actual JSX objects I would assume it is still somewhat faster than the DOM API. link to this video - Pete Hunt, one of the React devs, says "JSX is faster than the DOM because it is JS memory."
View on Hacker News