Skip to content

Instantly share code, notes, and snippets.

@woloski
Created September 25, 2016 23:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save woloski/920bdf5425cf8ecc7f6b26ab96133f57 to your computer and use it in GitHub Desktop.
Save woloski/920bdf5425cf8ecc7f6b26ab96133f57 to your computer and use it in GitHub Desktop.
webtask editor

Introducing Webtask Editor

The Webtask Editor is a web based editor (and soon an Electron desktop app) to create and edit webtasks. This started as a side project but it quickly became clear that the editor would help adopt the serverless concept webtask Our goal is to reduce the time it takes to go from an idea => code => HTTPS endpoint.

The Power of WYSWYG

One of the tools many of us enjoyed using a lot in the old days was the SQL Explorer. The instant feedback you've got when executing queries was great. Edit your query, CTRL+R, see the result, teak the query, CTRL+R, and repeat that loop until you got it right.

The same happeneed with HTML and CSS with tools like livereload or React HotLoader, and even this markdown editor I'm using which live-preview the rendered markdown.

We, developers, like to go fast. Once we have an idea, we want to see it working. At Auth0, we are fanatics of this frictionless first-time experience and that's why we created the Webtask Editor.

The editor is the best way to explore the webtask platform and the serverless concepts. As an example, you can create a Slack integration from scratch, in 20 seconds. Here is a gif showing how fast you can iterate.

GIF THAT SHOWS HALF SLACK, HALF EDITOR WITH CODE AND LOGS OPEN, HALF SLACK. ADD AN IF THAT CHANGE THE MESSAGE DEPENDING ON THE INPUT, cmd-s, send bye. if (context.data.text === 'bye') { return done(null, 'bye ' + context.data.user_name) }

Iterating fast

Taking this concept a step further, we included an HTTP tester (like a mini-postman) inside the editor. You can edit code, press cmd-shift-s and check the response and logs, all in the same window. This is how that experience look like:

GIF THAT SHOWS CODE/LOGS/RUNNER. CHANGE CODE, CMD+SHIFT+S, SHOW RESULT.

You can change the default request sent to the webtask by the tester.

GitHub Integration

We built first class support for GitHub inside the editor. Once you authorized your GitHub account (using Auth0), you can configure two-way sync between webtask and GitHub.

SCREENSHOT SHOWING THAT YOU CAN CREATE A REPO

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment