andreypopp

13 июля 2015, Saint Petersburg, Russia

# Понедельник 47 твитов

Привет! На этой неделе с вами @andreypopp. Занимаюсь разработкой на JS/Python. С недавнего времени живу в Санкт-Петербурге.

8:30

Давайте поговорим о ФП в разработке интерфейсов. От концептов и языков программирования до библиотек и фрэймворков.

8:30

FRP: все о нём говорят, но мне до сих пор непонятна его ценность, хотя очень интересно. Кто-нибудь расскажет?

8:30

PureScript интересен тем, что позволяет судить об “эффектах” в приложении. Например: “пусть эта функция не пишет в DOM”, “тут нет I/O"

8:30

React: "опиши UI один раз как функцию от данных, не надо описывать миллион способов изменить UI при изменении данных”

8:30

Пришел в JS только после появления React.js. Кроме JS и Python применял на практике Erlang и Scala. Пробовал ещё много функциональщины...

8:30

Из интересного для меня на эту тему: Immediate mode UI (React, …), стат. типизация (PureScript, OCaml, …), FRP.

8:30
@jsunderhood Андрей, можете ли вы посоветовать хорошую документацию/обучалку по react на русском?

К сожалению не знаю такой. Были бы добровольцы перевести офиц. документацию… Перевод на китайский идет полным ходом. twitter.com/pvlpvs/status/…

8:37
@jsunderhood от даст статическую типизацию же.

Разговор про Elm: Да, но у того же PureScript система типов и FFI объективно лучше. Биндинги для React есть. twitter.com/aluuu/status/6…

8:39
@jsunderhood организовать перевод, например на github, и подтянутся люди :)

Согласен! Вот, как пример, PR для добавления перевода части документации на китайский. github.com/facebook/react… twitter.com/talgautb/statu…

8:41
@jsunderhood @andreypopp какой район Петербурга с твоей точки зрения лучший для жизни?

Однозначно Петроградская сторона, но у меня предвзятое мнение, я закончил ИТМО. twitter.com/listochkin/sta…

8:47
.@jsunderhood ого, в purescript даже typeclasses запилены, крутяк.
8:48

. @aluuu когда я смотрел Elm этого еще не было. Но и теперь непонятно что мне даст FRP. По-моему сложно постоянно брать “время” в расчет.

8:50
@jsunderhood ФП в UI ничем не отличается от ФП на бекенде, в консоли или еще где-то.
8:55

. @listochkin согласен, но есть же какие-то специфичные штуки: immediate mode ui тот же

8:55
Awesome Elm: bit.ly/1M5EeV2 список ресурсов, статей и примеров для Elm. @jsunderhood pic.twitter.com/HawBQ07MH2
9:56
@jsunderhood как ты считаешь, откуда весь этот хайп по поводу функциональщины в js?

Не думаю что это хайп, просто функциональный подход работает twitter.com/_cloudo/status…

10:40
@jsunderhood чувствую как ФП все больше поглощает фронтэнд. Не подскажешь хорошую литературу?
Сейчас сижу над ohaskell.dshevchenko.biz/ru/index.html

Хороший список книг/материалов на русском alexott.net/ru/fp/books/ от @alexott книги Харрисона неплохи twitter.com/bagadim/status…

10:42
@jsunderhood Хорошее объяснение тут gist.github.com/staltz/868e7e9… . Еще полезно глянуть этот спич youtube.com/watch?v=DqMFX9…

Действительно интересно почитать. Кстати gist от создателя cycle.js.org @andrestaltz twitter.com/__fro/status/6…

15:16

Но даже в простейших примерах FRP прослеживается главный его недостаток: необходимость учитывать время, даже там где это не нужно.

15:16

Поэтому "FRP как архитектура всего приложения" не очень хорошая идея на мой взгляд. Для анимаций, наверное, самое-то.

15:17

Хорошие абстракции должны изолировать время и асинхронность.

15:17

В React/Flux архитектуре время изолируется в хранилищах вместо того, чтобы утекать в UI. UI — отображение определенного момента времени.

15:18

Redux от @dan_abramov реализует управление состоянием лучше чем Flux: вместо изменяющегося состояния есть "рецепт как изменить состояние"

15:18

Что, кстати, уже снова близко к FRP, но есть чувство что там это оправдано: где-то время нужно учиывать. Главное делать это контролируемо.

15:19

Возможно последний твит это все-же результат моего непонимания FRP (или понимания? :-)

15:19

