In Développement Dernière mise à jourated:
Partager sur:
Cloudways propose un hébergement cloud géré aux entreprises de toutes tailles pour héberger un site Web ou des applications Web complexes.

JavaScript fait partie des langages de programmation les plus courants. Le fait qu'il puisse être utilisé à la fois pour le développement backend et frontend en a fait un chouchou pour de nombreuses personnes. 

JavaScript a beaucoup bibliothèques et des frameworks qui étendent ses cas d'utilisation au-delà du JavaScript vanille (simple).

Electron.js est un puissant framework open source qui donne aux développeurs Web la possibilité de développer des applications natives avec leurs compétences existantes. Cet article vous expliquera Electron.js et comment il peut être utilisé pour alimenter votre prochaine idée incroyable.

Électron JS

Électron JS est un framework que les développeurs peuvent utiliser pour créerate applications de bureau utilisant HTML, CSS et JavaScript. Electron JS a été crééated et est entretenu par GitHub

Le cadre est un blend of Node.JS et Chromium, permettant aux utilisateurs de conserver une base de code JavaScript et de développer des applications croisées.platcréer des applications de bureau pouvant fonctionner sur Windows, macOS et Linux. 

L'histoire d'Electron.js a commencé en janvier 2013. L'idée originale était de créerate à travers-platéditeur de texte de formulaire pouvant fonctionner avec JavaScript, HTML et CSS. 

Electron.js était à l'origineally nommé Atom Shell et rendu open source en 2014. Le projet a été later renommé Electron en avril 2015 et sa première API a été publiée en 2016. 

Caractéristiques d'Electron JS

  • Compatible avec toutes les bibliothèques et frameworks JavaScript. Vue.js, angulaire et React.js ne sont que des exemples de frameworks JavaScript que les développeurs peuvent utiliser avec Electron JS. Cette compatibilité facilite l'utilisation des caractéristiques/fonctionnalités de ces bibliothèques et frameworks lors de la création d'une application Electron. 
  • Hommesable cadre. Caterépondre aux besoins de différents clients peut coûter cher. L’avantage d’Electron JS est qu’il peut être utilisé à la fois pour les applications Web et de bureau. La base de code unique signifie qu'il peut également être utilisé sur différents systèmes d'exploitation. 
  • A accès aux API natives. Les développeurs travaillant sur Electron JS ont accès aux API natives des systèmes d'exploitation sur lesquels ils opèrent. Les développeurs peuvent ainsi créerate applications de bureau qui ont un accès similaire à des fonctionnalités de bas niveau, comme l'affichage de notifications. 
  • Prend en charge la technologie Web. Electron JS est adaptable, car les développeurs n'ont pas besoin d'apprendre un nouveau langage de programmation pour développer des applications. Cela signifie donc que si vous comprenez un certain module linguistique que vous utilisez déjà pour créerate applications Web, vous pouvez également l'utiliser pour créerate une application de bureau. 
  • Gestion du code et des applications. Vous n'avez pas besoin de gérer différentes équipes pour gérer les applications et le code pour différents systèmes d'exploitation. Electron JS vous permet de conserver la même base de code pour Linux, Windows et les systèmes d'exploitation Mac. 
  • Construction/déploiement facile. Le gestionnaire de packages Electron aide les développeurs à intégrer leurs packages respectifs. Vous pouvez ainsi publier un Linux, un Mac et Windows application de bureau à partir de la même base de code à l’aide de ce gestionnaire de packages. 

Architecture Électronique JS

L'architecture d'Electron est très similaire à celle d'un site Web moderne.rowseuh car il hérite de son multi-process architecture de Chrome.

Composition d'architecture d'ElectronriseMoteur JavaScript V8, Node.JS et Libchromiumcontent.

  • Node.JS– un runtime JavaScript open source qui s'exécute sur le moteur JavaScript V8. Node.JS permet aux développeurs d'exécuter JavaScript en dehors d'abrowser window. Node.JS permet également aux utilisateurs d'exécuter du code JavaScript brut via son shell interactif.
  • Teneur en chrome Lib- une bibliothèque de rendu Chromium open source et gérée par Google Chrome. Chrome a une interface utilisateur minimaliste et utilise Blink comme moteur de mise en page et V8 comme moteur JavaScript. 
  • Moteur JavaScript V8– un moteur JavaScript open-source écrit en C++ et JavaScript et développé par Google. 

