YodaPunk

30 ноября 2015, Москва, Россия

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

На этой неделе свежий взгляд на построение сложнейших динамичных систем, клеймление react и прочих модностей. На связи @YodaPunk

6:11

Буду защищать себя и кого-то из вас от того потока пропаганды всякого непотребства, льющегося на нас с синих экранов

6:12

Не думаю кого-то переубедить, но расчитываю помочь тем кто чувствует, что "что-то здесь не так"

6:12

Меня зовут Глеб Арестов, с октября 2009 в свободное от работы время занимаюсь эволюционным развитием seesu.me

6:12

Интерфейс seesu.me построен на лучших принципах(!) проектирования интерфейсов, но в целом оно пока далеко от того, что я хочу сделать

6:14

Работаю в компании еврохим, мы тут пишем на node.js, mysql и oracle. Почётно награждён (РЕАЛЬНО)! ;)

6:14

Увлекаюсь проектирование интерфейсов (Джеф Раскин рулит!) и p2p системами.

6:14

. @ponitozhekoni почетная грамота от компании :) вообще, я рассчитывал, что никто не спросит

6:18

. @serhey_shmyg например стриминг музыки из торретов. Есть экспериментальный код, но жрет память и работает нестабильно.

6:27

. @axique да, чуть позже предложу восстание против императивного программирования, и против того которое делает вид что оно не императивное

6:48

В качестве завершения знакомства мои две супер полезные заметки:

6:52

habrahabr.ru/post/211659/ — Три правила проектирования интерфейсов с высокоскоростным пользовательским взаимодействием

6:52

habrahabr.ru/post/210558/ — Список оптимизаций рендеринга DOM, реализуемых на уровне Javascript фреймворка

6:52

План ~

7:03

