More than React: Why not use ReactJS for complex interactive front-end projects

Translation of an article on using ReactJS to create a frontend.

React is a great tool for implementing simple interactive websites. But how applicable is it in complex front-end projects? Does he work there just as well?

In this article we will look at some of the problems that can be encountered when using React during web development. You will also find out why the author of the article decided to develop a new Scala framework, thanks to which it was possible to reduce the number of lines of code from 30 thousand (by React) to one thousand.

Key points

• React components are difficult to reuse in complex web projects.
• The Virtual DOM algorithm in React is slow and inaccurate.
• React HTML templates are neither complete nor powerful.
• React requires complex asynchronous programming when communicating with the server.
• Binding.scala contains less concepts, but more functions. Prospective Binding.scala solves complex problems that React cannot solve.

Prerequisites

For many, the React framework seems simpler and more convenient than AngularJS. One of its most useful functions is data binding. It allows you to compare data sources with elements of web pages, which provides a convenient way to implement simple interactive websites.
')
However, there may be situations in which React cannot solve complicated problems as easily as simple ones. If you experiment with TodoMVC , it turns out that the application on the Binding.scala framework contains only 154 lines of code , compared to 488 lines on React.



Next, we look at four React problems and how Binding.scala solves them.

Problem 1: React components are difficult to reuse in complex interactive web projects

React (React.Component). , Controller View AngularJS. - render, (props) (state) HTML-.

-. , , (callback functions) . , - , . React - , .

2. Virtual DOM React

React Virtual DOM.

render, DOM, . React DOM .

React render Virtual DOM. DOM DOM.

:

1. 1. , , DOM. render , .
2. 2. DOM . , li ul, React , li ul li .

DOM , React , . , DOM. . - key, shouldComponentUpdate componentWillUpdate, .

3. HTML- React ,

HTML- React JSX.

, - HTML -, HTML JSX- . , React HTML- , Cycle.js, Widok ScalaTags.

, HTML React . class classname, for htmlFor. , CSS JSON. - HTML , . , , React Cycle.js, Widok ScalaTags.

React propTypes. . propType React , .

React . , onclick onClick, , . .

4: React

React Model-View-ViewModel. - (Model), state ViewModel render View. API state (ViewModel), (Promise and fetch API). render (View) ViewModel -.

- , . . , .

Binding.scala React. React Widok, . Binding.scala , React. Binding.scala , React .

, , React. , Redux, , .

, Binding.scala , (data-binding), -. , - , URL-.

Binding.scala React:

		Binding.scala	React
			,
-			Virtual DOM
HTML		Scala XML	JSX
	HTML XHTML?	XHTML	, XHTML. class for className htmlFor, CSS JSON
			propTypes,
			MVVM +
	URL-	URL- ,	, react-router
		-	View. -
		API . , Scala	. ,

Scala.js - Widok. Binding.scala. Widok (Tim Nieradzik), Binding.scala HTML5. Awesome Scala, Binding.scala , , , Udash Widok



. .