Jimbo: A Collaborative Code Editor with Live Preview
Soroush Ghorashi, Carlos Jensen
Human-Computer Interaction Group, School of Electrical Engineering and Computer Science, Oregon State University

Jimbo Environment

Abstract
Traditional way of coding requires developers to take following steps in creating any kind of software artifact: write some code into a text editor
and then compile and run it. However before running the code and seeing the output, developers only have an imagination in their heads of what
are these lines of code are going to create. Moreover, after any changes they make to the code, they have to repeat these steps to see the new
results. But they need to see the effects of these modifications and decisions they are making during the coding process immediately. Thus they
need an immediate connection to whatever they are creating. This paper reports on Jimbo, a collaborative development environment that provides
this immediate connection as well as collaboration on the code and user awareness.

Problem
 Lack of immediate connection between
developers and the software
 Lack of collaboration in software development
 Communication problems in collaborative
environments for software development
 Lack of necessary awareness in such
environments

Features

 Collaboration
 Code editing
 Easy share
 Helper widgets (color, numerical)
 Communication
 Text-based chat
 Discussion threads
 Audio/Video chat

 Live preview
 User Awareness
 Code lock
 Code watch
 Push notifications
 Code change
 State change

Conclusion
Jimbo is a collaborative development environment that is built based on an important principle: immediate connection between the code
and its output. However this development tool needs to be evaluated by actual users to see how effective are its features in real practices
and will these feature streamline the current trends in software development models?

Jimbo Collaboration

Jimbo Communication

Technologies
 Backend-Server
 Node.js, Express.js
 Jade templating
 Stylus css meta-language
 Collaboration
 Wave protocol
 Operational transformation
 Frontend
 HTML 5, CSS 3, JavaScript
 Communications
 WebRTC (real-time communication)
 Browserchannel protocol
 Visualizations
 D3 library

Soroush Ghorashi
Research Assistant
HCI Group, School of EECS
Oregon State University
ghorashi@eecs.orst.edu
Carlos Jensen
Associate Professor
HCI Group, School of EECS
Oregon State University
cjensen@eecs.oregonstate.edu

Jimbo - A collaborative code editor with live preview

  • 1.
    Jimbo: A CollaborativeCode Editor with Live Preview Soroush Ghorashi, Carlos Jensen Human-Computer Interaction Group, School of Electrical Engineering and Computer Science, Oregon State University Jimbo Environment Abstract Traditional way of coding requires developers to take following steps in creating any kind of software artifact: write some code into a text editor and then compile and run it. However before running the code and seeing the output, developers only have an imagination in their heads of what are these lines of code are going to create. Moreover, after any changes they make to the code, they have to repeat these steps to see the new results. But they need to see the effects of these modifications and decisions they are making during the coding process immediately. Thus they need an immediate connection to whatever they are creating. This paper reports on Jimbo, a collaborative development environment that provides this immediate connection as well as collaboration on the code and user awareness. Problem  Lack of immediate connection between developers and the software  Lack of collaboration in software development  Communication problems in collaborative environments for software development  Lack of necessary awareness in such environments Features  Collaboration  Code editing  Easy share  Helper widgets (color, numerical)  Communication  Text-based chat  Discussion threads  Audio/Video chat  Live preview  User Awareness  Code lock  Code watch  Push notifications  Code change  State change Conclusion Jimbo is a collaborative development environment that is built based on an important principle: immediate connection between the code and its output. However this development tool needs to be evaluated by actual users to see how effective are its features in real practices and will these feature streamline the current trends in software development models? Jimbo Collaboration Jimbo Communication Technologies  Backend-Server  Node.js, Express.js  Jade templating  Stylus css meta-language  Collaboration  Wave protocol  Operational transformation  Frontend  HTML 5, CSS 3, JavaScript  Communications  WebRTC (real-time communication)  Browserchannel protocol  Visualizations  D3 library Soroush Ghorashi Research Assistant HCI Group, School of EECS Oregon State University ghorashi@eecs.orst.edu Carlos Jensen Associate Professor HCI Group, School of EECS Oregon State University cjensen@eecs.oregonstate.edu