Tools for Developing on ChromeOS

I've been using my Chromebook Pixel as my primary machine ever since I got it for most of my work, with one crucial exception - development. Whenever I needed to do more than just edit a couple of individual files, I had to turn to my MacBook Pro with its trusty Sublime text editor and ability to run things like Node.

I'm happy to report, however, that things have changed dramatically just in the last several months, and it's now easier than ever to do real development on your Chromebook. In this post, I'm going to give an overview of some of the tools that I use when developing on my ChromeOS devices (In addition to my Pixel, I also have an HP 14, a Samsung 550 in developer mode, a Samsung Series 3, and an Acer C720).

Keep in mind that some of these tools are fairly new and still developing, so keep an eye on them as they get better over time. Also note that all the tools I talk about in this post are available for all the supported Chrome Apps platforms (Mac, Windows, Linux, and ChromeOS), but I'm focusing just on ChromeOS here.

The Basics - Offline Editing

Let's start with the basics - editing code. Obviously, having a great code editor that works locally on offline files is a prerequisite for any serious development on any computer. For ChromeOS, we have a couple of good options here.

Text App

Until recently, my go-to text editor was - not surprisingly - Text. It's pretty straightforward, works offline, has support for syntax highlighting, syncs with Google Drive, and can easily handle multiple open files.

The Text app from the Chrome Web Store

As of this writing, though, Text has a few shortcomings. It doesn't remember the files I had open between sessions, it doesn't remember the window position or size, and it's not very customizable. All that said, though, it's a good editor for what it does, and I still use it all the time for various text editing tasks.

Caret

I'm a pretty big fan of Sublime Text, and it's one of the things I missed most when working on my Chromebook. I recently came across a new Chrome App called Caret that does a great job of code editing and gives me a user experience that's much more like Sublime:

The very Sublime-like "Caret" editor

Some of the things I really like about Caret are:

• It remembers the files I had open between run sessions
• It remembers the size and position of the window
• Support for multiple carets and other Sublime-like features
• Lots of color schemes, support for font sizes, etc.
• Code completion
• Very customizable - lots of user-editable settings
• It's open source and has a Github project

Between these two tools, I think local code editing is pretty well covered. Caret in particular is in active development by the developer, so I'm looking forward to that app getting better over time and incorporating new features as they become available in the Chrome Apps API.

md everywhere

In addition to editing code, I find myself creating and editing Markdown content quite a bit, since it's how ReadMe files and such are represented in Github. 

The app that I usually reach for when I need to do this on my Chromebook is md everywhere, which - you guessed it - runs as an offline Chrome App. It has two main components: a window for editing markdown content, and a separate viewing window to see the HTML output, which can be shown or hidden separately from the editing window.

Editing Markdown on the left, with preview on the right

It's not perfect, and has a few quirks, but it gets the job done and greatly reduces the amount of guesswork involved. There are a couple of other MD editors in the store, but md everywhere seems to be the best of the bunch so far.

Cloud-Based IDEs

One of the more exciting trends of recent years has been the emergence of cloud-based IDEs. These are full-fledged development environments that work within your browser, giving you full access to a remote development box that can run all manner of environments, tools, etc.

Several of these IDE providers have existing apps in the Chrome Web Store, such as (but certainly not limited to): Koding, Cloud9, Nitrous.IO, ShiftEdit, and Codenvy. There are also collaborative cloud-based editors like Neutron Drive.

Each of these tools could take up an entire post on their own, and I'm planning to do a deeper dive into them at some point, but for the moment I'm going to focus on Nitrous.

Nitrous.IO

The Nitrous guys recently released their online IDE as a packaged Chrome App, so I've been using it a lot recently (which is not to say that any of the others are somehow lesser; to the contrary, they're all very good and have their own strengths). 

Cloud coding with Nitrous.IO

The Nitrous app is essentially a window that hosts the <webview> control, which displays the remote environment that you're connected to.

Setting up a remote Nitrous box is pretty easy, and you have your choice of Node, Ruby, Python, and Go environments. The Web IDE is straightforward, includes collaboration options, and lets you upload source files to the remote box. There's also a command shell for executing commands and such. The docs are pretty extensive, too.

I recently tried out Nitrous on a small NodeJS/MongoDB project, and the experience was about as easy as it could be. I just provisioned the box, uploaded some source files, and was working away within minutes. The Web IDE even provides a "Preview" function that launches the app within the local browser with the URL already set up.

Between working on source files locally and having a cloud IDE to test and deploy in, I can easily see how a setup like this could become the future of development.

Testing and Debugging

