App basics for Firefox OS – a screencast series to get you started

Over the next few days we’ll release a series of screencasts explaining how to start your first Open Web App and develop for Firefox OS.

Firefox OS - Intro and hello

Each of the screencasts is terse enough to watch in a short break and the whole series should not take you more than an hour of your time. The series features Jan Jongboom (@janjongboom), Sergi Mansilla (@sergimansilla) of Telenor Digital and Chris Heilmann (@codepo8) of Mozilla and was shot in three days in Oslo, Norway at the offices of Telenor Digital in February 2014.

Here are the three of us telling you about the series and what to expect:

Firefox OS is an operating system that brings the web to mobile devices. Instead of being a new OS with new technologies and development environments it builds on standardised web technologies that have been in use for years now. If you are a web developer and you want to build a mobile app, Firefox OS gives you the tools to do so, without having to change your workflow or learn a totally new development environment. In this series of short videos, developers from Mozilla and Telenor met in Oslo, Norway to explain in a few steps how you can get started to build applications for FirefoxOS. You’ll learn:

  • how to build your first application for Firefox OS
  • how to debug and test your application both on the desktop and the real device
  • how to get it listed in the marketplace
  • how to use the APIs and special interfaces Firefox OS offers a JavaScript developer to take advantage of the hardware available in smartphones.

In addition to the screencasts, you can download the accompanying code samples from GitHub . If you want to try the code examples out for yourself, you will need to set up a very simple development environment. All you need is:

  • A current version of Firefox (which comes out of the box with the developer tools you need) – we recommend getting Firefox Aurora or Nightly if you really want to play with the state-of-the-art technology.
  • A text editor – in the screencasts we used Sublime Text, but any will do. If you want to be really web native, you can try Adobe Brackets.
  • A local server or a server to push your demo files to. A few of the demo apps need HTTP connections instead of local ones.

sergi and chris recording

Over the next few days we’ll cover the following topics:

In addition to the videos, you can also go to the Wiki page of the series to get extra information and links on the subjects covered.

Come back here to see the links appear day by day or follow us on Twitter at @mozhacks to get information when the next video is out.

jan recording his video

Once the series is out, there’ll be a Wiki resource to get them all in one place. Telenor are also working on getting these videos dubbed in different languages. For now, stay tuned.

Many thanks to Sergi, Jan, Jakob, Ketil, Nathalie and Anne from Telenor to make all of this possible.

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…


18 comments

  1. Mike

    If there’s a way of getting email alerts when videos are released, please sign me up.

    March 13th, 2014 at 04:20

    1. Flaki

      Hey Mike!
      There is an RSS feed: https://hacks.mozilla.org/category/videoseries/feed/ to follow the posts in this category, and if you really need updates to be emailed, you might as well feed (he-he) the RSS url into some online rss-to-email service (like the one at http://blogtrottr.com/).
      Just an idea. ;)

      March 13th, 2014 at 07:30

    2. Chris Heilmann

      The simplest way is to check the Wiki page – I will update this one as they come in: https://developer.mozilla.org/en-US/Firefox_OS/Screencast_series:_App_Basics_for_Firefox_OS We didn’t want to spam out for every video. Also, if you follow @mozhacks on Twitter all the videos will be announced there.

      March 13th, 2014 at 07:36

  2. max

    That intro was like 10 seconds and had zero information on Firefox OS. Reminded me of those linkbait multipage articles. Why not release the whole 1 hour video and let people watch as they see fit?

    March 13th, 2014 at 12:28

    1. Chris Heilmann

      Wait a week and you will have them all. We haven’t finished all the videos and documentation yet, so we thought we give a sneak peak into what’s coming. Soon it will all be on one long wiki page with lots of information and the videos will be available for download. And yes, we can also do a one hour version. As said, though, there are still a few parts missing.

      March 13th, 2014 at 12:37

  3. Craig

    Nothing like a entire article that PROMISES something…

    March 13th, 2014 at 21:27

    1. Chris Heilmann

      announcements tend to do that.

      March 14th, 2014 at 01:03

  4. Lukas Stancik

    Thanks for the Firefox OS, it’s such an exciting project. Don’t you ever dare to stop being so awesome, guys :) Mozilla rocks!

    March 14th, 2014 at 01:31

  5. Chris Heilmann

    The second video is now out: @sergimansilla explains the App Manifest http://youtu.be/txyux8RZrxY – follow all the docs on the Wiki: https://developer.mozilla.org/en-US/Firefox_OS/Screencast_series:_App_Basics_for_Firefox_OS

    March 14th, 2014 at 01:50

    1. Caspy7

      Awesome.
      Would be great if there were another blog post once all videos are available.

      March 14th, 2014 at 03:39

  6. Chris Heilmann

    And video three is out: @janjongboom explains the App Manager and Simulator https://www.youtube.com/watch?v=wiROpnExj-A

    March 15th, 2014 at 00:35

  7. Chris Heilmann

    Video #4 in the “App Basics for #FirefoxOS” series: @janjongboom of @telenordigital on “Testing on the Device” https://www.youtube.com/watch?v=OIUQwqQMVZM

    March 16th, 2014 at 00:07

  8. Chris Heilmann

    Video #5 is out “Adding your App to the Marketplace” https://www.youtube.com/watch?v=gipaEJTM3TU

    March 17th, 2014 at 01:32

  9. Chris Heilmann

    Today’s video in the App Basics for ‪#‎firefoxos‬ series is a quickie: “What makes a good HTML5 App?” https://www.youtube.com/watch?v=fBJmUreevRU

    March 18th, 2014 at 01:06

  10. Chris Heilmann

    Today we get to Web APIs with @sergimansilla https://www.youtube.com/watch?v=p0DWpWNTd7w

    March 19th, 2014 at 01:23

  11. Chris Heilmann

    Working Offline is today’s video: https://www.youtube.com/watch?v=dnuoUM_bIQM

    March 22nd, 2014 at 02:57

    1. Caspy7

      Is that the last of the videos?
      Perhaps you can now include them all in a youtube playlist for easier discovery. (You can also change the links in the blogpost to be playlist links.)

      Also, a new blog post would probably be good for those who aren’t somehow subscribed here (though you’re probably already working on it and I can let you alone).

      March 22nd, 2014 at 03:05

      1. Chris Heilmann

        There is one more. Monday comes a post with a playlist and downloadable versions of the videos.

        March 22nd, 2014 at 05:34

Comments are closed for this article.