Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   React'а тред (https://javascript.ru/forum/offtopic/53890-react%27-tred.html)

nerv_ 02.05.2015 14:17

Цитата:

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

не. Там смысл в том, что я могу выделять в компоненты то, что хочу, а не то, что мне навязывает реакт.

Цитата:

Сообщение от UIjs
а вот результат https://www.youtube.com/watch?v=-TuhDVsoKYE

фу, блин, ты на кофе пишешь. Буэээ :D Даешь es6

Gozar 02.05.2015 14:19

Цитата:

Сообщение от nerv_
я могу выделять в компоненты то, что хочу, а не то, что мне навязывает реакт.

Что значит, что хочу? Что тебе навязывает реакт?

Кроме flux-потока(если его использовать и то это не часть реакт, а паттерн) реакт ничего не навязывает... насколько мне известно. Я чего-то не знаю?

UIjs 02.05.2015 14:21

Цитата:

Сообщение от nerv_
Даешь es6

но как же скобочки:( пасоны айдате напишем кофи для es6 ?

UIjs 02.05.2015 14:21

Цитата:

Сообщение от Gozar
а не как div-ы на которые сверху навешана гора атрибуто

тебе раз 10 повтрить что в ангуляре подобное тоже в компоненты оборачивается?

Gozar 02.05.2015 14:22

Цитата:

Сообщение от UIjs
тебе раз 10 повтрить что в ангуляре подобное тоже в компоненты оборачивается?

Пример в студию, иначе лох...

UIjs 02.05.2015 14:25

Gozar, ты сообщения вообще не читаешь штоле? https://www.youtube.com/watch?v=-TuhDVsoKYE
это на юишке но на ангуляре так же можно и нужно

nerv_ 02.05.2015 14:25

Цитата:

Сообщение от Gozar
Что значит, что хочу? Что тебе навязывает реакт?

цикл вложенный в цикл в шаблоне как написать? if / else?

Я уже в этой теме приводил пример на react-templates
<div rt-if="1">
  <div rt-repeat="item in [1,2,3]">
    <div rt-if="2">
      <div rt-repeat="item in [1,2,3]">
        
      </div>
    </div>
  </div>
</div>

и то, во что он транслируется
var templateRT = function () {
    function repeatItem1(item, itemIndex) {
        return React.createElement('div', {});
    }
    function repeatItem2(item, itemIndex) {
        return React.createElement('div', {}, 2 ? React.createElement.apply(this, [
            'div',
            {},
            _.map([
                1,
                2,
                3
            ], repeatItem1.bind(this))
        ]) : null);
    }
    return 1 ? React.createElement.apply(this, [
        'div',
        {},
        _.map([
            1,
            2,
            3
        ], repeatItem2.bind(this))
    ]) : null;
};

хочешь сказать js код более читабелен, нежели html?

UIjs 02.05.2015 14:28

Цитата:

Сообщение от nerv_
хочешь сказать js код более читабелен, нежели html?

не говоря уже о том что РАЗМЕТКА и ИНТЕРФЕЙСЫ это ДЕКЛАРАЦИЯ, а ЛОГИКА это ИМПЕРИКА. а в реакте все империка.

в ангуляре же все по полочкам там, где и должно быть

Gozar 02.05.2015 14:31

Цитата:

Сообщение от nerv_
цикл вложенный в цикл в шаблоне

В реакте нет шаблонов в твоём понимании. Там компоненты!
Будет 3 вложенных компонента. Я тебе уже приводил пример с кошерным вариантом, где один компонет вкладывается в другой.

UIjs 02.05.2015 14:32

Gozar, компонент состоит из шаблона, шаблон это разметка. а во вторых он имеет ввиду проитерируй че нить внутри разметки компонента - он это имеет ввиду. хотя да, ты это показывал уже выше

Gozar 02.05.2015 14:33

Что-то вроде такого:

Верхний уровень
<div rt-if="1">
  <Repeat list={[1,2,3]} />
</div>


Repeat:
<div>
    <div rt-if="2">
      <RepeatChildren list={[1,2,3]} />
        
    </div>
</div>


RepeatChildren:
{this.props.children}

Gozar 02.05.2015 14:38

Не ну конечно можно тупо запихать всё в один шаблон и собрать из div-ов, но это уже ошибка проектирования.

Gozar 02.05.2015 14:47

Цитата:

Сообщение от UIjs
компонент состоит из шаблона

Компонент состоит из Компонентов или Шаблона + определение компонента и обработчики событий (+ работа с FLUX, если подобный имеется!)

nerv_ 02.05.2015 14:52

Цитата:

Сообщение от UIjs
не говоря уже о том что РАЗМЕТКА и ИНТЕРФЕЙСЫ это ДЕКЛАРАЦИЯ, а ЛОГИКА это ИМПЕРИКА. а в реакте все империка.

в ангуляре же все по полочкам там, где и должно быть

так и есть :)

