If you are wondering what tools to use to build a client side web app, Mozilla's new Rec Room has a set of recommendations and a tool that attempts to integrate them for you. This is described as "work in progress" and devs are being encouraged to try it out.

We first heard of Mozilla's plan to put together a core set of tools for developing Web apps back in April and now it has materialized in the form of  Rec Room, a GitHub repsoitory that is described as the

"future home of the utility belt from Mozilla that helps you build client-side web apps".

Rec Room is a Node.js utility toolchain for web apps for Firefox OS. It has been assembled by @tofumatt, aka Matthew Riley MacPherson, a web app hacker at Mozilla, drawing on his own experience.

In his blog post introducing Rec Room, tofumatt not only details the set of tools he used while working on  High Fidelity, an HTML5 podcast app but also provides a documented example of using it to build a simple world clock app, taking us from project creation to templating to deployment.  

To get started you need to install Rec Room using Node.js and from here you'll have access to:

• Brick to add components like appbars and buttons to your UI
  
  
• Ember for your app’s controllers, models, and views
  
  
• Handlebars to write your app’s templates
  
  
• Grunt to run the tasks for your app, including building for production
  
  
• I18n.js to localize your app
  
  
• Mocha to test your app
  
  
• Stylus to write your CSS
  
  
• Yeoman to scaffold new code for your app’s models and templates

The entire sample app is available at worldclock.tofumatt.com and the source code is available on GitHub.

It is worth noting that the tools are essentially some command line utilities that create a project structure using the libraries listed. After this it is up to you how to edit and manage the project. You also need to know how to use each of the frameworks. Given the objective is to create HTML/JavaScript apps this still seems like a big barrier to get over. Why is it that programmers refuse to realize that the most productive environment for the novice programmer in any field is the IDE preferably with a graphical UI editor. If you are of the "just use a text editor" persuasion you wont agree with this last statement. 

A comment on the blog post from Michael Niemann asks:

What does node.js and everything else that seems to require it actually do for me that is better than simply writing a js file, a css file and an html file.

Tofumatt's reply is that while for a lot of people, depending on the project, HTML, css, and JS will be the best option, others want something more full-featured in order to be productive. He writes:

For me, these requirements let me build offline apps with complex routing, model interactions, and more easily. If your needs are simple then you’re set, but if your needs are complex I’m hoping these tools simplify things.

Expanding on this answer another commenter, Andrew Fallows, writes:

Much of the premise of tools like Node, Ember, Stylus, and the rest of the tools in collections like Rec Room comes down to one thing: Making the development process faster.

Every single advanced, modern web application built on top of something like EmberJS could technically have been written in pure JavaScript with no extra tools on top. After all, once it reaches the browser, it’s nothing but HTML, CSS, and JS – all the stuff gets compiled and interpreted down. The advantage of the tools these is that it takes the developer less time to get to the same level of completeness/functionality.

This is all true, but putting a few frameworks together and providing a command line tool that creates and runs a project isn't really enough. It is a step in the right direction, but it hardly gets off the starting blocks. Why not use something like Netbeans as the starting point for an IDE for Firefox apps? Google has taken this approach with Android Studio and it makes app creation much easier.  

Web app programmers need a modern IDE not a loosely coupled set of tools. 

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info