TAG javascript

Firefox OS App Day

Last weekend I attended the first Firefox OS App Day held in Switzerland. Mozilla held the event to promote their new mobile operating system to developers and have people try and build apps.

Firefox OS is a new mobile OS by Mozilla that is entirely web based and therefore quite interesting for us web developers. They are developing many new JavaScript APIs to enable developers to use all the functionalities native apps typically get access to on other devices. And by submitting them for standardization to the W3C, there is a hope that one day all these APIs will be available on all platforms, making mobile web apps an even more attractive option.

In the morning a few talks were held to introduce the ecosystem and APIs. Then after a lunch break we had a few hours to hack an application together. My idea was to take a picture with the front-facing camera whenever you get a call. That picture would then be stored as the contact’s picture so that every time they call you you see the face you made the last time. It is a bit strange but sounded like a funny experiment.

Unfortunately the APIs to access the camera and handle incoming phone calls are for now still restricted to pre-installed applications (so-called Carrier apps). This means you can develop such an app and test it on your device if it is installed via the USB cable, but you could not deploy it on the Firefox Marketplace. It also means that right now those APIs are even less documented than the rest.

I did not find any docs for the camera API at all and had to look into the camera app’s sources to reverse engineer how to work the camera. That is a clear upside of fact that the entire OS is open source and written in JavaScript. Unfortunately I never managed to get an answer from the camera, when trying to take a picture it would just hang.

The telephony API on the other hand was documented a bit, but the docs did not include which permissions the app had to request to access the telephony objects, so I lost a lot of time with a crashing app before I figured it out looking at the OS sources again.

All in all the phones and OS still feel a bit “beta” when compared to more mature platforms. But it looks a lot better than what I saw six months ago in the pre-release state so I am quite hopeful that it will become an interesting platform in the near future.

My app in its somewhat broken state is available on github. I imagine the issues with the camera and all are fixable but I do not have a phone to test it with yet so I can not really work on the app anymore. The emulator allows you to develop some types of apps but it seems the camera and telephony APIs are not supported yet.

In any case Firefox OS is fun to play with for web developers and I would recommend you give it a shot, exciting times ahead!

June 6, 2013 by Jordi Boggiano in Development // Tags: , , Comments Off on Firefox OS App Day

An Appeal to All Package Managers

I work on Composer – a new PHP dependency manager – and it is now working quite well for managing PHP packages. We have a decent amount (and growing fast) of packages on Packagist. All is well. Yet, most PHP projects are websites, and they need some frontend libraries, be it JavaScript or CSS – I will use jQuery as an example that everyone can grasp easily. In some frameworks, you have plugins that bundle a copy of jQuery. Some people have also used Composer to hack together jQuery packages so that they can download it, and then they have some scripts to copy or symlink the files in the proper location. That is all very flaky, you end up with multiple copies of jQuery and if you are lucky you even get various different versions.

I have been thinking about it for a few months, and it seems like nothing exists out there. Every language out there has its own package manager, but everyone seems to be stuck with the same problem of frontend code. Obviously jQuery is used by virtually everyone. They can’t support Composer, Bundler, npm, pip and god knows what. Building a package manager for JS/CSS could work, but the community is huge and scattered and getting broad adoption is going to be very difficult.

The plan

As far as I can see, and given the way Composer works, it would be fairly easy to build a central package repository – similar to Packagist – where people can submit package definitions for frontend libs. For instance I could go and add a twitter bootstrap package, define the URL where you can download it including some placeholder for the version. Then all we need is a list of version that’s maintained. We could start by doing that by hand, or we can just point it to the git repo and it reads tags. That’s how Packagist works – except that it reads the composer.json file in the git repo to get all the metadata that in this case would be entered manually.

If we do this, we then end up with a central repository of CSS and JS packages, and we can integrate it in Composer, so that Composer packages can depend on jQuery and it just works. That would be a good start, but the great thing would be to get everyone on board. And I don’t mean everyone writing PHP. I mean everyone. The Ruby folks, the Python ones, Java, .NET, you name it. You all have package managers. All we have to do is agree on the API of the central package repository and on what metadata is needed. Then you can just add support for it in your package manager of choice, and we all benefit from the manual work put in to list packages. If it works, I’m sure some of the frontend packages will then add the metadata directly in their git/svn/.. repos so that we save on manual work. This would be a huge thing for everyone.