Но, все-таки...
0. Я пишу на ангуляре 1.x.x чуть более 2 лет
1. Я читал+смотрел_видео про web-components от гугла, щупал их.
2. Читал+смотрел_видео про Polymer.
3. Читал+смотрел_видео про Angular 2.0.
4. Читал+смотрел_видео про React, щупал его.
Мое мнение: на текущий момент реакт - самая быстрая вьюха (до выхода Angular 2.0). Он не форсит структуру приложения. Но, голый реакт как вьюха сам по себе - это боль без react-templates (как минимум) или jade-react (как максимум).

UIjs, когда ты пересядешь на es6, поймешь, что:
1. DI агуляра вызывает слезы, т.к. есть нативные es6 модули
2. выбросишь свою Class функцию просто потому, что она не нужна
---
3. вероятно, тебе надоест юзать jQuery/Angular утилиты, т.к. целесообразней использовать свои, ибо они ведут себя так, как нужно тебе
4. тоже касается транспорта (ajax, sockets)
5. ангуляр заставляет писать обертки вокруг своих сервисов ($http, etc) вместо простого использования ранее написанных тобой классов
---
проще иметь отдельную абстракцию в виде вьюхи, т.к., в идеале, ее можно заменить на другую не переписывая все приложение

nerv_ 02.05.2015 14:54

Цитата:

Сообщение от Gozar
Что-то вроде такого:

не вижу, чем ифы заменил)))

UIjs 02.05.2015 14:55

Цитата:

Сообщение от nerv_
2. выбросишь свою Class функцию просто потому, что она не нужна

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

Цитата:

Сообщение от nerv_
5. ангуляр заставляет писать обертки вокруг своих сервисов ($http, etc) вместо простого использования ранее написанных тобой классов

не заставляет, он заставляет это делать если ты потом будешь по правильному тестировать приложение и за место подключаемых сервисов сможешь передать заглушку на время теста, это единственная причина почему нужно запрашивать даже такие очевидные штуки как $window не напрямую

Gozar 02.05.2015 14:57

Цитата:

Сообщение от nerv_
иметь отдельную абстракцию в виде вьюхи, т.к., в идеале, ее можно заменить на другую не переписывая все приложение

Сильный аргумент, если это будет, если не будет, то это попытка сделать идеальное приложение.

Цитата:

Сообщение от nerv_
голый реакт как вьюха сам по себе - это боль без react-templates (как минимум) или jade-react (как максимум).

Возможно дело привычки, но я за 3 дня осилил, за 1 неделю перестало болеть, теперь получаю удовольствие. У тебя web-components вызывает боль?

Gozar 02.05.2015 14:58

Цитата:

Сообщение от nerv_
не вижу, чем ифы заменил

Эм, я не понял логику. Это if? и что это значит? if 2==2 ?

UIjs 02.05.2015 14:58

Цитата:

Сообщение от nerv_
проще иметь отдельную абстракцию в виде вьюхи, т.к.,

ни что не мешает биндить к контроллерам UIjs любые вьюхи, хоть THREEjs


scope.watchProp(context, 'prop', handler) работает вообще мгновенно так как построин на сеттерах и обсерверах/

