Pronq IDE – Collaboration

1. Pronq IDE – Collaboration Code Review Technion Project

2. Pronq IDE • Product description • Web-based IDE for developing web applications • Currently supports java-script only • Powered by Eclipse Orion editor • Advantages over other web-based IDEs • Source files are stored on client-side (in-browser storage) • Better performance (and lighter server) • Full privacy • Fully extensible For more details – read ‘CodeAnywhere: Web IDE – The next generation’

3. Technologies • Must • java script (Java Script – the good parts book) including deferred+promises • html - http://www.w3schools.com/html/default.asp • require.js - http://requirejs.org/docs/start.html • node.js - http://nodejs.org/api/ (REST API, socket.io) • Choose • jquery - http://www.w3schools.com/jquery/ • angular.js (Angular JS book) • Choose • git - http://git-scm.com/about • svn - http://subversion.tigris.org/ • Optional • html5 - http://www.isoc.org.il/openacademy/html5/ • css- http://www.w3schools.com/css/default.asp • less - http://lesscss.org/

4. Architecture • High level • Single page application • All business logic resides in the client-side (expect for certain use-cases) • Each js file is a require.js module • Extension loader – loads all extensions • Most of the rest are extensions

5. Extensibility • Extension • Everything is extension (extendable, replaceable) • Extension is a set of modules (described in config.js file) • Each module is a require.js module and may contribute one service • Each module may depend on other modules (either of the same extension or others’) that are available via dependency injection • A module life-cycle has two phases • init – collect information from other modules, contributes information to other moduels • start – expose/present the information

6. Core Extensions • Layout Service • Responsible for managing all panes and sub panes (tabs) • Provides the API for adding new sub panes • Project Service • Responsible for managing all projects and project files • Provides the API for adding, getting and removing files to/from the project • Editors Service • Responsible for managing all open editors • Provides the API for opening/closing an editor • Provides the API for manipulation of editor contents

7. Project Goals • Collaboration • Integrated offline code review system to the IDE • Developer should be able to request code review • Select the changes • Select the code reviewer • Send the request • Backend server gets the request and routes it to the code reviewer (push with socket.io)

8. Project Goals • Collaboration – cont. • Backend server gets the request and routes it to the code reviewer (push with socket.io) • Code reviewer gets the notification and opens the code review dedicated view • File tree shows the changed files • Contents is taken from the base line (where the changes are made upon) + the diff • Changes should be presented according to the change type (add line, remove, etc.) • Navigation between changes • Adding comments, approving or disabling a change • Send back the review to the developer • Checking all changes in the shared code-base

9. Code Review • 1 • 2 • 3 • Introduce changes • Select code reviewer • Send • Get notification • Open code review view • Review and send back • Push notification

10. Thank you