reactify/app.js at master · tihomir-kit/reactify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
'use strict';

angular.module("Reactify", [
    "ngReact",
])
.controller("MainCtrl", function ($scope, $timeout) {
    $scope.items = [];
    $scope.showAngular = false;
    $scope.showReact = false;
    $scope.amount = 2000;
    $scope.updateTime = "-";
    $scope.watchersCount = 0;
    $scope.isReact = false;

    $scope.crateItems = function () {
        $scope.items = [];
        for (var i = 0; i < $scope.amount; i++) {
            $scope.items.push({
                prop1: i,
                prop2: "X",
                prop3: "Y",
                prop4: "Z",
                prop5: Math.floor(Math.random() * 100000) / 100000,
                prop6: {
                    show: false,
                    showHide: "Show",
                    text: "SubItem",
                    counter: 1
                }
            });
        }
    }
    $scope.crateItems();

    function measureTime() {
        var startTimeList = new Date().getTime();
        $timeout(function () {
            var time = (new Date().getTime() - startTimeList) + " ms";
            $scope.setUpdateTime(time);
            console.log("ANGULAR - List updated in: " + time);
        });
    };

    $scope.populateAngular = function () {
        $scope.showAngular = true;
        $scope.showReact = false;
        measureTime();
    };

    $scope.populateReact = function () {
        $scope.showAngular = false;
        $scope.showReact = true;
    };

    $scope.clearItems = function () {
        $scope.showAngular = false;
        $scope.showReact = false;
        $scope.updateTime = "-";
        $scope.watchersCount = 0;
    };

    $scope.setUpdateTime = function (time) {
        $scope.updateTime = time;
    };

    $scope.setWatchersCount = function () {
        (function () {
            var root = angular.element(document.getElementsByTagName('body'));
            var watchers = [];

            var f = function (element) {
                if (element.data().hasOwnProperty('$scope')) {
                    angular.forEach(element.data().$scope.$$watchers, function (watcher) {
                        watchers.push(watcher);
                    });
                }

                angular.forEach(element.children(), function (childElement) {
                    f(angular.element(childElement));
                });
            };

            f(root);

            $scope.watchersCount = watchers.length;
        })();
    };

    $scope.onAngularShowSubItemClick = function (item) {
        item.prop6.show = !item.prop6.show;
        item.prop6.showHide = item.prop6.show ? "Hide" : "Show";
        measureTime();
    };

    $scope.onAngularUpdateSubItemClick = function (item) {
        item.prop6.counter++;
        measureTime();
    };

    $scope.onReactShowSubItemClick = function (reactComponent) {
        var item = reactComponent.props.item;
        item.prop6.show = !item.prop6.show;
        item.prop6.showHide = item.prop6.show ? "Hide" : "Show";
        reactComponent.setState({ item: item, scope: $scope });
    };

    $scope.onReactUpdateSubItemClick = function (reactComponent) {
        var item = reactComponent.props.item;
        item.prop6.counter++;
        reactComponent.setState({ item: item, scope: $scope });
    };
});