Submit News Alternative Tip Form

Hands On with the New Chrome Dev Editor App

chromedeveditor-tileThe Chrome Dev Editor (formerly known as Spark) has hit the Chrome Web Store as a developer preview.

Last year we profiled a few of the editors available in the Chrome Web Store, including a fledgling Google project called Spark. It looked…rough to say the least, but a few months of development and a name change later and the developers have made good on a lot of promises.

The Chrome Dev Editor is built with Polymer and Dart, making it the perfect learning experience for those looking to leverage either of the projects in their own work or for those looking for a cross-platform development environment on their desktops and Chrome OS.

Chrome Dev Editor Features

The editor has a number of templates to get you started, including web apps built in Dart or JavaScript and Chrome Apps. Backed by the Ace editor you’ll get a rich editing experience with syntax highlighting for your favourite (and obscure) languages, code folding, autoindent, and a bevy of other features.

Committing from a git repo

Committing in a Git repo

The Chrome Dev Editor also features Git support – a necessity for Chrome OS users who don’t want to drop into developer mode. Cloning, branch switching, committing, and pushing are all supported. Modified files are marked in blue in the tab bar and sidebar to make it easier to find your changes.

The editor also supports Markdown previews, Bower package installation/updating, and deploying directly to an Android device or publishing to the Chrome Web Store when working on a Chrome App.

Dart Support

Running a Dart project

Running a Dart project

But the most impressive feature to come along since our first look at the Chrome Dev Editor in November of 2013 is the Dart support. And not just editing Dart, but compiling Dart too – even on Chrome OS!

What’s more, syntax errors are shown right in the editor for easy debugging and a file structure sidebar brings quick navigation to large Dart files. When previewing Dart projects in a browser, refreshing the page will trigger recompilation on the fly.

Admittedly, compiling a single Dart file is slower than molasses at the top of Mount Kilimanjaro on my first-generation ARM Samsung Chromebook, but the fact that you can now write and run your Dart code in Chrome OS is a pretty fantastic feat.

With more Core i3, i5, and i7-based Chrome OS devices coming out, slow compilation won’t be much of an issue anymore. While more complicated builds (especially those backed by build tools like Gradle, Grunt, or Gulp) will still need a desktop or a Chromebook in developer mode, it’s a gigantic leap in supporting more than basic editing across all of Chrome’s supported platforms.

Even an i7-toting Chromebox or Pixel 2 probably won’t see local Android development in Chrome OS anytime soon, but having editors that include what seemed like a mere pipe dream six months ago is a heck of a good sign for whatever is on the way down the road.

Download

The Chrome Dev Editor is currently in developer preview and is available on the Chrome Web Store. The editor is also open sourced under the BSD 3-clause license and can be found on GitHub.

