uxebu » blog » dojo

Creating a persistent Dojo Object Store

Jens Arps — Wed, 27 Apr 2011 16:13:45 +0000

As of version 1.6, dojo comes with the new Dojo Object Store API. This is an awesome thing, as it greatly simplifies the work with data stores in Dojo. Everybody who had to do with the traditional dojo.data API felt it was overly complex and hard to use – this has finally changed now. There are also wrappers from and to the old and new APIs, so that you can do stuff like using your traditional data-aware widgets with a new Object Store. And the goodness doesn’t end here; but more on this later. If you haven’t done so yet, you might want to read the excellent post on the new Dojo Object Stores by Kris Zyp where he explains all the awesomeness he created.

Dojo also comes with two fresh implementations for the API, a non-persistent memory store and a JsonRest store that interacts with a server through RESTful HTTP requests. You can also observe changes made to objects in the store. What is missing is a store that uses a client-side persistent backend, which would be useful for a couple of reasons (e.g., as one commenter in that post asks, to use it as chache store for dojo.store.Cache). As Kris already mentions, it’s a piece of cake to create one, so let’s go ahead and do it!

Choosing the Backend

The post mentions two possible candidates: dojox.storage and StorageJS, both already having a similar API, so making them compliant to the Dojo Object Store API is fairly easy. For this tutorial I choose StorageJS – because it is very lightweight and still provides all we need (and, well, for a couple of other reasons that don’t belong in this post). So, what is the exact API we need to comply to? Check it out in the docs. See the first sentence in that paragraph? “Every method in the API is optional, it’s presence indicating support for that feature.” Wow, that’s nice!

Basic compliance

Let’s start with the methods get(), put(), add() and remove(). That will make our store pretty usable for most store scenarios.

First, create a ‘store’ object we can work with (StorageJS creates a global variable called storage where all it’s methods reside):

1	var store = dojo.delegate(storage);

‘store’ now contains everything that ‘storage’ does, but we can leave the original ‘storage’ object alone and modify our ‘store’ object if needed. Time for the first method, let’s start with get(). StorageJS works with Strings as keys and values only, so we need to parse what we get from it.

1
2
3
4

store.get = function(id){
// Need to parse the string we get from backend:
return dojo.fromJson(storage.get(id));
};

Easy one, now move on to put(). The Object Store API allows user to do stuff like this: store.put({foo: 'bar'}, {id: 3}) as well as store.put({id: 3, foo: 'bar'}). Also, StorageJS only has the method set() instead of put() and add().

1
2
3
4
5
6
7
8
9
10

store.put = function(object, options){
// Get the id, wherever it comes from
var id = options && options.id || object.id;

// Stringify data -- remember, StorageJS is a key/value backend wrapper.
var data = dojo.toJson(object);

// Now save the data away
storage.set(id, data);
};

Easy, as well – you could write this as a one-liner. Now, add(). It’s close to put, except that it won’t overwrite data that already exists. So we just need to check if something with the given id already exists and throw an error if so.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

store.add = function(object, options){
// Get the id
var id = options && options.id || object.id;

// Check if something exists under the given
// id -- StorageJS always returns null when
// there's no data for a certain key.
if(storage.get(id) !== null){
throw new Error("Object already exists");
}

// We're save to go now! So hand over the
// request to the put() method.
store.put(object, options);
};

What about remove()? Nothing to do there, it already has the desired signature and functionality.

That’s it, we’re done with basic compliance. Our ‘store’ object now implements the basic methods of the Dojo Object Store API and can be used by anything that can work with a Dojo Object Store – and it will keep it’s state persistent in the browser.

More compliance? Querying!

There’s one interesting thing in the API: the query() method. Uh, yeah, we want that! Lucky us, Dojo already provides a query engine as well as a method that makes sure there are iterative methods and a total property containing the number of hits available in our result (well, it also abstracts away the differences between sync and async results, but as StorageJS is purely synchronous, this is not important to us). First, define a queryEngine:

1 2	// Let's take the provided queryEngine :) store.queryEngine = dojo.store.util.SimpleQueryEngine;

So, if we want our store to be able to run queries, all we need to do is to take the store’s data and hand it over to the query engine. We use StorageJS’ getAll() method to acquire the data. It will return an array of objects in the form { key: ‘theKey’, value: ‘theValue’}, but the queryEngine wants an array containing only the objects, so we need to do a conversion.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

