Lesson-05.md

FEW 2.4 Class 4 - Electron Lab

Debugging Electron.

Communication between the Main Process and rendering Processes.

Learning Objectives

1. Identify problems
2. Create solutions
3. Use CSS to create user interfaces
4. Implement communication between main and rendering processes

Initial Exercise

• CSS and UI issues
  • forms elements
• Electron Options
  • Size of Window
  • Saving data

Main Process vs Rendering Process

• What is the main process?
• What is the rendering process?
• Creating communication between the two

Review CSS Grid and Flexbox

Use Grid for two dimensional layouts and Flexbox for arranging things on a single axis.

Both are applied to a parent container and affect the children.

You can use Flex box inside a grid or one grid within another grid.

• Use Grid for two dimensional layouts.

• Use grid-template-area for arbitrary layouts use grid-template-columns for dynamic content.

• Use Flexbox for one dimensional layout

• Use think in terms of main axis and cross axis

After Class

• Wrap up the Electron project. You should have a functional Electron application that runs on the desktop.

Additional Resources

• Electron Passing Data Demo
• ipcRenderer
• ipcMain