Exploring Electron – framework for cross platform desktop apps in HTML, CSS & JS

This is small blog about Electron which I have just started exploring and getting to know the ropes. This is not intended to be a tutorial or something.

What is Electron?

Electron is an Open source framework, that is built on top of Chromium and NodeJs, which enables one to build native & cross platform desktop applications with HTML, CSS & Javascript (hottest celebrities of the web 😉 😉 ). Yes! you heard it right, electron allows you to build applications for Linux, Windows and Mac OS.

How to get started with Electron?

There are different ways in which you could get check out the demos,

  • Write a simple “Hello World” application from the official quick start guide is here
  • Clone the Electron quick start gihub repo and follow the instructions
  • Download the pre-built platform specific packages, extract and run the executable (the name should be “Electron API Demos”) from here

How does it look like after the demo?

I launched Electron in two flavors,

  • Launching from the pre-built package for my platform (GNU/Linux)
  • Installed Electron binary, wrote the demo code and launched the app

What more does Electron offer?

As of now, the community is actively developing and a lot useful packages and plugins ranging from,

  • code to generate boilerplate
  • package the app based on platform & architecture
  • create installer binaries
  • Test the application
  • Debug tools and so on.,

You could find the list here.

Views on Electron

From using it for the past couple of days, I should say I am really impressed about what this framework is and what it can do. Already a lot of apps have been developed and among them being WebTorrents-Desktop A framework like this will definitely enable programmers to create some cool applications with web tools and development won’t be limited to other languages which are being used currently. Hoping to explore more and come up with some apps for the community.

Find the list of apps currently developed here.

Advertisements

WebTorrent and my experience with it

     This is my experience from using WebTorrents platform to share media and files across. This is not a tutorial and I will point to the standard one.

What is WebTorrent?

     WebTorrent is a torrent client written in Javascript and build on top of WebRTC protocol which brings torrents to the browser. What? Did you just say to the browser? Yes, that’s right. First, lets see what torrents are in general and how we use them currently.

What is a torrent?

When we hear the word torrent we think of download movies, music, documents and games illegally. But, it is much more than that and its one of the best protocols out there.

     BitTorrent is a peer-to-peer file sharing protocol, were we share files to & from people (peers) around the world in a decentralized way. As opposed to downloading files from a FTP server which sends out the same copy to everyone, we share it with each other.

How torrent works?

To understand how this happens, lets take the example of downloading an ISO file of any GNU/Linux distribution and see what happens,

Torrent creation

The torrent uploader creates the torrent file with the some metadata like,

  • Name of the file
  • How many pieces the torrent has
  • Cryptographic hash of the torrent file and those individual pieces
  • Tracker address and so on
  • Starts uploading it
  • The uploader can stop seeding after the complete file with at least one other peer

Torrent download

  • You download the torrent file or magnet uri from the website
  • You open it with your favorite torrent client program like Transmission, Deluge, uTorrent, Vuze, etc.,
  • The client reads the metadata from the torrent and contacts the trackers (computers that have details about what files are being shared and the peers that share them) to find out which peers (seeders) have the file you are downloading
  • Once the tracker gives the information, the client then directly contacts that peer and asks for piece(s) of the file
  • Once, the client software has all the pieces it reassembles them like a jigsaw puzzle to produce the original file

The beauty of torrents is that,

  • Its decentralized
  • No need to wait for the entire file to download, you can pause/resume whenever you like
  • Ease the bandwidth of the server and use it for other purpose
  • When there are more people sharing it the bandwidth is increased, because every new peer need not ask the same person for the file
  • It brings about the feeling of a community where people give and take what they need

WebRTC protocol

WebRTC is a Real Time Communication (RTC) by the W3C , which aims at enabling voice, video and p2p applications between browsers through simple API’s. The highlight of this protocol is that everything is built into the browser and you don’t need any specific plugins or softwares to be installed to use it.

Checkout the FAQ‘s of WebRTC.

How WebTorrent is different from BitTorrent?

  • WebTorrent is built on top of WebRTC implementation that is aimed at having a true open and free p2p platform for applications like video/voice calling and file sharing
  • You do not need any special software or plugin to use it. Any WebRTC compliant browser with WebTorrent client would be enough (there is beta version of WebTorrent Desktop client software available here)
  •  WebTorrent is much more similar to BitTorrent and differs only in the way peers connect and data transport
  • Apart from the above point, WebTorrent works the same as BitTorrent does
  • So, the existing BitTorrent client software could make a change to accommodate WebTorrent clients too

Checkout the FAQ‘s of WebTorrent.

Getting Started with WebTorrents