store.query = function(query, options){
// Get all data from the backend
var rawData = storage.getAll();

// And convert it into a format that the
// queryEngine can work with
var data = [];
for(var i = 0, l = rawData.length; i < l; i++){
var item = rawData[i];
var dataObject = dojo.fromJson(item.value);
data.push(dataObject);
}

// Now call the queryEngine on the data
var results = this.queryEngine(query, options)(data);

// And return the result, after it has been
// enhanced.
return dojo.store.util.QueryResults(results);
}

Now we can query our store for specific data, like so: var results = store.query({ prime: true }); This will give us all objects in the store that have a property called ‘prime’ and have that property set to true.

Hierarchie and Transactions

The API also mentions methods about data hierarchie and transactions, but I’m not going to cover these in this tutorial.

Convenience and Optimization

Currently, every time we run a query, we fetch all data again from our storage engine. So, if you don’t have a massive amount of data and want to query the store a lot, it might be wise to maintain a copy of all data in memory. There are other things you could optimize as well – or you could write your own queryEngine.

For your convenience, here’s a wrapper that creates a Dojo Object Store like we did above and accepts a useMemory parameter during instantiation that denotes whether a copy of the data should be kept in memory or not. It uses the traditional require/provide instead of the AMD format. If you want to use it, make sure you use the right namespace in the declare() call! (Or, not recommended, copy it in the /dojo/store directory.)

If you want to fool around with it in the console first, you can go here (non-memory-using) or here (memory-using), check out the source and fire up the console and try things out.

Getting StorageJS

The above code uses the features base and getAll, so you could do a specific build of StorageJS with these features or just grab a full build of it for your desired storage engine (the storage-full-[engine].js files). If you don’t know about storage engines, all modern browser support localStorage, so this is the one what you might want.

Coworking, Spanish geeks and more

Wolfram Kriesing — Wed, 06 Apr 2011 08:09:43 +0000

After the MWC in Barcelona I moved my working place to Valencia for a week, a little further south. That is already a while ago, but still I wanted to write a little bit about all the experiences. Not last because I very much want to thank all the people who I have met, who introduced me into the spanish community and made all this so much fun. Thank you very much first and foremost Rosa – you rock! Thank you Xavi, Jaume, Jorge, Luis, and … fuck I am so bad with names :(.

Coworking in Valencia

My week in Valencia started out to look very quiet and just pure work. I tried to contact some JavaScript/mobile/web guys in this area before hand, but somehow didn’t really succeed. Some tweets went around but I didn’t really reach anybody. But I made sure I have a great place to work at, which was Coworking Valencia, Rosa Montesa runs this place with so much passion – wow. And I just had to think of the Combinat56 Coworking space in Munich where we normally go, which is run by Sina with an equal lot of passion. Just great girls!

So I arrived there Monday morning to do my work, and off it went. I chatted a while with Rosa and some other coworkers and from there I couldn’t stop it. At the end of the day my calendar was filled with lunches and meetups. I met a lot of interesting people, first Rosa had organized a small come-together the next day with the company Brainstorm from right above, mainly hackers too, so we had quite some stuff in common. There I met Jorge who introduced me to more geeky people, thank you so much!

Spanish way of life

So the week went on and I tried to work a little bit, but I was basically so happy to live the spanish way of life a little bit. In the morning you don’t buy a take away coffee, actually you don’t see the busy people running around with their coffee mugs in there hands. I also just did that the first day, after that I adopted the spanish way, which is sitting down in a bar (also if it just for five minutes) and have a coffee. A lot of people there have a carajillo in the morning but that was not appropriate for my mornings :).
For lunch (later than normal for me, around after 2pm) we mostly went to some place outside, since it was at least 20°C, beautiful sun just perfect. And then on the way home you just take some tapas maybe a beer in the bar around the corner and late at night (normally after 9pm) we had dinner. For me working there felt really comfortable and easy going. But I have also heard that normally working in Spain is not normally that relaxed.

The real geeks

