{"id":338695,"date":"2017-04-19T03:30:40","date_gmt":"2017-04-18T19:30:40","guid":{"rendered":"http:\/\/techcrunch.com\/?p=1477331"},"modified":"2017-04-19T03:30:40","modified_gmt":"2017-04-18T19:30:40","slug":"facebook-announces-react-fiber-a-rewrite-of-its-react-framework","status":"publish","type":"post","link":"https:\/\/people.utm.my\/asmawisham\/facebook-announces-react-fiber-a-rewrite-of-its-react-framework\/","title":{"rendered":"Facebook announces React Fiber, a rewrite of its React framework"},"content":{"rendered":"

<\/p>\n

Facebook has completely rewritten React<\/a>, its popular JavaScript library for building user interfaces. The company hasn\u2019t previously talked much about React Fiber, as the project is called, but it has actually been working on it for a while. It\u2019s now ready to talk about this project publicly in more detail (after word about it started spreading last year) and the plan is to put this rewrite into the hands of developers once React 16.0 launches later this year. It\u2019s already in use on Facebook.com today, which clearly indicates that Facebook itself thinks it\u2019s ready for prime time.<\/p>\n

In addition, it is also launching a rewrite of Relay, its framework for building data-heavy applications.<\/p>\n

React Fiber<\/h2>\n

The idea behind React Fiber, the company tells me, is to take what the company has learned from developing React the first time around and put that into an updated framework that is still fully backwards compatible with existing React-based applications. React Fiber, Facebook tells me, will become the foundation of any future improvements and feature development of\u00a0the React framework.<\/p>\n

The main focus here was to make React as responsive as possible, Facebook engineer \u2014 and member of the React core team \u2014 Ben Alpert\u00a0told me\u00a0in an interview earlier this week. \u201cWhen we develop React, we\u2019re always looking to see how we can help developers build high-quality apps quicker,\u201d he noted. \u201cWe want to make it easier to make apps that perform very well and make them responsive.\u201d<\/p>\n

In light of this theme, it\u2019s no surprise that the highlights of this new release are built-in primitives for scheduling and incremental rendering. \u201cWe want to make sure we render the right stuff at the right time,\u201d Alpert\u00a0said, and added that \u201cresponsiveness was a huge push here.\u201d<\/p>\n

But why rewrite React from scratch? \u201cIt was not necessarily that the old code base was bad, but we wanted to start with a new foundation that could power everything we do going forward,\u201d Alpert said. That means the new code was developed from the ground up to be extensible, for example.<\/p>\n

Alpert stressed that React Fiber will be backward compatible, though as with all major React updates, there will be a few small breaking changes. The team says it doesn\u2019t anticipate that these will be problematic for developers, though. \u201cWe always had a strong API contract, so that gives us the flexibility to reimplement,\u201d he added.<\/p>\n

Relay Modern<\/h2>\n

\"\"<\/a>As Facebook also today announced, Relay \u2014 the company\u2019s JavaScript framework for building data-driven applications \u2014\u00a0has also been rewritten with a similar emphasis on performance and extensibility. Relay combines React with Facebook\u2019s GraphQL query language and now Relay Modern, as the company calls this rewrite, is meant to push this concept further and overcome some of the limitations of the original design. That also meant simplifying some of the design to\u00a0enhance the overall performance of the framework. \u201cRelay Modern retains the best parts of Relay \u2014 colocated data and view definitions, declarative data fetching \u2014 while also simplifying the API, adding features, improving performance, and reducing the size of the framework,\u201d the team explains in today\u2019s announcement. To do this, the team implemented a number of changes, but most importantly, it adopted static queries and ahead-of-time optimizations.<\/p>\n

Static queries essentially ensure that complex queries that aren\u2019t altered by runtime conditions can be pre-built and offloaded to Facebook\u2019s servers. So instead of sending complex queries across the network, all an application has to send is a string that identifies the pre-set query and the variables needed to complete it. Related to this, the ahead-of-time optimization feature in the Relay compiler now looks at the query structure to optimize the query that is now stored on the server to execute it faster \u2014 and hence return results to the user faster, too. Other new features in React Modern include built-in garbage collection, for example.<\/p>\n

For developers who are already using an older version of Relay, Relay Modern comes with a compatibility API.<\/p>\n

Facebook says that when its teams switched the Marketplace tab in the Facebook app from Relay to Relay Modern, the time to interaction on Android improved by an average of 900ms. While that doesn\u2019t sound like much, every second on mobile counts, and that\u2019s enough to make an application feel noticeably more\u00a0responsive than before.<\/p>\n","protected":false},"excerpt":{"rendered":"

\"\" Facebook has completely rewritten React, its popular JavaScript library for building user interfaces. The company hasn’t previously talked about React Fiber, as the project is called, but it has actually been working on it for a while. In addition, it is also launching a rewrite of Relay, its framework for building data-heavy applications. Read More<\/a><\/p>\n

\n<\/img><\/a> <\/img><\/a> <\/img><\/a> <\/img><\/a> <\/img><\/a> <\/img><\/a>\n<\/div>\n

\"\"\/ <\/p>\n","protected":false},"author":5817,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[25],"tags":[59,66,26],"class_list":["post-338695","post","type-post","status-publish","format-standard","hentry","category-technology","tag-media","tag-techcrunch","tag-technology"],"_links":{"self":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts\/338695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/users\/5817"}],"replies":[{"embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/comments?post=338695"}],"version-history":[{"count":0,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/posts\/338695\/revisions"}],"wp:attachment":[{"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/media?parent=338695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/categories?post=338695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/people.utm.my\/asmawisham\/wp-json\/wp\/v2\/tags?post=338695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}