There are of course a few more details to settle regarding security and trust as well as exact package metadata, but I wanted to gauge the interest first, and then discuss further. I opened a frontend-packaging google group for that purpose, so if you are interested please join in. All it takes is a few open minded people and we could start one of the largest cross-language collaboration project ever. Sounds like fun!

May 31, 2012 by Jordi Boggiano in Development // Tags: , , , , 8 Comments

Nelmio is hiring

You might have heard of us. If not, here is
who we are:

We are a little company in Zürich, Switzerland. Our clients trust us. Our projects are technically challenging and mostly use cutting edge technologies such as Backbone.js, Symfony2, Redis and CouchDB. By keeping the company small we have the ability to carefully choose the projects we want to work on. This also gives us time to attend many conferences, both as speakers and attendees. And starting this autumn, we will be working on our product as well!

Right now, we would like to grow by one person.

Problems we currently solve are:

  • Finding best practices for pure JS applications using Backbone.js.
  • Writing REST APIs in Symfony2
  • Optimizing CouchDB and MySQL to cope with large amounts of data.
  • Web of things – Connecting physical sensors with the web. This is particularly fun and hard.
  • DevOps – Automating deployments and server setup.

Things we do:

  • Code. Code. Code.
  • Learn from clients.
  • Teach and empower our clients.
  • Learn from each other. A lot!
  • Care about the little things that make a difference.
  • Fun things, because.

Things we don’t know:

  • Designing beautiful sites. But we know people who do this very well.
  • Ruby, Python, Dart, … We write mostly JS and PHP, and contribute a lot to make sure these stay in the game.
  • CMS. We only work on tailored solutions.

So, what do you think? Would you like to join our team?

  • We do work mostly in English even if there is always someone who throws in some French or German words.
  • You should have good communication skills, and be able to act autonomously. The ability to learn and think is more important than your existing knowledge.
  • Remote work could be an option. You would need to be in roughly the same time zone and can come work in Zürich for a few weeks in the beginning. That way we could get to know each other.

Send us your CV, GitHub account or anything you think is relevant to hello@nelm.io.

May 30, 2012 by Pierre Spring in News // Tags: , , , 1 Comment

Nelmio is coming to a conference near you

Here is a quick update on conferences we will attend and speak at in the next couple months. If you are attending any, feel free to come and say hi!

Next week our entire team will be at jsDay and phpDay in Verona, Italy. If you haven’t got tickets yet, hurry up because it is about to be sold out.

Pierre will talk about Backbone.js, Igor has two talks about realtime apps with websockets and the Silex microframework and I myself will be talking about managing your dependencies with Composer.

In June there are two notable events. The first is SwissJeese. A local JavaScript-oriented conference co-organized by Pierre that will be in Bern. It is free and on a Saturday so there is really no excuse not to come if you have an interest in JavaScript. Register for free on eventbrite!

The second a week later is Symfony Live in Paris which we are always looking forward to.

If you get a chance to go to both phpDay and Symfony Live, you can follow Igor’s second talk about Silex, which will be more advanced given the audience is already more familiar with the Symfony Components. If you miss Verona you can catch up on my Composer talk in Paris as well. William will hold an introduction to the Propel2 ORM and even you have no interest in PHP I will present the Redis key-value store so you can come anyway ;)

We sure hope to see some old friends and make new ones there, so if you were hesitant to come, just register before it’s too late!

May 11, 2012 by Jordi Boggiano in News // Tags: , , , 1 Comment

jsDay – A Family Reunion You Always Wanted To Attend

Last jsDay in Verona was a blast. Seriously. To Jordi and myself this was one of the most memorable conferences ever.

And I am not talking about the sessions. Of course the talks were good and the jsDay team managed to attract some of the finest speakers to talk about everything JavaScript. But so do other conferences. The wonderful thing about jsDay is the community you become part a of as soon as you enter Hotel San Marco. Speakers and attendees alike share this hotel for 3 nights and 2 days and you feel you are part of the family reunion you never dared dreaming of.

