Форум

Gozar · #71 (**permalink**) 02.05.2015, 11:23

Хочу попробовать http://fluxxor.com/ в нём сахара больше. В чистом React сахара маловато и flux тяжело даётся.

nerv_ · #72 (**permalink**) 02.05.2015, 12:26

Сообщение от Erolast

Можно еще проще

а вот ни разу не проще

Пример "рутового" шаблона простого приложения на ангуляре. Разумеется, внутри него есть другие компоненты.
Просто верстать, просто читать, просто поддерживать. Аналогичного хочется и от реакта.

<body>
    <div class="page">
        <div ng-app="insider" class="insider">
            <div ng-controller="insider.DefaultController" ng-cloak="">
                <div ng-if="app.isReady">
                    <div class="insider__controls affix btn-group-vertical">
                        <div ng-repeat="config in app.tools track by config.id" ng-insider-node="config"></div>
                    </div>
                    <div class="insider__header">
                        <div class="container-fluid">
                            <div class="modes">
                                <div class="row">
                                    <div class="col-4">
                                        <h3>Mode</h3>
                                        <select ng-change="app.setModeById(app.model.modeId)" ng-model="app.model.modeId" ng-options="mode.id as mode.title for mode in app.dictionaries.modes" class="form-control"></select>
                                    </div>
                                    <div ng-show="app.isFilterMode()" class="col-4">
                                        <h3>Presets</h3>
                                        <select ng-change="app.setPresetById(app.model.presetId)" ng-model="app.model.presetId" ng-options="preset.id as preset.title for preset in app.presets" class="form-control"></select>
                                    </div>
                                    <div class="col-4">
                                        <h3>Chunk</h3>
                                        <select ng-change="app.searchAsync()" ng-model="app.pagination.itemsPerPage" ng-options="chunk.value as chunk.title for chunk in app.dictionaries.chunks" class="form-control"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-7">
                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <div class="col-2 control-label">List</div>
                                            <div class="col-10">
                                                <select ng-change="app.setModeById(app.model.modeId)" ng-model="app.model.modeId" ng-options="mode.id as mode.title for mode in app.dictionaries.modes" class="form-control"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-5 text-right">
                                    Добро пожаловать, <a href="#">Админушка</a>
                                    <button class="btn btn-primary" style="margin-left: 15px;">Выход</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ADDING DIALOG :: START -->
                    <div ng-insider-dialog-adding="app.dialogs.adding" insider="app"></div>
                    <!-- ADDING DIALOG :: END -->

                    <!-- EDITING DIALOG :: START -->
                    <div ng-insider-dialog-editing="app.dialogs.editing" insider="app"></div>
                    <!-- EDITING DIALOG :: END -->

                    <!-- EDITING MULTIPLE DIALOG :: START -->
                    <div ng-insider-dialog-editing-multiple="app.dialogs.editingMultiple" insider="app"></div>
                    <!-- EDITING MULTIPLE DIALOG :: END -->


                    <!-- TABLE :: START -->
                    <div>
                        <table class="table table-hover insider-table">
                            <thead>
                                <tr ng-if="app.isFilterMode()" class="active">
                                    <th>
                                        <div class="btn btn-default btn-checkbox">
                                            <label>
                                                <input ng-model="app.model.selectedAll" ng-change="app.toggleSelection()" type="checkbox">
                                            </label>
                                        </div>
                                    </th>
                                    <th ng-repeat="field in app.fields track by field.id">
                                        <label ng-bind-html-unsafe="field.title"></label>
                                        <div ng-repeat="config in field.filter track by config.id" ng-insider-node="config"></div>
                                    </th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody ng-hide="app.isPending">
                                <tr ng-repeat="record in app.records.getArray() track by record.atomId">
                                    <td>
                                        <input type="checkbox" ng-model="record._isSelected" ng-change="app.setSelection(app.getSelection())"/>
                                    </td>
                                    <td ng-repeat="field in app.fields track by field.id">

                                        <div ng-switch="field.isEditable">
                                            <div ng-switch-when="true">
                                                <div ng-if="!app.isCellEditing(record.id, $index)">
                                                    <div ng-repeat="config in field.reading track by config.id" ng-insider-node="config"></div>
                                                </div>
                                                <div ng-if="app.isCellEditing(record.id, $index)">
                                                    <div ng-repeat="config in field.editing track by config.id" ng-insider-node="config"></div>
                                                </div>
                                                <div ng-show="app.isCellSaving(record.id, $index)">Saving...</div>
                                                <button ng-click="app.toggleCellEditing(record.id, $index)" type="button">Edit</button>
                                            </div>
                                            <div ng-switch-when="false">
                                                <div ng-repeat="config in field.reading track by config.id" ng-insider-node="config"></div>
                                            </div>
                                        </div>

                                    </td>
                                    <td>
                                        <button ng-click="app.toggleFavorite(record.id)" type="button" class="hidden-button">
                                            <span ng-show="app.isFavorite(record.id)" class="favorite glyphicon glyphicon-star"></span>
                                            <span ng-hide="app.isFavorite(record.id)" class="favorite glyphicon glyphicon-star-empty"></span>
                                        </button>
                                        <button ng-click="app.openEditingDialog(record.id)" type="button">Edit record</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div ng-show="app.isPending">
                            <p>Loading&hellip;</p>
                        </div>
                    </div>
                    <!-- TABLE :: END -->

                    <div class="container-fluid text-right">
                        <!-- PAGINATION :: START -->
                        <div ng-insider-pagination="app.pagination"></div>
                        <!-- PAGINATION :: END -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Сообщение от Erolast

