ES6 & BEYOND


@duggiemitchell

WELCOME!


Wi - Fi:
USERNAME | 
PASSWORD | 

WELCOME!

Please download workshop files here: 

https://github.com/blackgirlscode/electron-demo





ERICA MITCHELL

FRONTEND DEVELOPER

DUGGIEMITCHELL.GITHUB.IO

@DUGGIEMITCHELL


Node.js frameworks


NW.js

Nodejs + chromium 


Electron

io.js + chromium 

what is electron?

A framework for building desktop applications using web technologies.

electron


WEB TECHNOLOGIES

HTML, CSS, JS



NO NATIVE SKILLS

...unless you want to

how does it work?


Chromium web rendering and embedded Nodejs

PREREQUSITES

NODE


JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 

NPM


  Largest package ecosystem of open-source libraries in the world.


electron


AUTOMATIC UPDATES 
WIN INSTALERS
NO CONFIGURATION

MADE WITH ELECTRON


  





THE MAIN PROCESS



ipc (communicate between processes)
Browser-Window
Nodejs
dialog

Render process

web page 

ipc (communicate between processes)
DOM
Nodejs
web-frame



..... Can  have mutliple render processes at a time

minimal electron application

package.js -> MAIN.JS -> INDEX.HTML





package.json


 { 
   "main": "main.js"
 }

main.js (Main process) 


const electron = require('electron');
const {app} = electron;

let BrowserWindow = require('browser-window');
app.on('ready', function() {
  mainWindow = new BrowserWindow(
    { width: 500,
      height: 300})
});

index.html (render process)

 <html>
  <head>
   <body> 
     <h1>Hello, Beautiful</h1>
   <script>
    window.onload = function() {
      var fs = require('fs')
      var p = document.createElement('p')
      p.textContent = fs.readFileSync('file.txt')
      document.body.appendChild(p)
  </script>




Global Electron





 npm install -g electron-prebuild --save -dev







let's see some code!!
THANK YOU!





TO LEARN MORE VISIT 





http://learn.shayhowe.com/advanced-html-css



			

		


		    Made with Slides.com