Автор оригинала: FreeCodeCamp Community Member.
Римский Hotsiy
Недавно мы выпустили инструмент с открытым исходным кодом под названием Graphql voyager Отказ Удивительно, что он добрался до первой страницы Hacker News и Github Trending и набрал 1000+ звезд в первые несколько дней. На данный момент он имеет больше, чем 1 600 звезд Отказ
Люди любили Slick UI, интерактивные особенности и анимации. Мы использовали Skyscript, React, Redux, WebPack и даже Postcss, но это Не Еще одна статья о них Отказ Давайте посмотрим под капот …
Наше backstory.
Все началось несколько месяцев назад. Мой друг и я (мы называем себя apis.guru -s) искали идею для проекта вокруг Graphql (язык запроса для API, разработанный Facebook). После некоторых исследований интересный инструмент поймал наши глаза – Визуализатор GraphQl Отказ
Мы хотели добавить:
- Цвета (черно-белые выглядели слишком скучно)
- пан-и-зум
- Интерактивные функции, такие как выбор узлов и ребер
Но после поиска исходного кода мы нашли фатальный недостаток В этом инструменте: он использовал График – Десятилетия старый инструмент, написанный на простых c и скомпилирован на нечитаемый JavaScript, используя Emscripten Отказ
Как мы можем использовать что-то с 2000 года? Мы хипстеры для Бога! REVENTJS, D3, WEBPACK, Teadncript, Postcss – это то, с чем мы работаем! Не с инструментами, написанными в старомодном C?.
После небольшого исследования мы нашли лучшую библиотеку для задачи- CytoScape.js Отказ Он был написан в прекрасном JavaScript и даже поддержал запуск CSS-подобных селекторов на самом графике. Какой большой результат!
После недели интенсивного кодирования результат был менее чем удовлетворительным. Посмотреть на себя:
И это было даже не отображать все это много деталей на графике! Какой беспорядок!
Хотя код был намного чище, конечный результат был намного хуже по сравнению с оригинальным инструментом. Совершенно непригодным для использования.
Оказалось, что CytoScape есть никаких способов иметь ребра, которые не пересекают узлы. Мы пробовали все на нашем панели инструментов. Мы гугули. Мы спросили на Stackoverflow. Мы даже беспокоили несколько SVG GURU, мы знали. Нулевой успех:(
В крайнем случае, я даже попытался взломать CytoScape.js, чтобы произвести читаемый результат. Чуть больше исследований заставило меня сдаваться: видимо, визуализирующие графики это Ракету-наука (даже если у вас есть степень магистра в прикладной математике).
Мы были побеждены …
А потом осел нас. Что, если мы должны были взять на себя вывод из Graphviz (что просто просто SVG) и посыпьте его некоторыми CSS и JS?
И это сделал трюк ✨
Намного лучше! И меньше, чем день кодирования?
Добавление немного цвета, логотип, загрузка анимации, еще несколько полезных функций и здесь мы:
Да, мы написали несколько сотен линий уродливых манипуляций дома. Да, мы упаковали все этот беспорядок как не чистый? React/Redux компонент. И да, код графика настолько огромный, мы разбили его в отдельный файл 2 МБ. Но это работает, и никто не заботится. 1600 звезд на Github подтверждает это.
Обновление: Поскольку была представлена статья времени, проект был принят компаниями в области (например, Graphcool, Neo4j), и он был представлен на Graphql Europe, поэтому не только 1600 звезд подтверждают, что:)
Уроки выучены
Не судите код по возрасту. Особенно, если он был написан техническими гигантами, такими как AT & T Labs (место, где родились Unix и языки C и C ++).
К сожалению, мы пострадали от когнитивных предвзятостей: старый код плохой код. Но правда может быть противоположной. Старый код – это тестирование в бою тысячами пользователей в сотнях разных проектов. Большинство критических ошибок были исправлены, завершена документация, есть тонны вопросов и ответов на StackoverFlow и quora.
Мы живем в 2017 году, и UI от 2000-х годов определенно не принимается. Но графики и математика позади них не сильно меняются.
Такая же линия мысли может быть применена ко многим другим доменам. Таким образом, старый код должен быть предоставлен шанс, тем более, что вы всегда можете обернуть его в современный интерфейс.
Вот почему мы видим огромный потенциал в Веб-сборка Отказ Это позволит предохранять проконсультируемые вроде алгоритмы реализации современного UIS. Мы стремимся видеть, что удивительные вещи, которые люди построят с ним.
«Эмм .. ты обещал сказать мне, как получить много звезд»
Ой … хорошо. Ты поймал меня. Я хотел сделать титул довольно достаточно.
Ниже приведен контрольный список наиболее важных советов и трюков, которые мы используем для нашего проекта с открытым исходным кодом:
- Попробуйте использовать название вашей технологии как часть вашего имени проекта (E.g. GraphQl-что-то, реагировать-что-то и т. Д.) Таким образом, ваш проект будет иметь лучший ранг в результатах поиска GitHub для этих технологий.
- Ваш Readme должен поймать глаза народов. Мы добавили анимированный GIF на нашу Readme, чтобы люди могли сразу понять, о чем наш проект. Если это консольное приложение – добавьте GIF с консолью (вот удивительный потрясающий пример ).
- Больше колоколов и свистков: Добавить значки, добавьте хороший логотип, добавить emojis? ?
- Настройте демонстрацию, если это возможно, и добавьте ссылку на него в поле описания репозитория.
- Опять же, Настройте демонстрацию ! И не забудьте добавить ссылку с демонстрации обратно в Github (мы используем углы GitHub ).
- Прежде чем публиковать его Hackernews/reddit/etc. Получите начальное количество звезд (5-10), опубликовав его на менее популярных ресурсах или поделиться его с друзьями. Люди реже нажать «звезда» на проектах с нулевыми звездами.
- Попробуйте получить 30-40 звезд в первый день. Таким образом, вы, вероятно, получится на Github Trending для вашего языка, который является еще одним источником для трафика.
- Сделать что-нибудь полезное Отказ
Есть несколько других статей о том, как продвигать проекты с открытым исходным кодом: здесь , здесь и здесь Отказ
Это все люди. Если вы когда-нибудь завернули старый код в новый блестящий интерфейс? Расскажите свою историю в комментариях ниже.