. @blia не использую :( потому что понимаю какие на каких идеях они построены и есть с чем сравнить. ВСЕ ПЛОХО

7:20

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

7:21

angularjs: мы любим сайд эффекты, мы целые приложения пишем на сайд эффектах, dirty checking, digest вот это все.

7:30

. @jsunderhood давайте вызывать все функции подряд пока все не утрясется!

7:30

. @justusebrain предлагаю обсудить идеи дедушки Раскина где-нибудь в четверг, пятницу pic.twitter.com/ds78U1cyNw

8:17

React. Архитектору не нравится придуманные синтаксисы, но он предлагает JSX youtube.com/watch?v=-DX3vJ…

8:43

Петеру не нравится указывать зависимости данных, но потом они предлагают flux(!), чтобы, прости господи, поправить счётчик сообщений #react

8:44

У #emberjs насморк (уходит память на учёт зависимостей), давайте ампутируем голову — говорит архитектор #react youtube.com/watch?v=-DX3vJ…

8:44

Помните: когда у вас настоящая декралативность вам вообще не нужен такой промежуточный этап как Virtual DOM #react

8:44

. @as_Crazy а как же функция render()? Её результат - virtual dom. Императивно собирается ручками. Вполне себе кишками наружу.

8:57

. @alexeyraspopov когда ожидаемый результат можно програмно анализировать не выполняя код, получающий результат

8:59

Что такое декларативность по вашему? Зачем она вообще нужна?

9:07

. @as_Crazy да, результат функции декларативен, но сама функция императивна

9:14

. @freiksenet_ru @as_Crazy лететь!

9:19

Результат функции react render

9:20

Тело функции react render без JSX (<?php>)

9:20

SQL (в большинстве случаев)

9:21

Запросы в Datomiс

9:21
.@jsunderhood у тебя есть реальный опыт использования Angular, React и Ember?
9:29
@oaleynik @jsunderhood ну html же декларативный, вот хочется такого же, только для динамеского DOM, а не статического
10:10
@jsunderhood как результат может быть императивным или декларативным?
12:15

. @justusebrain Легко. Функция вернёт функцию. Cмысл вопросов — напомнить что результат выполнения функции и её тело - совсем не одно и тоже

12:15

Пока я тихонечько, начиная с октября 2009 года, никого не трогая, писал код seesu, в моду вошел backbone, angular, появился react.

12:17

Почти как отшельник, развивая приложение, я принимал всякие решения, отказывался от них

12:17

Беспомощно пытался организовать код с помощью ООП и events driven model

12:17

ДЕЛАЛ ВЫВОДЫ. Выводы про программирование, организацию кода, про проектирование интерфейсов. (МНОГО ИХ. ВЫВОДОВ)

12:17

САМЫЙ ГЛАВНЫЙ ВЫВОД (метафорой, а потом нормально):

12:17

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

12:17

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

12:17

Разработчик: состояния, взаимосвязи состояний и сущностей, чистые вычисления. Система: наблюдение, актуализация/вызов конкретных вычислений.

12:17

Это я описал новейший секретный, ЗАПРЕЩЕННЫЙ КОНВЕНЦИЕЙ ООН, архитектурный подход «Декларативное Целеполагание». arestov.github.io/declarative-go…

12:18
@jsunderhood сравнение jsx с пхп многое про вас проясняет
12:31

. @as_Crazy не с php а с его возможностью перемешивать нормальный код и html

12:32

Функция. Императивно гененирирует SQL выражения для запроса. Может кардинально менять структуру (Императивная же) и даже таблицу выборки.

12:38
Функция. Императивно гененирирует SQL выражения для запроса. Может кардинально менять структуру (Императивная же) и даже таблицу выборки.

React render. twitter.com/jsunderhood/st…

12:39

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

12:49

Неявные (императивные в данном случае) взаимосвязи, зависимости - зло

12:49

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

12:49

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

12:49
@jsunderhood ты пробовал эрланг?
12:53

. @iamstarkov пока нет. Стоит?

12:54
@jsunderhood если ты хочешь параллельности, то думаю да
12:57

Про декларативное целеполагание и динамизм в seesu у меня вот докладик был wsd.events/2015/05/22/pre…

13:17
@jsunderhood Thanks for the mention. Would you like to discuss upgrading your company's CI from Jenkins? :)
14:29
Делал для себя, но может кому пригодится архив твитов @cssunderhood и @jsunderhood за прошлую неделю anarion.info/tws/
15:44
Кто как реализовывал обработку событий свайпа на JS? Подскажите библиотеки, велосипеды. @cssunderhood rt plz
15:49

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

Декларативность в шаблонах это суперважно по двум причинам: А) оптимизации производительности Б) Лаконичный, эффективный код.

6:12

Декларативный шаблон - это возможность выяснить какие структуры, поля используются в нем. pic.twitter.com/2sRAAxlC6e

6:13

Имея эту информацию и декларации о том как конкретно DOM зависит от данных можно реагировать непосредственно на изменения данных.

6:13

При изменении данных атомарно менять DOM, без промежуточных абстракций, дорогих сравнений virtual dom, нагрузки наGC pic.twitter.com/ksFqqDVz9U

6:14

Декларативный шаблон - это возможность вычислить все комбинации DOM дерева

6:15

Для этих комбинаций и их элементов можно найти все css селекторы которые могут сработать, а значит узнать применяющиеся css свойства

6:15

Эти свойства влияют на reflow, repaint. При рендеринге можно сортировать изменения так, чтобы тяжёлые операции случались реже

6:15

Кроме того зная какие свойства могут применяться к элементам можно анализировать и находить изолированные ветки

6:16

А потом маркировать эти ветки помощью нового css свойства "contain", как доступные браузеру для тяжёлых оптимизаций

6:16

Анализ можно провести один раз, например, при компиляции кода или при первом запуске приложения.

6:16
@jsunderhood у нас есть свой шаблонизатор для этого github.com/monkberry/monk…, вот бенчи vs React monkberry.github.io/benchmark/
6:44
@jsunderhood можно практический пример или демку?
6:44

. @alexeyraspopov насколько я знаю анализ тяжёлых изменений в DOM пока никто не сделал

6:45