On Thursday I went to the BeCode guys’ office in the nice Barrio del Carmen. The first thing after I arrived was “let’s go for a coffee” :). That is the spanish style! We exchanged the ideas of how we work and the kind of projects we do. Xavi the daddy of BeCode (scnr) told me that they are an incubator and try to have people come in and realize their ideas, pretty cool stuff. Was so refreshing and forward-thinking, I felt home.
Funny enough that day I learned about Jasmine there, they used in a project. Unfortunately we had no internet that day, so I was pretty much offline until the afternoon, which was somehow good, but not when you really want to get some things done. So I promised to be back the next day and then the office was also really crowded and I got to meet all of the BeCode team. In the evening I joined my first coding dojo, this one was held in the offices of OpenFinance. We were given the task to write a roman to latin numbers converter in whatever programming language you like. You are given half an hour and try to get as far as you can, I joined forces with Jaume we got it easily done in the half an hour time, we simply used the webtestsuite as our testing framework since I know that one best and of course we wrote the converter in JavaScript :). As a second Kata you could hack the conversion the other way around. Jaume and I felt that this would be just another hacking it the other way job was, so we looked for a new challenge and we said let’s just use the google search engine for converting it for us and we just grab the result from there. We looked at a couple of APIs, at YQL but there was no real solution, so we went the scraping route. We got it almost done :). But as you can see and read we had lots of fun and enough beer!
Of course we went for dinner later and were still hanging out some time around Valencia and in the BeCode office later. There the guys told me about an Code Retreat which is going to take place somewhere near Valencia “en el campo” with Paella cooking and hacking, I hope that some of us uxebus may join, hope to find out details soon.

All in all a big thank you to all you guys and I can just say I had a great, though also really exhausting, two weeks in Spain. Hope to see you soon!

Explaining EmbedJS

Jens Arps — Mon, 31 Jan 2011 14:02:28 +0000

Last week, we tagged the current state of EmbedJS 0.1. This is a large step for us, and something we have been waiting for and wanting to do for a long time. And with doing so, the need arises to answer a lot of questions – and we better start sooner than later. So, here it is, the first part of „Explaining EmbedJS“.

What is it?

It‘s a JavaScript Toolkit, especially aimed at embedded devices. Embedded devices, that is phones, tablet devices, TVs, car dashboards and the like. Devices that are capable of running JavaScript. We are sure that this list is going to grow over time – and will hopefully one day also include devices like your fridge. EmbedJS is based on the Dojo Toolkit.

Why?

Because the toolkits and frameworks that exist focus on desktop browsers and therefore have a different approach – an approach we didn‘t find that suitable for embedded/mobile development. And the JS frameworks that target mobile devices are flawed, too: either they target only a specific device or platform, or they provide far more than we do need and want.

What we wanted was a toolkit that offered a unified API across different platforms, but with the best implementation that was available for each platform. And we didn‘t want to ship code that implemented a certain feature for, say, an old Blackberry device to an iPhone. Plus, we wanted that API to be small – enough to assist us in our daily work, but not that bloated that we would ship code to a phone that we wouldn‘t need in most of our projects.

The Dojo Toolkit

We at uxebu have a strong affinity to the Dojo Toolkit – most of us are committers – for a good reason: we believe that it has done many things right, and that it has an excellent code quality. Thus, finding a starting point for our venture to what was later to be EmbedJS was pretty easy: It was the very core of the Dojo Toolkit, dojo._base.

We examined the code and split it into its smallest parts (features, how we call them in EmbedJS). After having the features all nicely separated, we could look for the best implementation for each of the platforms we wanted to support, and put it into a separate file. Then we optimized our code, tweaking here and there, but also using the code from dojo._base as it was, because it already was the best implementation.

And we needed to find means to put all these tiny parts together again, respecting any given dependecies, to create a file that then contained all the feature‘s implementations for a given platform – so the EmbedJS Tools were born, including our highly flexible build system.

API

EmbedJS‘ API is a small subset on Dojo‘s API. It provides around 70 methods, from the fields language enhancement (like Array manipulation or JSON), OO (like classes and inheritance), transport (like JSONP or XHR), event system (like connecting to DOM events or methods), DOM manipulation (like style or node creation) and misc things like Promises or pub/sub.

We kept the method signatures intact so that you can import your existing knowledge from working with the Dojo Toolkit to EmbedJS. There are only a few minor changes where we
a) found a new name highly useful, e.g dojo.io.script.get() is embed.jsonp()
b) we needed to strip given functionality for the sake of code size.

All methods in EmbedJS are available under the embed namespace as well as under the dojo namespace. I.e. to call the connect method you can use dojo.connect() and embed.connect().

The full API documentations is here, though it‘s undergoing some updates right now.

Summary

