Getting started on Firefox OS apps with AngularJS

By creator1988 on woensdag 20 februari 2013 11:21 - Comments are disabled
Category: Frontend, Views: 22.920

The part that amazes me most about working day to day with Firefox OS is the incredible way that the existing web eco-system can be reused to target mobile phones. We have seen this with using Weinre to remote debug the FFOS system, using emscripten to cross compile C code into javascript, or just the ease of reusing jQuery within your Firefox OS app; something that I would have killed for back in the days when doing WPF.

Development in JavaScript frameworks has exploded since the mid-2000s, with new players emerging every other day, and application frameworks like Ember.js or AngularJS now taking the lead, giving website developers extremely powerful components at a fraction of the costs. The great thing about Firefox OS is that we can take advantage of the developments in these areas, rather than waiting for a new release from Apple or Google to react on the changing world.

However, building great web applications doesn't end with picking an application framework. Perhaps the most scaring part here is to pick a UI framework, or to get over the data binding syntax. The good thing here is: been there, done that. We have explored a variety of UI libraries, application frameworks and we have experienced first hand which are the pitfalls when building for Firefox OS. That's why we're releasing application boilerplate for writing great looking and structured mobile applications. For an impression: the application can be found on comoyo.github.com/ffos-list-detail (visit in any modern browser).

https://c9.io/janjongboom/dropbox/workspace/ffos1.png

Things we have addressed here:
  • Routing for bookmarkable segments in the application
  • Separation in controllers, views and services through AngularJS
  • Incorporating a UI library with the Firefox OS building blocks, that was also used to build the core UI layer (how is that for native!)
  • Animations between views (slide and modal, plus reverse), optimized to also run smooth on low spec phones
  • Compatibility to also run on Android, iOS and desktop browsers
  • Example app manifest + cache manifest for offline usage
  • RequireJS build system for javascript combination / minification
In general we have tried to give you a quick start to get building great Firefox OS applications. Good thing here is that you will get cross platformability (is that a word?) as a free bonus, as long as you don't use any of the WebAPI's to access native phone features.

The source of the application (fork and start hacking!) can be found on github.com/comoyo/ffos-list-detail.

Comments on Hacker News

A decent terminal experience on Windows nl

Door creator1988 op zondag 30 december 2012 13:19 - Reacties (5)
Categorie: Frontend, Views: 6.044

Two years ago I would've never guessed that I would be completely hooked on using the terminal. However, after moving to an operating system that had a decent terminal underneath I soon became a command line junky. Time to improve the retarded beast that they call 'cmd.exe' in Windows by adding some real terminal experience.

Yes, I'm aware of PowerShell. But the 'yet another syntax' is not for me.

The thing that annoys me the most is the inability to easily copy and paste text. On OS/X I can do this through CMD+C, CMD+V, and keep CTRL+C for terminating programs; on Linux I can use CTRL+SHIFT+C, but on Windows:
  1. Right-click and choose 'Mark'
  2. Drag selection
  3. Right click
  4. Go somewhere, right click again
  5. And choose 'Paste'


Lees verder »

Building Wordpress sites in the cloud nl

Door creator1988 op woensdag 11 juli 2012 15:20 - Reacties (3)
Categorie: Frontend, Views: 41.805

As part of the new features that we launched two weeks in Cloud9 IDE we've added support for Python, Ruby and PHP as server side languages besides node.js. That's not just it, because users have full freedom over the VM that we run your code on so they can install any platform they like (C++ development in the cloud f.e.). The cool thing is that it's now possible to bring all sorts of already existing applications into Cloud9, without relying on third parties to do the actual Apache hosting etc. because you'll just get an Openshift server. In this post I'll show a step by step demo of how to use Cloud9 to build a Wordpress application without leaving the browser.

If you want to see the quickest demo possible, sign up for Cloud9 at c9.io, log in via GitHub and create an index.php file:
PHP:
1
2
<?php
echo 'Hello world'


When you now click the 'Debug' button we spawn a shell version of PHP that echoes 'Hello world' back to you. To run it via Apache go to the run panel, select 'Apache+PHP' and re-click 'Debug'.

http://100procentjan.nl/tweakers/wp1.png

Lees verder »

Rate limited website scraping with node.js and async

By creator1988 on woensdag 25 april 2012 19:30 - Comments (9)
Category: Frontend, Views: 39.238

So yesterday a job description at my previous employer popped up in my facebook stream which reminded me of the programming excercise that we included in the interview process just before I left the company. In short it comes down to:
  • Funda has an API that lets you do queries, the response is paged, max. 25 objects at a time
  • The API is rate limited at about 100 req./minute
  • Request all pages for a given query
  • Count the times a realtor ID is in the result
  • Aggregate and sum the realtor ID's and create a top 10 list of realtors with the most objects
Scraping this is pretty easy, but the rate limiting got me thinking. A great library for doing queue work like this (create a large list of URLs to scrape, then do it 4 at the same time or something) is async by caolan, but it lacks real rate limiting. Room for improvement!

Read more »

Inheritance in javascript nl

Door creator1988 op donderdag 12 april 2012 18:54 - Reacties (8)
Categorie: Frontend, Views: 5.602

Inheritance in javascript blijf verdomd moeilijk, zoals ik deze week weer tegenkwam toen ik een vriend hielp in het porten van wat AS3 code naar javascript. Vandaar wat ready to use code snippets en een kleine uitleg om inheritance toe te passen.

Javascript kent een aantal manieren om code te mixen, maar ze zijn globaal onder te verdelen in inheritance en mixins. Inheritance is prettig voor een object structuur die je in een taal als Java of C# zou schrijven. Single inheritance van classes, als in Object->GameObject->Person->Enemy. Elk van de parent classes zou ook los kunnen bestaan, en de classes mogen zelf state bijhouden. Mixins hebben meer weg van abstracte classes, en zijn bedoeld om behavior te laten erven, sla er dus geen state in op want dan loop je tegen scoping issues aan. Je kunt meerdere mixin's in 1 object mixen voor multiple-inheritance-like behavior.

Inheritance
Allereerst lenen we wat code uit node.js. Omdat deze functie afhankelijk is van Object.create voegen we deze toe aan browsers die deze nog niet hebben middels een workaround van Ben Newman.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 Object.create = function (o) {  
    if (arguments.length > 1) {  
        throw new Error('Object.create implementation only accepts the first parameter.');  
    }  
    function F() {}  
    F.prototype = o;  
    return new F();  
};

var inherits = function (ctor, superCtor) {
    ctor.super_ = superCtor;
    ctor.prototype = Object.create(superCtor.prototype);
    ctor.prototype.constructor = {
        value: ctor,
        enumerable: false
    };
};


Lees verder »