QA Fest — конференция №1 по тестированию и автоматизации. Финальная программа уже на сайте >>
×Закрыть

Яваскриптщики — как вы работаете со сторонним кодом?

Хотя я выполнил свое обещание «если JS — язык будущего, то я в будущем стану баристой» и научился неплохо варить espresso, все же все больше и больше чувствую, что надо и в этой области овладеть рабочим навыком. Основная задача — создание интерактивных визуализаций с помощью, предположительно, D3.js — ибо проще самому сделать, чем объяснить задачу фронтэнд деву, не владеющему и основами описательной статистики.

Пожалуй, наиболее быстрым путем было бы взять уже готовое решение, и методом reverse engineering посмотреть как оно там работает; при необходимости доработать напильником.
(Если что — это не обязательно пиратство — в Сети полно и freeware проектов). Соственно, так я и осваивал в свое время HTML и PHP.

Во многом так же разбирался с QuantLib — C++ библиотекой финансовой математики. Она — огромна и сложна, но для начала запускаешь doxygen — и уже получаешь некое общее представление о классах и их взаимоотношениях. Потом проходишь дебаггером многочисленные testcases и понимаешь, что к чему.

Но как это применить к тому же D3.js?! Во-первых, читая код совершенно не поймешь, что за переменная на входе — тип-то не указан (знаю, что для многих проектов, в т.ч. и для D3, пишутся TypeScript спецификации, но что ж это, сначала TypeScript изучить)?
Во-вторых, как дебажить? — отводя мышку от окна графика в окно дебаггера хрома или файерфокса ты порождаешь событие — т.е. поведение программы меняется от попытки ее дебажить. Как это грамотно учитывать?

Да, интересует опыт работы не только (и даже не сколько) с D3 и подобными библиотеками, сколько именно опыт reverse engineering’а чужого js-кода.

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Ну если тебе правда интересно можем созвонится займёт пару часов думаю должно хватить

Интересно, иначе бы я не стал тратить свое и чужое время.
Твоя консультация платная? (в пределах разумного это не проблема, я не халявщик — нюанс только в том, что я сейчас интересуюсь проактивно — ибо еще непонятно, поручат ли мне этот проект или нет).
Ну и, честно говоря, оценка в пару часов настораживает — если ты мне хочешь показать, как работать с дебаггерами файерфокса и хрома, так я это и сам знаю :)
А вот если ты сможешь за эти два часа разобрать незнакомый код — ну допустим какой-нибудь хитрый тип графика, реализованный на том же d3 — и объяснить мне что тут и как (и желательно, почему именно так) — то это другое дело.

НЕ получил

хм, отправил запрос в линкедин

Видимо, от «обезличенного» профиля :). Запросы от профилей «организаций» я сразу отклоняю — а сегодня их пришло не меньше десятка.

как вы работаете со сторонним кодом

Х,як — х,як — и с костылями в продакшен

Ну, это само собой (хотя должен сказать, немцы все-таки обычно имеют test и integration env, причем не только в софтерных фирмах, но и софтверных отделах не софтверных фирм).
Но ведь что говорил академик Крылов, когда требовал 100 баков с американского буржуя — $1 рабочему за х.як кувалдой, а 99 мне за то, что сказал как и куда х.якнуть. Вот у меня вопрос на те 99 :)

То есть ты хочешь чтобы тебе посоветовали книгу «Как работать со сторонним кодом»? Меняю на книгу «Как понимать с полуслова всех людей на свете», они примерно равны по ценности. И она чуток подороже 99 капусты стоит.

А хочешь реальный ответ — за 99 — сформулируй вопрос хотя бы на 1. Но ответ, который НЕ СУЩЕСТВУЕТ — 99 не стоит точно.

Объясняю, как мы понимаем чужой код. В нём есть волшебные строки, начинающиеся с // и /*, в некоторых языках с # и ;

Если таких строчек не наблюдается, мы называем это ключевым словом «всё_переписать»

Ну, если такая хорошая книга есть, я бы с благодарностью воспринял такой совет.
Но нет, речь не о том — я рассказал, как я работаю с плюсовым кодом на примере QuantLib (и уж поверь мне, а если не веришь — спроси у дяди Вити) читая волшебные строки, ты каши не сваришь. Даже читая код (просто читая, а не дебажа, предварительно настроив отладчик Visual Studio на дружественный показ смарт-поитеров из boost — спасибо Аркадию Шапкину) ты тоже далеко не уедешь.
Видишь — вроде немного слов, а по мне так много инфы — с конкретными деталями.
Вот я и просил поделиться личным опытом с js по этой аналогии — и ведь некоторые поделились.

