神刀安全网

How React Makes Web Development Scalable

30/05/16 bySeverin Kistner

No Comments

This is an evaluation on how the React toolset works as part of a modern web development project and why it is particularly suitable for scalability.

React is currently unique because it originated, and is used successfully, at the biggest website in the world, Facebook. Nothing comes close in terms of size and complexity, back in 2012 they had 700 developers

and a huge number working on their frontend.

Everybody uses these very dynamic and wells designed webpages. This way users and designers expect this level of sophistication today and developers have to keep up.

While server and client side frameworks became very good at managing complexity behind the scenes, this does not apply for the view layer. Traditional HTML is very efficient, but limited to its native elements. Every custom tag needs to be build static and verbose and then in a second step made dynamic by JavaScript. This breaks the development flow, because templating engines work very different than regular code.

One alternative is to only use code and skip templating by operating directly on the DOM, but it is verbose and feels unnatural because in the end we create HTML without any abstraction in place.

To improve this, approaches like Angular and Web Components provide API’s for custom tags to 

encapsulate behaviour in a single component.

But those just hide a lower level of templating and are also often unnecessary complex.

Wouldn’t it be nice to compose components like functions while retaining the expressiveness of HTML?

React does that with a virtual DOM and JSX

.

While preprocessing JavaScript is normal for every modern workflow, you can work with React through an extended JavaScript called JSX. There you have a very clean simple xml-like syntax that is integrated into the Language, so code that manipulates the UI and the markup can be combined into a single file. This way there is no context switching and you can often see what’s going on immediately.

Now to protect you from the real terrifying DOM, React has it’s own virtual one in memory and every delta is checked first and then applied to the parsed HTML via direct DOM references. This is an extremely efficient way to apply changes and also adds a layer that can be virtualized on the server for testing and HTML rendering.

We got rid of the DOM and can further look how the the React library supports scalable development.


Let’s look at an example with a simple component that has one property:

React rendering of CombinedComponents:

  Hello Imported  Hello Class loop: i=1 i=2 i=3  Hello Function  Hello Variable  

This is a very basic example that displays the different kinds of components: Class, function and one just being imported.Please note that JSX elements are just a part of regular code, so all the existing helper methods like map can be reused. They also can have descriptive variable names and organised for readability.

Now by being just JavaScript we can rely on traditional ways to organise code to make it robust and scalable.

By being a tree-like structure, it’s easy to find issues by going one component deeper.

The attributes provide an descriptive api and as long as those don’t change there is no regression if the component is changed.

This perfectly encapsulates the underlying functionality, so this way you can have easily a big number of developers working “behind” one component without being affected.

Maybe this gives you some insight why React is so popular, it’s very comfortable even for a low number of developers to work with it and build robust and maintainable software.

Today  many companies use React and a growing ecosystem make it a safe bet for your stack.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » How React Makes Web Development Scalable

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址