Brackets

Exploring the Future of Web Tooling

Narciso (nj) Jaramillo, Adobe · @notwebsafe · QCon SF 2013

What is Brackets?

An open-source code editor
 for HTML/CSS/JavaScript
 built in HTML/CSS/JavaScript
 and architected for extensibility

Demo

Experiments

Theseus


Tom Lieber · alltom.com

Joel Brandt · joelbrandt.org

Debugging async code is fun!

#amirite #yolo

Something's wrong!

Guess at the problem

Add breakpoints, logs

Reload


Fixed yet?

Demo

github.com/adobe-research/theseus

Instabug


Peter Flynn · @knownissues

PSD Lens

Building on the Web Stack

Why?

  • Flexibility for UI prototyping
  • Multi-platform, multi-device
  • Users can be builders
  • No compiling!

Challenges

  • Lack of strong typing
  • Managing large amounts of JS
  • CSS for app layout
  • Asynchronicity
  • Performance

The shoulders of giants

Modularityrequire.js
Unit testingJasmine
Static analysisJSLint
CSS managementLESS
AsynchronicityPromises
DebuggingBrowser dev tools (+ Theseus)

Other key libraries

CodeMirror 2 Text editor
jQuery DOM manipulation, AJAX
Bootstrap CSS framework

BLOCK DIAGRAM TIME!

Caveats

  • Still exposed to browser bugs
  • Cross-browser will eventually be an issue
  • Hard to find contributors with native experience
  • Performance issues can be hard to track down
  • CSS still not great for app layout - Topcoat, grids coming

Extending Brackets

  1. Create a folder in the extensions/user directory
  2. Create a module named main.js in that folder
  3. Use brackets.getModule() instead of require()
  4. Profit!

Example

What's now,
what's next

The Numbers

Open-sourced May 2012

>50,000 regular users

~13,000 watchers, ~2,500 forks

~140 external contributors

5 external committers

140 extensions

Goals

  • Brackets: "Daily use" milestone
  • Edge Code: integration with Adobe tools/services


brackets.io
github.com/adobe/brackets
github.com/njx/presos/brackets-qconsf-2013
Narciso (nj) Jaramillo · @notwebsafe