View source for DevTools/RoadmapDec2011

<section begin=summary />{{RoadmapSummary
|icon=Devtoolsicon.png
|pagelocation=DevTools/RoadmapDec2011
|pagetitle=Developer Tools 2012 Roadmap
|owner=Kevin Dangoor
|updated=December 13, 2011
|status=Draft
|description=We want the web to be ''easier to develop for than proprietary platforms''. One way in which Mozilla helps keep the web out in front is by making Firefox ''the best dynamic environment for building modern web applications''. In 2012, we'll build on the momentum started in 2011 to deliver a useful and easy-to-use suite of tools.
}}<section end=summary />

=Developer Tools 2012=

Kevin Dangoor [mailto:kdangoor@mozilla.com kdangoor@mozilla.com] December 13, 2012

'''This is a draft. comments welcome! The best place for discussion is on [https://lists.mozilla.org/listinfo/dev-apps-firefox the dev-apps-firefox mailing list]'''

==Vision==

We want the web to be ''easier to develop for than proprietary platforms''.

One way in which Mozilla helps keep the web out in front is by making Firefox ''the best dynamic environment for building modern web applications''.

==Bundled Tools for the Most Common Tasks==

Web developers should be able to count on any build of Firefox they choose having fast, well-tested tools that they can use in working on their applications and sites.

The tools they have access to should support all of the common tasks well and provide places for add-ons to handle the less common tasks.

What are the common tasks today ([[#1|1]])?

* Manipulating CSS styles to get the desired look and often saving the end result to source files
* Tweaking HTML in support of CSS work
* Experimenting with JavaScript
* Looking at how other sites implement their layouts in CSS
* Making sure that their code will work across the browsers they need to support
* Inspection of cookies, localStorage, app cache and other page resources
* Viewing page load details (how long the page took to load, how long the various resources took)
* Looking at the details of a specific network request (headers, JSON payloads, etc.)
* Setting breakpoints and watches and stepping through JavaScript code
* Figuring out what is making their application slower than they'd like

Inside each of these tasks are many smaller features that are part of the total developer experience. We have already done considerable development in support of the common tasks. ''In 2012, we want to provide a great user experience for the most common tasks.''

Here are some examples of less common or more advanced tasks:

* working with newer browser features
** managing IndexedDB databases
** working with more complex CSS constructs like gradients and animations
* needs of a subset of the developer population
** debugging mobile-specific layouts and code (for example, touch events)
** tackling memory usage issues
** working with "compiled" JavaScript and CSS (minified files, CoffeeScript, LESS, SASS/SCSS, Stylus)
* things that they didn't realize they could do in the browser or that the browser could do for them

We will assess these on a case-by-case basis and try to provide the features that will delight developers the most. The focus for 2012, however, is on shipping great tools for the common tasks.

==New and Evolving Tools==

Our biggest news in 2012 is going to be the addition of new tools for page styling, debugging and visualizing how web sites interact with the server. These tools join the Web Console and Scratchpad that were introduced in 2011. Together, these features touch on the most common needs of web developers.

As soon as a feature is "useful", we'll get it out to web developers. But, that's not the end of the story. The Mozilla community will continue to iterate on these tools with improvements at each release.

Examples of improvements that will show up over the course of the year:

* Integrated user interface with a command line that provides quick access to features
* HTML document manipulation
* autocompletion of CSS properties and values
* a web developer-oriented color picker
* a 3D view of web page structure
* features that help users spot errors in their code more quickly
* Scratchpad improvements that make it quicker to navigate and run JavaScript
* ability for the user to view the changes they made using the tools, to help them modify their source code

Though we're introducing many new tools in 2012, by the end of 2012 most will have moved well beyond a "1.0" state.

==Supporting Open Web Standards via Tools==

Ideally, every person using web sites and applications is using a modern browser with support for the latest standards. Of course, even this ideal scenario falls short of the ideal: what are the “latest standards”? The “HTML5” standard is still evolving and there has been considerable churn in areas like Web Sockets and IndexedDB vs. Web SQL Database.

Among the many user interface challenges that we face, we want our tools to:

# provide support for and encourage users to develop for the latest standards supported by modern browsers
# assist users in making good tradeoffs when they need to support older browsers

Most web developers are given constraints concerning which browsers they must support, with some developers saddled with a requirement to support a decade-old browser. If we can help developers both provide support for the browsers they are required to support ''and'' take advantage of newer browser features, we will be making the web a better place.

This won’t be easy, and I won’t even dive into specifics on how to do this here. I’m writing this as a guideline that we can apply and one more thing to think about as we design new tools.

==Apps and Add-ons==

In 2012, Mozilla is making a big push into [https://apps.mozillalabs.com/ Apps]. "Apps" are standard web technology, but with enough supporting technology to make them integrated better into the user's computing environments (desktops, smartphones and tablets).

The tools that we build for web developers should work easily for Apps, but opportunities may present themselves for helping Apps developers even more.

Firefox Add-ons are in a somewhat similar position. Much of the technology that we have could be "pointed at" an add-on to help debug that add-on.

The current plan for the Add-on Builder calls for the Builder to expand to helping in the creation and packaging of Apps, and to leverage the core source code editing functionality now built into Firefox. The latter change will pave the way for the Builder to integrate well with the rest of the tools shipped with the browser.

==Mobile Development==

Here are two things to consider about tools for web development for mobile devices:

# Firefox has an advantage over some of the other mobile browsers because there is very little difference between the rendering engine in Firefox Desktop and Mobile. Other browsers have a much larger difference between their mobile and desktop versions due to factors like update schedule.
# Mobile devices are not, on their own, good development devices because of their small screens and lack of keyboard.

Taken together, these two points suggest that providing a solid desktop Firefox-based toolset is the first step and can go a long way toward providing an environment with which a user can work on mobile web apps. A user can get a lot done without even having a Firefox Mobile-capable device.

The more advanced next step is to be able to take advantage of both a desktop's larger screen real estate and the unique sensors and features of the mobile device ''together''. This could be done via a remote connection between desktop and mobile. Infrastructure for this is being built as part of the [[DevTools/Features/Debugger|Debugger feature]], but more work will be necessary to provide a good user interface for establishing connections and to extend this capability to tools other than the debugger.

==Empowering Web Developers==

The users of developer tools are all developers. Many of them know HTML, CSS and JavaScript very well indeed, and we will strive to make it as easy as possible for them to:

# extend the tools that ship with Firefox
# improve/contribute to the tools that ship with Firefox
# build entirely new tools of their own

At the end of 2011, we're already seeing an increase in participation in building new tools for Firefox. We will work to accelerate that in 2012.

=Roadmap=

The dates listed below are guidelines around when we expect a feature to ship. Consult the [[Features/DevTools|feature pages]] for more current information and details.

==Q1 2012==

* Inspect the styles on a page
* Change the styles on a page and see the results as you make the changes

==Q2 2012==

* User interface that scales to accommodate more tools and user preferences

==Q3 2012==

* Debugger
* Network event timeline

==Q4 2012==

* Tooling to assist with application performance issues

<div id="1">This list of common tasks is extrapolated from user studies (7) and a survey we commissioned (600 web developers). If you think there are other common things that web developers do or want to do that are not covered by this collection of tasks, let me know!</div>

[[Category:Roadmaps]]