An Interest In:
Web News this Week
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
Some of Our Sources
- Slashdot
- Joshua Blankenship
- Pearsonified
- Creative Curio
- Fuel Your Creativity
- Inspiredology
- Web Designer Depot
- Line 25
- Web Resource Source
- Dev To
Help Webnuz
Referal links:
Intro To ElectronJS
What Is ElectronJS?
ElectronJS is an open-source framework that allows developers to create cross-platform desktop applications using web technologies such as HTML,CSS, and Javascript. It was developed and released by GitHub in 2013 and has since gained immense popularity among developers due to its ease of use and the ability to create high-performance applications that run on Windows, macOS, and Linux.
What Is ElectronJS Known For?
One of the most significant advantages of ElectronJS is that it allows developers to create desktop applications with a web-based front-end. This means that developers can use the same web development skills they already have to create a powerful desktop applications that work seamlessly across different operating systems.
Another key advantage of ElectronJS is that it provides access to powerful native APIs that allow developers to create feature-rich applications. Developers can use these APIs to access the file system, manipulate windows, create system tray icons, and much more.
When Was ElectronJS Released?
ElectronJS was originally released as "Atom Shell" in 2013 by GitHub. The goal was to create a desktop application framework that could be used to build the Atom code editor. In 2016, Atom Shell was renamed to ElectronJS and released as an open-source project.
Some Apps Made With ElectronJS
ElectronJS has been used to create many popular desktop applications. Some of the most well-known applications built using ElectronJS include:
- Visual Studio Code - A popular code editor
- Slack - A collaboration tool for teams
- Discord - A voice and text chat app for gamers
- Atom - A customizable text editor
- Skype - A communication app for voice & video calls
- Postman - A popular API development tool
- GitHub Desktop - A graphical user interface for Git
- Trello - A productivity tool for organizing tasks and projects
- Microsoft Teams - A communication and collaboration platform
- Figma - A collaborative design tool for creating user interfaces and prototypes
Using ElectronJS
ElecetronJS is relatively easy to use, especially for developers who are familiar with web development. Because ElectronJS uses web technologies, developers can use the same tools and libraries they already know to create desktop applications! Additionally, ElectronJS provides a ton of built-in features and APIs that make it easy to create powerful applications quickly.
Lets Create A Quick Desktop App
Here we'll go through a quick setup for a desktop app that is a good start to being introduced to ElectronJS.
First, we need to create a new directory and initialize it with a package.json file:
mkdir hello-worldcd hello-worldnpm init -yNext, we need to install ElectronJS as a dependency:
npm install electronNow we can create our main.js file which will contain the code for our window:
First: touch main.jsInsert into main.js: const { app, BrowserWindow } = require('electron')function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html')}app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() })})app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit()}) This code sets up a new ElectronJS application with a main window that is 800 pixels wide and 600 pixels tall.
It also loads an HTML file called "index.html" into the window.
We can create this file in the same directory and add the following code:
Create index.html: touch index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body></html>In your package.json you want to add a script to start your application:
"start": "electron ."When we run this command, we should see a new window appear with the text "Hello World!" displayed in the center.
Conclusion
ElectronJS is a powerful and versatile framework that allows developers to create high-performance desktop applications using web technologies. It gives developers are easy transition into creating desktop apps, seeing that ElectronJS was a large part of some of the day to day applications us developers use it shows us that we too are capable of creating amazing applications as well.
Original Link: https://dev.to/itsbrotherdan/intro-to-electronjs-nne
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To