Давайте дальше про декларативные шаблоны! Имея информацию о том как используются структуры данных в шаблоне вы можете:

6:49

1) автоматически анализировать и отображать список внешних ресурсов, необходимых для отображения шаблона, пример seesu.me/o/#/catalog/Pi…

6:51

2) вы можете сгенерировать один запрос, который соберёт все поля объекта и его вложенностей в том числе для списков

6:52

Вот graphql позволяет писать такие запросы вручную. Написали react шаблон, написали graphql запрос, поменяли код там, поменяли код здесь.

6:53

Так ведь планируется поддерживать graphql код?

6:53

А ведь можно просто использовать декларативные шаблоны и автоматическую генерацию запросов

6:54
@jsunderhood не понимаю с чего бы вы не можете провести такой же анализ render метода?
7:00

. @as_Crazy ответ на этот вопрос кроется в функции shouldComponentUpdate

7:00

Давайте про декларативные шаблоны и сервер!

7:02

Структура запроса меняться от раза к разу не будет, тогда можно зафиксировать эту структуру при взаимодействии с сервером.

7:12

Приложение при первом запуске спрашивает сервер "как эффективней получить такую-то структуру"?

7:15

Он отвечает: по урлу api/struc4368/. Когда необходимо приложение дёргает этот урл.

7:15

Тем временем сервер записывает каждый такой сгенерированный урл и мониторит производительность

7:19

Если надо серверный программист вмешивается достраивает индексы, докручивает код под эту структуру и код летает

7:19

. @freiksenet_ru а кто сказал что обязательно использовать graphql?

7:28
@jsunderhood Твой компонент может не знать как устроен твой graphql ендпоинт. Ты в пузыре где ты контроллируешь и бакенд и фронтенд.
7:28
@jsunderhood В команде такого не будет и никто не будет писать API под твой генератор.
7:29

. @freiksenet_ru ну а если сам напишу? Корпоративная бюрократия это проблема, согласен

7:31

shouldComponentUpdate нужна чтобы лишний раз не вызывать render

7:42

Потому что из самой функции render непонятно как она использует данные и влияет на результат

7:42

JSX не делает код декларативным. Это просто сахар, что бы не писать самому вызовы React.createElement

7:42

JSX компилируется в обычную императивную функцию. Где первой распростhанённой проблемой при анализе станет цикл

7:43

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

7:43
@jsunderhood "можно написать хуево" это не аргумент. Идиоматично не делать никаких side-effects в рендере.
8:04

. @freiksenet_ru тогда остаётся вопрос с циклами/forEach/map/etc и композицией функций, что вполне идиоматично

8:04
@jsunderhood @freiksenet_ru так надо анализировать результат (vdom) а не саму функцию
8:09

. @andreypopp @freiksenet_ru и как из vdom понять каким образом используются структуры данных, как вычислить комбинации дерева?

8:10

Свёл воедино про реакт и декларативные шаблоны arestov.github.io/declarative-go…

8:14
@jsunderhood @freiksenet_ru еще с шаблонами как у тебя в примере стоит вопрос usability? Что если не хватит выразительности? Как расширять?
8:15

. @andreypopp @freiksenet_ru проектировать нехватающие средства выразительности

8:15
@jsunderhood @andreypopp В итоге у тебя будет плохо сделанный, полный багов тюринг полный язык. Почему бы сразу не начать с JS.
8:19

.@freiksenet_ru @andreypopp основная проблема с seesu.me/o не реализованные декларативные шаблоны, а сервисы, ломающие свои API

8:19

Запросы для наполнения шаблона данными, при условии что известна используемая в нем структура данных, удобнее

8:33
@jsunderhood вот написал немножк pastebin.com/AuMP7LPk
9:30

. @sevaisnotcow вопрос о жизнеспособности декралативности не стоит. Есть seesu.me/o. Работает. Хочется ещё больше эффективности

9:39

Почему лаконичный, анализируемый код важен для меня?

9:39

В seesu.me тонна различных страниц, она наполняется примерно 40 запросами к разным сервисам (last.fm, discogs, hypem)

