TECH TALK sATURDAY:

ELECTRON 

BLACKGIRLSCODE(2)


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



				

				

					
				

			

		

	


	

		

		

			
ELECTRON.07.28

			
By erica mitchell

		

	


	

		

		

			

			

		

	








	

		

			

					

						Made with Slides.com
					

				

					
					
				

			


			

				
				
			

		


		

			
		


		


		

			

				
ELECTRON.07.28

				
    
					
  • 
						
						
					
    • 
					
  • 
						
						
					
    • 
					
  • 
						
						709
					
    • 
				

			


			

			

		

	


	

		
More from erica mitchell