Native Cross-platform Desktop Application using Electron.Atom

[rocketchat]

Native Cross-platform Desktop Application using Electron.Atom

[stephenreid]

We could use node-webkit for this.

[sariyamelody]

I'd personally suggest Electron because it's pretty slick. I've used it
to much success at $DAYJOB and to minor success with a toy IRC client.
Both times it's been very trivial to get started and to keep progressing.

On 5/29/2015 12:48 PM, Stephen Reid wrote:

We could use node-webkit for this.

—
Reply to this email directly or view it on GitHub
#37 (comment).

Rylee Fowler
PGP: 41EA 1D94 F261 8602 6CD4 B2B5 05A6 3421 F637 E333
Never heard of PGP? See https://emailselfdefense.fsf.org/en/ !
https://keybase.io/rylee

[rodrigok]

Electron seems great, but as I never used this solutions I really can't opine.

Can you help us with this?

[engelgabriel]

I like the http://electron.atom.io/ idea 👍

[sariyamelody]

Potentially. I don't have a lot of free time, unfortunately, but I could
see what I could do.

On 5/30/2015 1:11 PM, Rodrigo Nascimento wrote:

Electron seems great, but as I never used this solutions I really can't
opine.

Can you help us with this?

—
Reply to this email directly or view it on GitHub
#37 (comment).

Rylee Fowler
PGP: 41EA 1D94 F261 8602 6CD4 B2B5 05A6 3421 F637 E333
Never heard of PGP? See https://emailselfdefense.fsf.org/en/ !
https://keybase.io/rylee

[edoardocavazza]

If you need help, I could do an analysis of what are the steps to do (issues to resolve, configurations, etc...). I have experienced with Electron and NW.js both!

[engelgabriel]

Hi @edoardocavazza we do need help! How can I help you help us? :)

[engelgabriel]

Some ideas on https://github.com/danielfbm/meteor-cordova-web-example are very interesintg.

From https://forums.meteor.com/t/different-interfaces-based-on-devices/264/19

[edoardocavazza]

I have tried to follow this guide but I found a lot of problems with relative paths (many of them have the trailing '/', good for web, but not for Electron or Cordova). In my opinion, this is the first issue to manage!

Path issues:

