А что внутри?

Технологии

<link rel="shortcut icon" href="~/static/images/favicon.png" type="image/png" />
<link rel="icon" href="~/static/images/favicon.png" type="image/png"/>
<script type="text/javascript">
    var BASE_PATH = "@settingsManager.GetValue("BasePath")";
    var API_BASE_URL = "@settingsManager.GetValue("ApiUrl")";
</script>
<link rel="stylesheet" href="~/static/vendors/coreui/coreui.css" type="text/css"/>
<link rel="stylesheet" href="~/static/vendors/coreui/coreui.overwrite.css"  type="text/css"/>
<link rel="stylesheet" href="~/static/css/km.css" type="text/css"/>
<link rel="stylesheet" href="~/static/css/topbar.css" type="text/css"/>
<link rel="stylesheet" href="~/static/css/timepicker.css" type="text/css"/>
<link rel="stylesheet" href="~/static/vendors/DataTablesNew/datatables.min.css" type="text/css" />
<link rel="stylesheet" href="~/static/vendors/ion.calendar/ion.calendar.css" type="text/css"/>
<link rel="stylesheet" href="~/static/vendors/chosen/chosen.css" type="text/css"/>
<link rel="stylesheet" href="~/static/vendors/jsoneditor/jsoneditor.css" type="text/css"/>
<link rel="stylesheet" href="~/static/css/uksmetriks.css" />
<link rel="stylesheet" href="~/static/dist/application.css?@AssetsHash.Parameter"/>
<script type="text/javascript" src="~/static/vendors/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="~/static/vendors/jquery/plugins/jquery.url.js"></script>
<script type="text/javascript" src="~/static/vendors/coreui/coreui.js"></script>
<script type="text/javascript" src="~/static/vendors/moment/moment.min.js"></script>
<script type="text/javascript" src="~/static/vendors/moment/moment.ru.js"></script>
<script type="text/javascript" src="~/static/vendors/DataTablesNew/datatables.min.js"></script>
<script type="text/javascript" src="~/static/vendors/DataTablesNew/plugins/dataTables.plugins.js">
</script>  
<script type="text/javascript" src="~/static/vendors/highcharts/highcharts.js"></script>
<script type="text/javascript" src="~/static/vendors/highcharts/modules/exporting.js"></script>
<script type="text/javascript" src="~/static/vendors/ion.calendar/ion.calendar.min.js"></script>
<script type="text/javascript" src="~/static/vendors/jsoneditor/jsoneditor.js"></script>
<script type="text/javascript" src="~/static/dist/application.js?@AssetsHash.Parameter"></script>

Index.html...

Синтаксис компонентов

Состояние приложения

Состояние приложения

Проблемы

• Устаревшие технологии

• Устаревший синтаксис

• Непонятное сочетание технологий

• Запутанная архитектура

1. Сложно поддерживать

Решение

Локальные состояния

< Component B />

< Component A />

State

< Component C />

Props

Props

import { observable, action, computed } from 'mobx';

export class ArticlesStore {

    @observable isLoading = false;
    @observable page = 0;
    @observable totalPagesCount = 0;
    @observable author = {
        username: '',
        image: 'img/default.png'
    }

    @computed get pagesLeft() {
        return this.totalPagesCount - this.page;
    };

    @action setPage( page ) {
        this.page = page;
    };

    @action setAuthor( author ) {
        this.author = author ;
    };
}

export default new ArticlesStore();

import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('articlesStore')
@observer
export default class ArticlePreview extends React.Component {
    
    render() {

        const { article } = this.props;

        return (
                  <div className="article-preview">
                    <div className="article-meta">
                        <h3 className="article-author"> {`@${article.author.username}`} </h3>
                        <img src={article.author.image} role="presentation" />
                    </div>
                  </div>
                )
    };

};

+

+

• <Provider /> 

• PropTypes:
  observableArray observalbeObject...

• componentWillReact()

vs

Итог обновления Метрики

https://metrika.dev.kontur/beta/new