Code Map Google Maps for Source Code Yoann

  • Slides: 13
Download presentation
Code. Map Google Maps for Source Code Yoann Padioleau (Facebook) http: //github. com/facebook/pfff

Code. Map Google Maps for Source Code Yoann Padioleau (Facebook) http: //github. com/facebook/pfff

About this talk n n Feel free to ask questions during the talk Disclaimer:

About this talk n n Feel free to ask questions during the talk Disclaimer: I do not represent Facebook

Problem Dealing with huge codebase is difficult for noobs or new employees. Typical questions:

Problem Dealing with huge codebase is difficult for noobs or new employees. Typical questions: n What are the important functions in big API? n What are the entry points? n What is the big picture? n Spend time mostly reading/understanding code, not so much writing new code. Tools to assist reading and understanding code?

Recent technological changes n Huge monitors, 30’ Often have multiple ones Very high resolution

Recent technological changes n Huge monitors, 30’ Often have multiple ones Very high resolution (2600 x 1700) n But we still use 80 -columns based editors n n Can we leverage all those pixels?

Codemap Approach n n n Focus on assist reading/understanding code Program analysis + information

Codemap Approach n n n Focus on assist reading/understanding code Program analysis + information visualization Google maps metaphor n n Zoom in/out Important stuff should be bigger

Demo

Demo

Features n n n Big picture, treemaps, “macro level” Search, navigation Semantic-based code highlighting

Features n n n Big picture, treemaps, “macro level” Search, navigation Semantic-based code highlighting “micro level” Connection to editor (emacs/vim) Extensible via layers (predator mode) Codemap is not an editor

Features: treemap n n Each rectangle is a file Size of rectangle =~ size

Features: treemap n n Each rectangle is a file Size of rectangle =~ size of file Color of rectangle = “aspect” (test, main, storage, security, etc) “Code aware” (heuristics) n n n Auto generated file do not eat real-estate Code is more important than data, xml, jpg Tiling, use all the space

Features: search and navigation n Search n n n Highlighted rectangle Ranked entities Navigation

Features: search and navigation n Search n n n Highlighted rectangle Ranked entities Navigation n Up/down (not as smooth as google maps) Direct access to file (faster than speedbar or expand-directory widgets) Can see spread directories

Features: semantic code visualizer n grammar-based highlighting, not regexps as in emacs/vim n n

Features: semantic code visualizer n grammar-based highlighting, not regexps as in emacs/vim n n Know records vs functions vs constants Functions/classes are in bigger size than statements Tiling, use all the space, multi columns Semantic aware (global analysis) n Important functions are in bigger size

Layers: alternate color schemes n n n n Age (help find dead code) #authors

Layers: alternate color schemes n n n n Age (help find dead code) #authors (important stuff usually) Activity (what’s going on? ) Code coverage Bugs/warnings of linter grep/sgrep results Top/Bottom modules …

Conclusion n A semantic-based source code visualizer/searcher/navigator Accelerate loading the code into your brain

Conclusion n A semantic-based source code visualizer/searcher/navigator Accelerate loading the code into your brain (can see 20 files at once) Future work: Web UI, LXR 2? n Smoother zoom n Module/package dependencies $ git clone git: //github. com/facebook/pfff. git n

Related work n n See. Soft (does not scale, no treemaps) Code Thumbnails (2

Related work n n See. Soft (does not scale, no treemaps) Code Thumbnails (2 different modes) 3 d visualization (not sure it helps, eat pixels) Disk explorer (not code aware, no microlevel)