One of the greatest things about developing on a Chromebook is that you have access to the best Web developer tools in the business - the Chrome DevTools, naturally. You would be amazed at the number of people who don't yet realize this.

Chrome DevTools

Whether you are working on Chrome Apps, Extensions, or regular Web sites, the Chrome DevTools give you unparalleled features for debugging, profiling, logging, etc. Now, I'm not going to go deep into the Chrome DevTools here because all the information that you need to use them effectively is at that link that I've provided above, but here are some of the features you might not know about that you should definitely investigate:

• You can profile the performance of your app with the Timeline pane
• The Workspaces feature lets you use the DevTools as a source editor. Yes, you read that right.
• You can see how much memory your application is using
• Building an app that uses Canvas? You can profile that now, too. Yes, really.

Postman

If you do any work that requires transferring data to and from RESTful Web services (and who doesn't these days?), then you'll find that Postman is a great utility for testing REST based APIs.

Postman comes in two flavors - the original V1 Packaged App, and the newer Chrome App. I prefer the latter, since it works offline and in its own window. It also comes with a great set of online docs.

Postman makes working with REST APIs easy

Postman has some features that make working with REST services a breeze:

• You can define collections of requests, and group them together to reflect your API
• Adding headers and query parameters is quick and easy
• You can set up different environments (such as "Production" vs. "Development") and then customize the way that requests are sent using variables
• There are helpers for setting up various authentication schemes, such as OAuth2
• The app adds each request to its History, which makes it easy to experiment
• It is easy to customize the app's settings, and there are a lot of ways to tailor Postman to your particular needs

If your work involves REST APIs, then I highly recommend you download Postman.

Dimensions

Dimensions is a legacy, or "V1", Chrome Packaged App, but it's still useful and runs offline so I included it here (and hopefully the developer is working on updating it to be a Chrome App). Dimensions essentially does one thing - it shows you how your UI will lay out at different screen sizes.

Using Dimensions to view various layout sizes

Essentially, you start up the app, point it at a URL, and then slide the grab-handle left and right to simulate different screen widths. Assuming you've written your HTML to use responsive layout techniques, the page will change at various widths so you can gauge what it will look like on various devices.

Dimensions include pre-defined layout sizes for iPhone, Android, and Tablet sizes, and you can rotate each device to display different widths.

By default, the app will load in a browser tab, even if you're offline (that's what v1 Packaged Apps do). I usually set Dimensions to open as a regular window (just right-click on the app icon and choose the appropriate setting), which gives it a more app-like feel.

Useful Utilities

Editing and debugging get all the attention, but there are always those small utilities that developers use to make their lives somewhat easier when it comes to the workflow and other parts of development. Two of the utilities that I've found really useful so far are GistBox and HexReader.

GistBox

I've started using Github more and more to store things like code snippets (or "Gists", in their terms) because it's really easy to access them from everywhere, and GistBox makes organizing and working with Gists simple.

You can edit your Gists directly in the app, create new ones, apply labels, search Gists, and even share them via email or Twitter.

Organizing Gists with GistBox

Unfortunately, since it relies on Github access, it doesn't currently work offline, but given its purpose and usage scenario, I haven't found a situation where that has mattered for me yet.

HexReader

This one is pretty straightforward, and will be familiar to anyone who's ever had to manipulate binary files. Want to make sure that the file you're working with really is a proper PNG? Need to extract some embedded data from a PDF file? HexReader has you covered.

HexReader in action

It supports large files, you can copy data as text or hex, and it has bookmarks too.

Yes, it's a bit of niche app, and not exactly for everyone, but for those people who need it, HexReader is one of those developer utilities that you're glad is there.

Summing It All Up

ChromeOS has a come a very long way in a short period of time, and the developer story has improved right along with it. I find that I can do pretty much all of my every-day development tasks right from my Pixel (or, thanks to Chrome Sync, any one of my Chromebooks) while getting all the usual benefits of ChromeOS: speed, simplicity, and security.

And this is just the beginning - more developer tools are on their way, and the built-in Chrome DevTools continue to improve at a rapid rate.

App Links

I've included all the links to the apps I mentioned in this post here in one handy list for those of you looking to try some of these out:

• Editing
• Text
• Caret
• md everywhere
• Cloud IDEs
• Nitrous.IO
• Koding
• Codenvy
• Cloud9
• ShiftEdit
• Neutron Drive
• Testing and Debugging
• Postman
• Dimensions
• Utilities
• GistBox
• HexReader

Do you have any tools that you like to use to develop on ChromeOS? Be sure to let me know in the comments.

Happy Coding!

Google, Three Months In