Яваскрипт

REEEEEEEEEEEEEEEEEE

На Яве пишешь? Скрипт — это долго говорить)

тип-то не указан

добро пожаловать в мир динамической типизации
и да «типов» в жаваскрипте всего 7 developer.mozilla.org/...​ata_structures#Data_types

яваскриптчакноррисы не работают с чужим кодом — они сразу пишут свой фреймворк

Вы собираетесь пройти путь всех «домашних мастеров»: после пятой потытки заставить что-то работать методом тыка, открывается инструкция по эксплуатации.
Если Вам жалко своего времени на изучение D3, найдите на апворке специалиста. Будет дешевле. От Вас при этом потребуется грамотно описывать техзадание. Если это так же тяжело, как выучить D3, то — сочувствую. Что-то нужно будет поменять.
Реверс инжиниринг js — это самое распоследнее дело. Из-за минификации, из-за бабеля, из-за тайпскрипта/флоу, из-за модулей, из-за «вдохновения», когда работающий код выдается за один присест без учитывания архитектуры, а потом уже нет особого желания менять то, что и так работает, и так далее.
То, что не будет минифицировано, скорее всего, не заслуживает внимания в плане идей и качества. Даже не по вопросу защиты авторского кода, а, скорее, из уважения к пользователям.

Только что посмотрел — исходники D3 в виде нормального кода лежат на гитхабе, так что минификация, бабель и прочее тут вообще не причем. Модулей, к сожалению нет — все в одном файле на 10к строк. Но функции, на тех 5-7 экранах что пролистал, всегда на страницу влазят. Так что скорее всего должно быть вполне пригодно для изучения на практике методом тыка

Вы о чем? Там же, наверное, где-то рядом лежит документация к API? Или кому-то проще разобрать цепочку вызовов чтобы понять, что делает какой-то публичный метод, чем выучить технический английский и прочитать отформатированный мануал?

100% с док начинать нужно. К сожалению автор не сказал нафига ему реверс инжинирить, по этому отвечаю по тому что есть

Лично у меня такая потребность всерьез была только с Sequelize, где через год работы уже знал некоторые файлы исходников не хуже своего проекта. По причине того что на первый взгляд неплохие доки не описывали мириады edge case-ов, а какие-то редкие фичи вообще иметь только упоминания. Ну и, конечно, если PR делать — без изучения исходников никак

Тут не то чтоб обязательно реверз-инжинирить: просто изначально я вопрос сформулировал наиболее общО — как работать с чужим (часто плохо документированным) js-кодом. Для плюсов у меня есть метод — сначала doxygen, потом — дебаггером проходишь testsuite.
А D3.js я привел в качестве конкретной реальной задачи (возможно, не совсем удачный пример, ибо она как раз документирована неплохо).

Большинство документации длиннее, абстрактнее, либо none и непонятнее кода. Можно еще продебажить для точности.

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

Может для первичного знакомства Getting Started и Demo — это отлично.

большего числа звезд на гитхабе

Проблема в том, что продукт может быть уже лидером. Например, select2. Бывает когда вообще нет лидера, например, мне надо было ftps под nodejs и путь был довольно тернист, большинство библиотек заброшены, ответов на issue нет.
Код особенно хорошо работает, когда перед тобой именно библиотека, типа там jQuery, посмотрел как работает нужный тебе метод, документация может размазывать суть которая внутри намного проще изложена.
Изучение кода AngularJS очень рекомендую, хотя бы чтение кода других директив, если нужно писать даже минимальные свои директивы.

Основная задача — создание интерактивных визуализаций с помощью, предположительно, D3.js — ибо проще самому сделать, чем объяснить задачу фронтэнд деву, не владеющему и основами описательной статистики.

Сам с D3 не работал, но на 99% уверен что для этого не нужно в сарцах копаться. Как минимум не с первого-же дня. Если это действительно то из-за чего начат пост то тут явно XY проблема

ибо проще самому сделать, чем объяснить задачу фронтэнд деву, не владеющему и основами описательной статистики.

Вот проблема. И я его понимаю. Я знал программистов, что не знали, как посчитать дисперсию.
У него там всякие «стаканы», скользящие разные, тренды и т.п. — вполне вероятно, что не так уж и просто найти жабаскриптера, который осилит сделать то, что нужно ТС.