п.с. о, я тут придумал по умолчанию все контроллеры наследователь не только от ивент эмиттера а от контролера Controller и задать ему метод watch('prop', handler) ну или типа того

Gozar 02.05.2015 14:59

Цитата:

Сообщение от Gozar
{ if 2 ==2 ? <Repeat list={[1,2,3]} /> : '' }

:)

Gozar 02.05.2015 15:01

Углубленное изучение JSX

Gozar 02.05.2015 15:03

Немного непривычно, но не то, чтобы было очень неудобно. Зато можно писать и более сложную логику не отходя от кассы и не нужно выдумывать несуществующие атрибуты с неизвестной логикой. Вся логика - твоя.

UIjs 02.05.2015 15:10

Цитата:

Сообщение от Gozar
и не нужно выдумывать несуществующие атрибуты с неизвестной логикой. Вся логика - твоя.

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

я уже молчу про то что в атрибутых и кастомных элементах логика только связанная с отображением а бизнес логика находится в контроллерах.и подобно тому как ты верстаешь пиша img зная что там картинка так же можешь верстать пиша ui-picture зная что там гарелея. вообще толсто троллишь, попробуй потоньше

UIjs 02.05.2015 15:13

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

nerv_ 02.05.2015 15:19

Цитата:

Сообщение от Gozar
Эм, я не понял логику. Это if? и что это значит? if 2==2 ?

это я просто ифы залепил для нагляднности. Значит тоже, что и
if (1) {
    // code here
}

вместо "1" будет функция/выражение в реальном приложении

Цитата:

Сообщение от UIjs
у меня есть приватные, в классах нет

сама по себе концепция модуля - это круто
приватные можно залепить хоть так https://yadi.sk/i/foD9WSymgPJr6

Цитата:

Сообщение от UIjs
у меня можно обьявлять в любом порядке классы

чего? :)

Цитата:

Сообщение от UIjs
не заставляет, он заставляет это делать если ты потом будешь по правильному тестировать приложение и за место подключаемых сервисов сможешь передать заглушку на время теста, это единственная причина почему нужно запрашивать даже такие очевидные штуки как $window не напрямую

приведу пример: внутри $http, $q вызывается $scope.$apply();

Цитата:

Сообщение от Gozar
Возможно дело привычки, но я за 3 дня осилил, за 1 неделю перестало болеть, теперь получаю удовольствие. У тебя web-components вызывает боль?

нет. Не хватает из коробки ифоф и репитеров как минимум.
я тебе уже показал, что простой с виду шаблон на react-templates превращается в ад на голом jsx

Цитата:

Сообщение от UIjs
я тут придумал по умолчанию все контроллеры наследовательно толдько от ивент эмиттера а от контролера Controller и задать ему метод watch('prop', handler) ну или типа того

а я думаю не наследовать контроллеры от EventEmitter'a, а создать один и пробросить его во все контроллеры(компоненты), что позволит обмениваться сообщениями вразрез структуре дерева https://yadi.sk/i/pXu1Y7dmgPKDh

Цитата:

Сообщение от UIjs
короче на данный момнет суть такова что реакт это низкоуровневая моебень которая опять все заставляет смешивать логику и разметку

ну нет же :)

Gozar 02.05.2015 15:20

Цитата:

Сообщение от UIjs
короче на данный момнет суть такова что реакт это низкоуровневая моебень которая опять все заставляет смешивать логику и разметку. в то время как ангуляр возвращает все на свои места. и позволяет грамотно реиспользовать

А может быть ты просто не умеешь реиспользовать?

Цитата:

Сообщение от UIjs
но ведь создав какой то атрибут кастомный ты можешь его реиспользовать передавая в атрибут параметры. п.с. а вообще толсто.

Лишний атрибут в верстке - мусор!

Цитата:

Сообщение от UIjs
толсто.

КЭП,
очевидно, что каждый фреймворк нужно знать для начала, чтобы понимать его сильные и слабые стороны.
Очевидно, что ты не знаешь тонкостей React
Очевидно, что я не знаю тонкостей Angular
Очевидно, что это холивар ни о чем.

Ещё вопросы КЭП?

