{"id":6113,"date":"2012-07-24T12:09:18","date_gmt":"2012-07-24T11:09:18","guid":{"rendered":"http:\/\/www.itwriting.com\/blog\/?p=6113"},"modified":"2012-07-24T12:09:18","modified_gmt":"2012-07-24T11:09:18","slug":"adobe-brackets","status":"publish","type":"post","link":"https:\/\/www.itwriting.com\/blog\/6113-adobe-brackets.html","title":{"rendered":"Adobe Brackets: a different type of HTML and JavaScript code editor. Interview with Adobe\u2019s Adam Lehman."},"content":{"rendered":"<p>On Adobe\u2019s <a href=\"http:\/\/html.adobe.com\/toolsandservices\/\" target=\"_blank\">Tools and Services<\/a> page there is an intriguing remark about the company\u2019s plans for a code editor. \u201cWe think there\u2019s a need for a different type of code editor \u2013 we\u2019re working on something and will have more to share soon.\u201d<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2012\/07\/image37.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2012\/07\/image_thumb37.png\" width=\"404\" height=\"82\" \/><\/a><\/p>\n<p>That something is <a href=\"https:\/\/github.com\/adobe\/brackets\/wiki\" target=\"_blank\">Brackets<\/a>, a code editor written in HTML and JavaScript (which means, as with all the best tools, that you can code Brackets in itself).<\/p>\n<div><em>Advertisement<\/em><\/div>\n<p>  <script type=\"text\/javascript\"><!--\ngoogle_ad_client = \"ca-pub-6161362455226440\";\n\/* midpage *\/\ngoogle_ad_slot = \"7840093161\";\ngoogle_ad_width = 300;\ngoogle_ad_height = 250;\n\/\/-->\n<\/script> <script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n<\/script>  <\/p>\n<p>Although Brackets is written in HTML and JavaScript, it is not yet a web application. Instead, it runs on the desktop using Google\u2019s <a href=\"http:\/\/code.google.com\/p\/chromiumembedded\/\" target=\"_blank\">Chromium Embedded Framework<\/a> (CEF), which lets you embed the Chrome (strictly, the Chromium) browser engine in a desktop application. In the case of Brackets, the wrapper is lightweight, the intention being that in future Brackets may be fully browser-hosted. The consequence though is that currently you need Google Chrome installed and it only runs on Windows and Mac.<\/p>\n<p>The project is open source under the MIT license; anyone can grab the code from Github. Brackets also depends on another open source project, <a href=\"http:\/\/codemirror.net\/\" target=\"_blank\">CodeMirror<\/a>, which is a JavaScript editor component for browsers. I installed it on Windows and soon had it up and running. Note that you should pull <a href=\"https:\/\/github.com\/adobe\/brackets-app\/\" target=\"_blank\">brackets_app<\/a> if you want to run it, as this brings down the Brackets code as well.<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2012\/07\/image38.png\"><img loading=\"lazy\" decoding=\"async\" title=\"image\" style=\"border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2012\/07\/image_thumb38.png\" width=\"404\" height=\"250\" \/><\/a><\/p>\n<p>I spoke to Brackets Product Manager Adam Lehman. \u201cThis might be the first project we started with the intent of being open source from day one,\u201d he said.<\/p>\n<blockquote>\n<p>\u201cOur general intent is that we wanted to provide an editor that web developers felt that they could own. In the past we might have built something in Eclipse, and there would have been this giant gap between the person who knew HTML, JavaScript and CSS, and then having to write a Java-based Eclipse plug-in to extend the editor.<\/p>\n<p>\u201cWhen we start talking to developers, they\u2019re going back to just text editors, things that don\u2019t do much more than edit and manage a document, and as complex as HTML and JavaScript apps are getting these days, it seemed crazy that our tools weren\u2019t keeping up with us. So the idea was to start this project, add a little bit of our own ideas, and have the community supply their own ideas.\u201d<\/p>\n<\/blockquote>\n<p>But how does Adobe intend to use Brackets in its own products, and what is the business model?<\/p>\n<blockquote>\n<p>\u201cWe believe there are two spaces for the editor market. There is the larger IDE, but there\u2019s also these lightweight text editors. We\u2019re finding that the traditional JavaScript and HTML developer, CSS developer, was heading towards the lightweight text editor and not towards the larger IDE. We don\u2019t see Dreamweaver and Brackets as direct competitors because they service two different tastes. It wasn\u2019t a matter of could we add a feature here or there that was going to get people to use Dreamweaver. It was that difference between our larger tool and a much lighter weight tool. That\u2019s where Brackets come in.\u201d<\/p>\n<\/blockquote>\n<p>How then will Brackets tie in with other Adobe products?<\/p>\n<blockquote>\n<p>\u201cThat\u2019s the key for Brackets. We wanted to see if we could innovate in the space and we also wanted to have a common language that we could start targeting. When you say, I want to open up an editor from Adobe Edge and start coding, we needed to define what that editor would be, so Brackets would come into that.<\/p>\n<p>\u201cWe\u2019re also saying we need to do better tooling around PhoneGap. A lot of people are fine with the command line, but we want to take a step beyond that and so Brackets is the obvious place where we\u2019ll start to build an extension where we can tie into PhoneGap Build, or extensions around the PhoneGap APIs.<\/p>\n<p>\u201cWe\u2019ve got a lot of ideas around using Brackets to bring a lot of our HTML efforts together, not only our core HTML products but also a lot of the W3C and WebKit work that we\u2019re doing. Brackets is a great place to put tooling, that isn\u2019t quite ready for mass consumption yet, but we could actually build extensions for something like Shaders where those people who are interested in it can get in and start playing around with it.<\/p>\n<p>\u201cThe beauty of building on the web platform is that we can go wherever the web platform goes.\u201d<\/p>\n<\/blockquote>\n<p>Initial prototypes of Brackets ran entirely in the browser, which would be interesting for future versions of Adobe\u2019s <a href=\"http:\/\/www.adobe.com\/products\/creativecloud.html\" target=\"_blank\">Creative Cloud<\/a> as well as other scenarios, but Lehman said this got mixed reactions.<\/p>\n<blockquote>\n<p>\u201cWhile we believe that the future of development is heading towards the cloud, and the general consensus from developers is the same, we also heard that it is not ready yet. We decided to focus on a desktop version first, with the idea that towards the end of this year or beginning of next year we\u2019ll start to supplement with other targets, whether it be in the cloud or&#160; a tablet, or embedded in a tool like Edge,\u201d<\/p>\n<\/blockquote>\n<p>says Lehman. He adds that a browser-hosted Brackets could end up integrated with the PhoneGap Build site. PhoneGap Build is a service for compiling cross-platform HTML and JavaScript into mobile apps for a variety of devices.<\/p>\n<p>Since Brackets is built on Google\u2019s Chrome\/Chromium platform, what are the implications for cross-browser compatibility?<\/p>\n<blockquote>\n<p>\u201cThere\u2019s two pieces to it. There\u2019s our container that Brackets runs in, and that is running on Chromium.<\/p>\n<p>\u201cThe other part is that we have this live preview system which is tied directly to Chrome on the desktop. We happened to just start with Chrome, mostly because there is a remote debugging API that\u2019s pretty fleshed out there.<\/p>\n<p>\u201cWith Firefox and Internet Explorer, it\u2019s a little bit different. We talked to Mozilla and they\u2019re just now starting to work on that remote debugging API and trying to get it inline with where Chrome is, so we\u2019re expecting to hear from them in August that they actually might have an API where we can start to build that same functionality, which is our intent.<\/p>\n<p>\u201cWe\u2019ve already started engaging with Microsoft about Internet Explorer. Right now their remote debugging API is somewhat private and in the form of a COM object which is not ideal coming from a JavaScript perspective, but we\u2019ve showed them what we\u2019re after, and we\u2019ve started discussion of what a remote API from IE might look like that didn\u2019t require COM. We\u2019re exploring those options. Those are our priorities right now.<\/p>\n<p>\u201cIf we build a cloud-based version then it\u2019s going to be a question of what browsers this is going to run in. Our intent is to run in the modern major browsers. We aren\u2019t building anything that\u2019s Chrome-specific, we\u2019re doing our best to stay as browser-agnostic as we can, but we are likely to require a more modern browser. We feel it would be OK to require the latest versions of Firefox, IE or Chrome.\u201d<\/p>\n<\/blockquote>\n<p>I asked Lehman whether Brackets might be useful for server-side as as client-side code. He said that Brackets is focused on the client, though a community extension is under way for <a href=\"http:\/\/nodejs.org\/\" target=\"_blank\">node.js<\/a>. He adds that since Brackets is fully extendable, others may do plug-ins for languages such as PHP.<\/p>\n<p>Why is Brackets at Github and not Apache?<\/p>\n<blockquote>\n<p>\u201cWe have a lot of people at Adobe who work for Apache now, and we talked to them before we released Brackets. Our sense is that Apache might be too much of a turn-off for the individual contributor, who just wants to hack and fix a bug and submit it back,\u201d<\/p>\n<\/blockquote>\n<p>Lehman told me. Although there are external contributors, all the committers are currently at Adobe, though there are plans for adding external committers by the end of the year. \u201cWe don\u2019t want this to be 100% Adobe controlled.\u201d<\/p>\n<p>When will Brackets get to version 1.0?<\/p>\n<blockquote>\n<p>\u201cWe\u2019re being as agile as we can. Every bit we add, it comes closer to being a 1.0 for somebody. The things that I think are missing that you would expect out of a core editor are around code-completion for CSS and JavaScript, and solid and advanced search and replace. In the web world, that\u2019s how we refactor code. We\u2019re hoping to drive those in by November time. But we are on 2.5 week sprints and things change rapidly.\u201d<\/p>\n<\/blockquote>\n<p>I also asked about plans for a mobile app version of Brackets. Lehman says that is planned for next year, though the community is working on getting a Linux version working and support for ChromeOS.<\/p>\n<p>Brackets is a fascinating project on several levels. What stands out is how far Adobe has moved from being the Flash company. A few years back Adobe came up with a system for having Flash applications run on the desktop and on mobile devices: Adobe AIR. It also invested in Eclipse and came up with the Flash Builder IDE.<\/p>\n<p>Now here is Adobe with an open source project for a desktop application built from HTML, JavaScript, and a third-party open source browser engine; and in place of mobile AIR it has <a href=\"http:\/\/phonegap.com\/\" target=\"_blank\">PhoneGap<\/a>.<\/p>\n<p>It is a big change, most of which has become publicly known in less than a year, signalled by the <a href=\"http:\/\/www.itwriting.com\/blog\/4891-adobe-to-ship-flash-11-and-air-3-repositions-flash-vs-html-5.html\" target=\"_blank\">repositioning of Flash and AIR versus HTML<\/a> in September 2011, and the <a href=\"http:\/\/www.itwriting.com\/blog\/5107-what-next-for-adobe-flash-think-runtime-not-plugin.html\" target=\"_blank\">abandonment of Flash for Mobile<\/a> in November 2011.<\/p>\n<p>As for Brackets itself, it is well worth a look though probably not a tool you want to use for real work just yet. In a few months though, that may well change.<\/p>\n<p><strong>Postscript<\/strong>: Brackets reminds me of another Adobe, or rather Macromedia, HTML code editor. That was <a href=\"http:\/\/www.adobe.com\/products\/homesite\/\" target=\"_blank\">HomeSite<\/a>, an excellent text-based tool that Adobe discontinued in 2009; active development ceased years before that.<\/p>\n<p> <script type=\"text\/javascript\" language=\"Javascript\" src=\"http:\/\/s1.lqcdn.com\/m.min.js?dt=2.3.110104.1\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On Adobe\u2019s Tools and Services page there is an intriguing remark about the company\u2019s plans for a code editor. \u201cWe think there\u2019s a need for a different type of code editor \u2013 we\u2019re working on something and will have more to share soon.\u201d That something is Brackets, a code editor written in HTML and JavaScript &hellip; <a href=\"https:\/\/www.itwriting.com\/blog\/6113-adobe-brackets.html\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Adobe Brackets: a different type of HTML and JavaScript code editor. Interview with Adobe\u2019s Adam Lehman.<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[62,67,80],"tags":[123,222,346,676,719],"class_list":["post-6113","post","type-post","status-publish","format-standard","hentry","category-open-source","category-professional","category-software-development","tag-adobe","tag-brackets","tag-dreamweaver","tag-open-source","tag-phonegap"],"_links":{"self":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/6113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/comments?post=6113"}],"version-history":[{"count":0,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/6113\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/media?parent=6113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/categories?post=6113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/tags?post=6113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}