View source for DeveloperExperience/Mozilla-App-SDK

= The Mozilla App SDK =

The Mozilla App SDK helps web developers get a quick start on their app projects that target Firefox OS and Firefox on Android.

The "App SDK" is actually a combination of source code, tools and online documentation to get people started.

== Starter Code ==

We should provide developers with HTML layouts and bootstrap packs to ensure they have turn-key options for generating apps for the verticals we feel are most important ('''TODO: name these verticals''') to advancing our App/Firefox OS goals.

Here are a few of the requirements for layouts and bootstraps:

* Layout markup should be constructed in a way that ensures the apps produced look and operate flawlessly from device to device at any resolution, in both touch and non-touch environments.
* Bootstraps should not require command line knowledge to generate. A developer should be able to assemble a layout or bootstrap package via GUI

=== UI Widgets/Components ===

We should offer a stock set of components that provide the UI and behavioral elements common to complex web applications. Each component shall be tested x-browser, look and operate well on different devices/resolutions, and have touch capabilities built-in where applicable.

If possible, we should support the emerging Web Components standard, which will greatly simplify the markup developers need to use in creating their apps. If we do support Web Components, all components should emphasize the declarative abilities inherent to the native elements and be composeable in markup the same way native elements are.

'''TODO: what widgets are important for mobile app developers to have?'''

== Documentation (and Tutorials) ==

The SDK should collect and present documentation for all the app-specific pieces a developer needs to create, debug, publish, and support an HTML5 app. Documentation of all Mozilla-specific services, such as the Marketplace and payments APIs, should be included in the SDK as well.

=== Developer Tools ===

Developer tools should be collected and presented to developers through the SDK site in a way that highlights their usefulness to the task of app creation. Real-world use-cases should be provided to help developers understand which tools to use in which configuration to achieve the desired outcome.

Tools might include any of the following:

* built-in Firefox dev tools
* add-ons
* third-party web sites/apps
* JS frameworks for testing

== Implementation Status and Open Questions ==

* An initial comprehensive app tutorial has been written. The content is on MDN and work is underway to fit the content into the developer area of the Marketplace site
* Work has begun on a Gaia style guide that can feed into the styling of any widgets we offer
** [https://wiki.mozilla.org/Gaia/Design/BuildingBlocks Wiki]
** [https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks Future home for code]
** [https://github.com/telefonicaid/Gaia-UI-Building-Blocks Current test-bed for code]
** [http://telefonicaid.github.com/Gaia-UI-Building-Blocks/index.html Webpage showing all the building blocks]
* the x-tag library offers a cross-browser means for creating Web Components today
* work will be starting soon on implementing the functionality provided by the x-tag library natively in Firefox
* Mortar offers a command line-driven way to generate a skeleton project, but does not offer any styling assistance at this time.

Open questions:

# status of the Gaia style guide and what exactly that will offer app developers
# is Twitter Bootstrap a good visual/widget basis? (can we/should we use Zepto instead of jQuery?)
# would x-tag (Web Components) simplify some of Bootstrap's widgets?
# are there advantages to using the x-tag elements and styling those vs. using Bootstrap's widgets?
# how much work is involved in customizing the appearance of whichever solution is the right one to provide the style we want?
# if x-tag is part of the solution, who will own it going forward?
# how does Mortar fit in?