DOCX

Not only for UI construction Facebook React completely resolved

By Jeanne Flores,2015-07-07 22:01
14 views 0
Not only for UI construction Facebook React completely resolved

    Not only for UI construction: Facebook React completely

    resolved

    In 2004, for the front-end community, is a landmark year.Gmail was born, it is based on the front end apply colours to a drawing of the native application level of experience, relative to the server before rendering web has promoted an era, touches the user's g-spot.Since then, the front-end rendering website become numerous developers in the direction of the Angle.

    In order to better develop the front-end rendered at all levels of the "native" sites, including the Backbone and presents a series of front frame arises at the historic moment, and quickly gained massive adoption.But soon, the new performance and SEO problems ensue.After several attempts, Twitter even render back from the front server rendering, and Strikingly also faced the same problems.

    In 2014, the React into our sight.Let a person is refreshing, such issues encountered in other open source framework, the React confidently answer is given.Almost no hesitate, we began to use the React to reconstruct Strikingly.Years later, when we look back, may find that in 2014 was also a year for front-end community landmark.

    Introduction of the React

    What is the React?Facebook simple low-key to define it as a "used to build the UI JavaScript library".This definition may let us think of many JavaScript template language (such as the Handlebars and Swig), or early control libraries (such as the Dojo and YUI), but the React based on several core concepts to make it and those templates and controls the library is very different.In fact this a few core concepts is very advanced, has brought the entire front end of the world impact.They include:

    1. Components and component-based design process;

    2. One-way data flow;

    3. Virtual DOM replace physical DOM as the action object;

    4. JSX grammar to replace HTML templates, declarative in JavaScript to describe the user interface

    (UI).

    These a few simple principles put together a lot of benefits:

    1. Front-end and back-end are able to render a page from the React components, completely solve the

    SEO has long vexed JavaScript one-page application problems;

    2. We can simply write front end test directly and completely forget the DOM rely on;

    3. Components of encapsulation and one-way data flow can greatly simplify the understanding of the

    front-end architecture.

    Let's look at an example:

