Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeCity for (and by) JavaScript (VEM Workshop, 2015)

CodeCity for (and by) JavaScript (VEM Workshop, 2015)

JavaScript is one of the most popular programming languages on the web. Despite the language popularity and the increasing size of JavaScript systems, there is currently no visualization tools that can be used by developers to comprehend, maintain, and evolve JavaScript software. In this paper, we introduce JSCity, an implementation in JavaScript of the well-known CodeCity software visualization metaphor. JSCity relies on JavaScript features and libraries to show “software cities” in standard web browsers, without requiring complex installation procedures. We also report our experience on producing visualizations for 40 popular JavaScript systems using JScity.

ASERG, DCC, UFMG

October 07, 2015
Tweet

More Decks by ASERG, DCC, UFMG

Other Decks in Research

Transcript

  1. JSCity: Code City for (and by)
    JavaScript
    VEM Workshop, BH, Sept 2015
    Marcos Viana, Guilherme Barbosa,
    André Hora, Marco Tulio Valente

    View Slide

  2. 2
    http://pt.slideshare.net/wettel/codecity-visual-exploration-of-largescale-evolving-software

    View Slide

  3. 3
    http://pt.slideshare.net/wettel/codecity-visual-exploration-of-largescale-evolving-software

    View Slide

  4. Code City for JavaScript
    4
    https://github.com/aserg-ufmg/JSCity

    View Slide

  5. Code City by JavaScript
    5

    View Slide

  6. Examples (40 systems)
    6

    View Slide

  7. AngularJS
    7

    View Slide

  8. Demo Video
    8

    View Slide

  9. [informal] Evaluation
    9

    View Slide

  10. Twitter Coverage
    10

    View Slide

  11. Twitter Coverage
    11

    View Slide

  12. Twitter Coverage
    12

    View Slide

  13. Twitter Coverage
    13

    View Slide

  14. Twitter Coverage
    14

    View Slide

  15. Twitter Coverage
    15

    View Slide

  16. Twitter Coverage
    16

    View Slide

  17. Twitter Coverage
    17

    View Slide

  18. Future Work
    • PyCity
    – Code City for Pyton
    – But by JavaScript
    • [more formal] Evaluation with developers
    18

    View Slide

  19. Thanks!
    https://github.com/aserg-ufmg/JSCity
    Marcos Viana, Guilherme Barbosa,
    André Hora, Marco Tulio Valente
    VEM Workshop, BH, Sept 2015

    View Slide