Но зачем ему копаться в сорцах я тоже не знаю.

Не то что непросто, а невозможно. Есть некие оффшорные трудовые ресурсы, но брать можно только их.
Что же касается копания в сырцах — то тут смешались две вещи:
1)решение конкретной задачи и общего подхода. Есть библиотека поверх D3, называет C3 — многие (но не все) типы графиков. Отличная архитектура — задал только данные и свойства графика (размер, тип, зуммабл или нет и т.д.), сказал где отрисовать — и вуаля. Тут копаться точно не надо — разве что надо (а оно будет надо) какую-то свою диаграмму по аналогии имплементировать.
2) интересует общий метод работы с чужим js-кодом. Я описал, как я вгрызаюсь в чужие плюсы — doxygen + проход дебаггером testsuite, хотелось бы что-то подобное и для js

Уж не предлагаешь ли ты согрешить перед великим двигателем прогресса и заняться делом тёмным, rtfm-ным

А если fm отсутствует?
D3 — это конкретный пример в контексте задачи, которая передо мной стоит, и она документирована. Но вот надстройки на ней — далеко не все

отводя мышку от окна графика в окно дебаггера хрома или файерфокса ты порождаешь событие — т.е. поведение программы меняется от попытки ее дебажить. Как это грамотно учитывать?

Там есть много инструментов, уже всех не помню — пусть кто-то с релевантным опытом в devTools подскажет, но начать можно с Event listener breakpoints. Вообще нужно гуглить проблема + devTools — на моей памяти там еще по крайней мере 2 инструмента специально для таких и подобных проблем есть

Ну и про blackbox обязательно почитай — если любишь дебажить — очень помогает

опыт reverse engineering’а чужого js-кода.

когда я вижу джэс код у меня начинается клаустрофобия и тошнота

А ты не смотри на каку и все будет хорошо. Но некоторым приходится.

Но некоторым приходится.

так отож бо і воно!

Добавь тег #MeToo если тебя заставляют или заставляли писать на JS

PS Для не знающих — en.wikipedia.org/wiki/Me_Too_movement

Жизнь заставляет :)
Были бы живы ЖабаАпплеты — сделал бы на них. А так — какой еще есть метод богатой интерактивной графики в браузере?

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

Это ведь сарказм? Правда? АТС просто пошутил, я не верю, что есть настолько глупые люди, что бы писать такое серьезно.

личный опыт, не уверен насчет переносимости.
сначала работаешь через АПИ и доку, черный ящик, все дела.
попутно читаешь статьи да репорты на гитхабе. и в какой-то момент осознаешь — и как именно оно работает, и почему именно так.
после чего, если есть потребность, уже достаточно быстро можно понять код.
но вообще дебажить именно в коде библиотеки не часто надо. совсем не часто.

Спасибо! Личный опыт как раз и ценен, что касается переносимости — то да, это действительно не тот подход, к которому я привык. В силу исторических причин я, в основном, работал с кодом к которому не то что статей на гитхабе — и документации-то не было :).
Но мало ли кто к чему привык — надо уметь адаптироваться к новым реалиям.
Что касается конкретно D3.js — чувствую, learning curve will be long. Нашел, кстати, хорошую библиотеку поверх D3, называется (какой пассаж!) C3. В ней отлично реализована объектно-ориентированная модель — задал свойства объекта (графика, диаграммы и т.д.), задал поле где его рисовать — и получил. Кроме того, легко перехватывать event в котором уже содержится информация, какой элемент данных был кликнут на графике (не просто координаты клика, а именно инфа об элементе).
Проблема лишть в том, что в C3 есть многие типы диаграмм, но не все.

Вот это зря, в основе д3 лежат пару простых, но гениальных концепций, которые позволяют очень декларативно писать код. ООП тут явно не надо.

в основе д3 лежат пару простых, но гениальных концепций

Это ж каких?

Что касается ООП, то я не совсем корректно выразился — правильнее было бы говорить об исключительно удачной реализации MVC в C3. Действительно — модель — это, собственно, данные графика, view — указываешь что тебе нужно (ну там zoomable и т.п.), controller — есть возможность перехватывать event’ы.

не поймешь, что за переменная на входе — тип-то не указан

Обычно понятно из имени переменной + контекста

Согласен, хороший нейминг — уже полдела.
Но по моему (пока что поверхностному опыту, но тем не менее) такой нейминг — редкое явление.

главное не взять минифицированную версию для колупания

Подписаться на комментарии