Outils de création d'applications Electron JS

# 1. Node.js

Pour démarrer avec Electron JS, vous devez avoir Node.js installé sur votre machine locale. 

Sélectionnez la bonne version de nœud en fonction du système d'exploitation que vous exécutez sur votre ordinateur. 

Vérifiez si Node.js a été installé correctement en exécutant ces commandes ;

node -v
npm -v

Si elles sont installées correctement, ces commandes afficheront respectivement les versions node et npm. 

# 2. Ligne de commande 

Comment accédez-vous au ligne de commande dépendra de votre système d'exploitation. 

  • Linux dépendra de la distribution.
  • Windows : PowerShell ou invite de commande.
  • macOS : terminal.

Certains éditeurs de code, tels que Visual Studio Code, sont livrés avec une intégrationateborne d. 

# 3. Éditeur de code

Vous avez besoin d'un éditeur de code pour écrire votre code Electron JS. Visual Studio Code est parmi les meilleurs que vous puissiez essayer. 

Comment installer Electron JS

Étape 1: Create un projet node.js.

Utilisez ces commandes pour commencer ;

mkdir my-electron-app && cd my-electron-app
npm init

La commande npm init vous demandera de remplir certains champs, tels que le nom de l'application, le point d'entrée et description.

Vous pouvez choisir le nom par défaut de votre dossier comme nom de votre application. Cependant, n'oubliez pas de définir le point d'entrée de votre application sur main.js.

Des champs tels que auteur et descriptL'ion peut prendre n'importe quelle valeur. Votre package.json ressemblera à ceci une fois que vous aurez terminé ces étapes :

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Étape 2: Installer l'électron

Utilisez cette commande ;

npm install --save-dev electron

Étape 3:Ajoutez la commande 'start' à votre package.json

{

  "scripts": {

    "start": "electron ."

  }

}

Étape 4: Démarrez votre application

Utilisez cette commande pour démarrer votre application en mode développement

npm start

Electron JS fonctionne Process

Nous continuerons à créer l'application à partir de la configuration que nous venons de créer ci-dessus. Une application Electron a deux types de processoui; principal et moteur de rendu. 

Le principal Process

Le script principal est le point d'entrée de toute application électronique. L'application s'exécutera dans un environnement Node.js complet. Electron recherchera le script principal dans le fichier package.json que vous avez déjà configuré lors de l'échafaudage de l'application. 

Create main.js dans le dossier racine pour initialiser le script principal. Tu peux le faire manuellementally ou utilisez cette commande ;

touch main.js

Vous pouvez ajouter le code suivant au main.js 

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

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

 win.loadFile('index.html');

};

app.whenReady().then(() => {

 createWindow();

 app.on('activate', () => {

   if (BrowserWindow.getAllWindows().length === 0) {

     createWindow();

   }

 });

});

app.on('window-all-closed', () => {

 if (process.platform !== 'darwin') {

   app.quit();

 }

});

Les pages Web d'Electron peuvent être chargées à partir d'une adresse Web distante ou d'un fichier HTML local. Nous utiliserons un fichier HTML local à des fins de démonstration. 

Create un fichier index.html dans votre dossier racine. Le code pour index.html est toujours fourni, mais vous pouvez l'avoir comme code de démarrage ;

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <meta

     http-equiv="Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <meta

     http-equiv="X-Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <title>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="./renderer.js"></script>

</html>

Renderer process

Le moteur de rendu restitue le contenu Web. Les scripts de préchargement sont livrés avec du code qui s'exécute dans un moteur de rendu process avant que le contenu Web ne commence à se charger sont nécessaires.

Create preload.js sur votre dossier racine et ajoutez ce code ;

window.addEventListener('DOMContentLoaded', () => {

  const replaceText = (selector, text) => {

    const element = document.getElementById(selector)

    if (element) element.innerText = text

  }

  for (const type of ['chrome', 'node', 'electron']) {

    replaceText(`${type}-version`, process.versions[type])

  }

})

Exécutez le serveur de développement à l'aide de npm start, et voici ce qui s'affichera 

Exemples d'applications : Electron JS

# 1. Slack application de bureau

