Confirmed users, Bureaucrats and Sysops emeriti
2,974
edits
DevTools/RoadmapDec2011: Difference between revisions
m
Mark as outdated
(Created page with "<section begin=summary />{{RoadmapSummary |icon=Devtoolsicon.png |pagelocation=DevTools/RoadmapJune2011 |pagetitle=Developer Tools 2012 Roadmap |owner=Kevin Dangoor |updated=Dece...") |
m (Mark as outdated) |
||
| (19 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
{{outdated}} | |||
<section begin=summary />{{RoadmapSummary | <section begin=summary />{{RoadmapSummary | ||
|icon=Devtoolsicon.png | |icon=Devtoolsicon.png | ||
|pagelocation=DevTools/ | |pagelocation=DevTools/RoadmapDec2011 | ||
|pagetitle=Developer Tools 2012 Roadmap | |pagetitle=Developer Tools 2012 Roadmap | ||
|owner=Kevin Dangoor | |owner=Kevin Dangoor | ||
|updated=December | |updated=December 14, 2011 | ||
|status=Draft | |status=Draft | ||
|description=The | |description=The web must 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 /> | }}<section end=summary /> | ||
=Developer Tools 2012= | =Developer Tools 2012= | ||
Kevin Dangoor [mailto:kdangoor@mozilla.com kdangoor@mozilla.com] December | Kevin Dangoor [mailto:kdangoor@mozilla.com kdangoor@mozilla.com] December 14, 2011 | ||
'''comments welcome! The best place for discussion is on [https://lists.mozilla.org/listinfo/dev-apps-firefox the dev-apps-firefox mailing list]''' | |||
==Vision== | ==Vision== | ||
The | The web must 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''. | |||
== | ==Themes== | ||
The details are in the sections that follow this one but if you want just the high level view of 2012 for developer tools, this is it: | |||
# Bundled tools for the most common tasks (page styling, JavaScript debugging, viewing details of network requests and page resources) | |||
That is the most important thing we are doing, because everything else we want to build in 2012 and beyond relies on the basics being there and being solid. Beyond delivering on great new tools, we will also seek to: | |||
# Create a coherent tools plan for add-ons, apps, mobile (working with the other teams in those areas) | |||
# Continue to engage web developers in building the best tools for Firefox | |||
==Bundled Tools for the Most Common Tasks== | ==Bundled Tools for the Most Common Tasks== | ||
| Line 34: | Line 40: | ||
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. | 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? | 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 | * Manipulating CSS styles to get the desired look and often saving the end result to source files | ||
* Tweaking HTML in support of CSS work | * Tweaking HTML in support of CSS work | ||
* Experimenting with JavaScript | * 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 | * Making sure that their code will work across the browsers they need to support | ||
* Inspection of cookies, localStorage and other page resources | * 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) | * 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.) | * Looking at the details of a specific network request (headers, JSON payloads, etc.) | ||
| Line 49: | Line 55: | ||
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.'' | 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 | * working with newer browser features | ||
| Line 55: | Line 61: | ||
** working with more complex CSS constructs like gradients and animations | ** working with more complex CSS constructs like gradients and animations | ||
* needs of a subset of the developer population | * needs of a subset of the developer population | ||
** debugging mobile-specific layouts and code (for example, touch events) | |||
** tackling memory usage issues | ** tackling memory usage issues | ||
** working with "compiled" JavaScript and CSS (minified files, CoffeeScript, LESS, SASS/SCSS, Stylus) | ** 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 | * 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. | 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. | |||
==Apps and Add-ons== | ==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== | ==Empowering Web Developers== | ||
| Line 83: | Line 115: | ||
# improve/contribute to the tools that ship with Firefox | # improve/contribute to the tools that ship with Firefox | ||
# build entirely new tools of their own | # 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= | =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]] | [[Category:Roadmaps]] | ||