Следующий шаг в управлении изменяющемся состоянии это CRDT структуры данных где порядок операций значения не имеет. Прячет время ещё дальше

15:20
@jsunderhood да, смотрел недавно, круто, но пока не одуплил, нужно покурить paper . За счет чего там игнорится время?
15:32

. @__fro операции над данными можно менять местами и в какой-то момент у всех (сервер, клиент, другой клиент, ...) будет одна картина мира

15:32

. @__fro вот кстати классный понятный paper на тему CRDT: gsd.di.uminho.pt/members/cbm/ps… (осторожно PDF)

15:36
@jsunderhood и что будет, если, скажем, у нас googledocs и оба юзера одновременно вставили разные символы в одно и тоже место?
15:37

. @__fro оба юзера увидят оба символа в одном и том же порядке, непонятно в каком, главное что порядок будет одним для всех

15:37

Кто ещё не видел есть реализация CRDT на JS (работает конечно же и в браузерах): swarmjs.github.io от @gritzko

15:38
@__fro @jsunderhood оно не игнорится, оно явно учитывается; все операции помечены timestamp; каждое состояние - это версия.
16:04
@gritzko @jsunderhood это часть CRDT или надстройка?
16:05
@__fro @jsunderhood это CRDT в @swarm_js, op-based с lamport timestamps; CRDT в целом это очень широкое определение
16:05
@__fro @jsunderhood кстати, статья в WP очень хорошего качества en.wikipedia.org/wiki/Conflict-…, вариант Swarm: swarmjs.github.io/articles/lampo…
16:05
@jsunderhood The value: fully declarative code. Events are phenomena: anything that "happens" is an event. Declare what should happen, (1/2)

On FRP: twitter.com/andrestaltz/st…

16:37
@jsunderhood and declare dependencies between phenomena, and that's it. A Cycle.js app is fully declarative.
16:38
.@jsunderhood Давайте обудим тестирование. Кто, что и как теститует. У кого какое покрытие.
16:53

У нас тонкая “запускалка” поверх webpack для Jasmine спек: github.com/prometheusrese…

16:56
@jsunderhood то есть суть - делать render на каждое валидное состояние

в этом суть React twitter.com/__fro/status/6…

16:57
@jsunderhood mocha + react в нодовом окружении для юнитов. Еще где то в моем идеальном мире должен быть селениум, но пока увы
17:25
@Semenov @jsunderhood тестировать должны пользователи и сообщать об ошибках разработчику.
17:26
@jsunderhood rauchg.com/2015/pure-ui/

Отличная статья: “UI как функция без побочных эффектов” /cc @iSnifer есть примеры к нашей недавней дискуссии twitter.com/AndryRochev/st…

21:17
@jsunderhood А на чем нынче модно/удобно делать REST API на Node?
21:34

# Вторник 28 твитов

Создатель @babeljs присоединяется к команде FB — хорошо когда за таким полезным проектом целая компания.

8:23

Вчера ночью чуть-чуть обсуждали REST API. Интересно, появление GraphQL/Relay и Falcor вытеснит классический REST или нет?

8:25

У нас есть своя похожая штука: HTSQL htsql.org/doc/overview.h…, более близка к полноценному языку запросов, но у нас и требования другие

8:27
@jsunderhood Для внутренних API - вытеснит 100%.
8:34

. @freiksenet почему только для внутренних? Когда участвовал в хакатонах всегда хотелось чего-то подобного GraphQL

8:35

. @freiksenet если бы еще в одном запросе и разные источники можно было запрашивать — вообще класс. Идея для стартапа — GraphQL Mashups ;-)

8:36
This @domenic's comment just made me depressed as it looks like nothing cool will make it into ES7 :( github.com/babel/babel/is…

Коммент от участника TC39 про то почему ваши любимые фичи @babeljs не попадут в ES2016… twitter.com/RReverser/stat…

8:38
@jsunderhood А, ну сделай схему и resolve. GraphQL только систему типов дает, он нейтрален в плане источника(ов).
8:49

. @freiksenet ага, об этом и речь, был бы SaaS, где я эту схему составлю и который мне обеспечит кэширования для датасетов и т.д.

8:50

. @freiksenet расскажи про reindex.io в паре твитов? BaaS? Какие фичи? Прайс? Как-то связаны с FB?

