URL: https://linuxfr.org/news/brackets-l-editeur-du-web-par-le-web-pour-le-web Title: Brackets : l'éditeur du web, par le web, pour le web Authors: etn jean-michel.bertrou.eu, Nÿco, Yves Bourguignon, Xavier Teyssier, olivierweb, Benoît Sibaud, DontShootMe et _jordan_ Date: 2013年08月18日T03:36:38+02:00 License: CC By-SA Tags: éthique, debian et firefox Score: 69 [Brackets] (http://www.brackets.io) est un éditeur de code dédié aux technologies web (HTML / CSS / JavaScript). Initialement développé par la société Adobe Systems, ce logiciel est publié sous [licence MIT] (https://github.com/adobe/brackets/blob/master/LICENSE). Le choix d'une licence libre représente une stratégie singulière pour l'entreprise Adobe, qui habituellement préfère les solutions propriétaires. ![Brackets : Coder le web](http://brackets.io/img/hero.png) Brackets se distingue aussi par son interface utilisateur [[WYSIWYM]]. Contrairement à [[Dreamweaver]] - l'actuel éditeur web phare d'Adobe, qui repose sur le paradigme [[WYSIWYG]] -, Brackets est avant tout un éditeur de texte : l'utilisateur modifie directement le code source. Enfin, le logiciel et ses [extensions] (https://github.com/adobe/brackets/wiki/How-to-write-extensions) sont développés en HTML, CSS et JavaScript. Brackets a ainsi pu être qualifié d'[éditeur qui pouvait s'éditer lui-même](http://korben.info/brackets.html). Pourquoi le choix de l'open source ? Pourquoi le choix du WYSIWYM ? Nous verrons plus loin que ces deux questions sont liées. Mais d'abord, voyons les fonctionnalités... ---- [Our web development workflow is completely broken (le problème à résoudre, Kenneth Auchenberg)](http://kenneth.io/blog/2013/05/21/our-web-development-workflow-is-completely-broken) [Le site officiel de Brackets](http://brackets.io/) [Lien direct vers la page de téléchargement](http://download.brackets.io/) [Projets OpenSource d'Adobe (github)](https://github.com/adobe) [Our web development workflow is completely broken (le problème à résoudre, Kenneth Auchenberg)](http://kenneth.io/blog/2013/05/21/our-web-development-workflow-is-completely-broken) ---- # Les fonctionnalités innovantes Brackets propose les fonctionnalités habituelles des éditeurs de code classiques : indentation, colorisation syntaxique, gestion d'onglets et de répertoires, etc., ainsi que des fonctionnalités plus innovantes. ## Quick Edit Le mode Quick Edit permet de naviguer rapidement entre les différents fichiers. Lorsque vous éditez un fichier HTML, sélectionnez une partie du code et appuyez sur Ctrl+E : votre fenêtre se divise en deux pour faire apparaître le code CSS correspondant. Couplée avec l'autocomplétion CSS et JS, cette fonctionnalité devient très pratique. ![Brackets : Quick Edit](http://img15.hostingpics.net/pics/328532Slection003.png) Voir la vidéo : http://www.youtube.com/embed/VKitqLpJtAY?t=42s ## Live HTML Development Une autre fonction originale de Brackets (par comparaison aux autres éditeurs de code) réside dans l'affichage en temps réel des modifications. Le développement « Live » permet d'actualiser automatiquement le navigateur au fur et à mesure que les modifications sont saisies dans l'éditeur. ![Brackets : Live HTML Development](http://img15.hostingpics.net/pics/747676Slection002.png) Voir la vidéo : http://www.youtube.com/embed/Nhvj1NYC3Uc ## Theseus [Theseus](https://github.com/adobe-research/theseus) est un débogueur JavaScript très puissant. Il permet de connaître _en temps réel_ le nombre d'appels (call) aux fonctions lors des événements. Il permet aussi d'inspecter les valeurs des paramètres ainsi que d'afficher l'arbre hiérarchique des appels. ![Brackets : Theseus](https://raw.github.com/adobe-research/theseus/gh-pages/screenshot.png) Voir la vidéo : http://www.youtube.com/watch?v=T6d5C3rLeFY ## Extensions Brackets propose aussi une large bibliothèque d'[extensions](https://brackets-registry.aboutweb.com/). On y trouvera l'inévitable générateur de [Lorem Ipsum](https://github.com/lkcampbell/brackets-lorem-ipsum), un [éditeur de regex] (https://github.com/peterflynn/brackets-regex-editor), un [valideur W3C](https://github.com/cfjedimaster/brackets-w3cvalidation), un [générateur de formulaires](https://github.com/mohammadyaghobi/Brackets-QuickFormTool)... Plus de 200 extensions sont disponibles. ![Brackets : gestionnaire d'extensions](http://img15.hostingpics.net/pics/886883Slection004.png) Installables directement depuis l'interface de Brackets, ces extensions seront amenées à évoluer et à se multiplier. # Une interface adaptée aux codeurs ## Les limites du WYSIWYG De nombreuses sociétés ont proposé des éditeurs web orientés [WYSIWIG](http://fr.wikipedia.org/wiki/What_you_see_is_what_you_get) (« What You See Is What You Get », que l'on peut traduire par « ce que vous voyez est ce que vous obtenez ») dont les plus connus sont : - [Microsoft FrontPage](http://fr.wikipedia.org/wiki/Microsoft_FrontPage) (propriétaire) - [Apple iWeb](http://fr.wikipedia.org/wiki/IWeb) (propriétaire) - [Adobe Dreamweaver](http://fr.wikipedia.org/wiki/IWeb) (propriétaire) - [BlueGriffon](http://bluegriffon.org/) (libre) Ces logiciels présentent l'avantage de permettre la création de pages web sans connaissance préalable du langage HTML. Ce choix présente toutefois un inconvénient majeur : le code généré est souvent redondant, mal structuré et peu sémantique. Ce qui se traduit par un coût de maintenance plus élevé, un référencement non optimisé et une accessibilité moindre. C'est pourquoi les utilisateurs avancés préfèrent généralement utiliser les logiciels en [WYSIWYM](http://fr.wikipedia.org/wiki/What_you_see_is_what_you_mean) (« What you see is what you mean », que l'on peut traduire par « Ce que vous voyez est ce que vous indiquez [codez] »). ## Les éditeurs de code actuels Les éditeurs de texte WYSIWYM, tels que vim ou emacs, sont destinés aux programmeurs ; ils permettent donc de modifier directement les fichiers destinés au web pour obtenir une qualité de code optimale. Toutefois, la plupart de ces éditeurs — et des [IDE](http://fr.wikipedia.org/wiki/Environnement_de_d%C3%A9veloppement_int%C3%A9gr%C3%A9) — sont conçus pour un grand nombre de langages de programmation et — contrairement à Brackets — ils sont peu adaptés aux spécificités du développement et de l'intégration web. Les développeurs / intégrateurs confirmés utilisent donc des logiciels généralistes, tels que [TextMate](http://fr.wikipedia.org/wiki/TextMate), [Sublime Text](http://fr.wikipedia.org/wiki/Sublime_Text) ou [Notepad++](http://fr.wikipedia.org/wiki/Notepad%2B%2B), qui pour la plupart sont propriétaires. ## L'optimisation pour le web Kenneth Auchenberg a publié le 21 mai 2013 un billet détaillé sur le système actuel de production web, qu'il considère caduc : [Our web development workflow is completely broken](http://kenneth.io/blog/2013/05/21/our-web-development-workflow-is-completely-broken). L'équipe de Brackets a justement [déclaré](https://twitter.com/brackets/status/342635411404886016) que cet article résumait parfaitement les motivations à l'origine de Brackets ; nous pouvons donc comparer utilement la réflexion de K. Auchenberg et les solutions mises en œuvre par Brackets. K. Auchenberg constate que, pour faire face à la complexification du développement web (due à une imbrication de plus en plus poussée de différents types de fichiers), nous utilisons une multitude d'outils inclus dans les navigateurs — inspecteurs de DOM, débogueur JavaScript, mode « auto refresh »... ![L'ancien système de développement web](http://kenneth.io/assets/images/todays-frontend-flow-f95be1b1aa635119052fb93a4ff02144.png) Comme le montre le schéma ci-dessus, ces outils ne sont pas intégrés dans un processus unifié de développement web. K. Auchenberg conseille donc de porter dans l'éditeur web les fonctionnalités des navigateurs dédiées au développement, afin d'obtenir un système de production plus simple et plus efficace. Le mode « Quick Edit » ainsi que le débogueur Theseus de Brackets s'inspirent justement des « Outils développeurs » des navigateurs. K. Auchenberg propose aussi de « faire communiquer l'éditeur avec le navigateur », afin que les modifications soient immédiatement répercutées dans le navigateur lors de l'édition d'un fichier. Le « Live HTML Development » de Brackets applique cette idée. ![Le nouveau système de développement web](http://kenneth.io/assets/images/editor_workflow-ee6cb8b6361aaae7a37d3a28a3d03a3e.png) En transférant les outils de développements du navigateur vers l'éditeur, ce nouveau modèle évite d'instaurer une dépendance au navigateur. L'équipe Brackets, qui utilise actuellement Chrome / Chromium pour l'affichage « Live », prévoit justement d'intégrer aussi [Firefox](https://trello.com/c/0iJbjmGm/885-research-live-development-firefox) et [Internet Explorer](https://trello.com/c/DJd2WxQp/886-live-development-internet-explorer) si les APIs le permettent. # La stratégie open source ## Une stratégie de communication ? En juin 2013, les logiciels phares de la célèbre Adobe Creative Suite (Photoshop, Illustrator, etc.) sont passés d'une licence propriétaire classique à une licence propriétaire [SaaS](http://fr.wikipedia.org/wiki/Logiciel_en_tant_que_service) : devenue Adobe Creative Cloud, la suite est désormais utilisable sur des serveurs en ligne *via* un abonnement. Cette évolution limite un peu plus le contrôle de l'utilisateur sur le programme, puisque son accès aux machines distantes est rigoureusement contrôlé. Brackets va dans le sens opposé : celui d'une stratégie [FLOSS](http://fr.wikipedia.org/wiki/Free/Libre_Open_Source_Software), fondée sur la gratuité, la transparence et l'ouverture aux contributions communautaires. Pourquoi ce choix à contre-courant ? Après avoir été l'objet de vives [controverses](http://fr.wikipedia.org/wiki/Adobe_Flash#Controverses) concernant Flash (technologie web propriétaire et non standard), Adobe remodèle son image de marque. La société a su adopter un discours qui intègre les valeurs de liberté et de coopération véhiculées par le mouvement du logiciel libre. Sur le site officiel [Adobe&HTML](http://html.adobe.com/fr/), qui affirme un « engagement » en faveur des standards web du [W3C](http://fr.wikipedia.org/wiki/World_Wide_Web_Consortium), l'entreprise emploie un vocabulaire quasi militant (« Notre _mission_ : faire _progresser_ le web »). La société contribue en effet à plusieurs projets open source, consultables sur [Github](https://github.com/adobe) et répertoriés dans une [rubrique dédiée](http://html.adobe.com/fr/opensource/). Brackets y figure en tête. Par ailleurs, la [mutation](http://www.questionsphoto.com/creative-cloud/) de Creative Suite en Creative Cloud a suscité de [fortes réprobations](http://en.wikipedia.org/wiki/Adobe_Systems#Criticism_of_Creative_Cloud) chez les habitués des produits Adobe (une [pétition](http://www.change.org/petitions/adobe-systems-incorporated-eliminate-the-mandatory-creative-cloud-subscription-model) a même circulé pour demander un retour à l'ancienne formule hors-ligne), notamment parce qu'avec un abonnement « Cloud » le client n'achète plus le logiciel : il le loue, ce qui instaure une relation [captive](http://www.graphics.com/article-old/creative-cloud-chronicles-freeing-captive-consumer) et engendre un coût final jugé [excessif](http://www.insidehighered.com/news/2013/05/22/adobe-pricing-plan-raises-concerns). Si la société Adobe [refuse](http://www.dpreview.com/news/2013/05/08/Adobe-photoshop-cc) de revenir sur le modèle SaaS, elle cherche néanmoins à atténuer les critiques en soulignant les [avantages](http://news.cnet.com/8301-1001_3-57586521-92/dislike-adobes-creative-cloud-subscriptions-tough-beans/) du « Cloud » (synchronisation, etc.)... Avec Brackets, Adobe échappe à ces critiques concernant la captivité (le logiciel est librement exécutable) et le coût (son utilisation est gratuite). L'éditeur affiche ainsi une image d'éditeur éthique — contribuant au logiciel libre et respectueux des standards — et capable d'apporter des solutions complémentaires grâce à son service « dans les nuages ». ## Le modèle freemium Pour autant, le « Cloud » propriétaire reste au centre de l'écosystème Adobe. Les projets présentés dans la rubrique open source du site Adobe sont valorisés dans une section [Outils et services](http://html.adobe.com/fr/edge/), qui décline ces logiciels dans le Creative Cloud. L'éditeur y propose notamment l'éditeur [Edge Code CC](http://html.adobe.com/fr/edge/code/), qui reprend explicitement le code open source de Brackets. En créant Brackets, Adobe expérimente un modèle économique [freemium](http://fr.wikipedia.org/wiki/Freemium) qui propose une offre gratuite pour la version basique et une offre payante pour une version étendue dont la valeur ajoutée réside dans le service « Cloud ». La contribution d'Adobe à la communauté open source s'inscrit ainsi dans une stratégie commerciale : l'éditeur rentabilise son investissement en attirant les clients vers l'offre payante. Néanmoins, l'attitude d'Adobe peut sembler contradictoire : d'un côté, avec Brackets, la société divulgue le code source (et paie du temps de développement), de l'autre, avec Edge Code, elle dissimule le code source (et fait payer l'accès à ses serveurs). N'y a-t-il pas un paradoxe dans cette utilisation de deux licences opposées ? La stratégie de développement logiciel sous-jacente explique ce choix. Le code source de Brackets est entièrement accessible à la communauté des utilisateurs : il peut donc bénéficier des contributions communautaires et être reversé dans Edge Code. Or, de par son interface WYSIWYM, Brackets s'adresse à des utilisateurs avancés qui maîtrisent les langages web. Une grande partie du public de Brackets est donc, par définition, capable de contribuer au développement du logiciel, codé en HTML / CSS / JavaScript. Ce qui constitue un avantage stratégique pour la croissance de Brackets — et conséquemment de sa version propriétaire Edge Code. ## L'écosystème de la contribution Brackets possède une [bibliothèque d'extensions](https://brackets-registry.aboutweb.com/) déjà riche, nourrie par les contributions extérieures et amenée à s'étoffer toujours plus. Ces extensions sont d'autant plus pertinentes qu'elles sont écrites _par_ les utilisateurs _pour_ les utilisateurs. Nous retrouvons ici le schéma de croissance des CMS open source (Drupal, Wordpress, etc.) dont la popularité repose sur les nombreuses extensions issues de la communauté des utilisateurs / développeurs. Avec Brackets (dont le public est nécessairement compétent en développement front) le gain de la stratégie open source est encore plus important. La communauté participe aussi au portage de Brackets sous GNU/Linux, vivement [plébiscité](https://trello.com/c/GcNAJPye/457-linux-desktop-application) par les utilisateurs. Certains contributeurs extérieurs ont activement travaillé à [satisfaire](https://groups.google.com/forum/#!topic/brackets-dev/29vOJ6tvl8A[1-25-false]) cette demande. Le 9 août 2013, l'équipe annonce un [premier build](http://blog.brackets.io/2013/08/09/preview-brackets-on-linux/) pour Debian/Ubuntu. Malheureusement, ce build s'avère ne pas fonctionner sous Debian 7 Stable (« Wheezy »). L'incompatibilité est identifiée : la librairie glibc est [responsable](https://code.google.com/p/chromium/issues/detail?id=222038). L'équipe Brackets explique d'abord que ce bogue ne peut être résolu, puisqu'il est causé par une dépendance de [CEF Builds](http://cefbuilds.com/). Ils [remontent](https://github.com/adobe/brackets/issues/4816#issuecomment-29221469) néanmoins ce problème auprès de l'équipe CEF, qui résoud (en partie) le bogue en restaurant la compatibilité avec Debian 7. La route est longue mais la voie est libre. Enfin, l'équipe Brackets contribue elle aussi à des projets extérieurs. En effet, Brackets est basé sur CodeMirror : l'équipe a « [forké](http://aful.org/ressources/fourches-forks) » CodeMirror pour l'adapter à Brackets, puis contribue en continu au projet parent (sans que les deux projets soient pour l'instant identiques). Le développement de Brackets profite ainsi au projet [en amont](https://github.com/adobe/brackets/wiki/Notes-on-CodeMirror). Cet exemple illustre le cercle vertueux de l'écosystème libre, dans lequel les problématiques des uns (et leur résolution) bénéficient aux autres. Par ce biais, Brackets peut attirer l'attention d'un nombre croissant de développeurs. Cette popularité est d'autant plus utile pour affronter certains problèmes allant au-delà du périmètre de connaissances des utilisateurs habituels. Pour Linux notamment, le développement du shell nécessite des compétences en C++ et GTK, qui ne sont pas des langages généralement utilisés pour le web. Brackets deviendra-t-il un projet suffisament populaire pour résoudre ces difficultés et continuer son ascension ? # Conclusion : l'avenir libre de Brackets L'équipe de Brackets a souligné à plusieurs reprises la place capitale qu'elle attribue à la communauté dans le développement du logiciel. Le site officiel [indique](http://brackets.io/contribute.html) : « Brackets a été créé initialement par Adobe, mais il est géré par la communauté » (« Brackets was originally created by Adobe, but is maintained by the community »). Sur Twitter, l'équipe a tenu à [préciser](https://twitter.com/brackets/status/306128672656609280) que le projet se nommait simplement « Brackets », et non « Adobe Brackets », marquant ainsi son indépendance. Par ailleurs, certains intervenants insistent sur l'intérêt d'Adobe dans ce projet. Michael Chaize, « Creative Cloud Evangelist for Adobe », a [expliqué](http://youtu.be/TbXPPnfsq-c?t=12m15s) que Brackets pourra servir de module dans InDesign ou Flash Professional. Narciso Jaramillo, « Principal Scientist » chez Adobe et pilote de l'équipe Brackets, a fait une [démonstration](http://www.youtube.com/watch?v=xAP8CSMEwZ8) impressionnante du couplage Photoshop / Brackets qui permet d'extraire les calques pour en tirer des propriétés CSS. Edge Code et les autres logiciels « Cloud » bénéficieront des apports des contributeurs Brackets, mais rien ne garantit la réciproque : Adobe reste fondamentalement un éditeur de logiciels propriétaires. Les motivations des différentes parties restent contradictoires. Brackets, nous l'avons dit, peut [s'éditer lui-même](http://korben.info/brackets.html). Cette mise en abyme montre la cohérence du projet Brackets et rappelle le lien étroit qui existe entre ses caractéristiques techniques, stratégiques et ergonomiques. Créé spécifiquement pour des développeurs web confirmés (comme en témoigne le choix d'une interface WYSIWYM), Brackets peut profiter de l'expertise de ce public grâce à une judicieuse synergie entre décisions technique (logiciel codé en HTML / CSS / JS) et stratégique (ouverture de l'open source). Une communauté suffisamment forte pourra-t-elle se constituer pour porter le projet sur le long terme ? Brackets étant un logiciel qui répond à une réelle attente des codeurs web, comme le suggère l'article de Kenneth Auchenberg, nous pouvons espérer que oui.

AltStyle によって変換されたページ (->オリジナル) /