These are chat archives for dev-ua/reactjs

11th
Jan 2016
Denis Stoyanov
@xgrommx
Jan 11 2016 00:06
и да, redux не нужен
Nikolay Kostyurin
@JiLiZART
Jan 11 2016 09:20
@xgrommx вот взял бы и написал громкую статью по этому поводу ))
а мы бы с удовольствием почитали )
Denys Dovhan
@denysdovhan
Jan 11 2016 09:37
На тему бути в тренді в мене сумніви. Насправді, не дуже треба в ті тренди падати, бо можна стрибати від одного до іншого і не зробити нічого реального.
В @listochkin деповідь є про це.
stanleer
@stanleer
Jan 11 2016 09:43
))
stanleer
@stanleer
Jan 11 2016 09:56
в тему видоса )
глянул на hh
на ангуляре ваках больше чем на реакте )
YLuchaninov
@YLuchaninov
Jan 11 2016 10:11
на хабре есть статья(перевод) сравнение ангуляр2 и реакта, статья так себе - главный посыл абсолютно правильный:
ангуляр это энтерпрайз фреймверк(все из коробки) а реакт это либа к которой стекаешь что тебе надо.
энтерпрайз дэвелопмент он не такой
а говна везде хватает.
stanleer
@stanleer
Jan 11 2016 10:12
да но в видосе проскочила тема про то чо реакт убил ангуляр
даже без учета тогоч то это разные вещи
про ангуляр2 вот неплохой вдос
http://www.youtube.com/watch?v=XQM0K6YG18s
на 16й минуте иет сравнение
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:15
ой уберите ангуляр от сюда
YLuchaninov
@YLuchaninov
Jan 11 2016 10:16
не корректное сравнение - там ошибка была: в реакте стоял таймаут, он потом извинялся, есть видео сравнения с исправлениями, и да там ангуляр 2 быстрее
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:17
ангуляр быстрей, но я сомневаюсь, что это будет верно для серверного рендера
stanleer
@stanleer
Jan 11 2016 10:17
а это так просто пасареть
Maxim
@stigmat4j
Jan 11 2016 10:17
это же нг-конф, понятное дело там будут хвалить анговнуляр)
stanleer
@stanleer
Jan 11 2016 10:17
лично я не хочу серверного рендера
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:17
ну плохо
что еще сказать))
stanleer
@stanleer
Jan 11 2016 10:18
я считаю что пусть рендерит это клиент а сервер другие задачи решает
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:18
лол
Maxim
@stigmat4j
Jan 11 2016 10:18
Реакт не диктует архитектуру в отличии от ангуляра, что даёт плюс в сторону реакта
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:18
почитай про изаморфность
та реакт круче куда не глянь)
stanleer
@stanleer
Jan 11 2016 10:18
да я не спорю поэтому и перехожу
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:18
сервер рендерит только ту страницу, что запросили. Уменьшая время первого отклика
а остальное только данные тянишь
stanleer
@stanleer
Jan 11 2016 10:19
а зачем рендерить вообще на северре?
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:19
это и сео и все такое
ну как зачем
stanleer
@stanleer
Jan 11 2016 10:19
отдай индекс с вызовом js и будет тоже самое
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:19
та нет
читай)
тут и фишка, что ты делаешь запрос и тебе возвращается и верстка и данные с ней. Сразу отрендериное приложение. Что круче для ux и для seo
YLuchaninov
@YLuchaninov
Jan 11 2016 10:20

@DmitryAuine и? ангуляр 2 тоже так умеет

реакт рулит за счет jsx и компонентной архитектуры. и все! но этого с головой..

Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:21
да я знаю что он так умеет лол
я писал выше, что он на серваке не будет быстрей реакта
stanleer
@stanleer
Jan 11 2016 10:21
на ангуляре я как делал
сжимал весь свой код в одну либу
клиентсо заходил и ему отдавался индес мустой с вызовом js
и все
клиентос сам там бродил а от сервера тока данны тягал
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:21
да и тут так
прочитай статью
stanleer
@stanleer
Jan 11 2016 10:21
ну а у реакта же есть еще возможность вообще рендерить с отдачей готового html
типа для поисковиков
Dmitry Olkhovoi
@DmitryOlkhovoi
Jan 11 2016 10:21
господи
YLuchaninov
@YLuchaninov
Jan 11 2016 10:22
писец
stanleer
@stanleer
Jan 11 2016 10:22
как у ангуляра либа пререндер кажется
Nikolay Kostyurin
@JiLiZART
Jan 11 2016 11:37
@stanleer сервереный рендеринг важен. Чтобы пользователь не тупил в белую страницу пару секунд и не закрыл в итоге вкладку. Так же первый раз идет экономия на запросах, либо ты сразу отдаш отрендеренный html с данными, либо ты отдаш js, который будет парсится(!), рендерится на клиенте(!), тянуть данные с сервера(!)
stanleer
@stanleer
Jan 11 2016 11:39
это что за приложение такое должно быть чтобы пару секунд был белый экран?
я и очу чтобы все рендерилось на клиенте
Nikolay Kostyurin
@JiLiZART
Jan 11 2016 11:39
не лендинг точно. Базовый функционал того же магазина, и js весит уже мегабайт
stanleer
@stanleer
Jan 11 2016 11:40
так вебпак же дает возможность подргузки либ отдельно
что таокго можно напихать в либу на мегабайт для индексной сттаницы где несколько товаров, список категорий и корзина?
на ангуляре когда писал
никакого серверного рендера не было и все летало
YLuchaninov
@YLuchaninov
Jan 11 2016 11:51