February 14^th, Valentine's Day, marked the three month point for me here at Google. I thought I would take a moment to share my observations and experiences now that I've been here a little while on what it's like to work here and what it is we're doing.

I joined Google to work on Chrome – the browser, the Chrome Web Store, the Chrome platform, ChromeOS / Chromebooks, etc. One of Google's core missions is to move the web forward, and Chrome is a very important part of that mission. Over the last three months, I've talked to dozens of partners about building and monetizing their Web applications for the Chrome Web Store, built a couple of apps and extensions myself (more on that in future posts), worked with exciting new HTML5 features that change the very nature of what you can do with a browser, and helped continue to plan and build out new ways of delivering rich experiences using Web technologies.

Here are some of the things I've noticed and learned along the way here at Google so far:

1. Chrome has become much more than a browser

Chrome has really come a very long way since I first started using it a few years ago. Not only has it become the world's second most used browser, but it's really redefined how I do my work at a fundamental level. During a typical work day, I rarely find myself having to go outside of Chrome to get my work done. I create, edit, and share documents and spreadsheets with co-workers, organize my daily to-do lists, conduct and manage research, videoconference and chat with colleagues and partners, listen and respond to voicemail, and much more – all from within Chrome. I don't even have a desk phone here at Google. Seriously. I just don't need one.

What has made all this possible is that Chrome, in all its forms – along with the Web itself – has become an extremely powerful platform. The underlying technologies like HTML5, the V8 engine, Native Client (NaCl), etc. have enabled apps that just a few years ago (heck, even a few months ago) weren't possible. You even write Chrome extensions and applications using the same HTML5 and JavaScript that you would use to create a site, and they just work across OSes. All you need to do is visit the Chrome Web Store to see what the result has been – there's been a veritable explosion of creativity in the kinds of things you can now use a browser for.

2. The short ship cycle has become a very virtuous one

I have to admit that a few years ago I was initially skeptical of the whole 6-week release cycle and auto-update policy that Chrome follows, but seeing it in action has erased all of my doubts.

The short development cycle enables new technologies to be introduced and integrated in a way that is predictable and usable for developers, starting with the Canary build, then the dev channel, then into the stable build. Developers can try these features out, get them integrated into their apps, and get those new features into the hands of users faster than ever before, thanks to the auto-update.

These apps can then use real-time analytics and performance measuring feedback to help developers fine-tune their code and find and fix errors faster than ever before, as well as deliver new features with a higher precision of knowledge of how they'll actually be used. This results in far more stable, consistent, and feature-rich applications for customers, and the cycle then repeats.

When I first started working as a software engineer 20 years ago (wow!) on shrink-wrapped packaged software, products and update patches were delivered on floppies directly to end users, who (hopefully) manually installed them. Some did, some didn't, so you never had a good idea how consistent your product codebase was out in the wild. It was also a huge bottleneck on getting updates out to customers – since shipping floppies (and later CDs) was expensive, you needed to gather as many updates as you could into a batch before sending them out to minimize costs.

Short ship cycles, along with auto-update and distribution over the Web, have largely eliminated these kinds of bottlenecks. The amount of time lapse between the introduction of new features into Chrome and when they get into users' hands has been greatly compressed.

3. Web developers are true developers in every sense of the word

I was one of the original Dreamweaver developers at Macromedia back in the 90s, and back in the early days of the Web I began to notice that the term “developers” got applied to people who used “real” languages like C, C++ and Java. Coders that used other languages, like JavaScript and VBScript were derisively referred to as “script kiddies” - in other words, people who made cute little animations  like image rollovers and did form validation logic, but not much else.

Fast forward to today, and I don't hear that term used much anymore. There are many reasons for this, but some of the big ones in my estimation are:

1. The sheer scale of what is now possible in a modern Web application requires a lot of traditional engineering discipline knowledge and computer science theory,
2. JavaScript itself has come a long way since its humble beginnings, and even though there are still some shortcomings, it has evolved into a very powerful language,
3. Scripting languages have been embraced by industry titans like Google who have created some pretty impressive apps.

As a result, JavaScript developers are demanding many of the same tools and platform capabilities that more traditional developers have had for many years now. Chrome strives to provide these developers with the tools and platform they need to build the next and future generations of Web apps.

The last three months here at Google have been absolutely exhilarating – it's great to see the excitement around Chrome, Web apps, and the Web store. In the short time I've ben here so far, I've been amazed at the level of effort the Chrome team puts out to create a world-class browser and platform. I feel honored and privileged to be part of such a great team, and I'm really looking forward to helping Chrome move the web forward and redefining what's possible with Web applications.