Просто не надо все в один компонент пихать.

большинство приложений описывается жирным рутовым шаблоном в который подключаются готовые (свои/чужие) компоненты

Сообщение от Gozar

Я пишу спокойно на jsx и мне очень нравится.

я выше простой пример разметки привел. Думаю, на реакте его сложно будет описать на чистом jsx

Сообщение от Gozar

Можно поподробней, что там про иммутабельность?

насколько я понял и в двух словах, реакт требует копировать объекты/массивы для их быстрого и/или корректного сравнения (пока не понял что именно). Для этого есть либы, такие, как Immutable.js.

Gozar · #73 (**permalink**) 02.05.2015, 13:34

Сообщение от nerv_

Пример "рутового" шаблона простого приложения на ангуляре. Разумеется, внутри него есть другие компоненты.
Просто верстать, просто читать, просто поддерживать. Аналогичного хочется и от реакта.

Эта адская жесть из дивов и ng-чего-то там просто?

В реакте я работаю с компонентами, а не какими-то div-ами и шаблонами из каши html разметки. Ты же сам хвалил web-components и после этого кидаешь шаблон-кашу и говоришь что это хорошо. В то время как реакт гораздо ближе к web-components чем эта жесть.

Сообщение от nerv_

Аналогичного хочется и от реакта.

Ни в коем случае.

Ты похоже ещё не понял, что такое React и в чём его основная фишка.

Gozar · #74 (**permalink**) 02.05.2015, 13:39

Шаблон в реакт разбивается на компоненты, например:

Основной, верхнего уровня:

<TodoApp>
  <Header>
    <TodoTextInput />

    <MainSection>
      <ul>
        <TodoItem />
      </ul>
    </MainSection>

</TodoApp>

Далее делим на:

<MainSection>
      <ul>
        <TodoItem />
      </ul>
    </MainSection>

И только на самом примитивном уровне будет

<div className="blabla">{this.props.name}</div>

Думай компонентами, а не шаблонами!

Gozar · #75 (**permalink**) 02.05.2015, 13:43

Сообщение от nerv_

Думаю, на реакте его сложно будет описать на чистом jsx

Нет ничего проще. Разбиваем на части и жирный шаблон становиться меленькими, аккуратненькими компонентами.

UIjs · #76 (**permalink**) 02.05.2015, 13:51

Сообщение от Gozar

Эта адская жесть из дивов и ng-чего-то там просто?

тоже бесило это в ангуляр по этому я придумал неймспейсы, типа css- со стилями работают, ui- заменяется на какую то разметку, кастомный компонент типа, data- для работы с данными и.т.п.

nerv_ · #77 (**permalink**) 02.05.2015, 13:56

Сообщение от UIjs

тоже бесило это в ангуляр по этому я придумал неймспейсы, типа css- со стилями работают, ui- заменяется на какую то разметку, кастомный компонент типа, data- для работы с данными и.т.п.

покажи разметку

Сообщение от Gozar

Нет ничего проще. Разбиваем на части и жирный шаблон становиться меленькими, аккуратненькими компонентами.

Сообщение от nerv_

Разумеется, внутри него есть другие компоненты

уже разбит

UIjs · #78 (**permalink**) 02.05.2015, 13:57

nerv_,

Сообщение от Gozar

В реакте я работаю с компонентами

вообще-то в ангуляр так же, описываются компоненты и их шаблоны, и потом из них сайт набирается как из лего. всего 2 уровня, проэктный и базовй. как в MCSS

UIjs · #79 (**permalink**) 02.05.2015, 14:05

а вот результат https://www.youtube.com/watch?v=-TuhDVsoKYE

Gozar · #80 (**permalink**) 02.05.2015, 14:12

Сообщение от nerv_

уже разбит

Ну, что сказать, значит в ангуляр говно шаблонизатор, раз эта каша называется разбит.

Сообщение от Gozar

Основной, верхнего уровня:

Вот это значит разбит. А у тебя просто каша из html.

JSX - это по сути JS+XML, поэтому и более абстрактен и компоненты там в "html" выглядят как компоненты, а не как div-ы на которые сверху навешана гора атрибутов(Я ещё в fj понял, что получается каша если идти дорогой атрибутов, поэтому и свернул работы.).

Форум

Справочник

Discord чат

Курсы javascript