9:39

В seesu.me используются интерфейсные подходы, которые вынуждают делать систему с высокой степенью динамизма.

9:40

Помимо этого с я самого начала стремился делать супербыстрое приложение.

9:40

Помимо тонны оптимизаций рендеринга habrahabr.ru/post/210558/ и производительности самого js научился и другим трюкам habrahabr.ru/post/211659/

9:40

Но чтобы ориентироваться в коде в одиночку и не сойти с ума остро встаёт вопрос об лаконичности, выразительности, анализирумемости кода

9:41

Если кто-то готов пройтись по 100 шаблонам и прописать там источники данных, то я нет. (last.fm требует аттрибуции)

9:41

Если кто-то готов вручную написать императивный код для 40-ка запросов и раздуть код ещё больше, то я нет.

9:41

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

9:41

Что делать если ты хочешь быстрый рендеринг интерфейса и у тебя десятки шаблонов, но 25 мая 2013 ещё не наступило?

9:41

Хотите писать сложные высокодинамичные приложения? Пишите код с очевидными и вам и системе зависимости, а систему можно было оптимизировать.

9:42
@jsunderhood и гораздо эффективнее во вьюхе описывать "зависимость" от локальных данных, а запросы за удаленными данными делать в отдельном>
10:08

. @sevaisnotcow не предлагаю запросы засовывать во вьюхи

10:09
@jsunderhood @sevaisnotcow Потому что только в волшебном мире у тебя контроль за бакендом и можно туда свалить всю логику обработки данных.
11:43

. @freiksenet_ru @sevaisnotcow так ведь для этого есть модели

11:43

. @sevaisnotcow знаком с реальным миром как никто. В seesu.me используется тонна сервисов. Все неподконтрольны

11:44
@jsunderhood @sevaisnotcow Их ты в своем примере не показал.
11:45

. @freiksenet_ru @sevaisnotcow ну мы же шаблоны осбуждаем

11:45
@jsunderhood приложение, делающее порядка 40 запросов с натяжкой можно назвать быстрым. почему не вынести data fetching логику на сервер?
12:10

. @a_kovalev 1) это не одновременные запросы, а количество точек соприкосновения с сервисами

12:10

. @a_kovalev 2) api часто ограничивают количество запрос с одного IP. надо делать с клиента

12:11
@freiksenet_ru @jsunderhood @sevaisnotcow а вот, кстати, было бы очень любопытно посмотреть, как модели будут реализовывать такую абстракцию
12:21

. @twenty Сложные состояния
wsd.events/2015/05/22/pre…

12:21

. @twenty Сложные состояния на основе связанных моделей
wsd.events/2015/05/22/pre…
wsd.events/2015/05/22/pre…

12:22

. @twenty Связь состояний модели и тем, что можно получить от обычного сервера
wsd.events/2015/05/22/pre…

12:22

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

17:19
@jsunderhood Для начала — отказаться от шаблонизаторов!
17:23

. @Semenov а какой профит?

17:23

# Среда 23 твита

Есть хотя бы один язык программирования, который мог быть ответить на вопрос "откуда берётся это поле, как оно вычисляется и попадает сюда?"

6:43

. @jsunderhood задаёте это вопрос, а вам полное дерево зависимостей в ответ

6:45
Есть хотя бы один язык программирования, который мог быть ответить на вопрос "откуда берётся это поле, как оно вычисляется и попадает сюда?"

По-моему совсем рутинная задача для процесса разработки twitter.com/jsunderhood/st… Erlang, haskell, clojure? Go?

6:47
А это точно задача ЯП, а не алгоритма, написанного программистом? twitter.com/jsunderhood/st…

Как разработчику поможет алгоритм чужого кода разобраться в нем? twitter.com/rubyunderhood/…

6:55
Есть хотя бы один язык программирования, который мог быть ответить на вопрос "откуда берётся это поле, как оно вычисляется и попадает сюда?"