Checkout the official blog to get started with WebTorrent here.

Using WebTorrent

I used the  follow the setup to test WebTorrent,

  • TP-Link WR841N router flashed with OpenWrt 15.05.1 and opentracker installed which is the torrent tracker
  • PC and Laptop running a GNU/Linux distro with WebTorrent-Desktop installed
  • I initially tried the following configurations,
    • Streaming between two WebTorrent-Desktop clients
    • Stream between BitTorrent client and WebTorrent-Desktop clients
  • Both configurations gave amazing results and helped me get a picture of what the concept is all about

Definitely looking forward to more from WebTorrent and WebRTC.

My experience with Mediagoblin application

     This blog is about my experience on installing and using Mediagoblin, which is a free software media sharing application.

Note: This is not a step by step tutorial and for that I would point you to the well written ones

What is Mediagoblin?

Quoting the official site,

MediaGoblin is a free software media publishing platform that anyone can run. You can think of it as a decentralized alternative to Flickr, YouTube, SoundCloud, etc.

Mediagoblin is,

  • free software – anyone can use, share, modify the software to suit their needs
  • decentralized – you can host your own instance of Mediagoblin or connect to other instances running around the world

Issues faced during installation

    I was always wondering if there was free software alternative to YouTube, Vimeo, etc., to share media. When I heard about Mediagoblin I got so much excited like a kid and wanted to get it up and running on my machine ASAP. That was my issue – need something so fast but without patience is not good and I messed up the installation the first time.

     But, after taking my time to get through the code, configurations and understanding how things came by was a real eye opener. I was able to fix them and got an up and running instance of Mediagoblin. So, I would suggest people who would like to install be patient while going through the installation instructions and don’t let the excitement ruin it.

     While installation I faced  issues ranging from dependencies to permissions and I have listed them out below,

Virtual environment issues

     The mediagoblin installation comes with an in-house virtualenv were a local python environment (directory named “bin”) is created in the root of mediagoblin directory to install all the dependencies. This might seem useful at first but once you want to remove mediagoblin and reinstall again, you would have to install those dependencies again. So, I would suggest using virtualenv or virtualenvwrapper to handle the environments.

Python dependency issues

     Mediagoblin uses easy_install for installing all the python dependencies into the virtual environment. While doing so, I ran into the error

raise DistributionNotFound(req)
pkg_resources.DistributionNotFound: sqlalchemy

Here “sqlalchemy” is the dependency that couldn’t be found by installer. So, after looking at the trace I found out that while trying to install “sqlalchemy_migrate”, it was dependent on “sqlalchemy”. So, I was wondering what could go wrong with that, since we used to install them all the time like “pip install some_package”. But, it looked like the format in the requirements given in the egg package was incorrect.  For example, you have to edit the requires.txt from the “sqlalchemy_migrate” egg package,

/var/lib/mediagoblin/.virtualenvs/mediagoblinenv/lib/python2.7/site-packages/sqlalchemy_migrate-0.10.0-py2.7.egg/EGG-INFO/requires.txt

Media type dependency issues

For audio and video media types, you need to have all the necessary libraries installed. During installation you won’t find any issue and when you start adding media exceptions will be thrown. This is briefly mentioned in the official blog here.

Issues running MedigaGoblin with Nginx

     Initially, I had the mediagoblin directory in /var/www or /srv/ directories which didn’t give any issues when accessing it from nginx. But, I usually have the projects in my home directory and I thought of doing the setup there and giving a symbolic link to the above directories. But, I failed to have the necessary permission to the directories and got permission denied errors while launching. So, make sure necessary folder & file permissions are set.

These are some of the issues I faced during installation.

Experience using MedidaGoblin

     I used mediagoblin for sometime and I should say that it is something different. It provides the ability to upload media types like Video, Audio, Raw image, Ascii art, STL/3d models, PDF and Document.

     I would say I like it just because of the fact that it is free software. We have the choice to improve the way it looks and way it operates. Though mediagoblin doesn’t attract me much because I am so much used YouTube, but in terms of philosophy it definitely got me thinking otherwise. Hope people would use it  and try to contribute and making it better.

Autostart scripts for MediaGoblin

    Joar Wandborg has written excellent init scripts to automate the task of starting or stopping mediagoblin here.

     The default scripts assumes that the python environment is in the directory where mediagoblin is installed and will be used as the python path. So, I modified the script to add a new variable that would point to the path where you can specify the python environment location. The script would use it if its present or fallback to the default configuration. You can find the github repo here.

Installation links

  • For the official installation for MediaGoblin 0.9 check here
  • There is another well written blog for step by step installation here