UIjs 02.05.2015 15:23

что такое DI ???

UIjs 02.05.2015 15:25

Цитата:

Сообщение от nerv_
чего?

у меня вначале можно запилить класс наследник,, а ниже него в коде класс родителя, и ошибки не будет)

Цитата:

Сообщение от Gozar
Лишний атрибут в верстке - мусор!

в смысле? что значит лишний? мы создаем атрибут и даем ему какой то функционал, где хотим чтобы этот функционал появился, пишем этот атрибут. где тут мусор???

Gozar 02.05.2015 15:26

Цитата:

Сообщение от nerv_
я тебе уже показал, что простой с виду шаблон на react-templates превращается в ад на голом jsx

Ты это разве что себе показал. Я не понял твою проблему. Я переписал тебе шаблон на компоненты, могу переписать на один шаблон, будет не так наглядно и просто, но можно и в один шаблон запихать. Только зачем?

Гораздо приятней разбить на 3 компонента и реиспользовать(как выражается nemo).
Повторю, я не понял твою проблему и не вижу ничего сложного в простейшей конструкции. Ты писал, что
Цитата:

Сообщение от nerv_
4. Читал+смотрел_видео про React, щупал его.

Теперь очевидно, что это не так.

Мне не противен Angular, просто хочу быстрое приложение и адекватную доку. Не вижу смысла продолжать холивар. Я не знаю о чем говорю в Angular, а ты в React. Это испорченный телефон.

Erolast 02.05.2015 15:27

Цитата:

у меня есть приватные, в классах нет
Твои псевдоприватные свойства в ES6 реализуются элементарно:
class Model {
  constructor() {
    Object.assign(this, {
      privates: {
        url: `/api/models/${this.id}`
      }
    });
  }
}


Цитата:

у меня можно обьявлять в любом порядке классы, у них нет
Я уже говорил - выноси каждый класс в отдельный модуль и понятия порядка просто не будет существовать.

nerv_, компонент Реакта и элемент верстки - это совершенно разные понятия. Компонент - это элемент интерфейса, инструмент для взаимодействия юзера с информацией. Компонент может рендериться в html, а может и нет (react-native, тестирование). Следовательно, размышлять надо не от абстрактного документа, а от интерфейса: реакт предназначен именно для второго.

Gozar 02.05.2015 15:28

Цитата:

Сообщение от UIjs
в смысле? что значит лишний? мы создаем атрибут и даем ему какой то функционал, где хотим чтобы этот функционал появился, пишем этот атрибут. где тут мусор???

В jsx тоже есть мусор. Тебя это успокоит?

UIjs 02.05.2015 15:29

Цитата:

Сообщение от nerv_
а я думаю не наследовать контроллеры от EventEmitter'a, а создать один и пробросить его во все контроллеры(компоненты), что позволит обмениваться сообщениями вразрез структуре дерева

Так так и есть) у меня есть контроллер EventEmitter и если там подписаться на EventEmitter.on ('User.eventName', handler) а внутри контроллера
User написать this.emitt('eventName') то он автоматом подставит имя контроллера перед точкой)

UIjs 02.05.2015 15:30

Цитата:

Сообщение от Erolast
Твои псевдоприватные свойства в ES6 реализуются элементарно:

1) они не псевдоприматные а приватные.
2) они реализуются в ES6 не элементарно а убого и коряво

Цитата:

Сообщение от Erolast
Я уже говорил - выноси каждый класс в отдельный модуль и понятия порядка просто не будет существовать.

а может быть прост использовать uijs чтобы небыло необходимости выносить в модуль?

UIjs 02.05.2015 15:33

Цитата:

Сообщение от Gozar
мусор

элементы и атрибуты это не мусор это кубики лего из которых мы строим сайт, мы описываем их, даем им поведение а потом конструируем из них сайт. они не мусор. у тебя нет аргументов почему они мусор! они ДОЛЖНЫ быть, и они ХОРОШО! потому что ЧИТАЕШЬ их названия И ПОЯТНО что тут происходит с элеменотм по их названию.

