Interactive tutorial and sandbox for the busy JavaScript developer’s guide to ECMAScript 6


Like everyone, there are days when my job gets me down. It’s hectic, with competing priorities and a “needs to be done yesterday” mentality that can make anyone’s head explode. But if you’re lucky, you have great co-workers, people who cut through the <expletive> and add some levity to your daily grind.

I am one of those lucky people. Having spent my entire 16-plus-year IBM career at developerWorks, an enclave of happiness, I’ve seen a lot of team members come and go, and come back again once they realize there is no place like dW. One of those returnees is Doug Tidwell. Doug left dW a dozen or so years ago for new opportunities in IBM-land. But like many before him, he returned to the flock. For his first major assignment he tackled our current holy grail: adding interactive content to our tutorials.

Phase 1: The sandbox. Knowing that we would need lots of restaurant-quality code when the developerWorks sandbox launched, Doug worked with the rest of the content team to find the tutorials best suited for the sandbox’s interactive and iterative style. Then he put on his finest blue cape, mixed up his favorite libation, and retreated to his coding grotto. When he emerged, we were thrilled to see the result (not to mention the fact that he’d maintained his high standards of personal hygiene during his extended coding session): A solid gold treasury of tutorials that make the most of the sandbox.

Working closely with Doug, we created one new tutorial and updated five others — including the four-part series The busy JavaScript developer’s guide to ECMAScript 6 — with embedded sandboxes. Now, anyone using these tutorials can practice coding on the spot! (dW editor Robin Wood is adding sandboxes to another seven tutorials. You’ll see those on the site very soon. Stay tuned!)

Doug is all about building community, so I asked him if he had heard anything in particular from developerWorks readers about the new sandbox. Reaching into the dW Mailbag, he sent back this report:

Jenni, thanks for asking if I had heard anything in particular from developerWorks readers about the new sandbox. I recently received the following email from Seasoned JavaScript Programmer in Des Moines, Iowa.  SJP writes:

Dear developerWorks,

I am a seasoned JavaScript programmer with many years of experience. Lately, I feel like all my friends and coworkers are using the new features of ECMAScript 6, avoiding callback hell and other hassles of modern web development while I’m stuck in the past. Then, the other night I had a dream that my Mom came down to my room in the basement. She had a fruit basket on her head, a light saber in the waistband of her bathrobe, and she told me to go to to learn all about ECMAScript 6. She said I could learn with interactive samples that let me run live code as I read through the articles.

I woke up in a cold sweat, headed to dW, and saw that Mom was right. (Good thing I have a photographic memory for really long URLs!) Now I know how to use Promises and Proxies and everything else that’s new in ES6!

So I’ve made my Mom proud and I’m the envy of my friends and coworkers. But please tell me: What magic did you use to enable this awesomeness?

Sincerely yours,
Seasoned JavaScript Programmer

Well, SJP, here at developerWorks we live to make programmers’ dreams come true. We’re thrilled that you enjoyed the new sandbox. As for how we brought this awesomeness to developers everywhere, it’s not magic at all: it’s the combination of Bluemix and OpenWhisk. When you click the Run button above the code editor, whatever’s in the editor is sent to Bluemix. Once it gets there, a serverless task in our OpenWhisk environment interprets or compiles your code, runs it, and sends the results back to your browser. As you saw, you can change the code and rerun it as many times as you like. It’s a great way to learn; I have to say, thanks to building code for the sandbox, I understand Promises better than I ever did before.

We’re glad you enjoyed the articles. Now that you’re an ES6 expert, why not take a look at OpenWhisk and see how to make the most of serverless computing? (See this great collection of OpenWhisk videos from developerWorks TV to get started.) In the meantime, stay tuned for more and more interactive content on developerWorks. And as always, let us know what you think in the comments section.

Keep in touch,
Doug Tidwell

Join The Discussion

Your email address will not be published. Required fields are marked *