Slack est l'un des plus populaires outils de collaboration à distance. Les utilisateurs peuvent envoyer et recevoir des messages, passer des appels et partager des fichiers à l'aide de cette application. Slack propose des applications Web et de bureau sur Mac, Linux et Windows systèmes d'exploitation. SlackL'application de bureau de utilise le moteur Chromium et Node.js pour restituer un code de haute qualité. 

# 2. Application de bureau WordPress

Outils de gestion est le plus grand système de gestion de contenu. Le fait que vous puissiez lancer un site Web même sans compétences de base en codage a attracted de nombreux utilisateurs. WordPress est accessible via le browser et via des applications de bureau sur Mac, Linux et Windows. La revLe bureau WordPress amplifié utilise Electron JS. 

# 3. Application de bureau WhatsApp

WhatsApp fait partie des applications de messagerie les plus populaires du monde moderne, car elle est utilisée par plus de 2 milliards de personnes. WhatsApp était l'origineally conçu comme une application mobile, mais est maintenant devenu une application multi-appareils platformulaire. Le bureau WhatsApp utilise Electron JS et est disponible sur les principaux systèmes d'exploitation. 

# 4. Visual Studio Code

Visual Studio Code, propriété de Microsoft, fait partie des éditeurs de code les plus populaires. Visual Studio Code prend en charge HTML, CSS et le code écrit dans divers langages de programmation tels que JavaScript, Python, PHP, Java et Ruby, pour n'en citer que quelques-uns. L'application de bureau, crééeated utilisant Electron JS, est disponible pour Windows, Mac et Linux. 

Ressources d'apprentissage : Electron JS

# 1. Documentation officielle d'Electronjs

Documentation Electronjs est created et maintenu par Electronjs.org. Vous apprendrez ce qu'est Electron JS, comment configurer votre première application Electron et comment créer des applications croisées.platcréer des applications de bureau en utilisant diverses technologies. La documentation est toujours mise à jourated chaque fois qu'une amélioration ou une nouvelle fonctionnalité est introduite. 

# 2. Master Electron : applications de bureau avec HTML, JavaScript et CSS

Maître Électron est un cours payant sur Udemy qui vous présente Electron JS. Vous apprendrez à créerate applications de bureau pour différents systèmes d'exploitation, tels que Mac, Linux et Windows. Master Electron est également la ressource idéale si vous souhaitez comprendre l'intégralité de l'API Electron process. 

# 3. Tutoriel de réaction électronique 

Réaction électronique est un cours payant sur Udemy qui enseigne aux développeurs comment créerate Applications électroniques utilisant React.js. React est l'une des bibliothèques JavaScript les plus célèbres et a été crééeated par Meta (anciennement Facebook). 

Récapitulation

Electron JS est une superbe bibliothèque JavaScript permettant de créer des applications de bureau dans un monde moderne oùplatles applications de formulaire doivent être adoptées. Le fait que vous puissiez utiliser HTML, CSS et JavaScript signifie que les développeurs n'ont pas besoin d'apprendre de nouvelles piles technologiques pour créer des applications.ate de telles applications. La présence d’une communauté nombreuse et solidaire est également un plus, car vous êtes toujours assuré d’un soutien. 

Vous pouvez également explorer certains meilleurs frameworks JavaScript pour construire une application moderne en moins de temps.

Partager sur:
  • Titus Kamunya
    Auteur
    Titus est ingénieur logiciel et technique Writer. Il développe des applications Web et écrit sur SaaS, React, HTML, CSS, JavaScript, Ruby et Ruby on Rails.

Merci à nos commanditaires

Plus de bonnes lectures sur le développement

Alimentez votre entreprise

Certains des outils et services pour aider votre entreprise grow.
  • L'outil de synthèse vocale qui utilise l'IA pour générerate des voix humaines réalistes.

    Essayez Murf AI
  • Web scraping, proxy résidentiel, proxy manager, web unlocker, moteur de recherche et tout ce dont vous avez besoin pour collecter des données Web.

    Essayez Brightdata
  • Monday.com est un système d'exploitation de travail tout-en-un pour vous aider à gérer les projets, les tâches, le travail, les ventes, le CRM, les opérations, workflowset plus encore.

    Essayez Monday
  • Intruder est un scanner de vulnérabilités en ligne qui détecte les failles de cybersécurité de votre infrastructure, afin d'éviter des violations de données coûteuses.

    Essayez Intruder