Brackets : l'éditeur de code open-source d'Adobe

Anthony Nelzin-Santos |
Brackets est un nouvel éditeur de code signé Adobe. Particularité : il est open-source (licence MIT), et utilise les langages du web. Construit avec HTML, CSS et JavaScript, il permet ainsi de développer… en HTML, CSS et JavaScript.



Trois idées guident le développement de Brackets. La première consiste à minimiser au maximum l'interface pour laisser un maximum de place au code, et à éviter les allers-retours entre différents fichiers. Ainsi dans un fichier HTML, vous pouvez effectuer un Cmd + E à hauteur d'un élément pour convoquer le style CSS correspondant et le modifier — sans sortir de votre fichier HTML et naviguer dans vos feuilles de style, une fonction plutôt bien pensée.

La deuxième est la fusion de l'édition de code dans l'éditeur et de l'inspecteur de code dans le navigateur : Brackets peut contrôler le navigateur et le rafraîchir en temps réel au fur et à mesure des modifications, pour le transformer en aperçu en temps réel. Cliquer sur un élément dans le navigateur sélectionne l'élément correspondant dans Brackets, et vice-versa.



La troisième est le fait que Brackets est open-source : Adobe compte sur la participation de développeurs tiers pour faire évoluer son logiciel. Le code source de Brackets est disponible sur GitHub.
Tags
#Adobe #Développement Web #Adobe Brackets
avatar Shralldam | 
Adobe qui ouvre sa bracket, on aura tout vu ! Bon, je suis sorti ->[°]
avatar hadrien01 | 
J'aime bien le concept, mais il faut voir à l'usage. Si seulement ça pouvait réveiller les développeurs de Panic et MacRabbit...
avatar antoninGR38 | 
Nice, merci MacG pour l'info et merci Adobe pour cet outil prometteur :D
avatar hadrien01 | 
PS : le son "i" en anglais correspond au E. Donc le raccourci, c'est cmd+E
avatar Rigat0n | 
Le truc avec le CSS est une super idée, ça serait cool qu'on retrouve ça dans Coda.
avatar oomu | 
@hadrien01 [26/06/2012 11:15] Panic est un "dinosaure" ?
avatar Ali Baba | 
"Cliquer sur un élément dans le navigateur sélectionne l'élément correspondant dans Brackets, et vice-versa." Hum, si j'ai bien compris la vidéo, ça ça n'existe pas encore.
avatar nicolas | 
attention question de n00b est-ce que ça existe, des applications de dev web, avec les principaux moteurs intégrés (WebKit, Gecko) pour avoir un aperçu "temps réel" de tout ça. (autre qu'un WYSIWYG) sinon, quel WYSIWYG vous me conseilleriez, pour faire un site web simple + une version mobile?
avatar hadrien01 | 
Je viens de télécharger, la barre de menus est dans la fenêtre, comme sur Windows et certaines distribs Linux. Et l'application est en un seul morceau pour Mac, mais avec plein de DDLs pour Windows...Et le live-dev ne fonctionne que sur Chrome. Non seulement peu pratique, mais encore du webkit-only. Edit : l'interface s'inspire beaucoup de la vue projet de Espresso, et le live-edit ne fonctionne que pour le CSS.
avatar hadrien01 | 
@ nicolas : Aucun éditeur n'intègre à la fois Presto/Webkit/Gecko/... en même temps. Pour Gecko, le successeur de NVU fait plutôt bien son travail. Pour Webkit, j'utilise Espresso, mais Coda fait aussi du temps réel (je crois). Pour du WYSIWYG, il y a BlueGriffon, mais il fait un peu machine à gaz, sans un assez grand support du CSS (pour une police plus petite, il utilise une cinquantaine de balises small). Espresso contient un mode pour modifier le CSS sans en connaître la structure : https://www.macg.co/news/voir/206212/developpement-web-espresso-2-integre-css-edit-maj sur la capture en bas à droite. Ajout : Pour bien commencer un site, tu peux utiliser Twitter Bootstrap, qui te donne une "structure" toute faite en CSS. Tu écris de l'HTML, donc du texte, et il te crée un site avec une version responsive, c'est-à-dire qu'elle s'adapte à la taille de l'écran. Leur site fait office d'exemple et de documentation (essaye de redimensionner la fenêtre). Ajout 2 : Tutoreil vidéo sur http://www.grafikart.fr/tutoriels/html-css/bootstrap-twitter-182
avatar antoninGR38 | 
@nicolas J'aime beaucoup Espresso de Macrabbit. L'outil CSSEdit a un mode Live qui permet de répercuter à la volée les changement de propriétés CSS dans un navigateur intégré.
avatar Nicooprat | 
Mais qui utilise encore du CSS ? La vraie question qui se pose est l'intégration des préprocesseurs CSS tels que LESS, SASS ou Stylus...! Quelqu'un a testé ?
avatar hadrien01 | 
@ Nicooprat : Rien d'autre que du CSS. Et de toute façon, http://daneden.me/2012/05/preprocessors/
avatar v1nce29 | 
@hadrien01 > Et de toute façon, http://daneden.me/2012/05/preprocessors/ Mouais. Le paragraphe le plus pertinent est celui ou il avoue que ses arguments anti preprocesseurs sont faiblards.
avatar Domsou | 
@Nicooprat : J'utilises Espresso + Codekit. Certains sites sont avec LESS d'autres avec SASS afin d'essayer les 2 approches. Codekit rend le tout transparent.
avatar Almux | 
@Nicooprat Tout est dans le CSS... presque rien sur la page html...
avatar marc_os | 
Cmd + E c'est pas un raccourci déjà associé à une fonction précise dans les applications qui respectent les règles d'interface définies par Apple ? (cf. Cmd + G) Tant qu'à faire, ils auraient pu choisir aussi Cmd + C ou Cmd + F, voire Cmd + S (S comme Style), non ? :(
avatar Nicooprat | 
@all Ca sera difficile de me convaincre que les preprocesseurs CSS ne sont pas utiles ; suffit d'utiliser un peu Twitter Boootstrap par exemple pour se rendre compte de leur intérêt et de leur puissance. Après, qu'ils soient parfois mal utilisés... bien sûr, c'est comme tout. J'utilise moi aussi Codekit et je le recommande, dommage qu'il n'y ait rien pour Brackets pour l'instant ; bien que j'ai vu plusieurs issues / feature requests sur leur dépôt Github à ce propos...
avatar gto55 | 
qu'est ce que le SASS ou le SCSS ?? Est ce que vous auriez des exemples ? Merci :)
avatar Domsou | 
LESS et SASS sont des « surcouches » du langage CSS qui rajoutent des fonctionnalités intéressantes. On programme quasiment en CSS. Le fichier passe ensuite dans un « pré-processeur » qui génère le code final.

CONNEXION UTILISATEUR