the path to pair programming in che with atom teletype · the path to pair programming in che with...

Paris 2018 - @sunsengdavidtan #OracleCodeParis

The Path to Pair Programming in Che with Atom Teletype

Sun Tan - Red Hat

@sunsengdavidtan


Agenda● Eclipse Che● Atom Teletype● Atom Teletype in Che ● What’s next● Q&A and open demo

2


Eclipse Che

3

An introduction to Eclipse Che

Paris 2018 - @sunsengdavidtan #OracleCodeParis 4


Anyone, anytime can contribute to a project without installing software.


Is Che just an Eclipse IDE with a Web UI ?

6


Is Che just an Eclipse IDE with a Web UI?● Yes and No: Che is composed of several pieces:

○ Frontend UI in Javascript (browser)○ Workspace containers based on Docker

■ Containers may run Language Servers■ language Server for Java: Eclipse JDT

7


Does Eclipse Che only support Javascript?

8


Does Che only support Javascript?No ;) not only We support languages that has a LSP implementation

● LSP introduced by Microsoft with VSCode○ Exchange JSON RPC○ IDE clients○ Language servers

● Servers expose○ Code completion○ Markers○ Source code

● Demo: VSCode + java --- Che + php

9


Language ServerTool

Language Server Protocol (JSON RPC)

textDocument/publishDiagnostics

textDocument/didOpen

LANGUAGE SERVER PROTOCOL

User opens document

User edits document

Tool displays errors

Server initializes tools

Server calculates diagnostics

textDocument/didChange


JDT.ls● Eclipse LSP4J● Eclipse JDT● Eclipse M2E for Maven● Eclipse Buildship for Gradle

11


Does Eclipse Che only work on Cloud?

12


Does Che only work on Cloud?● Easy to install locally:

○ Docker○ Minishift addon

● Demo: local workspace

13


Are project setup easier with Eclipse Che?

14


Are project setup easier with Che?● Workspace definition

○ Container based○ tooling

● Factory URL○ Regenerate a workspace on demand○ Projects to clone○ Post loading events

● Open a file at a line● Run a command (build and run)

○ Pull request panel

15


How easy would it be to switch context/branch/task with Che?

16


How easy would it be to switch context/branch/task with Che?● Factory URL

○ Project template:■ Docker image

● Available tools■ Projects to clone■ Supported language

● Generate a workspace for each task● Multiple git repos simpler to manage

17


Is it possible to use my own command line tools with Che?

18


Is it possible to use my own command line tools with Che?● YEAH: set up your own docker image with all the tools you use

○ My dev workspace sunix/che-dev https://hub.docker.com/r/sunix/chedev/~/dockerfile/ :■ Tig git■ Screen■ Npm, yarn■ Gulp■ Maven, JDK

19

https://hub.docker.com/r/sunix/chedev/~/dockerfile/


Can I have a development environment as closed to my production environment?

20


Can I have a development environment as closed to my production environment?Openshift based runtime stack + tools containers

Next slide ...

21


“Dev Mode” for your Application Stack

App

Application stack-

Dockerfile, kubernetes.yaml, openshift.yaml, helm chart

Application stack / “Dev Mode”IDE Tooling as microservices in sidecars

Language

IDE

DebuggerTest

App


What about co-editing “a la Google Docs”?

23


● Quick collaboration

○ Mentoring session

○ Code reviews

○ Co-editing

● No need to setup or install anything - just share a link

● Better than screensharing...

Pair Programming ?


Agenda● Eclipse Che● Atom Teletype● Atom Teletype in Che ● What’s next● Q&A and open demo

25


Atom Teletype

26

Presentation and demo


Atom Teletype● Extension for the Atom editor● Pair programming/Live concurrent editing● FOSS libraries for other editors

○ teletype-client○ teletype-server○ teletype-crdt

● Communication○ Conflict-free Replicated Data Type: CRDT ○ WebRTC

27


Atom Teletype

28

Demo


Atom Teletype

Host

Guest

Guest

Guest


Atom Teletype

Host

Guest

Guest

Guest

TeletypeServer

register/discover

register/discover

https://api.teletype.atom.io/


Atom Teletype

Host

Guest

Guest

Guest

Peer-to-peerCRDT

synchronisation


Teletype Portals● Portal <=> workspace● 1 host portal● 1..n guest portals● A shared pair programming session● Active files of the host portal● Editors and buffers

32


Atom Teletype in Che

33

A status of Atom Teletype in Che


Why Atom Teletype ?● Looking for alternative to Eclipse Flux

○ Solve conflict issues○ FOSS○ Browser friendly

● Mainly two alternatives:○ ot.js (operational transform)○ Atom Teletype

● No available demos for ot.js

34


Steps to Atom Teletype in Che● Reusing previous demo

○ Cursors○ Editor content synchronization

● teletype-client embedded into the Che IDE○ Adapt a NodeJS (Electron) library to the browser○ GWT overlays

● Default teletype-server (Github Atom)● First iteration: as a Teletype guest portal

35


Atom Teletype in Che

36

Demo


Agenda● Eclipse Che● Atom Teletype● Atom Teletype in Che● What’s Next● Q&A and open demo

37


What’s Next

38

How to bring the same experience we have in Google Docs for the IDE?


Pair.Programming.Next

App

Teletype Guest portals

HeadlessTeletype Host

portal

TeletypeServer

Tools

Che workspaces with sidecars

Guest

Guest

Guest

GuestGuest


Thank you

@sunsengdavidtan & @stevanLM

Q&A and Open Demo

the path to pair programming in che with atom teletype · the path to pair programming in che with...

Documents