Atom-shell, javascript everywhere!
Depuis quelques jours, la release publique de Atom lâĂ©diteur de code de GitHub est disponible. Atom, câest un ide lĂ©ger (Ă©diteur de code) Ă la SublimeText qui a comme spĂ©cificitĂ© dâĂȘtre dĂ©veloppĂ© en javascript, basĂ© sur node.js et Chromium, avec la possibilitĂ© de dĂ©velopper âautourâ en Coffeescript (donc faire des plugins), mais aussi en javascript. Certes, Atom nâa pas la vĂ©locitĂ© dâune application dĂ©veloppĂ©e âtout en C++â, mais je trouve, Ă la vue de ses capacitĂ©s que câest Ă lui tout seul un cas dâusage dĂ©montrant que lâon peut aller trĂšs loin en javascript.
Mais ce que je trouve encore mieux, câest que parallĂšlement, GitHub a publiĂ© Atom-shell : le framework de base qui a permis de dĂ©velopper Atom. Cela signifie que vous avez Ă votre disposition les outils nĂ©cessaires pour faire des applications desktop âĂ la Atomâ.
Dâautres projets de ce type existent, notamment Node-Webkit qui Ă©tait dans la place avant Atom-shell et qui nâen nâest pas moins intĂ©ressant, reposant sur les mĂȘmes composants, et le projet est toujours trĂšs actif.
Je vous explique donc rapidement comment vous pouvez faire une application avec Atom-shell. Pour démarrer, il vous faut node.js, npm et Grunt.
Initialisation de lâapplication et installation dâAtom-shell
Commencez par créer un répertoire myatom avec un sous-répertoire build et un sous-répertoire myatom-app. Ensuite dans le sous répertoire build, créez 2 fichiers :
package.jsonGruntfile.js
Contenu de package.json
{
"name": "myatom-app-atom-build",
"version": "0.1.0",
"devDependencies": {
"grunt": "^0.4.4",
"grunt-download-atom-shell": "^0.7.0"
}
}
Contenu de Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
"download-atom-shell": {
version: "0.12.3",
outputDir: "./atom-shell",
rebuild: true
}
});
grunt.loadNpmTasks('grunt-download-atom-shell');
};Installer Atom-shell
Dans votre terminal préféré, allez dans le répertoire build, et tapez les commandes suivantes :
npm install
Cela va télécharger les dépendances nécessaires, puis :
grunt download-atom-shell
Cela va dĂ©clencher la tĂąche Grunt qui va tĂ©lĂ©charger les ressources nĂ©cessaires dâAtom-shell.
Remarque : jâavais dĂ©jĂ Atom installĂ©, mais il semblerait quâil faille le âAtom Package Managerâ pour que la commande Grunt fonctionne. Merci Ă Roderik van der Veer pour lâinformation :).
Au bout de quelques instants vous aurez 2 nouveaux répertoires dans votre répertoire build :
build/
âââ node_modules/
âââ atom-shell/
CrĂ©er lâapplication
Donc normalement, vous devez avoir une structure de répertoires comme celle-ci :
myatom/
âââ build/
| âââ node_modules/
| âââ atom-shell/
âââ myatom-app/
Créez dans le répertoire myatom-app 3 fichiers :
package.jsonindex.htmlmain.js
Contenu de package.json
Vous précisez dans ce fichier le nom du script principal de votre application : main.js
{
"name": "myatom-app",
"version": "0.1.0",
"main": "main.js"
}
Contenu de index.html
Aujourdâhui, nous allons rester simple :
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Contenu de main.js
LĂ nous avons un peu plus de choses :
var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');
var dialog = require('dialog');
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 320, height: 200});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
var templateMenu = [
{
submenu: [
{
label: 'Quit',
accelerator: 'Command+Q',
click: function() { app.quit(); }
}
]
}
];
menu = Menu.buildFromTemplate(templateMenu);
Menu.setApplicationMenu(menu);
});Ă retenir : var BrowserWindow = require('browser-window'); sert Ă crĂ©er la fenĂȘtre native du navigateur, donc la fenĂȘtre principale de votre application, celle dans laquelle sera chargĂ©e la page index.html
Lancez la bĂȘte!
Dans votre répertoire myatom, lancez la commande :
./build/atom-shell/Atom.app/Contents/MacOS/Atom ./myatom-app
Et votre killer app apparaĂźt \o/:
Câest fini pour aujourdâhui, mais vous pouvez aller lire la documentation : https://github.com/atom/atom-shell/tree/master/docs
Tweet