CodeCity – Визуализируйте Свой JavaScript Как Город


Если вы раньше не сталкивались с идеей CodeCity, то это будет весело. Даже если у вас есть, стоит проверить, как выглядят некоторые знакомые библиотеки кода JavaScript в качестве городов.

Метафора визуализации программного обеспечения CodeCity была первоначально предложена Wettel и Lanza в 2011 году для визуализации объектно-ориентированного кода. JSCity-это реализация этих идей в JavaScript для JavaScript тремя исследователями Маркос Виана, Андре Хора и Марко Тулио Валенте, базирующимися в Бразилии. 

В оригинале классы CodeCity представлены в виде зданий, но это пришлось адаптировать, поскольку JavaScript не является простым языком, основанным на классах. Очевидная вещь, которую нужно сделать, – это заменить класс функциями.

JSCity представляет программу JavaScript в виде города; папки-это районы, а файлы-подрайоны; здания-это функции; внутренние функции представлены в виде зданий в верхней части их ограждающей функции/здания. Количество строк исходного кода (LOC) представляет высоту зданий/функций; количество переменных (NOV) в функции коррелирует с базовым размером здания.

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

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

Исследователи также проанализировали 40 известных баз кода JavaScript, и они представляют три из них как особенно интересные-основные функции AngularJS, Bower и jQuery – посмотрите, можете ли вы догадаться, что есть что:

ГОРОД А

ГОРОД В

ГОРОД С

Должен признаться, что я почти сразу узнал свою любимую библиотеку JavaScript! Идентичность каждого города можно найти в самом конце этой новости – прокрутите вниз.


Добавить комментарий