Like-minded people sharing their passion. Cocktails at the hotel pool. A welcome quiet time in the Hotel Spa. Late supper in some of Italy’s finest Restaurants. A good laugh at Powerpoint Karaoke. And an incredible sense of belonging to this family that greets you with open arms and open hearts.

At Nelmio, we are now looking forward to the next jsDay in Verona and we just felt obligated to tell you about this little gathering that feels a bit like ours and that you too could be part of.

I sure hope to see you there on May 16th-17th 2012.

January 31, 2012 by Pierre Spring in News // Tags: 2 Comments

CORS with Sencha Touch

A while back I was working on the mobile version of techup.ch which you can find on m.techup.ch. The web application is built with Sencha Touch. I did not want to deploy to m.techup.ch yet, which is where I ran into issues with the same origin policy.

In order to prevent web applications gaining access to things they should not have access to there is a same origin policy, which means that AJAX requests can only be made to the same host and port that the website is hosted on. This prevents CSRF attacks, as an attacker cannot make your browser do arbitrary actions on remote websites.

Our Sencha Touch app however relies on a JSON API, that is served from techup.ch. Since the app itself is not hosted on that domain (yet), it cannot access the API.

A workaround: JSONP

While AJAX is restricted by the same origin policy, script tags are not. It is possible to include script tags to a remote site, which is often used to embed widgets from sites like Facebook or Twitter. It can also be abused to fetch data from a remote domain.

This works by adding a script-tag proxy pointing to the API, including a callback parameter in the query string, for example:

1
http://techup.ch/api/events/upcoming.json?callback=processData

The API will detect the callback parameter and pad the response with a javascript call to the data it returns.

Conventional Reponse

{
    "events": [
        {
            "id": 361,
            "name": "Linalis LPI 201"
        }
    ]
}

JSONP Response

processData({
    "events": [
        {
            "id": 361,
            "name": "Linalis LPI 201"
        }
    ]
});

And this is what the “P” in JSONP is. JSON with padding.

Of course the processData function has to exist. In fact, jQuery’s AJAX function has built in support for JSONP. If you have callback=? in the requested URL, it will automatically use JSONP for the request. Sencha Touch also supports this through Ext.data.ScriptTagProxy.

But this is more a hack than a real solution. Enter CORS.

Cross-Origin Resource Sharing

CORS is a W3C Working Draft which describes an extension to HTTP for allowing browsers to issue AJAX request across domains. The server serving this request can send additional headers notifying the client of these additional permissions.

The only header that needs to be set is:

Access-Control-Allow-Origin: *

This will allow AJAX requests from any domain. Instead of the wildcard, you could also specify allowed domains explicitly. Only set the wildcard if it is safe to do so. You need to be aware that any site could get any user to make a request to those resources on your site that have this header, which can very easily lead to CSRF attacks.

Now, Sencha Touch (as well as many other AJAX libraries) will also send a X-Requested-With header, allowing the server to detect that the request was sent through JavaScript. CORS forces the server to specify which headers can be sent by the client. That is done as folllows:

Access-Control-Allow-Headers: x-requested-with

This is a comma-delimited list, so you can add more headers if needed.

If you want to allow other HTTP methods than GET, you’ll have to specify that explicitly with yet another header:

Access-Control-Request-Method: GET,POST

Authentication

By default the browser will not send any cookies with CORS requests. You can however set the Access-Control-Allow-Credentials header with a value of

1
true

, which will allow cookies to be sent. In this case you may however want to explicitly define a range of allowed origin domains.

Alternatively you can handle authentication yourself. In this case the user will have to provide username and password to the app, which will then make a request to the API. The API will respond with an authentication token, which can be used in subsequent authenticated requests to the API. This way you do not have to rely on cookies. You can store this token in localStorage, so you don’t loose it on page reloads.

Browser support

A recent article describes the browser support as follows:

  • Webkit browsers: good
  • Gecko browsers: good
  • Trident browsers (Internet Explorer 8+): good with some gotchas
  • Opera: very sucky a.k.a. non existent

Since we are targeting mobile here, which is in this case pretty much webkit only, we can just use it.

Conclusion

CORS is a nice solution for remote API access from mobile web applications.

Check out enable-cors.org.

November 3, 2011 by Igor Wiedler in Development // Tags: , , 13 Comments