@JiLiZART вобщето кроме сервер рендеринга есть еще и прогресив рендеринг, пресеты данных и т.д.
есть туча подходов и методик чтобы:

Чтобы пользователь не тупил в белую страницу пару секунд и не закрыл в итоге вкладку.

Nikolay Kostyurin
@JiLiZART
Jan 11 2016 11:54
@YLuchaninov даже twitter отказался от полного рендеринга на клиенте, в силу того что это оказалось медленнее. Да и не известно что с производительностью у клиента. Вообще странно полагатся на мощьности пользователя.
stanleer
@stanleer
Jan 11 2016 11:55
возможно вы правы
но пока у меня знаний мало и либа маленькая я вызываю либу тегом )
ща чуть разберусь дойду до серверного рендера
просто я думал раз уж пишу фронт на js то незачем сервачок дергать
YLuchaninov
@YLuchaninov
Jan 11 2016 11:56
а я и не говорил что надо полностью рендерить, я говорил что надо знать альтернативы
а по поводу даже twitter отказалсяони в свое время утверждали что js смерть в мобильных аппах, ниче что: reactnative, native script ;-)
Nikolay Kostyurin
@JiLiZART
Jan 11 2016 11:58
@YLuchaninov react native != javascript, весь UI там нативно обрабатывается, а js висит в отдельном треде, что позволяет писать 'медленный' код который не будет вешать интерфейс.
Скажем с тем же react + redux, сервер выплевывает начальное состояние в виде json и полностью отрендеренный html по этому состоянию
YLuchaninov
@YLuchaninov
Jan 11 2016 12:01
яваскрипт это язык, реакт нэтив это платформа, медленный код на js это профанация - быстродействие для конечного пользователя это не тоже самое что быстродействие в расчетах
не надо мне расказывать как работает reactnative я немного в курсе http://yluchaninov.github.io/kharkivjs/#/17
а по поводу полностью рендерить есть даже такое: http://pixelscommander.com/en/interactive-revolution/what-is-beyond-isomorphic/
а утверждаю только одно: чтобы выбрать инструмент надо знать альтернативы
а не голо утверждать SPA vs server-rendering
stanleer
@stanleer
Jan 11 2016 12:12
если либа не превышает допустим 100кб что клиентский рендер разве тут не эффективнее?
Denys Dovhan
@denysdovhan
Jan 11 2016 12:14
чуваки, це чат reactjs
ангулар тут https://gitter.im/dev-ua/angularjs
YLuchaninov
@YLuchaninov
Jan 11 2016 12:15
@denysdovhan мы о реакте и архитектуре все переведенные линки валидны - там есть реакт))
прикол в разной архитектуре
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:49
@stanleer от уяви: я зайшов до тебе на сайт з opera mini, що я побачу без пререндерингу? НІЧОГО!
stanleer
@stanleer
Jan 11 2016 12:50
@terrysahaidak почему ничего? у оперы какие то проблемы с реактом?
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:51
opera mini не грузить js
stanleer
@stanleer
Jan 11 2016 12:51
@terrysahaidak а если старница будет отрендерена, то как потом будет отрабаывать яваскрипт уже на странице?
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:52
і не треба казати зараз, що ніхто її не юзає)
моя мама з sgs3 і H+ мережею тільки через неї і сидить
якщо лінки валідні, то воно буде ходити на сервер по новий html
якщо це новинний сайт чи типу того, де важлива інформація, а не якась соцмережа, то всьо буде гуд
stanleer
@stanleer
Jan 11 2016 12:54
а если допустим это новостной сайт и там идет частое обновление ленты?
то на опере что оно не заработает?
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:54
ні
логічно ж
opera mini
не путати з opera mobile
і десктопною
stanleer
@stanleer
Jan 11 2016 12:55
а если это магазин и добавление твоара в корзину идет через запрос к апи то тоже нет
тода смысл?
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:55
щоб користувач подивився
stanleer
@stanleer
Jan 11 2016 12:55
я пронял про mobile
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:55
от часто ти на розетку заходиш?
stanleer
@stanleer
Jan 11 2016 12:55
просто сейчас сайты нашпигованы яваскриптом прилично и если там не будет он работаь то что показывая отрендеренную страницу что нет толку мало будет
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:56
в мене був телефон сонька 510, в ньому якби не opera mini, то взагалі б не було інтернету як такого, і я міг зайти спокійно на розетку, щось потичити
звісно я би з нього цього не робив, бо ніфіга це не зручно
яка мета сайту?
показати хитровиїбану анімацію чи ще якусь херню, чи відобразити юзеру інформацію?
ясен пень, шо інформацію
stanleer
@stanleer
Jan 11 2016 12:57
ну может быть
мне пок хотябы прогать на реакте сначала научиться а уже потмо думать об пользователях с нерабочим js )
Terry Sahaidak
@terrysahaidak
Jan 11 2016 12:57
юзер до тебе приходить за інформацією
та і з іншого боку, якщо до тебе прийде робот, то що ти йому покажеш?
або якийсь парсер
ну от вставляєш ти в вк ссилку, а воно парсить її і показує короткий зміст її, без пререндерингу ніфіга воно не покаже
stanleer
@stanleer
Jan 11 2016 13:00
роботу я могу отдать дуругю страницу
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:00
яку?
stanleer
@stanleer
Jan 11 2016 13:00
где будет только текст
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:00
ну для того тобі доведеться хендлети вже два види запитів
а не простіше на декілька строчок нафігачити пререндеринг сервер, який буде все робити сам?
stanleer
@stanleer
Jan 11 2016 13:01
я карте сайта можно указать ссылки
с параметром
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:02
це просто створення проблем на тому місці, де їх вже не має бути)
stanleer
@stanleer
Jan 11 2016 13:04
да прсот если я слеаю js файлик, то я смогу его положить куда угодно где ноды то нет даже
но это если приложение будет небольшим, а каким оно будет яеще не знаю
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:05
ти ж розумієш, що наявність пререндерингу і просто аплікуха на реакті не жеруться?
ти можеш і без того спокійно написати собі на реакті, і просто віддавати один скрипт bundle.js з сторінкою і все
stanleer
@stanleer
Jan 11 2016 13:06
лан дойду до этого там решу )
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:07