I didn‘t want to dig too deep in the first article on EmbedJS, but I guess you got the point: EmbedJS is a highly optimized Dojo core, and offers you a specialized, optimal build for a given platform. To explain how the build system works, how we manage dependencies, how we separate our features and our implementations and how one can create a project-oriented custom build will need another blog post – but if you are too curious, you are invited to take a look at the source code at github; a lot is self-explenatory there. A further source of information is the EmbedJS project page, as well as the EmbedJS Tools source.

SWDC 2010 Stockholm

wolfram — Sun, 06 Jun 2010 22:12:28 +0000

Thanks to Peter Peter Svensson for organizing and making SWDC 2010 in Stockholm happen and especially thanks for inviting us to speak there. We had a blast. A crowd of about 100 people saw some very interesting talks, ranging from Node.js, YQL, Chrome extensions, HTML5 to PhoneGap, I guess everybody heard something new and interesting.

The second day was mainly focused around mobile topics. Nikolai showed us how to think out of the box (which is your phone in this case) by talking about “Human APIs – expanding the mobile web”. I tried to give an overview about how to use web technologies for mobile apps by talking about “App vs. Widget – HTML5 Apps”. And as it seems we had hit a sweet spot there as the tweet proves. It seems we had found our slots there. It was fun to see that.
Find our slides below.

It was great to see Sony Ericcson show their PhoneGap based strategy. Since that is also part of our direction it is very encouraging to see that there is company on going this route. They showed a webbased build tool, which allows for a simple creation of runnable apps based on PhoneGap and also interesting ideas around native APIs and the security concept. A lot of triggers that made a lot of people think. Great input.
@creationix showed a cool demo using node.js, where we could all interact with his app. @divineprog showed DroidScript, which basically was a Smalltalk inspired realtime Rhino-based JavaScript runtime, that allows using native Android resources. We learned a lot around geo data, their handling and optimization in use from @tablackmore. Those are just some of the talks, they all were of high quality, so be sure to see them live next time.

At the mobile day we also heard talks about

The New Mobile Web – A Web of Scripted Applications by @divineprog
How to avoid the latency trap by @sh1mmer
Handling spatial data on the web by @tablackmore
HTML5 gives you wings by @mahemoff
The phone in the cloud by Claes Nilsson and Thomas Bailey
node.JS powered mobile apps by @creationix

All in all it was a great conference, I will look forward to be coming back next year.

Nikolai Onken: Human APIs – expanding the mobile web

View more presentations from Nikolai Onken.

Wolfram Kriesing: HTML5 apps cross platform – SWDC2010

View more presentations from wolframkriesing.

dojo.connect({after:dojo.beer});

tobias — Thu, 21 Jan 2010 15:35:15 +0000

It’s been quite some time since the last dojo.beer() event took place in Germany and a lot of things have changed within the Dojo Toolkit with the release of 1.4.0. This is why we would like to invite everyone who is interested in Dojo, or who would like to talk to other Dojo developers, to the next dojo.beer() event in Munich:

Date:	Friday, 12.02.2010
Time:	3:00 PM – 11:00 PM GMT+1
Seats:	about 80
Language:	English
Location:	EineWeltHaus Schwanthalerstr. 80 80336 München http://www.einewelthaus.de

You can signup here:

This time we combine the official “Dojo Developer Day”, that is held online, with an on-site event in Munich.

The “Dojo Developer Day” is the last day of the first Dojo conference called dojo.connect() that will be happening 100% online. So if you want to get some deep insight and want to learn from the Dojo pros I just can recommend to signup for that conference.

dojo.connect (February 10–12, 2010)

Additionally, at the event in Munich you’ll have the chance to meet Dylan Schiemann (co-founder of Dojo and CEO of Sitepen), other european Dojo developers, and of course the whole uxebu team in person. During the event we will connect to all other worldwide spreaded Dojo developers via videoconference and you can participate in the discussion about the future of Dojo.

Because the “Dojo Developer Day” mainly takes place in the US, the on-site event in Munich will be from 3pm to 11pm. You would help us with the organization, if you signed up to the event through EventBrite. You can sign up to the event for free or for a small fee of € 30,– to support the Dojo Foundation. You can choose :)

Thanks to Nils Hitze for organizing the event and the EineWeltHaus for providing the room and food for all the Dojo enthusiasts.

Make evaled script more useable in Firebug

wolfram — Tue, 10 Nov 2009 08:41:40 +0000

Make evaled script more useable in Firebug

Dojo.workshop(“Haifa”) – the summary

nonken — Wed, 12 Aug 2009 11:11:18 +0000

