Live editing and pair programming with Eclipse Cloud Development - - PowerPoint PPT Presentation

▶

Dec 03, 2022 461 likes •719 views

Live editing and pair programming with Eclipse Cloud Development top projects Sun TAN @sunsengdavidtan Serli Socit de conseil et dingnierie Innovation, Ingnierie, Formation 70 personnes Contribution des projets OSS Membre du

SLIDE 1

Live editing and pair programming with Eclipse Cloud Development top projects

Sun TAN @sunsengdavidtan

SLIDE 2

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Serli

Société de conseil et d’ingénierie Innovation, Ingénierie, Formation 70 personnes Contribution à des projets OSS Membre du JCP Poitou charentes JUG leader @JUGSummerCamp

La Rochelle, 18th September 2015

SLIDE 3

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

My job

○ Java developer ○ Eclipse che commiter ○ Team leader ○ Scrum master ○ Trainer

Previously

○ Eclipse RCP developer, ○ Nuxeo, Eclipse Apogee, Eclipse Apricot

Location

○ Paris, France @sunsengdavidtan http://sunix.org

Sun TAN Java Developer

SLIDE 4

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Introduction to Eclipse Flux
Demo 1

○ Eclipse Flux running on a Eclipse Che docker runner. ○ Pair programing with Orion and Eclipse IDE

Demo2: Eclipse Che extension

○ Pair programing with Orion, Eclipse IDE and Che

Agenda

SLIDE 5

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Eclipse flux

○ By Pivotal ○ Message based architechture ○ Connect developer tools in the Cloud ○ Available demos: https://www.eclipse.org/flux/ ■ Real time live edit ■ (v)fs synchronization ■ Eclipse JDT on Eclipse Orion

Eclipse Flux

SLIDE 6

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Eclipse flux

○ Communication ■ Central NodeJS Web socket (socketio) server ■ Exchanging well known messages between each participant. ■ Request-response model or broadcast ■ Anyone can respond

Eclipse Flux Communication

SLIDE 7

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Flux Websocket communication (Google Chrome dev tools)

Eclipse Flux Websocket

SLIDE 8

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Eclipse Flux FS sync

SLIDE 9

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Eclipse Flux server:

○ NodeJS ○ RabbitMQ ○ Socket.io ○ (Mongo DB) ○ Npm

https://github.com/eclipse/flux Eclipse flux

SLIDE 10

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Demo 1

■ Eclipse Flux running on a Eclipse Che docker runner ■ Launch embedded Orion and Eclipse IDE

Start to pair program :) Running Flux in Che Demo

SLIDE 11

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

FROM sunix/flux CMD sudo service rabbitmq-server start && npm start

Running Flux in Che Dockerfile

SLIDE 12

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

FROM codenvy/jdk7 RUN sudo -E bash -c "echo \"deb http://www.rabbitmq.com/debian/ testing main\" >> /etc/apt/sources.list" RUN sudo wget https://www.rabbitmq.com/rabbitmq-signing-key-public.asc RUN sudo apt-key add rabbitmq-signing-key-public.asc RUN sudo apt-get update RUN sudo apt-get install -y rabbitmq-server nodejs-legacy npm EXPOSE 3000 ENV CODENVY_APP_PORT_3000_HTTP 3000 RUN wget https://github.com/eclipse/flux/archive/master.zip && unzip master.zip RUN sudo npm install ENV VCAP_APP_HOST 0.0.0.0 RUN wget https://gist.githubusercontent. com/sunix/a9a1037e257da5d0a600/raw/3ff8a910f3400d19775bb562c89524518ac6f2d2/startup-all-in-one.js.patch RUN patch -p1 < startup-all-in-one.js.patch CMD sudo service rabbitmq-server start && npm start

Running Flux in Che Dockerfile

SLIDE 13

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Demo2: Eclipse Che extension

○ Connect che editors to flux ○ Detect running Docker flux runner

https://github.com/sunix/che-plugin-flux-live-edit

Screen cast of the demo

Starting pair programing session as easy as Sharing a Che URL! Che extension Demo2

SLIDE 14

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Inject socketio.js

SocketIOResources ioresources = GWT.create(SocketIOResources.class); ScriptInjector.fromString(ioresources.socketIo().getText()).setWindow (ScriptInjector.TOP_WINDOW).inject();