а якщо хочеш пререндеринг, підносиш собі сервер на ноді, і буквально пару строк коду і всьо, маєш пререндеринг

тим більше ноду як піднімеш, машина навіть не замітить)

Vladyslav Siriniok
@siriniok
Jan 11 2016 13:14
@terrysahaidak для опери міні не треба пререндер, вона рендерить все на сервері з жс
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:15
рік томі мені на моїй сонці нічого не рендерило)
Volodymyr128
@Volodymyr128
Jan 11 2016 13:17
Використовую react-router. Рендерю в'юхи тільки на клієнтській стороні.
Проблема: при перезагрузці SPA на всіх сторінках окрім IndexRouter - <index_url> (наприклад, <index_url>/signIn) отримую 404 Not Found
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:20
@Volodymyr128 такий код є у тебе?
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'))
})
Volodymyr128
@Volodymyr128
Jan 11 2016 13:20
@terrysahaidak backend на Java
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:21
ну типу сервер має постійно віддавати index.html
або ж чогось у тебе RR не матчить раути
Volodymyr128
@Volodymyr128
Jan 11 2016 13:22
@terrysahaidak ок, спасибі
Illia Seheda
@ALF-er
Jan 11 2016 13:22
это не связано с роутером. Твой хттп сервер не отдаёт index.html на этот запрос, а пытается найти или signIn.html или /signIn/index.html. Настрой его так чтоб он на любой запрос отдавал index.html
stanleer
@stanleer
Jan 11 2016 13:24

@Volodymyr128

если у тебя nginx

location / {
        try_files $uri $uri/ /index.html;
    }
stanleer
@stanleer
Jan 11 2016 13:39
в примерх часто врстречаю использование createClass и Component
ощущение что это одно и тоже
в чем подвох?
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:41
@stanleer createClass для es5, а Component для es6 classes
stanleer
@stanleer
Jan 11 2016 13:42
@terrysahaidak а, спс
да ща с ес6 столкьо пуаницы в инете для новичков (
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:42
але якщо ти юзаєш es6 класи, то ти не зможеш юзати міксіни, ну і нема автобіндінгу
Volodymyr128
@Volodymyr128
Jan 11 2016 13:42

@terrysahaidak мене мучать сумніви на рахунок

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'))
})

