Electron - basic work

1. Nikolaenko Stanislav
GitHub: https://github.com/Nikolaenko94
Skype: grot_cs5

2. Creating cross-platform applications
is easier than you think

3. Creating cross-platform applications
is easier than you think

4. What is Electron?

5. What is Electron?
A framework for building cross platform Desktop
Application using web technologies

6. Electron technology

7. Whats under the hood?

8. Whats under the hood?
+ =

9. Electron technology:

10. Cross platform
Windows, Linux, Mac OS

11. History of creation

12. Electron was written in 2013 as the framework for
creating Atom, a text editor from GitHub

13. Electron and Atom were released in the spring of 2014

14. Using Electron, such popular
applications have been created as:

15. Electron is supported by the GitHub team, as well as
by a group of active community members

16. Electron Development Technology

17. Using Electron is easy to do:

18. Using Electron is easy to do:
- automatic update of your application;

19. Using Electron is easy to do:
- automatic update of your application;
- Creating an application menu, context menu and
notifications;

20. Using Electron is easy to do:
- automatic update of your application;
- creating an application menu, context menu and
notifications;
- sending error reports to a remote server;

21. Using Electron is easy to do:
- automatic update of your application;
- creating an application menu, context menu and
notifications;
- sending error reports to a remote server;
- search for performance bottlenecks and slow
operations;

22. Using Electron is easy to do:
- automatic update of your application;
- creating an application menu, context menu and
notifications;
- sending error reports to a remote server;
- search for performance bottlenecks and slow
operations;
- the creation of installers.

23. Official page: electronjs.org

24. Work with Electron

25. To work,you need:
- Node.js
- NPM
- Any code editor
- Basic command line knowledge of your system

26. Configure Windows To Work With
Electron
Electron works with Windows 7 and higher

27. Work with windows
Step 1:
Install the latest version of Node.js and npm

28. Step 1
Check that everything works
- output the version of nodejs in the console: node -v ;
- output of the npm version in the console: npm -v ;

29. Step 2
Creating folder for Electron application:

30. Step 2
At the command line, use npm init from the folder
created earlier

31. Step 2
A er installation, the base package.json file should
appear

32. Step 2
A er installing package.json, in the main field is
written the start script for your application, which will
start the whole process.

33. Step 2
Create a Start script to execute the current package

34. Step 2
Turning such a Node application into Electron is very
simple.
You must replace the node in the start field with
electron.

35. Electron installation
Step 3

36. Step 3
Running a command from the current directory:
npm install --save-dev electron

37. Step 3
Checking the finished directory

38. Electron Development
Step 4

39. Step 4
Electron API is accessible through the electron
module, which can be used like any Node.js module:

40. Step 4
The application life cycle is controlled through
electron.app, windows can be created using
electron.BrowserWindow class

42. Step 4
Create HTML page

43. Running Your App
Step 5

44. Step 5
Try your app by running npm start from your
application's directory

45. Congratulations.
The first Electron application created

47. THE END