1 / 10

Pronq IDE: A Collaborative Web-Based Tool for Efficient Code Review and JavaScript Development

Pronq IDE is a web-based Integrated Development Environment (IDE) designed specifically for developing web applications using JavaScript. Powered by the Eclipse Orion editor, it offers superior performance, full privacy, and client-side storage of source files. This IDE is fully extensible, allowing for seamless integration of various modules and services. Key features include an integrated offline code review system that facilitates collaboration among developers, enabling requests for code reviews and efficient management of project files and editors.

nonnie
Télécharger la présentation

Pronq IDE: A Collaborative Web-Based Tool for Efficient Code Review and JavaScript Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related