Apps/Developers

This page contains all of the important details for the Apps Developers project (marketplace.mozilla.org/developers).

Elevator Pitch

Imagine you're a web developer and you want to learn about this Open Web Apps thing. The Apps Developers project focuses on explaining what this is, what you can do with it and how to build a web app, providing you with guidance and resources along the way.

Overview

• Prod URL: https://marketplace.mozilla.org/en-US/developers/ (behind login)
• Dev URL: TBD
• Stage URL: TBD
• Code Repo: Zamboni/mkt
• Code: Django (part of Zamboni = AMO/Marketplace)
• Product Owner: Fred Wenzel
• Dev Team: Arron Schaar (dev), Jen Fong (dev)
• IRC Channel: #devecosystem on irc.mozilla.org

Project Status

• Phase 2. (see below)
• Target release date: Q3 2012 goal

Developer Hub vs. MDN

To avoid confusion and duplication, the distinction between the developer hub and MDN is important:

Devhub:

• provides tutorials and end-to-end guide from ideation to publishing/maintaining an app
• outlines platform capabilities
• links to resources
• provides links to download key developer products, like development templates, web components
• has examples and excerpts
• limited scope to "interesting aspects" of the apps stack
• does not go into nitty-gritty details of APIs and all conceivable tools

MDN:

• Canonical source of all docs content, even the content displayed as part of the dev hub (devhub pulls specific data from MDN)
• has in-detail API documentation, for all relevant APIs
• covers the entire web stack

Development Phases

Phase 1: General Apps Landing Page and Tutorial

Generic Landing Page

Initially, our strategy to up-level the developer ecosystem will be focused on introduction and information. We will create a compelling landing page and tutorial that lead developers through the subtleties of the general apps development case. In later phases we will expand our landing page + tutorial formula to address other app verticals of interest.

Goals

• Make the app developer experience amazing
• Give app developers a very clear path to where they want to go

Audiences

• Mobile app developers
• Game developers
• Web developers
• Partners/App workshops
• Startups

Outline

• Design
• Revision/Source control
• App workshops/IDEs
• Advertising
• Statistics
• Purchases
• Hosting
• Cloud storage

Notes

• Comparative analysis, design prep - jgrlicky
  • Comparative Analysis
  • Raw Screenshots
  • jgrlicky: the movie
  • Landing page mocks

Relevant Sites

Internal:

• https://www.mozilla.org/en-US/apps/
• https://marketplace.mozilla.org/en-US/login?to=/en-US/developers/
• https://developer.mozilla.org/en/Apps
• https://developer.mozilla.org/en-US/Apps

External:

• https://simple.com/
• https://stripe.com/ and https://stripe.com/docs
• https://developer.apple.com/library/ios/#referencelibrary/GettingStarted/RoadMapiOS/

Landing Page

Informational landing page(s) outlining the dev process for web apps.

Suggested outline:

Why should I care?

What's a Web App? - content

• Examples
• Compare to other platforms
  • iOS, Android
  • Website
  • Add-on
• Technologies used

Design it!

• Layouts
• Responsive Design
• UI/Themes

Code it! - content

• The parts of an open web app
• Bootstrap
• HTML5 / CSS3 / JS docs
• Localization

Test it! -- content

• Mobile
• Desktop
• Offline / online
• QA best practices document

Publish it! (see "test it" content)

• Deployment
  • (own server, Heroku, Google Appspot)
• Marketplace / AMO
• Monetization

Next Steps (see "test it" content)

• Updates
• User Engagement

Phase 2: Turn Developer Hub into a one-stop destination

	THIS PAGE IS A WORKING DRAFT
	The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly. If you have any questions or ideas, please add them as a new topic on the discussion page.

marketplace.m.o/developers should be a one-stop destination for developers who want to develop open web apps.

DevHub Structure

Priorities

• P1/P2 content priorities: https://etherpad.mozilla.org/devhub

Whiteboard Drafts

• Front page
  • Front page, revision 8/16
• Developers
  • Developers, revision 8/16
• Partners
• Support

Nav Structure

cf. whiteboard drafts for sketches

• Global structure, always visible:
  • Front page (placeholder. "Developer Hub", perhaps?)
  • Developers
  • Partners
  • Support

• Front page sections:
  • Platform pitch (borrow from phase 1 content)
  • Developers
  • Partners
  • Support

• Developers page:
  • Get started
    • HTML5 etc. (technology basics)
    • Manifests etc (parts of an open web app)
    • Application types / security model (TBD) (not in August unless we have content already? Mark?)
    • tutorials and examples
  • Design it
    • (subsections as developed by Apps/Design project)
  • Code it
    • Firefox Dev Tools (Nightly+responsive mode)
    • emulators test environments (not in August)
    • templates (mortar)
    • web components (x-tags)
  • Publish it
    • Hosting / packaging
    • Payments (Wil?) (not in August)
    • Metrics (Wil?) (not in August)
    • Updates (not in August?)
    • Marketplace submission

• Partners page:
  • Reach
    • Firefox OS - Emerging Market/New smartphone users
  • Open
    • Based on standard web technologies (limiting/eliminating fragmentation)
    • Capturing a native like experience using standard web technologies
  • Choice
    • Direct User-Developer relationship
    • Light Approval Process
    • No need to resubmit apps for updated content

• Support page:
  • Landing page: Where to find help about open web apps and the marketplace

Implementation bugs

Tracking bug: bug 782374

No results.

0 Total; 0 Open (0%); 0 Resolved (0%); 0 Verified (0%);

Content pieces

Existing/in-progress content

• open web apps development templates (mortar - jlongster, webgamestub - dmose)
• web components (x-tags - dbuc)
• tutorials and end-to-end "walkthrough"
  • Outline and resources above (stage 1).
  • General tutorial on MDN
  • Introductory tutorial for mortar (and example app) on github, to move to MDN.
• apps UX design guidelines
• apps submission API docs (- andym)

Planned content

• landing page for potential partners.
• Developer support ("stack overflow") (- Ibai, Janet)
• additional tools/tutorials
  • backend pieces for mortar (Heroku? - tofumatt)
  • "appsync", lean cloud data storage for client-side apps (- ianbicking)

Next Steps

Tentative steps, after August developer release (Questions? Ask!):

• User research on developers interacting with "previously unknown technology" documentation
• Derive IA
• Redesign nav structure for devhub accordingly
• Visual design
• Separate MDN content from devhub content
  • cease pulling MDN content in directly
  • develop concise, polished stubs for devhub specifically
  • provide one or more external links to MDN at the bottom of each of the stubs
  • investigate "player card" (contextual MDN content) inside those stubs
  • investigate contextual navigation for people reaching MDN from devhub