var HelloMessage = React.createClass({

     render: function() {

     return

Hello {this.props.name}
;  

     }

    });

    React.render(, document.body);

    This React version of Hello World has showed the React some core features.First of all, it is a React to HelloMessage components;Create the application of the React time, we always take components as a starting point.Each component is the core of a render method, in which we put the component of props and the state to a final rendering of the assembled in the template, and then return this template (accurate to say that here is a UI description rather than in the traditional sense of the template).This code looks like HTML part is famous in the JSX syntax, it is described in the React "template" the best way.

    Now, with the var at the beginning of the first paragraph we define a named HelloMessage components;Below the React. Render this line do, is to render the component to the document. The body - that is, in our actual page.But in the use of < HelloMessage / >, we did another thing: name = "John".Looks a lot like HTML elements in the attribute, but since JSX is HTML, what is this grammar?In fact, this is the way we React to component into props.Looking back at the first paragraph, we can see in the interior of the components have to this. Props. The name's reference.The name is we just specify John!

    See here, if you are familiar with jQuery maybe thinking, with the $(document. The body), HTML (' Hello John) what is the fundamental difference?

    This is the place where virtual DOM appearance.We like to write HTML to write JSX, but JSX does not directly into HTML and the DOM.Behind the scenes, the React maintains a virtual DOM, but in fact the "physical" browser directly was operating virtual DOM DOM is the projection.Virtual browser DOM is not dependent on the environment, it can run in any JavaScript execution environment.This makes possible to the following code: var html =React.renderToString();res.send(html);

    If the second line is a little familiar, you didn't guess wrong - this code occurred on the server side!Yes, the same HelloMessage, we not only can let the React on the front end rendering to the page, also can directly apply colours to a drawing on the back end into HTML string, and then put it back to the front.The service side happened so naturally.

    The React of revolutionary innovation is a front end of the world the most exciting changes over the past few years.Since exposure to React, we believe that the React will

    completely change the client developers (including front-end, iOS and Android) development experience.In the space below, we want from the direction of the four big - target platform (Targets), Data processing (Data), Tools (Tools), and a new challenge - to share the React progress and future trend of ecosystems and communities.

    The target platform

    For the discussion of virtual DOM, a lot of people would say that fast too real DOM.Such a discussion can let a person quick start to understand the React, but people actually wrote the React application will understand that speed is not the essence of virtual DOM.We think that the existence of the virtual DOM help us to do two things.The first is that the UI.Through the virtual DOM, the UI is no longer a constantly being more DOM, you as long as that is how to generate the UI, the React automatically help you to change the rendering of the UI to real DOM.This new way of thinking to let you don't have to manually real DOM.The second is more Target.We have been talking about the Web, but the React let's do the Target Web.Virtual DOM is more like the UI virtual machine, automatic mapping to the real implementation for you, can be a browser DOM, iOS UI, the Android UI.Even someone did it React mapping to the terminal text UI.

    The Targets are often React community in one of the major topics of discussion.The Targets more fundamental is to improve the developer experience.The Developer Experience (DX, Developer Experience) is repeatedly referred to in the React in the community concept.How to keep the same user experience, improve the developer experience, is the front end of the community, including the React are thinking about.In fact any how client companies are facing the same problem like this: in all kinds of client language re-invent the wheel.Developers need to learn a new language, write and maintain similar function.Improving the client developer experience is to reduce the learning cost and maintenance cost.This is the React to advocate "Learn once, a write everywhere".

    Recently there are some encouraging news.Facebook Ads Manager within the iOS version by seven front end engineers with the React Native took five months to complete.The Android version, it is with a colleague, completed within three months.Code reuse rate reached 87%.

    Multiple Targets can also be a combination of more depth in a single platform.From the React of the core team, Sebastian Markbage in ReactEurope conference gave a speech on the stunning the DOM as a Second - class Citizen ".Speech he imagining the React directly output to the bottom of the browser architecture (figure 1 browser rendering architecture, figure 2 for Sebastian Markbage think React can do).

    Figure 1 browser rendering architecture

    Figure 2, Sebastian Markbage think React also can do a lot of things

    Let's not talk about it shouldn't do that, through the virtual DOM opened such opportunity will have let us excited.Also illustrates the Facebook have considered when designing the React to the DOM.The idea is very advanced.

    The service side pre-rendered (Pre - rendering)

    For the other mainstream front frame, page SEO and open the speed problem is a headache for the first time.Twitter was for the first time open the speed is too slow and even back to the server rendering.Has long people have been looking for a only need to write a UI component, front end can render the scheme at the same time.If can do it, we can first open the page with the service side first rendering HTML page, when after you receive the browser can display the page.This SEO and open speed can be solved for the first time.The perfect solution in the community called Isomorphic/Universal App.

    The React native support for Pre - rendering (server rendering).With virtual DOM, which means that we only need the back-end run JavaScript engine can render the entire DOM.The current mainstream back-end language can run V8 JavaScript engine.Strikingly backend using Ruby on Rails, for example, only need to use open source react - Rails gem can in Rails back-end render front react components.

    Should pay attention to when using the service side rendering window and document the browser to some global variables are not exist.React component provides the two lifecycle hook: componentDidMount and componentDidUpdate will not be running, the server will run only on the front end.When using the server rendering if you want to use any browser to some variables need to put the code in the two lifecycle hook definition.

    The data processing

    React to define themselves as the View of MVC.The front-end developer from V UI design thinking.But now for data operation and access, in the community is not an accepted method.That was the most difficult to handle any write the React application place.

    Flux

    For M and C, Facebook, puts forward the concept of Flux.Flux is a specially designed for the React application architecture: the application is composed of the Dispatcher, Store and View, the View is that we React components.At the heart of the Flux is shown in figure 3 data flows in one direction.

    Figure 3 one-way data flow Flux core

    Application of any data changes are initiated as the Action, through the Dispatcher distributed, is related to the Store to receive and integration, and then as the props and the state to provide the View (the React components).When a user in the View on done any related to data interaction, the View will launch the new Action, open a new data change cycle.This one-way Flux at a high level than the traditional MVC architecture and represented by presents and Knockout two-way data binding is much easier to understand, greatly simplifying the developers thinking and the Debug process.

    Flux on the Facebook as a design pattern framework (not ready) announced, after almost every month a new Flux libraries, they all have their own characteristics, some support for server rendering is better, some use more functional programming concepts.Many Flux is more like the experiment, which helps the React ecological growth, but it is undeniable that the future will have a large library of Flux slowly die, and only a few survived or merge.

    GraphQL

    In building a large front applications, front-end and back-end engineers cooperate by API.API is agreement of both parties.Now the mainstream way is a RESTful API, in practice, however, we find that in some real RESTful production requirements is not very applicable.Often we need to build custom endpoint, which violates the RESTful design concept.

    For example, we want to display BBS posts, the author and the corresponding messages.We respectively to three different requests.The second request depends on the first request the results returned by the user_id, dependence on front end need to write code to coordinate between requests.Respectively from three different requests on the mobile end this network is not stable environment effect is not very ideal.

    GET /v1/posts/1

     {

     "id": 1,

     "title":"React.js in Strikingly",

     "user_id":2

     }

    GET /v1/users/2

     {

     "id":2,

     "name":"dfguo"

     }

    GET /v1/posts/1/comments

     [{

     "id":6,

     "name":"rechtar",

     "comment":"Thanks for sharing! I would love to see some examples on GraphQL."},{

     "id":9,

     "name":"tengbao",

     "comment":"I heard that you guys also use immutable.js. How did it help?"},{

     "id":12,

     "name":"syjstc",

     "comment":"Impressive work! Thanks guys!"

     },{

     "id":18,

     "name":"abeth86",

     "comment":"Thanks for the sharing!"

     }]

    To solve such problems, some engineers will customize the endpoint.For this example,

    we can build a/feeds the endpoint and gathered all the front-end need results:

    GET /v1/feeds/1

     {

     "id":1,

     "title":"React.js in Strikingly",

     "user":{

     "id":2,

     "name":"dfguo"

     },

     "comments":[

     {

     "id":6,

     "name":"rechtar",

     "comment":"Thanks for sharing! I would love to see some examples on GraphQL."

     }...

     ]

     }

    But we may only need to post in some scenario and the user, don't want a comments.Then don't need to define a feeds_without_comments endpoint?With the change of the demand, the custom of the endpoint method often makes the API interface, has violated the RESTful design concept.And any front-end engineer once the data you need to change all need the back-end engineer to cooperate, this reduces the iteration speed of product.

    GraphQL from Facebook, is I think is the most close to the perfect solution.Back-end engineer only need to define the Type System can be queried, front-end engineers can use GraphQL custom query.GraphQL query only need to describe the data returned shape: {

     post(id:1){

     id,

     title,

     user{

     id,

     name

     },

     comments{

     id

     name,

     comment

     }

     }

     }

    GraphQL server will return the correct JSON format: {

     "id":1,

     "title":"React.js in Strikingly",

     "user":{

     "id":2,

     "name":"dfguo"

     },

     "comments":[

     {

     "id":6,

     "name":"rechtar",

     "comment":"Thanks for sharing! I would love to see some examples on GraphQL.

     }...

     ]

     }

    GraphQL native support for the API version control, also let you can co-exist at the

    same time multiple versions of the client (including Web and Mobile).These will reduce the

    client engineers and back-end engineer coupling, improving productivity.

    In July this year just launched GraphQL specification and open source JavaScript GraphQL library.However, to make GraphQL mainstream, Facebook needs to build an ecosystem like the React.If you want to in your own applications using GraphQL also must have the back-end language provides GraphQL library support.Such as Strikingly need GraphQL Ruby library.This not only needs the front-end engineer.We think it will be more difficult than the React ecosystem set up (see figure 4).Facebook, which require the participation of the whole community to achieve.

    Figure 4 GraphQL ecosystem

    Relay

    Relay is Facebook on the React application GraphQL scheme is put forward.The React of the base unit is the Component (Component), build large applications is the combination and nested components.Units of the component design pattern is one of the most recognized at present in the community, which is one of the trend of the front end of the world.Each component needed data should also be defined inside the component.Relay component can customize their need GraphQL data format, at the time of component instantiation to GraphQL server to get data.Relay will automatically construct nested components GraphQL query, so multiple nested components only need to send a request.Relay will open in August.

    Immutability

Report this document

For any questions or suggestions please email
cust-service@docsford.com