8:53
@jsunderhood Если коротко - мы как Firebase или Parse но с GraphQL API. BaaS. Прайс еще не уверены, но думаю как у конкурентов.
8:56
@jsunderhood С FB напрямую не связаны, но активно с ними дальнейшее развитие GraphQL обсуждаем. Мы до этого свою реализация пилили.
8:57
@jsunderhood Сейчас переходим на graphql-js, у нас там другой подход в плане выполнения запросов и мы обсуждаем как сделать совместимость.
8:59
@jsunderhood По-моему REST легче контроллировать в плане потребления ресурсов. GraphQL можно сразу все запросить, сложнее делать rate limit.
9:00

. @freiksenet можно брать деньги за переходы в графе

9:00
@jsunderhood я бы ставил на Datomic
10:48

. @chicoxyzzy Datomic хорош, но это БД. GraphQL/Falcor не заботятся о хранении данных, думаю их легче начать использовать

10:50
@jsunderhood так ведь docs.datomic.com/query.html считай тот же GraphQL. Уже есть тонна реализаций для JS
10:54

. @chicoxyzzy ок, это про Datalog, а что за реализации для JS? Я видел DataScript для CLJS

10:55
@jsunderhood @ALF_er стоит немного подождать, Datomic и его инфраструктура достаточно молоды, но IMHO это гораздо перспективнее GraphQL IRL
11:10
@chicoxyzzy @jsunderhood @ALF_er not sure who from #graphql/Datomic/Falcor group will win, but definitely not REST. It will not die though.
12:33
@chicoxyzzy @jsunderhood @ALF_er using REST for apps dev always felt awkward, http was never designed for apps and has are tons of issues.
12:33
@chicoxyzzy @jsunderhood @ALF_er I don't want to solve countless sync problems, I just want to work with data and code biz logic #Firebase
12:33
I can't do this manually anymore. If you write @reactjs libraries, feel free to use it: github.com/gaearon/librar… pic.twitter.com/HI83ce0K6f

Отличный стартер-кит (React, ESLint, Mocha, Babel, Webpack) от @dan_abramov. Но я бы заменил npm скрипты на Makefile twitter.com/dan_abramov/st…

18:01

Кто-нибудь должен сделать фрэймворк для shell скриптов, чтобы подтягивать функции с npm. Я с удовольствием буду его использовать.

18:02
@jsunderhood Ты просто старый
18:02

"Makefile это JSX командной строки” — пока не попробуешь не поймешь в чем польза

18:08

Вот пример тонкого Makefile для JS проекта: github.com/andreypopp/aut… на мой взгляд приятнее чем npm скрипты + директория scripts/

18:10

# Среда 37 твитов

Поэкспериментировал с темингом для React компонент github.com/andreypopp/ret… Идея: протокол для компонент, которым можно изменять внешний вид

8:07

Можно использовать с inline styles, css modules, … Как вам API? Чего не хватает?

8:07
@jsunderhood вероятно разработчик столкнется с тем что для другой темы нужна другая разметка. Такое было два раза из двух, в моей практике.
8:22

. @olebedev можно передавать функции/компоненты как часть темы для компонента — так можно заменять часть разметки

8:23
@jsunderhood Но при этом в самом компоненте должно быть предусмотрено заранее, что вот такую-то часть можно заменять? @olebedev
8:28

. @toivonens да, это контролируется компонентом, никакой магии

8:28
@jsunderhood В случае теминга, может будет проще трансформировать дерево компонентов при запуске или изменении темы?
8:30

. @__fro дерево не реализуется в один момент, оно ленивое (через вызовы render()), поэтому нужен способ изнутри чтобы инжектит тему

8:30

Альтернатива: делать теминг на уровне системы модулей, так можно инжектить нужные стили статически (нужен webpack-loader какой-нибудь)

8:32
@jsunderhood Компонент должен знать обо всех своих темах заранее :-) В БЭМ можно что угодно доопределить, но больше нигде так нельзя :-(
8:33

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

8:34

Кто еще не знаком с CSS modules github.com/css-modules/cs… компонентный подход к стилям

8:40
@jsunderhood хочу заметить, что первый компонентный подход — БЭМ. CSS Modules интересны тем, что он автоматический.
8:44

. @andrey_sitnik я хотел сказать первый компонентный подход который работает :-)

8:44
@jsunderhood вообще,как вариант, можно сделать фабрику фабрик компонентов, которая бы возвращала themed фабрики.Их и использовать в рантайме
8:55

Подсказали классную утилиту для демок React компонент github.com/insin/react-he… — heatpack ./WidgetDemo.js

11:28

Идея: плагин для webpack который позволяет редактировать props компонент прямо в браузере. Сохраняет обратно в исходники.

11:29

Наводишь мышкой на экране на элемент и открываешь диалог с редакторов свойств. Прямо в приложении.

