Привет народ!
Кто-нибудь из здесь присутствующих работал на реальных проектах с React JS от Facebook?
Поделитесь опытом и наблюдениями.
Буду признателен.
Почитал доку, попробовал Hello world.
Какое-то двоякое чувство. В свете компонентной паранойи и попытках придумать на базе ангуляра и SF некое подобие компонентного фреймворка, после знакомства с React стало многое понятно. Надо было раньше прочитать (там не сильно много, за день можно освоить) чтобы не приходить к основным принципам через свои же шишки. Короче там очень полезная информация о том как работать с компонентами.
А вот реализация просто жесть. После Ангуляра с его two-way binding тут просто ВСЕ надо делать ручками. Вообще не понимаю отчего такая React-о мания вокруг. Столько ручной работы просто жуть. Возможно в глобальном плане, в рамках корпораций это окупается, но в рамках pet project много оверхеда.
Хотя единственный плюс за которым погнался - компоненты реакта можно рендерить в любой части сайта в любом количестве и сочетании. Не хватает этой гибкости для ангуляра - в ангуляре все придуманные компоненты должны крутиться в рамках одного контейнера на странице. Не хватает этого для моих задумок.
Вот RactiveJS отличный компромис между этими двумя стихиями, но, блин, он не популярен (хотя хорош, чертенок).
Использовал React для пары single page application на форсе. Не пользы ради, а саморазвития для. В одном случае, делал формочку(сценарий с пошаговым рендером компонентов) на force.com сайте, в другом - просто приложуху с определённым функционалом.
Для передачи данных между компонентами использовал event emitter.
В принципе не зная ничего о фреймфорках, за 4 дня написал формочку, и прикрутил к ней SLDS, так что в плане доступности оно всё норм (половину времени на SLDS потратил, считай)
В итоге пригодилось - возможность очень быстрых правок (в т.ч. в реалтайм с демонстрацией заказчику) и быстрый деплой (вся приложуха в статикресурсе). Хотя, это очень частный случай конечно.
Недостатком является невозможность манипуляции с некоторой разметкой с помощью "хирургических инструментов", типа jQuery, из-за виртуального DOM. Так уж вышло, что нужно было на листьях рекурсивного дерева отрисовывать символ (с) в надстрочном регистре, который приходил из кастом сеттинга(у листа было сложное составное имя) И вот тут я понял, что внутрь дерева я с помощью jQuery никак не залезу. И даже его листьям назначить нужные id не получалось. В итоге пришлось перерабатывать отрисовку дерева таким образом, чтобы при определённых условиях отрисовывался тег <sup> и в него попадал (c).
Спасибо за информацию.
А какое дев окружение использовал. Я не совсем понял про быстрое изменение для демо клиенту.
минимально что я настроил для компиляции JSX в js был webpack. Но там вообще в примерах используются тот еще зоопарк из nodejs
Да старый добрый sublime + MavensMate. Поставил плагин на JSX разметку. А саму разметку в JS конвертировать не нужно, она у меня как есть в статик ресурсе написана.
С демо клиенту - всё элементарно. У клиента открыта формочка на force.com сайте. У меня - файлик статик ресурса. Я, допустим, добавляю инпуту плейсхолдер, делаю ctrl+s, клиент рефрешит в браузере страничку - видит плейсхолдер. Конечно, то же самое было бы справедливо и для VF страницы, но я те же самые манипуляции с той же скоростью могу прямо в продуктиве делать. В общем, нету такого что "у меня тут фреймворк, подождите, сейчас запущу сборщик и отпишусь как будет готово" ).
Блин, очередная попытка вникнуть к ангуляр 2 провалилась.
Бля, ну и намудрили они там просто жесть. Все не могу выбрать что осваивать дальше А2 или React. Реакт конечно то еще извращение, но бля по сравнению с A2 он кажется просто старым добрым ламповых jQuery.
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
О чем можно дальше говорить? Я вот перфекционист и когда увидел вот это (кстати увидел не статью сначала а результаты компиляции моего Hello World) то просто ох..л. Не, нам такой монстр для того чтобы пилить формочки не нужен. Понимаю что там в Google умные дядьки сидят, но не все же такие.
Какое прекрасное чувство вызывает Ангуляр1 - подгрузил один файлик на страницу и ВСЕ! Радуйся!!! Откуда млин 1,5 метра чтобы вывести долбанную надпись. При чем я так и не нашел как отделить мой код от самой либы. Пусть либа грузится на страницу с CDN cтатически, а я буду подгружать только свой проект на 1кб. Красота. НО откуда 1,5 метра собранного JS?
Все таки придется осваивать реакт чтобы быть в тренде и смочь себя продать в ближайшем будущем.
Меня вообще фреймворки немного отпугивают необходимостью собирать продукт с помощью сторонних приложений. ИМХО это довольно медленно в плане отладки. Я поэтому и выбрал REACT в качестве первого фреймворка для знакомства. Однако, если строить более сложные приложения, да ещё с использованием сторонних REACT компонентов, без сборщиков не обойтись, конечно.
А чтобы себя продавать, пожалуй придётся налегать на лайтнинг ) Можно сколько угодно бить пяткой в грудь, утверждая, что умеешь написать веб страницу чтобы было круто, но лайтнинг как бренд уже активно завоёвывает умы клиентов, просто потому что СФ его пушит.
И опять же, REACT + SLDS отлично сойдёт за этот ваш лайтнинг ) Внешне не отличить ) И кстати, используя фишки template синтаксиса, довольно удобно манипулировать классами SLDS чем то вроде такого
var visible = this.props.rendered;
<div className = {"slds-grid slds-wrap " + ( visible ? "slds-show":"slds-hide")}>
Ну я уже на нескольких проеках успешно использую Ангуляр1 + slds. Аж писаюсь от счастью как все круто получается - и не нужны никакие сборщики сторонние. Lightning даже рядом не стоит. Вот только облом - Google уже не поддерживает первый Ангуляр - мол хреново сделали, а пилит ангуляр 2 про который я писал выше.
Остается Реакт курить, чтобы, как ты говоришь, клиентам угодить.
А с Lightning даже не связывайся если хочешь нормально спать и нервы себе сберечь. Запилить на нем что-то серьезное еще ни у кого не получилось. Так, только pet projects.
О ВЕЛИКИЕ ГУРУ
Как reactJS переваривает рендер 1к строк таблицы с 10 колонками?
Взять темплейт одной ячейки из SLDS, размножить его на 10 колонок, вывести внутри
[
{
"index": 0,
"id": 0,
"currency": "EUR",
"flag": ["A", "B", "C", "D", "!"],
"rate": 100,
"full_name": "CUSTOM LINE",
"guid": "bbaa4124-7011-477f-9cdb-99064cafee73",
"isActive": true,
"balance": "$3,318.73",
"picture": "http://placehold.it/32x32",
"age": 35,
"eyeColor": "green",
"name": "Dalton Adams",
"gender": "male",
"company": "QUONK",
"email": "daltonadams@quonk.com",
"phone": "+1 (873) 537-2073",
"address": "774 Conduit Boulevard, Madrid, Kansas, 7401",
}, .......... 1000 раз, отличие только в index
]
ПЫСЫ: не срача рада, ради эксперемента. ангуляр отлично справляется если у тебя простейший темплейт
<tr ng-repeat="field in fields">
<td>{{field.value}} </td><!-- и еще 9 таких же филдов -->
</tr>
но как только поменять внутрянку <td></td> на что нить из слдс
<div class="slds-dropdown-trigger slds-dropdown-trigger--click" aria-expanded="true">
<button class="slds-button slds-button--icon-container" aria-haspopup="true">
</button>
<div class="slds-dropdown slds-dropdown--right slds-nubbin--top-right">
<ul class="dropdown__list" role="menu">
<li class="slds-dropdown__item">
<a class="" href="javascript:void(0);" role="menuitem" data-name-modal="view-notes">
<p class="slds-truncate">X</p>
</a>
</li>
<li class="slds-dropdown__item">
<a class="" href="javascript:void(0);" role="menuitem" data-name-modal="X">
<p class="slds-truncate">X</p>
</a>
</li>
<li class="slds-dropdown__item">
<a href="javascript:void(0);" role="X">
<p class="slds-truncate">XX</p>
</a>
</li>
<li class="slds-dropdown__item">
<a href="javascript:void(0);" role="menuitem">
<p class="slds-truncate">XXX</p>
</a>
</li>
<li class="slds-dropdown__item">
<a class="" href="javascript:void(0);" role="menuitem" data-name-modal="XX">
<p class="slds-truncate">X</p>
</a>
</li>
</ul>
</div>
</div>
он будет это дело рендерить секунд с 10, и потом сама страница начинает подтормаживать: onhover класс будет оттормаживать с задержкой до 1секунды
Всем привет, стало интересно, кто что использовал(использует) на фронт-энде кроме вышеперечисленных React, Angular(1,2), Lightning? Возможно, какие-то менее популярные и востребованные на рынке решения, которые тем не менее вам понравились
Я вот все же думаю, что надо заканчивать с фреймворками, надо взять какой нить шаблонизатор, прикрутить к нему жквери, и все это будет просто летать!
На счет скорости чисто теоретические познания вычитанные в нете - отлично справляется. Особо извращенные разрабы в особо требовательных задачах даже прикручивают реакт к ангуляру в качестве шаблонизатора. Доказывать ничего не буду - сам не проверял, но читал часто про это.
Я писал уже не раз - использовал RactiveJS (не путать с React). Отличнейшая штука. Единственный минус - не сильно распиарен, хотя судя по главной странице за ним стоит theguardian.com - Продать заказчику не получится, но втихоря использовать проблем нет. Кстати так собственно получилось его внедрить в один большой проект 
- сначала использовал чисто для личных целей, а потом пошло поехало, хотя изначально на ангуляр не согласились.
А если хотите совсем хардкода, то можете использовать один из js template engines. Как по мне сильно классные штуки, и сильно недооцененные 
Вот тут можно поискать на любой вкус и цвет (даже подобрать)
https://garann.github.io/template-chooser/
Я использовал Handlebars.js - он используется в основе RactiveJS и похож на template engines в других популярных фреймворках. Крайне классная штука. Но многое приходится делать ручками (это и понятно). Но в принципе после знакомства с React уже не особо кажется что и много.
Так что не на одних Angular и React свет клином сошелся. Млин, вернее наверное на них - остальное работает намного лучше, но клиентам это увы не продашь :(
Кстати я не понимаю зачем это делать? (хотя в частном случает твой вопрос понимаю ).
На страницу надо передавать только минимальный набор данных необходимых для отображения. И не будет проблем с отрисовкой и навещиванеим слушателей на все эти данные. Тут уже не проблема фреймворков, а проблема архитектуры. Даже если все эти данные у тебя на странице, то что мешает вытянуть средствами простого js срез необходимых данных и уже их скормить фреймворку, который построит таблицу не из 1k а из 20 строк.
Кстати хочу еще отметить один интересный момент который дарит нам ReactJS
Дело в том что он позиционируется как библиотека (а не полноценный фреймворк) которая отвечает ТОЛЬКО за отображение информации и ничего больше. Вот собственно почему столько личших телодвижений при его использовании. Но благодаря этому вся остальная часть - а именно манипуляция с данными отдается на откуп самим программистам. И вот тут на сцену выходят отличные, как их правильно назвать, дополнения для ReactJS вроде Flux. Как написано это всего лишь описание основных принципов работы с данными на фронтенде. ВОТ!!! Вот это именно нам и надо. Друзья - там реально очень много полезной информации. Обязательно изучите. Так вот Flux сам оказывается не конечный вариант и его еще улучшают - существуют много разных либ, которые развивают эти принципы. Вот к примеру Redux - как раз сейчас засел за изучение и просто жалею что раньше не сталкивался.
Так вот к чему я это. К примеру я использую Ангуляр1 в работе. В свете помешательства на фронтенде компонентами тоже замутил свои костыли. Ангуляр1 не спроектирован под компонентную структуру, хотя в последней версии компоненты и появились (собственно поэтому на сцену и вышел Ангуляр2 - полностью переработанный). Изучив бы принципы Flux/Redux немного раньше и переварив их - свои костыли на Ангуляре1 были бы куда лучше
Не ленитесь, изучите в свободное время
http://redux.js.org/docs/introduction/ThreePrinciples.html
Тем кто читать не любит
https://egghead.io/courses/getting-started-with-redux
Спасибо за ссылку на RactiveJS, надо будет глянуть что оно из себя представляет.
Из template engines использовал Mustache.js и он мне очень понравился. Сравнить с Handlebars не могу, т.к. не работал с оным, но в обсуждениях они часто мелькают рядом.
Mustache.js это прородитель Handlebars.js
Мне сам mustache не нравится потому что он сделал как logic less, а это просто в голове у меня не укладывается.
Я просто не понимаю как можно жить без if/else в шаблоне. Вот тут Handlebars и выходит на сцену - это тот же Mustache только на стероидах (с логикой). И там не только if/else.
Так отличнейший туториал http://learn.ractivejs.org/hello-world/1/
который можно изучить за пару часов и сразу идти в бой.
Рактив очень хорош, но только если надо просто вывести инфу, если копать глубже, то он скатывается и там без костылей ничего не будет работать) это если говорить про странички которые содержат больше одной маленько й формочки с 2мя инпутами ИМХО
НО!!!
сейчас я смотрю его активно начали дорабатывать - покрайней мере последний апдейт в гите - сутки назад
а до этого его наверное целый год никто не трогал
Ну хз, насколько я помню из одного проекта - проблема была не в Ractive а в архитектуре приложения. Менять полностью весь state на странице при каждом чихе это серьезно. Вообще все фреймворки, как и Рактив работают по инкрементальному принципу - перестраивается UI только под измененные данные. А когда ты полностью меняешь объект данные, то естественно перестраиватеся весь темплейт вместе с кучей обвеса над DOM. В это случае ни один фреймворк не поможет - все будут пыхтеть и пердеть над страницей. Все кастыли только от нас самих :D. Как раз читаю сейчас про React+Redux и просто в каждой строчке вижу прям как не надо было делать
Вот две отличные, простые статьи про React+Flux
Немного устаревшие, но для старта просто огонь. Все по полочкам, основные принципы
ReactJS для глупых людей
Flux для глупых людей
Flux в картинках
Пару лет назад делал один проект с использованием CanJS и Mustache.js.
CanJS на тот момент мне нравился, из альтернатив был ещё Backbone, но в каком состоянии и какая у них популярность сейчас сказать не могу, т.к. с тех пор больше работать с ним не приходилось.
А в чём проблема с angular1? Нет компонентов, не беда - есть директивы. По сути теже яйца. Написал кучу директив для того же slds и используй. Нужен лукап инпут - <slds-lookup ng-model="" params.../> что может быть проще и быстрее в плане разработки? Проект "красиво" в статик ресурс ложится: темплейты, контроллеры, сервисы и тд. всё по папкам разносится и легко поддерживается тем же Illuminated Cloud который позволяет работать со статик ресурсом не теряя время на зиповку и аплоад вручную или через кастомные сборщики.
А по поводу лагов при рендере овер 1к - зачем столько данных на странице?
А по поводу лагов при рендере овер 1к - зачем столько данных на странице?
а мы тут это performanceом балуемся))
ПЫСЫ: да и попытка убедить заказчика, что вам не надо видеть все записи в один и тот же промежуток времени провалилась
странные эти заказчики
Проблемы нет, если только не тот факт что он больше не развивается.
А смысл сидеть на старой технологии?
Для работы Ангуляр1 просто огонь. Я как раз сейчас на проекте где мы используем его и очень удачно и компоненты у нас есть.
НО проблема ангуляра 1 в том что это должен быть монолитное (причем одно на странице) приложение в рамках которого уже балуйся как хочешь. Это уже вчерашний день. Гугел сам признал это выпустив A2.
Сейчас в тренде (и кстати удобнее) работа с независимыми компонентами. Независимыми в полном смысле слова. Бери и пихай в любом количестве в любое место на странице.
Вот пример из жизни. Мне надо чтобы у меня в хедере был компонент для логина, а в боди область с разными другими компонентами. Конечно выход есть - обернуть всю страницу в контейнер ангуляровский и играться. Но тогда пропадает вся красота и чистота html.
Ангуляр1 подходит для монолитных SPA приложений, но это всего лишь один юзкейс. Для точечных вкраплений он не подходит.
Вот откуда все зло. Хочешь сделать красивую архитектуру - а получается как всегда.
Только свои личные проекты будут получаться красивыми
