Week 8: Building a Better Browser

Week 8: Building a Better (?) Browser

Today:

  • Check-in
  • Javascript/Node.js
  • Workshop: Getting started with Electron

Today’s Social Software: NPM

Talk / check-in

Introduction to Javascript ES6

ES6 conventions

Variables
let var;
const a_constant_variable;
Functions

Named function:

function doSomething( optional_passed_in_vars ){
  //function code
}

Anonymous Function:

runs once, usually ‘in place’

function(){ 
  //do stuff here 
}

Fat arrow functions:

() => {
  //function code
}


( passed_vars ) => {
  //function code
}

Putting it all together:

() => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
}

Electron

What is Electron?

Electron is a free and open-source software framework developed and maintained by GitHub.It allows for the development of desktop GUI applications using web technologies: it combines the Chromium rendering engine and the Node.js runtime. Electron is the main GUI framework behind several open-source projects including Atom, GitHub Desktop, Light Table, Visual Studio Code, Evernote, and WordPress Desktop.

Also: Discord, Slack, Whatsapp, Beaker Browser, Skype, Signal, Visual Studio Code, Etcher, Ramme (instagram on the desktop), and many others.

How does it work?

In short: it packages a website as an application, a full browser itself along with HTML, CSS, Javascript and Node.js for a specific app.

Advantages:

  • “write once, work everywhere”
  • use a language you already know
  • lots of learning / building resources and a community of people working with it

Disadvantages:

  • Not native-specific design
  • “Bloated” (packages an entire Chrome-based web browser, which may be redundant)
  • Security

Electron-Fiddle makes working with Electron easier.

Download Electron-Fiddle

Electron-Fiddle speeds up the build process even faster, with little usable snippets. Its essential components are Node.js, Chromium (Open source implementation of Google Chrome), and Electron.

Electron Applications

  1. Main process (main.js)
  2. HTML page (index.html)
  3. Preload script
  4. Renderer process (renderer.js)

You can save fiddle projects as a github gist (a single page of code) or output a binary executable application file.

Basics of Electron

Every Electron app starts with a main process, usually main.js

To display a GUI user interface the main process creates renderer processes – usually windows, which Electron calls BrowserWindow.

The default fiddle creates a new BrowserWindow and loads an HTML file, index.html

The index.html requires (pulls in) our renderer.js file using a <script></script> tag.

The renderer.js file contains node.js code. You can also require (pull in) additional NPM packages here and Fiddle will automatically install them.

Alternative browsers

Text browsers: I have installed these on anti-soft

  • w3m
  • links
  • lynx

Graphical browsers

Beyond Chrome, Firefox and Safari, there are many other browsers, including:

Falkon

Opera

Brave

Dillo

Resources

Homework

  1. Set up an office hours meeting with me to check in.

  2. Build a one-page application with Electron-Fiddle. It should be a website you consult all the time but would benefit from having its own special application. You may modify with HTML, CSS, Javascript, Node.js if you like. Save it to your own computer, and publish it as a gist. You do not need to upload to Moodle, but if you made something useful for others, put the link on Discord in #general. Get in touch with any questions, on Discord.

  3. Research and Write. Choose at least one of the other ‘alternative browsers’ to test out. You will likely need to install it on your computer, though feel free to delete it afterwards. Spend some time trying it out. Visit the website where it’s distributed and read about. What is the purpose of this web browser? Who builds it? Do they have a ‘roadmap’ for planned changes/updates? How do they accept or take bug reports? What kinds of help are they looking for on the project? What advantages and disadvantages does this browser have over other ones you may have tried? Post this to your blog.