mozilla

Revision 474817 of Podcasts

  • Revision slug: Web/Apps/Reference_apps/Podcasts
  • Revision title: Podcasts
  • Revision id: 474817
  • Created:
  • Creator: chrisdavidmills
  • Is current revision? No
  • Comment

Revision Content

Podcasts is an offline-capable, entirely HTML5/JS audio app. It's chiefly designed for Firefox OS, but support for other platforms and browsers is an eventual design goal. It allows users to subscribe to any podcast and listen to it right from their Firefox OS device! Read the full developer walkthrough

Difficulty: Advanced

Code Breakdown:

  • 4% HTML/EJS
  • 6% CSS
  • 90% JavaScript

 

Web API Usage

localStorage
Used to store settings and basic podcast metadata. Not used for podcast audio files or cover art.
IndexedDB
An asynchronous and fast datastore for maintaining podcast audio and images.
systemXHR
Allows cross-domain requests on Firefox OS without CORS.

Folder Structure

  - locales/ (Translation files)
  - test/ (Marionette integration and UI tests)
  - www/ (client-side code/styles)
  - www/index.html (base HTML file)
  - www/gaia/ (Gaia UI files)
  - www/js/templates/ (EJS/HTML templates)

Podcasts is a packaged app, so it requires a build step to be installed to Firefox OS. The Makefile contains a multi-step process that will create a www-built folder used to install the app on a phone or the Firefox OS Simulator.

Third-party Libraries

zepto.js
The lightweight jQuery-like library simplifies common tasks such as DOM manipulation.
backbone.js
Backbone lets us do data-binding and MVC-style coding, making the app a lot easier to develop.

Revision Source

<div class="summary">
  <img alt="" src="https://mdn.mozillademos.org/files/6233/podcasts1.jpg" style="width: 179px; height: 269px; float: left; padding-right: 30px; padding-bottom: 30px;" />
  <p>Podcasts is an offline-capable, entirely HTML5/JS audio app. It's chiefly designed for Firefox OS, but support for other platforms and browsers is an eventual design goal. It allows users to subscribe to any podcast and listen to it right from their Firefox OS device! <a class="walkthrough" href="https://github.com/mozilla/high-fidelity/blob/master/making-of.md">Read the full developer walkthrough</a></p>
  <p>Difficulty: Advanced</p>
  <p>Code Breakdown:</p>
  <ul style="position: relative; left: 30px">
    <li>4% HTML/EJS</li>
    <li>6% CSS</li>
    <li>90% JavaScript</li>
  </ul>
  <p>&nbsp;</p>
  <div id="view-code">
    <a class="app-source button" href="https://github.com/mozilla/high-fidelity">View Source</a> <a class="app-source button" href="https://github.com/mozilla/high-fidelity/archive/master.zip">Download</a></div>
</div>
<h2 id="Web_API_Usage">Web API Usage</h2>
<dl>
  <dt>
    <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a></dt>
  <dd>
    Used to store settings and basic podcast metadata. Not used for podcast audio files or cover art.</dd>
  <dt>
    <a href="/en-US/docs/IndexedDB">IndexedDB</a></dt>
  <dd>
    An asynchronous and fast datastore for maintaining podcast audio and images.</dd>
  <dt>
    <a href="/en-US/docs/DOM/XMLHttpRequest#Non-standard_properties">systemXHR</a></dt>
  <dd>
    Allows cross-domain requests on Firefox OS without CORS.</dd>
</dl>
<section id="sect1">
  <h2 id="Folder_Structure">Folder Structure</h2>
  <pre>
  - <a href="https://github.com/mozilla/high-fidelity/tree/master/locales">locales/</a> (Translation files)
  - <a href="https://github.com/mozilla/high-fidelity/tree/master/test">test/</a> (<a href="https://developer.mozilla.org/en-US/docs/Marionette">Marionette</a> integration and UI tests)
  - <a href="https://github.com/mozilla/high-fidelity/tree/master/www">www/</a> (client-side code/styles)
  - <a href="https://github.com/mozilla/high-fidelity/tree/master/www/index.html">www/index.html</a> (base HTML file)
  - <a href="https://github.com/mozilla/high-fidelity/tree/master/www/js/templates">www/gaia/</a> (<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a> UI files)
  - <a href="https://github.com/mozilla/high-fidelity/tree/master/www/js/templates">www/js/templates/</a> (EJS/HTML templates)</pre>
  <p>Podcasts is a <a href="/en-US/docs/Web/Apps/Packaged_apps">packaged app</a>, so it requires a build step to be installed to Firefox OS. The <code>Makefile</code> contains a multi-step process that will create a <code>www-built</code> folder used to install the app on a phone or the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a>.</p>
</section>
<h2 id="Third-party_Libraries">Third-party Libraries</h2>
<dl>
  <dt>
    <a href="http://zeptojs.com/" rel="external" target="_blank">zepto.js</a></dt>
  <dd>
    The lightweight jQuery-like library simplifies common tasks such as DOM manipulation.</dd>
  <dt>
    <a href="http://backbonejs.org/" rel="external" target="_blank">backbone.js</a></dt>
  <dd>
    Backbone lets us do data-binding and MVC-style coding, making the app a lot easier to develop.</dd>
</dl>
Revert to this revision