Разработчик написал код, как ЯП ему позволил twitter.com/rubyunderhood/… Потом, его, конечно уволили. Задача осталась twitter.com/jsunderhood/st…

7:15
@jsunderhood это точно не задача языка. С этой задачей отлично справляются инструменты, построенные вокруг языка или среды выполнения
7:23

. @alexeyraspopov это так решил?

7:23
@jsunderhood это все равно что попросить математику определить откуда вообще взялось 10 яблок у Буратино

Нет twitter.com/alexeyraspopov… Это как спросить курьера из какого склада товар, а у склада - у какого поставщика

7:49
@rubyunderhood @jsunderhood собственно, для какого-нибудь ember / handlebars наверное можно сделать трейсинг до метода или поля объекта.
7:53

Возможности и ограничения какого ЯП позволяют **инструментам** ответить на вопрос «Откуда это поле? Как оно вычислялось?»

7:54
Возможности и ограничения какого ЯП позволяют **инструментам** ответить на вопрос «Откуда это поле? Как оно вычислялось?»

Переформулировал для самых строгих twitter.com/jsunderhood/st…

7:54
@jsunderhood @alexeyraspopov где взялось поле это вопр. абстрактный т.к. это поле зависит не от яп,а от технологий с кот.он взаимодействует

Поле зависит от кода, который так или иначе присваивает полю значение, от кода который написан на ЯП twitter.com/AlexRybakUA/st…

9:03

Функциональный п-д позволяет избегать сайд эффекты => можно машинно анализировать причинно следственные связи в коде

11:45

В ФП -"- причинно-след. связи => предотвр-ется запись в один объект двумя потоками => можно параллелить прям так!

12:37

Datomic может сам принимать решение об оптимизациях, параллелизме. Clojure не может.

12:54
@jsunderhood Не все вычисления параллельны и не все вычисления быстрее от параллельности.

Хотел бы чтобы всё (когда надо) само магически параллелилось, одновременнилось, а я к этому и руку не приложил! twitter.com/freiksenet_ru/…

13:05
@jsunderhood может, но не принимает :) Слишком геморно оптимизатор писать
17:10

Чистая функция которая может вернуть ответ одной или другой структуры по прежнему чистая?

17:49
Чистая функция которая может вернуть ответ одной или другой структуры по прежнему чистая?

В каких случаях невозможно отказаться от таких функций? twitter.com/jsunderhood/st…

17:51

Я о такой функции говорил pic.twitter.com/4EwKVXugA6

18:47

Что насчёт такой функции? pic.twitter.com/W4X9sUtS3U