• //fonts.googleapis.com/css?family=Roboto:500,300,700,400&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic, because Electron and NW use file protocol.
• //www.googletagmanager.com/gtm.js?id=GTM-MLJ76N Failed to load resource: net::ERR_FILE_NOT_FOUND, because Electron and NW use file protocol.
• /sockjs/info?cb=xxxxxx should address to the absolute socket url, not relative.
• /images/logo/logo.svg is resolved to file:///images/logo/logo.svg. Do not use trailing /.
• /favicon.ico?v=2 same as above.
• /fonts/fontello.* same as above.
• /images/logo/*x*.png same as above.

Javascript issues:

• Uncaught error: Cannot find module jquery. jQuery looks for module variable definition in order to load using RequireJS or attaching itself to the window object. Electron has module defined, but with different behavior.
• Uncaught ReferenceError: Favico is not defined same as above.

[edoardocavazza]

I have made a shell script for compiling and preparing the Electron app.

First of ll, install Electron npm install electron-prebuilt -g.

Then navigate to the project, and run this script:

#!/bin/sh

url="https://rocket.chat/home"

if [ "$1" == "--server" ] && [ "$2" != "" ]; then
    url=$2
fi

# remove old files
if [ -e "./Rocket.Chat.tar.gz" ]; then
    unlink "./Rocket.Chat.tar.gz"
fi
if [ -e "./bundle" ]; then
    rm -rf "./bundle"
fi

# build
meteor build . --server $url
tar xzf ./Rocket.Chat.tar.gz

# make it an electron project
mv ./bundle/programs/web.browser/*.css ./bundle/programs/web.browser/app.css
mv ./bundle/programs/web.browser/*.js ./bundle/programs/web.browser/app.js
curl -o ./bundle/programs/web.browser/index.html $url

touch './bundle/programs/web.browser/package.json'
echo '{"name":"Rocket.Chat","version":"0.0.1","main":"main.js"}' >> './bundle/programs/web.browser/package.json'

touch './bundle/programs/web.browser/main.js'
echo 'var app=require("app"),BrowserWindow=require("browser-window");require("crash-reporter").start();var mainWindow=null;app.on("window-all-closed",function(){"darwin"!=process.platform&&app.quit()}),app.on("ready",function(){mainWindow=new BrowserWindow({width:800,height:600}),mainWindow.loadUrl("file://"+__dirname+"/index.html"),mainWindow.openDevTools(),mainWindow.on("closed",function(){mainWindow=null})});' >> './bundle/programs/web.browser/main.js'

sed -i -e 's/<link rel="stylesheet" type="text\/css" class="__meteor-css__" href=".*">/<link rel="stylesheet" type="text\/css" class="__meteor-css__" href="app.css">/g' ./bundle/programs/web.browser/index.html
sed -i -e 's/<script type="text\/javascript" src=".*">/<script type="text\/javascript" src="app.js">/g' ./bundle/programs/web.browser/index.html

# run
electron ./bundle/programs/web.browser

You can also specify the server url:
../build-electron.sh --server <your server url here>

[engelgabriel]

Hi @edoardocavazza thank you so much for the help and welcome to the team!

I'll try to fix what you have listed here.

Have you seen this links?

So we are going to build the leader board app as a desktop app, but only the client part of the Meteor app. Like a cordova app but with Electron if you prefer. It can work offline and get updated by the server.
https://medium.com/@guidouil/cross-platform-desktop-apps-with-meteor-and-electron-5355eb9e351

and:

Electrometeor combines Electron and Meteor to allow you to easily create desktop applications that work both 100% offline & online.
https://github.com/sircharleswatson/Electrometeor
https://sircharleswatson.github.io/2015/04/30/Electrometeor-Build-Desktop-Applications-With-Electron-Meteor.html
https://forums.meteor.com/t/electrometeor-desktop-applications-w-electron-meteor/3768/2

[engelgabriel]

I have tried to follow this guide

I am trying to do too many things at once.. I've just noticed the link now... stupid me.

[engelgabriel]

@edoardocavazza can you add your shell script to the root directory on a PR?

[engelgabriel]

Maybe meteor build . --server $url should be meteor build . --mobile-server $url to solve the issue with the /sockjs/info url?

[edoardocavazza]

It seems that --mobile-server is not a valid flag for meteor build, it is not working for me :(

[engelgabriel]

i think it is just for meteor run :(

[engelgabriel]

I am not sure why we need to rename the JS and CSS files? Just a matter of taste?

[edoardocavazza]

ok, I have found out that the index.html used by the shell script won't work. I am trying to figure out how to dynamically create a new one. Once I have found a solution, I will PR the script!

[WhyNotHugo]

I'd really love to work on this, since I need something like this for a few projects (and I'd rather pick RocketChat instead of Slack, but the need for a native client is pretty strong).

My intention is to use Qt for this, to keep it simple and lightweight, but I'm not seeing any public API for RocketChat (and the README says it's in the roadmap). Is it still on the roadmap? Is anyone willing to pick up the API part if I'm to work on a native desktop client?

[WhyNotHugo]

Oh, I only just noticed that this issue's title doesn't match with what the README states (I got here by it). Maybe the README needs updating, or we need a separate issue for a 100% native client?

[Sing-Li]

@hobarrera Can Qt work with a 100% publish-subscribe API? That is, can the UI components sit idle pending incoming events/changes while yielding 100% to the OS without polling or freezing?

[WhyNotHugo]

@Sing-Li I don't see why not. Specifically, are we talking about http long-polling, or web-sockets?

[Sing-Li]

@hobarrera - it can be either, actually - because the engine underneath Rocket.Chat : Meteor, rides on sockjs and it adaptively uses either long-polling or websocket depending on the vintage of the client's browser.

In any case, if Qt can handle pub-sub, then the 'API' is essentially already in-place. Because all that Rocket.Chat is, on a server-data level, is this set of Collections. And also their changes over time (addition, deletion, mutations, and so on) conveyed via messages over sockjs using the DDP protocol.

So you can data-bind the Qt widgets to the collections, init the 'app', prime your subscriptions, then just wait for published DDP messages. And hook in the business logic and app behavior depending on the incoming messages.

There are at least two github projects that has gone down this path: Qondrite and ddpcpp, perhaps making interfacing easier.

There are really no simple choice for a native client because:

• any REST or REST-like API will make the client second-class citizen due to the push to pull+poll conversion
• any websocket based API will just duplicate DDP and introduce an additional point of failure; not to mention async websocket protocols like DDP takes a long long time to mature and perfect (over 3 yrs in Meteor's case)

[guarilha]

@Sing-Li - I agree the current API format is good enough to create an alternative front-end as @hobarrera intends. But as Slack points out:

The Slack APIs allow you to integrate complex services with Slack to go beyond the integrations we provide out of the box.

Even though the back-end has an API in place, a more friendly way of interacting with Rocket Chat could really help the project gain more adoption. I'm one that's waiting the REST API before I can deploy RC at my company.

Anyway, there's meteor-rest -- a set of packages that makes it easy to make your Meteor app's data accessible over HTTP -- that could be of some help.

[Sing-Li]

@guarilha - I would agree 100% re: REST API for external integrations (or 'complex services'). My comments are specifically directed towards an 'alternative native client' implementation.

[engelgabriel]

We will move the work on the Native Cross-Platform Desktop Application via Electron to
https://github.com/RocketChat/Rocket.Chat.Electron

If anyone wants to join the DesktopApp team, let me know.