August 9th was the day for the first Dojo event in Israel and thanks to Yoav Rubin from IBM Research Labs in Haifa, we were able to hold the event in the great Auditorium of the amazingly located IBM building in Haifa.
To give you a little impression of what kind of working environment the folks at IBM have, I uploaded a panorama image from Yoav’s office.

The day started as planned with coffee and snacks and a Dojo introduction giving everybody who wasn’t really familiar with the Dojo Toolkit a better idea of what it actually is. A few demos such as xRay where shown to show some of the advanced features of Dojo such as live charting, custom themeing and much more.
After a short break we continued with a talk on how to design mobile architectures with the Dojo Toolkit for platforms such as PhoneGap, W3C widgets and other mobile platforms supporting JavaScript/HTML and CSS. This is a very interesting topic and it was great to share the experience we made at uxebu on finding viable solutions for the challenges we face. The third talk was a quick overview of the current documentation efforts for Dojo and different ways of finding the information you need when you are stuck or simply looking for API docs or similar.
Before the break, Tomer Mahlin from IBM in Jerusalem, who is working on the BIDI implementation in Dojo, gave a very interesting talk on the challenges, developers face when writing applications supporting BIDI. Not having to deal with the issues you get confronted with when having to develop BIDI applications, this talk was eye opening and very interesting.
After a great lunch we jumped into a hands on session building a very simple mobile app running on both PhoneGap and devices with a widget runtime supporting W3C widgets installed. This gave the audience a glimpse into mobile development and the challenges but also really exciting features.

In total there were about 45 people attending the event which is an amazing amount of people for such a first time event, thanks again to everyone attending and especially to Yoav Rubin and the folks at IBM to make this happen.

I am already looking forward to the next Dojo event in Israel and hope that we can be part of it again.

Following are the slides to give you a little impression of the events content.

EventNinja, Dojo and mobile

View more documents from nonken.

Dojo Introduction

View more documents from nonken.

Bidi Support In Dojo1.4

View more presentations from guest0176bf4.

Dojo.workshop in Haifa, Israel – August 9th

nonken — Thu, 30 Jul 2009 11:08:04 +0000

The news have been announced already on the Dojotoolkit.org and Dojocampus.org blogs but I nevertheless wanted to mention the dojo.workshop in Haifa, Israel on August 9th.
Already now we have more than 50 signups and thanks to Yoav Rubin from IBM research labs we can have a full day of Dojo-ness.

It is interesting to hear that many attending people are interested in how to write mobile applications with the Dojo Toolkit and we will try to spend some time on giving people insight about where things currently stand.
As I am discussing in the upcoming issue of the JSMag, using JavaScript libraries on mobile environments is something you have to do with caution since most of the libraries were not written intentionally for mobile platforms.
Dojo at this point is a very good choice (yes I am biased ;) and yes, Dojo needs a lot of optimization for mobile) especially if you are working on delivering applications both to mobile devices and desktop clients. It is no fun having to use different tools for similar environments. So I am looking forward to lots of mobile hacking in Haifa.

Following some more details for the event. You can find all info also at the DojoCampus.org event page and things are still subject to change.

Location:

IBM Haifa Research Lab
Haifa University Campus

Google map

Time:

09:30 – 15:00

Schedule

09:30 – 10:00 – Gathering

10:00 – 10:15 – Welcome and introduction

10:15 – 10:45 – Overview of Dojo Dijit and Dojox

11:00 – 12:00 – Dojo and Mobile

12:00 – 12:30 – Dojo based JavaScript API Docs generator

12:30 – 13:00 – Hacking mobile (this session might be extended)

13:00 – 14:00 – Lunch

14:10 – 14:30 – Support for bidirectional languages in Dojo

14:30 – 15:00 – Projects demonstration

If you want to give a talk about your experience with Dojo or anything Web related, leave a comment at the DojoCampus.org event page or send an email to nonken(_at_) dojotoolkit.org and we’ll make sure you get added to the schedule.

After the main event we will either continue hacking or go for food/drinks/dojo.beers() into town.

If you would like to attend, please add your name to the list below, so we can be sure that we will have enough space.

Looking forward to being in Haifa and meeting lots of Dojo, web, JavaScript folks.

Dojo D.O.H. Unit Testing

wolfram — Tue, 21 Jul 2009 09:32:38 +0000

Dojo D.O.H. Unit Testing

Dojo examples from UC2009

wolfram — Wed, 15 Jul 2009 18:33:58 +0000

Dojo examples from UC2009