18:53
Сегодня в @jsunderhood иллюстрация, иногда лучше сначала осилить хаскель, а потом рассуждать про чистоту :(
20:29

. @freiksenet_ru а что это даст?

20:47

# Четверг 19 твитов

Сегодня в @jsunderhood очередная скандальная иллюстрация чего-то

10:49

Поговорим про динамизм в программных система, а также о застое и legacy подходах

10:50

Как вы можете заметить seesu насыщена динамизмом arestov.github.io/declarative-go…

11:11

Вот писал я код я искал — как же организовывают такое всякое сложное? И за годы не нашел :(

11:11

Когда я понял в чем проблема (динамизм, постоянно меняющеся взамосвязанные части) понял почему не нашёл

11:11

Эта новая проблема, не видно чтобы её как-то обсуждали. Если её не осознают, то откуда могут быть решения?

11:11

Проблемы и не было — не было спроса на большое взаимодействие пользователей с интерфейсами, мгновенную обратную связь в приложениях

11:11

У ребят «которые знают» не было и не могло быть опыта столкновения с насыщеными динамизмом системами

11:12

Когда писались устаревающие десктоп приложения не было этих интерфейсных требований. Пишешь сервер нет ни интерфейсных требований ни дин-зма

11:12

Когда пришло осознание, что ребята «которые знаю» вовсе не знают, организовывать код стало проще

11:12

Если старые подходы всем хороши, проблемы осознаны и решены, то чем занимается создатель нашумевшего lightTable?
chris-granger.com/2014/03/27/tow…

11:13

Почему опаснейший Chris Granger занимается инструментом для явного указания взаимосвязей? chris-granger.com/2015/08/17/ver…

11:14
Почему опаснейший Chris Granger занимается инструментом для явного указания взаимосвязей? chris-granger.com/2015/08/17/ver…

Но не инструментами анализа scala кода? twitter.com/jsunderhood/st…

11:14

arestov.github.io/declarative-go… Нет «они» не знают :(

11:15
@jsunderhood реактивное программирование предназначено для решения этой проблемы. @ReactiveX например

Да есть реактивное программирование, ещё есть constraints programming, cassowary twitter.com/iamstarkov/sta…

11:54

С реактивным программирование и cassowary проблема в том, что сборка взаимосвязей императивная и крайне сложно анализируется

11:55

По моему удобно писать как-то так. Пускай кто-то другой развешивает свои watchers или потоки, не важно что внутри pic.twitter.com/BUTY5e581F

12:00

Почти как ember.js только расход памяти меньше на каждый экземпляр, можно оптимизировать как css (справа налево). Анализировать можно

12:00
Good ideas come from anywhere. If you're not actively listening to many programming languages and communities - doing it wrong.
12:12

# Пятница 22 твита

Не перестаю делать попытки стриминга музыки из торрентов

6:48

Сначала был utorrent, но API был жутко медленный, а потом они его вообще закрыли pic.twitter.com/IITbCgPHwe

6:52

Потом peer-flix и webtorrent, но они жутко жрут память и вообще глючат при активном использовании. А так - работает pic.twitter.com/fn1BwbYEn8

6:55

Решил писать свой торрент клиент, чтобы без каши .on('event-name', ...)

6:57

В webtorrent сейчас течёт память в основном из-за утечек через удалённые, но не отписанные от событий объекты.

6:59

Писал исправления, но автор не стал ни принимать их, ни исправлять сам

7:00

Ещё, обе библиотеки блочат приложение потому что в основном процессе считаю хеши файлов, синхронно

7:04

Ну допустим эти детские болезни мы победим и стриминг из торрентов будет. Но как мы будем строить настоящие p2p сети, mesh интернет?

7:06

Мы что, только plain текстом и файлами будем делиться как fireChat? Надеюсь, что нет

7:07

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

7:11

Может быть можно делиться мини приложениями для просмотра этих структур, написанных на scala? Так чтобы они запускались без разрешения

7:16

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

7:21
Может быть можно делиться мини приложениями для просмотра этих структур, написанных на scala? Так чтобы они запускались без разрешения

(Речь конечно не про скомпилированные приложения) twitter.com/jsunderhood/st…

7:21

Если нужна одна функция, которая должна вернуть, скажем, html,
то и js module сойдёт, который не может ни reqire ни имеет доступа к global

7:36
@jsunderhood но nodejs module (CJS) умеет и в require и в globals
8:34

. @iamstarkov я имел ввиду: запускать код внутри какой-нибудь sandbox npmjs.com/package/node-s… Забрать доступ к require и global

8:35
@jsunderhood но зачем когда есть сэндбоксинг и пермишены?
9:18
@jsunderhood но зачем когда есть сэндбоксинг и пермишены?

Наверно, можно и так twitter.com/as_Crazy/statu…

9:30
Почему плохой? В тред призывается @jsunderhood. twitter.com/Shiroginne/sta…
12:02
. @jsunderhood давайте вызывать все функции подряд пока все не утрясется!

. @rubyunderhood twitter.com/jsunderhood/st…
twitter.com/jsunderhood/st…

12:02
Открыт приём докладов на конференцию о React в Амстердаме, 16 апреля — goo.gl/forms/WBd5Yr9M…

Жмём RT! pic.twitter.com/i48oPEAEzZ

13:52
MDK ищет frontend-разработчика. Подробности здесь: moikrug.ru/vacancies/1000… @jsunderhood
21:37

wsd.events

other


@2j2e