GWT JSNI and overlay to talk to native javascript

public static native SocketIOOverlay getSocketIO()/*-{ return $wnd.io; }-*/;

Che extension GWT and socket.io

SLIDE 15

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Javascript overlay

public class SocketOverlay extends JavaScriptObject { protected SocketOverlay() {} public final native void emit(String type, JavaScriptObject json) /*-{ this.emit(type, json, function(answer) {}); }-*/; public final native void on(String eventName, Runnable runnable) /*-{ this.on(eventName, function() { handler.@java.lang.Runnable::run()(); }); }-*/;

Che extension GWT and socket.io

SLIDE 16

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Connect to flux

protected void connectToFlux( ApplicationProcessDescriptor descriptor, String host, String fluxPort) { SocketIOOverlay io = getSocketIO(); String url = "http://" + host + ":" + fluxPort; socket = io.connect(url); socket.emit("connectToChannel", JsonUtils.safeEval("{\"channel\" : \"USER\"}")); … }

Che extension Connect to flux

SLIDE 17

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Listen to Che runners start events

eventBus.addHandler(RunnerApplicationStatusEvent.TYPE, runner -> { ApplicationProcessDescriptor descriptor = runner.getDescriptor(); connectIfFluxMicroservice(descriptor); }); private boolean connectIfFluxMicroservice(ApplicationProcessDescriptor descriptor) { String fluxPort = descriptor.getPortMapping().getPorts().get("3000"); if (fluxPort == null) { return false; } String host = descriptor.getPortMapping().getHost(); if (descriptor.getStatus() == ApplicationStatus.RUNNING) { connectToFlux(descriptor, host, fluxPort); return true; } return false; }

Che extension Listen to Che runners

SLIDE 18

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Receive change events

socket.on("liveResourceChanged", fluxChangedEvent -> { Document document = liveDocuments.get( "/" + fluxChangedEvent.getProject() + "/" + fluxChangedEvent.getResource()); isUpdatingModel = true; document.replace(fluxChangedEvent.getOffset(), fluxChangedEvent.getRemovedCharCount(), fluxChangedEvent.getAddedCharacters()); isUpdatingModel = false; } );

Che extension Receive change events

SLIDE 19

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse eventBus.addHandler(DocumentReadyEvent.TYPE, docReadyEvent -> { liveDocuments.put(docReadyEvent.getDocument().getFile().getPath(), docReadyEvent.getDocument()); docReadyEvent .getDocument().getDocumentHandle().getDocEventBus() .addHandler(DocumentChangeEvent.TYPE, docChangeEvent -> { String fullPath = docChangeEvent.getDocument().getDocument().getFile().getPath().substring(1); String project = fullPath.substring(0, fullPath.indexOf('/')); String resource = fullPath.substring(fullPath.indexOf('/') + 1); String text = JsonUtils.escapeValue(docChangeEvent.getText()); String json = "{" + "\"username\":\"USER\"," + "\"project\":\"" + project + "\"," + "\"resource\":\"" + resource + "\"," + "\"offset\":" + docChangeEvent.getOffset() + "," + "\"removedCharCount\":" + docChangeEvent.getRemoveCharCount() + "," + "\"addedCharacters\":" + text + "}"; if (isUpdatingModel) { return; } socket.emit("liveResourceChanged", JsonUtils.unsafeEval(json)); }); });

Che extension Send change events

SLIDE 20

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

eventBus.addHandler(OpenProjectEvent.TYPE,

penProjectEvent -> {

runnerService.getRunningProcesses(openProjectEvent.getProjectName(), newAsyncCallback() .success( processes -> { for (ApplicationProcessDescriptor process : processes.asIterable()) { if (connectIfFluxMicroservice(process)) { break; } } }) .failure(e -> Log.error(GetRunningProcessesAction.class, e)) .build()); });

Che extension Connect on open

SLIDE 21

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

Improve Che extension

○ add messages “live session started” ○ implement (v)fs sync ○ cursor positions ○ actions by other participants ○ chat

Publish the extension

○ default che packaging ○ add a contribute button to the github project

Next ...

SLIDE 22

@sunsengdavidtan @serlifr #eclipseche #eclipseflux #orion #eclipse

SLIDE 23

Questions

c

@SerliFr SerliFr Serli

SLIDE 24

Thank you www.serli. com

c

@SerliFr SerliFr Serli