Виходить сервер взагалі ніколи не буде повертати 404?

Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:42
404 має обробляти RR
Volodymyr128
@Volodymyr128
Jan 11 2016 13:43
ага
дякую
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:43
<Route path='*' component={NotFound} />
тобто якщо воно не знайде підходящий, то спрацює цей
Ruslan Abdullaev
@rajdee
Jan 11 2016 13:52
@stanleer а можно и вовсе не использовать ни то, ни другое, а использовать обычный функциональный компонент )
но тогда и state не будет, равно как и refs и прочих lifecycle methods
stanleer
@stanleer
Jan 11 2016 13:53
@rajdee я кщк не в теме что это такое )
Terry Sahaidak
@terrysahaidak
Jan 11 2016 13:55
@stanleer ну типу писати так:
import React from 'react'

const Component = (props) => {
  return <div>Hello world!</div>
}

export default Component
stanleer
@stanleer
Jan 11 2016 14:06
у меня пока один класс в модуле
export default class News extends React.Component {}
Terry Sahaidak
@terrysahaidak
Jan 11 2016 14:10
ще ти можеш писати так
import React, {Component} from 'react'

export default class News extends Component {}
stanleer
@stanleer
Jan 11 2016 14:11
@terrysahaidak спс
stanleer
@stanleer
Jan 11 2016 14:22

на прмиере тех же новостей
чтобы их вывести нужно создать минимум 2 компоненты: обертку и элемент списка
если брать оф сайт то все онон ка кто усложненно смотрится

нельзя сделать один шаблончик который будет и оберткой и элементом?

что то типа
обертка
— цикл
—— элемент списка
— / цикл
/ обертка
Volodymyr128
@Volodymyr128
Jan 11 2016 14:29
@terrysahaidak на рахунок 404 має обробляти RR. Як бути з REST запитами? Вони не повинні оброблятися RR
Я ж правильно розумію: RR повинен викидувати 404 до того як відправляти запит на сервер?
Roman Pominov
@rpominov
Jan 11 2016 15:01
@stanleer
<div><ul>{items.map(item => <li>{item.name}</li>)}</ul></div>
stanleer
@stanleer
Jan 11 2016 15:01
@rpominov а как правильнее?
2 отдельные компоненты или такой вот вариант?
Roman Pominov
@rpominov
Jan 11 2016 15:02
смотря сколько кода/логики в этих элементах списка
если много, то можно вынести в отдельный компонент
но вообще, строго говоря, начиная с 0.14 это item => <li>{item.name}</li> тоже называется "Компонент" :)
Volodymyr128
@Volodymyr128
Jan 11 2016 15:34
Чому в мене в реакт роутері немає Router.NotFoundRoute?
stanleer
@stanleer
Jan 11 2016 15:51
кто нить использует node-fetch?
Андрей Листочкин (Andrey Listochkin)
@listochkin
Jan 11 2016 15:57
я использую
Terry Sahaidak
@terrysahaidak
Jan 11 2016 16:04

@Volodymyr128 а який ти використовуєш? від такої штуки відказались, зараз там просто path='*' - це те саме

а з тамтим, тобі потрібно налаштувати сервер так, щоб, наприклад, при
GET example.com/api/users він повертав json, а GET example.com/users -- index.html

@stanleer @rpominov тільки потрібно не забувати передавати key в li
Volodymyr128
@Volodymyr128
Jan 11 2016 16:08
@terrysahaidak дякс, буду пробувати
Volodymyr128
@Volodymyr128
Jan 11 2016 16:40
@terrysahaidak <Route path="*" component={NotFound} /> не працює. Все одно по <my_domain>/ffjlksfskjflотримую 404 з сервера замість власної NoFound сторінки
Denis Stoyanov
@xgrommx
Jan 11 2016 16:51
@rpominov stateless
Terry Sahaidak
@terrysahaidak
Jan 11 2016 16:56
ти точно його налаштував так, щоб він віддавав завжди Index.html?
@Volodymyr128 крім того яка у тебе версія раутера?
ну і працюють інші раути, які ти прописав?
stanleer
@stanleer
Jan 11 2016 18:43
@listochkin можешь пример показать? что то у меня не растет кокос
stanleer
@stanleer
Jan 11 2016 21:16
let items = fetch(config.api + '/search')
    .then(function(res) {
    return res.json().then(function(result) {
//        console.log(result);
    });
});

console.log(items);
лог ничего не отдает, что тут не так?
Artyom Trityak
@artyomtrityak
Jan 11 2016 22:15
ктонить webpack + flow юзал?
Terry Sahaidak
@terrysahaidak
Jan 11 2016 23:31

@stanleer

fetch('config.api + '/search')
  .then(res => res.json())
  .then(res => console.log(res))
  .catch(error => console.log(error))

ти нічого не чув про асинхронність джаваскрипту?
коли виконується console.log(items), в змінні ще нічого нема, так як проміс фетч ще не зарезолвився.

взагалі піди почитай про проміси)