Get the Chrome Dev Editor

  • Mathspy

    Can’t wait to try it!

  • http://linnertmedia.de/ Andreas Linnert

    Was I reading correctly? Deploy Chrome Apps on Android? Since when is this possible? My latest information on this was that it’s not possible. But that’s interesting. But I’m wondering what these apps will feel like.

    • Phil Oakley

      Needs an Android companion app, but yes it’s possible. However, there’s no way for end users to download the apps on Android yet. Still waiting for Chrome Apps to come to the Play Store.

      • http://linnertmedia.de/ Andreas Linnert

        I’ve already tried it out and it works really well. I’m really looking forward to this getting real. I also can imagine they will combine the Play Store and the Chrome Web Store into one for both kind of apps. That would be great because I think the backend of the Play Store is way better than the Web Store.

        • akshay2000

          You said you ‘tried it out’. What exactly did you try out? How does it work, exactly?

          • http://linnertmedia.de/ Andreas Linnert

            I took one of my existing apps, opened the folder in the new Chrome Dev Editor and deployed it to my phone from there. When you do that there will be a link to the app you need to install on your phone to be able to test your app there. I did, opened that app and was able to run my Chrome App on my phone.
            It works almost great so far. With one app I have to tap the screen before it gets visible and I have to go “back” several (3?)times before I come back the main app. But I have to say I don’t have an app with much interaction right now to test more details.
            And it seems you can store only one app at a time. You can ran that later without connecting your phone to your computer, but all others get deleted.

  • Heimen Stoffels

    It looks good. I was using Caret up until now for my coding because it’s so much like my all-time favorite Sublime Text, but Chrome Dev Editor might knock Caret from my Chromebook if it’s as good as it looks.

  • Seriously now?

    After consciously ignoring Spark, I finally gave this a test. So good. I love that it supports syntax highlighting for languages not necessarily supported by Chrome (though I need control over that — it’s detecting my .pl files as Perl rather than Prolog). I’m glad that it’s not overfeatured too. While it’s still missing basic features like intellisence, it’s a really good start.

    Hope they keep making it better. Like ‘Chrome’s answer to xcode and Visual Studio’ better.

    • http://www.live-craft.com/ Jonathan Alfonso

      It also has syntax highlighting for shell, python, and a bunch of other things not supported. That made me happier than I should have been.

      • Kenny Strawn

        That list includes Java… which, a couple of months down the line, should make it just as easy to develop Android apps as it will be to run them.

    • akshay2000

      Don’t think they’re going up against Visual Studio or Xcode here. Those are full blown IDEs with so much more going on under the hood.

      • Seriously now?

        That’s not a problem. CDE could become the same in the future if they want to make it just that. But they do need to take it slow.

  • http://about.me/CalebLee Caleb Lee

    I think all hope for a Pixel 2 is gone.

    • Phil Oakley

      Might not be called “Pixel 2′ but we may see another premium Chromebook directly from Google.

      Remember Eric Schmidt said after the Nexus One was released ‘There’s not going to be a Nexus Two’. But they released the Nexus S. Schmidt was very clever in his wording, because we never did see a ‘Nexus Two’.

      Don’t give up hope yet! :)

      • Patrick Howard

        Nope, we jumped to a Nexus 4 :P

      • Kenny Strawn

        I can assure you right now that there is a Chrome OS board first code-named “Bolt”, then “Samus” which does indeed have a lot in common with the Pixel… Whether or not Google actually calls it the “Pixel 2″ when released, however, remains to be seen.

  • Jerzy

    How is Chrome Dev Editor better than other offline web editors like Carot, Zed, Neutron Drive, Tailor or ShiftEdit? Even Chrome DevTools have Workspaces, where you can edit local files. Tailor (based on Brackets) has a live preview and Git support. Caret has “go to everything” functionality like Sublime Text. Chrome Dev Editor seems basic.

    • Kenny Strawn

      It comes down to testing convenience. Caret, Tailor, and others are just that: text editors. To test the apps you’re developing in those text editors, you have to A, fire up the chrome://extensions page, B, check the “developer mode” checkbox (if not done already), C, load the folder you’re project is saved to, and D, if any errors occur, fire up the chrome://extensions page AGAIN and use it to reload the app. As a developer, I find that testing process to be VERY time-consuming.

      In the case of this Chrome Dev Editor, you can just click a “Run” button over and over, and off you go…

      • http://twitter.com/d0od Joey-Elijah Sneddon

        Nicely surmised (as always) Kenny!

      • http://linnertmedia.de/ Andreas Linnert

        Isn’t there a “reload app” entry in the app’s context menu? At least I use it to reload the app on Windows. But pressing Ctrl + R in the Dev Editor really is better though. You don’t even need to save.

        • Kenny Strawn

          You mean what happens when you right-click an app’s window? That’s hidden behind a flag (chrome://flags/#debug-packed-apps) in Chrome OS at least… In the case of the Dev Editor, there’s actually a button front-and-center which looks like a Play button. Click it, and the Dev Editor does ALL that loading, reloading, and running work for you, even for the first test.

          • http://linnertmedia.de/ Andreas Linnert

            Yes, I mean that. Then I’ve enabled it, but is it possible to enter the Dev Tools without it? Because then you need it.
            And yes, with Ctrl + R I mean that button. That’s the shortcut for it and that’s super handy :)

  • Kenny Strawn

    Deployment directly to an Android device, eh? Yup, that at least makes Android development with Cordova on Chrome OS possible… Getting there, getting there!

  • Peter Frazier

    today i got several things to work using the polymer custom element project type.

    the doc’s in my opinion were a bit vague in some areas.. for example, the bower instructions asked to enter commands but were lacking on what the json file should look like because you don’t have a console in the editor.. but a little trial and error and i got it to import some stuff.. hoorah..

    another area i kept stumbling with was using the other icon packs.. granted i think this one was chalked up to me not being as smart as I would like to be but eventually I was puling in icons from the other packs provided..

    next up i’ll be playing with the advanced wiring concepts between elements.. once i get the whole public private and events stuff down then the fun will begin..

    for a developer preview this is a very functional app.. it hasn’t crashed and the only issues (above) i’ve had are more me rushing and not reading properly then a fault with the code.. some of the next features i’d like to see is a status window/terminal where it shows the steps.. this is more out of curiosity then anything.. other features would be a built in designer with ability to include previously built elements. I know you can pull down the git and all but including that would make it powerfully easy..

    all in all i’m giving it a thumbs up.. I haven’t had this much fun coding in a while. let alone having to go all crouton on my chromebook to get some decent coding done..

    • http://twitter.com/d0od Joey-Elijah Sneddon

      Awesome insight, thanks for sharing.

  • Xyr2

    nice desktop, which theme / plugins did u use?

    • pepe

      I think its a chromebook desktop (just guessing(

    • Seriously now?

      Ahahaha! Welcome to other side of ohso, young Padawan.

      • http://twitter.com/d0od Joey-Elijah Sneddon

        Correct. It’s the Ash desktop on Chrome OS.

  • bmarkovic

    Looking at this, Atom, Brackets and LightTable, it’s quite obvious Sublime Text has become the new golden standard.

    • Jesus Bejarano

      vim

      • bmarkovic

        I was specifically talking about NEW golden standard.. which Sublime has quite obviously become, as I can’t seem to recall people creating many new editors that use “insert mode/char command” paradigm except in some vintage mode that only vi fanatics use… OTOH all aforementioned editors mimic Sublime’s design and user experience to a great extent.

        • Alex Sanchez

          Eh idk, I feel like LightTable is taking ideas from Emacs and expanding from them. You could also say the same for Atom, only Atom took a lot of the ui ideas from Sublime. Anyway both editors core advantage is they’re extended in the same language they are written in (like Emacs).

          • bmarkovic

            I don’t see that’s a “core advantage”, or advantage at all. For example there is nothing wrong with ST being extensible in Python (everybody loves Python), or it being developed in a compiled language (C/C++) as it gives it performance that’s still unmatched by both LightTable and Atom.

            I’d wager that their true core advantage is the thing that is the cause of them being extensible in same language they’re written in — that their source is open and license is free.

            And I still stand by that all three mentioned editors took a lot of app design and UX cues from ST. And editor isn’t much more than UX (it’s just a program that you edit text in, and devs spend a lot of their time in one, so UX is everything).

            I have nothing against some open source project obsoleting ST (but I also don’t have anything against the people behind it charging for the license either). It’s the nature’s way.

          • Alex Sanchez

            Ok, I see what you’re saying. I’m just saying its an advantage because not everyone who knows python, knows C/C++. Someone coming to a html ui based editor just has to know JavaScript (or anything that compiles to it) to make plugins for that editor. If they don’t like anything that is included in the core application, they aren’t held back because they don’t know the source. But yes, being open source is what enables someone to do this.

  • Patrick Howard

    Downloading it right now to play with a little. Is their any talk on officially supporting other languages? Like Ruby, Python, etc?

  • http://vicente-de-pierola.tumblr.com/ Vicente de Piérola

    How hard and worthy it is to learn this?

  • Md Khan

    All i can say one chance long relation cross messages++

  • russjr08

    Seems like there was a new update for it today, has some kind of Polymer Designer built in now?