если ты еще не понял то низкоуровневые атрибуты мы просто создаем элемент, вещаем на него 3-4 атрибута которые че то делают и потом чтобы каждый раз их не писать, оборачиваем всю эту конструкцию в компонент!! например my-element и потом пишем только my-element а он сам ВНУТРИ СЕБЯ уже эти 4 атрибуты навешивает каждый раз которые ты один раз описал! что непонятного?*?****??

Erolast 02.05.2015 15:53

Цитата:

1) они не псевдоприматные а приватные.
Они псевдоприватные. К ним есть прямой доступ НЕ из методов класса.

Цитата:

2) они реализуются в ES6 не элементарно а убого и коряво
В чем убогость?

Цитата:

а может быть прост использовать uijs чтобы небыло необходимости выносить в модуль?
Необходимость выносить в модуль возникает в первую очередь не из-за проблемы последовательности, а из-за того, что работать с парой тыщ строк в одном файле не очень удобно, так что аргумент не принят. Ну и да, я тоже так могу сказать - почему бы просто не использовать модули, чтобы не было необходимости подключать какую-то левую либу? Так что тем более не принят.

UIjs 02.05.2015 15:58

Цитата:

Сообщение от Erolast
К ним есть прямой доступ НЕ из методов класса.

нет к ним прямого доступа не из метода класса

Цитата:

Сообщение от Erolast
В чем убогость?

я некрасивости синтаксиса, по сравнению с моим this.private или на coffee @private вообще убого смотрится как костыль

Цитата:

Сообщение от Erolast
а из-за того, что работать с парой тыщ строк в одном файле не очень удобн

но ведь все уже давно испольтзует сборщики которые собирают все в один файл, разве нет? один файл парсится быстрее, грузится быстрее, сжимается лучше, или по какой то причине нужно этого избегать?

Erolast 02.05.2015 16:01

Цитата:

нет к ним прямого доступа не из метода класса
А? Это как? Ты научился перехватывать стек исполнения? :blink: Вот такой код не будет работать:
let user = new User(); //privates.id == 1432
console.log(user.privates.id);

?

Цитата:

я некрасивости синтаксиса, по сравнению с моим this.private или на coffee @private вообще убого смотрится как костыль
Сделай себе базовый класс с объявлением privates, и будет то же самое, делов то.

Erolast 02.05.2015 16:02

Цитата:

но ведь все уже давно испольтзует сборщики которые собирают все в один файл, разве нет? один файл парсится быстрее, грузится быстрее, сжимается лучше, или по какой то причине нужно этого избегать?
Я чота не понял. Ты делишь код на модули? Тогда в чем проблема каждый класс выносить в отдельный? Нет, даже лучше так: почему ты не выносишь каждый класс в отдельный модуль?

И собирать код на ES6 модулях в один файл - ну вообще не проблема. webpack + babel-loader.

Gozar 02.05.2015 16:11

Цитата:

Сообщение от UIjs
атрибуты это не мусор

мусор! :)

UIjs 02.05.2015 16:11

Цитата:

Сообщение от Erolast
Вот такой код не будет работать:

нет, private undefinet извне класса

Цитата:

Сообщение от Erolast
И собирать код на ES6 модулях в один файл - ну вообще не проблема.

я перечислил минусы классов ES6 по сравнению с coffee + ui.Class

нет приватных, важен порядок обьявления.


и чтобы РЕШАТЬ эти ПРОБЛЕМЫ нужно костылить че то там с модулями, с какими то хаками, при чем должны быть КАКИЕ ТО ПЛЮСЫ чтобы ДЕЛАТЬ ВСЕ ЭТО? а их НЕТ!! Есть только МИНУСЫ которые ты ПРИДУМАЛ КАК ОБХОДИТЬ!! улавливаешь)?


Цитата:

Сообщение от Erolast
Нет, даже лучше так: почему ты не выносишь каждый класс в отдельный модуль?

я тебе видео записал, рендерится

Цитата:

Сообщение от Erolast
Ты научился перехватывать стек исполнения?

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


Часовой пояс GMT +3, время: 00:28.