11:31

Для этого нужно будет аннотировать все вызовы React.createElement позицией каждого prop в исходниках

11:32
@jsunderhood так плагин для Chrome DevTools такое позволяет делать
11:33

. @__fro Значит можно попробовать добавить ему возможность сохранять изменения

11:33
@jsunderhood как браузер будет работать с fs?
11:34

. @iamstarkov через webpack-dev-server, нужен плагин именно к нему

11:34
@jsunderhood эмм.. А куда? ) Куда сохранять? Ты имеешь ввиду defaults?
11:36

. @__fro прямо в том место где создаётся React элемент. Это можно будет делать только свойств переданных как литералы a=“…”, a={1}, a={{…}}

11:37
@iamstarkov @jsunderhood @ChromeDevTools таки умеет маппить сорцы на fs )
11:40
@iamstarkov @jsunderhood @ChromeDevTools не знаю, но я могу запилить. Я могу править из CDT, идет сохранение в FS и происходит hot reload.
11:40

Есть мнение что devtools должны быть не в отдельной панели UI, а частью самого приложения. //cc @dan_abramov как эксперта по DX

11:49

DX — developer experience, аналог UX.

11:50
@listochkin @alexeyraspopov @jsunderhood Мы их «вытащим» в remote потом. Первый этап — сделать их мощными, а не мучаться с Chrome API
12:04
@listochkin @alexeyraspopov @jsunderhood Цель в том числе чтобы они не были привязаны к Хрому. Например чтобы можно было их в отдельное окно
12:14
@dan_abramov @alexeyraspopov @jsunderhood и я о том же. Для девелопера важно, что инструмент умеет, а не как работает или где расположен.
12:14

. @listochkin @dan_abramov согласен, просто chrome devtools это “прошлое" когда интроспекцию можно было делать только на DOM/BOM уровне

12:16

Сейчас когда интроспекцию можно делать на уровне приложения (React, Redux) можно экспериментировать с новыми видами, интерфейсами devtools

12:18
@jsunderhood с моей точки зрения CDT - это удобная панелька с табиками, куда можно добавить ништяков. Каких? - дело фантазии @dan_abramov
12:26
ESLint v1.0.0-rc-1 released: eslint.org/blog/2015/07/e…

First release candidate for v1.0.0!

В сочетании с Babel-ESLint это просто замечательный инструмент. Появился 1.0-RC twitter.com/geteslint/stat…

21:30

# Четверг 4 твита

Дискуссия про Babel и нестандартные расширения языка (JSX): reddit.com/r/javascript/c…

0:15
STAGES OF WORKING FROM HOME

Не люблю работать из дома twitter.com/MarkAgee/statu…

10:44
Кстати, @jsunderhood, тут была идейка у меня и @Rukomoynikov, покататься где-нибудь на выходных по Москве. Кто с нами?
11:03

# Пятница 13 твитов

`var`, `let`, or `const`? I use `const` for almost everything. Rarely, I'll use `let`. Never `var`. #es6 #JavaScript

Действительно, let, const или var? В es6 я использую let, так меньше набирать да и читается отлично. twitter.com/_ericelliott/s…

10:27

. @marinintim в es6 выбор фактически между const и let, var сломан

10:33
@jsunderhood как я понимаю, популярность const идёт из функциональных кругов
10:35
@jsunderhood @marinintim а можно подробнее, почему var сломан?
10:38

. @Sigiller @marinintim let биндинги более локальны (внутри блока а не внутри функции как var). Меньше шанса на ошибки.

10:40
@Sigiller @jsunderhood @marinintim Нет задач под var. Есть let (который к тому-же избавляет от лишних замыканий) и const для констант ☺️
11:10
@jsunderhood врывающийся в студию вопрос (прощу прощения)
Ребята, есть идеи как описывать JS Doc на props в React классах/компонентах? =)
13:14
@ymatuhin @jsunderhood @Sigiller @marinintim Я бы вообще сделал что var = let, а let = const.
13:14

. @freiksenet насчёт let = const наверное соглашусь, нужен плагин для Babel.js

13:17
@_nezed @jsunderhood Оригинальный вариант — использовать propTypes
13:18
const - normal
let - code smell
var - legacy

/cc @_ericelliott twitter.com/jsunderhood/st…

14:09
@jsunderhood Расскажи, пожалуйста, про своё рабочее окружение, IDE, какие-нибудь полезные инстументы, которыми ты часто пользуешься.
15:42

. @mista_k vim

15:42

github.com

other