Hapi.js and MongoDB

During the Fullstack conference I saw a small project made with Hapi.js during a talk, so I decided to invest some time working with Hapi.js in order to investigate how easy it was create a Node.js application with this framework.

I’ve to admit, this is a framework really well done, with a plugin system that give you a lot of flexibility when you are creating your server side applications and with a decent community that provides a lot of useful information and plugins in order to speed up the projects development.

When I started to read the only book available on this framework I was impressed about the simplicity, the consideration behind the framework but more important I was impressed where Hapi.js was used for the first time.
The first enterprise app made with this framework was released during Black Friday on Walmart ecommerce. The results were amazing!
In fact one of the main contributor of this open source framework is Walmart labs, that means a big organisation with real problems to solve; definitely a good starting point!

Express vs Hapi.js

If you are asking why not express, I can reply with few arguments:

  • express is a super light and general purpose framework that works perfectly for small – medium size application.
  • hapi.js was built on top of express at the beginning but then they move away in order to create something more solid and with more built in functionalities, a framework should speed up your productivity and not giving you a structure to follow.
  • express is code base instead hapi.js is configuration base (with a lot of flexibility of course)
  • express uses middleware, hapi.js uses plugins
  • hapi.js is built with testing and security in mind!

Hapi.js

Let’s start saying working with this framework is incredibly easy when you understand the few concepts you need to know in order to create a Node project.

I created a sample project where I’ve integrated a mongo database, exposing few end points in order to add a new document inside a mongo collection, update a specific document, retrieve all documents available inside the database and  retrieving all the details of a selected document.

Inside the git repo you can find also the front end code (books.html in the project root) in Vanilla Javascript, mainly because if you are passionate about React or Angular or any other front end library, you’ll be able to understand the integration without any particular framework knowledge.

What I’m going to describe now will be how I’ve structured the server side code with Hapi.js.

In order to create a server in Hapi.js you just need few lines of code:

let server = new Hapi.Server();
server.connection();
server.start((err) => console.log('Server started at:', server.info.uri));

As you can see in the example (src/index.js) I’ve created the server in the first few lines after the require statements and I started the server (server.start) after the registration of the mongoDB plugin, but one step per time.

After creating the server object, I’ve defined my routes with server.route method.
The route method will allow you to set just 1 route with an object or several routes creating an array of objects.
Each route should contain the method parameter where you’ll define the method to reach the path, you can also set a wildcard (*) so any method will be accepted in order to retrieve that path.
Obviously then you have to set the route path, bear in mind you have to start always with slash (/) in order to define correctly the path.
The path accepts also variables inside curly brackets as you can see in the last route of my example: path: ‘/bookdetails/{id}’.

Last but not least you need to define what’s going to happen when a client is requesting that particular path specifying the handler property.
Handler expects a function with 2 parameters: request and reply.

This is a basic route implementation:

{
   method: 'GET',
   path: '/allbooks',
   handler: (request, reply) => { ... }
}

When you structure a real application, and not an example like this one, you can wrap the handler property inside the config property.
Config accepts an object that will become your controller for that route.
So as you can see it’s really up to you pick up the right design solution for your project, it could be inline because it’s a small project or a PoC rather than an external module because you have a large project where you want to structure properly your code in a MVC fashion way (we’ll see that in next blog post ;-)).
In my example I created the config property also because you can then use an awesome library called JOI in order to validate the data received from the client application.
Validate data with JOI is really simple:

validate: {
   payload: {
      title: Joi.string().required(),
      author: Joi.string().required(),
      pages: Joi.number().required(),
      category: Joi.string().required()
   }
}

In my example for instance I checked if I receive the correct amount of arguments (required()) and in the right format (string() or number()).

MongoDB plugin

Now that we have understood how to create a simple server with Hapi.js let’s go in deep on the Hapi.js plugin system, the most important part of this framework.
You can find several plugins created by the community, and on the official website you can find also a tutorial that explains step by step how to create a custom plugin for hapi.js.

In my example I used the hapi-mongodb plugin that allows me to connect a mongo database with my node.js application.
If you are more familiar with mongoose you can always use the mongoose plugin for Hapi.js.
One important thing to bear in mind of an Hapi.js plugin is that when it’s registered will be accessible from any handler method via request.server.plugins, so it’s injected automatically from the framework in order to facilitate the development flow.
So the first thing to do in order to use our mongodb plugin on our application is register it:

server.register({
   register: MongoDB,
   options: DBConfig.opts
}, (err) => {
   if (err) {
      console.error(err);
      throw err;
   }

   server.start((err) => console.log('Server started at:', server.info.uri));
});

As you can see I need just to specify which plugin I want to use in the register method and its configuration.
This is an example of the configuration you need to specify in order to connect your MongoDB instance with the application:

module.exports = {
   opts: {
      "url": "mongodb://username:password@id.mongolab.com:port/collection-name",       
      "settings": {          
         "db": {             
            "native_parser": false         
         }
      }    
   }
}

In my case the configuration is an external object where I specified the mongo database URL and the settings.
If you want a quick and free solution to use mongoDB on the cloud I can suggest mongolab, when you register you’ll have 500mb of data for free per account, so for testing purpose is really the perfect cloud service!
Last but not least, when the plugin registration happened I can start my server.

When I need to use your plugin inside any handler function I’ll be able to retrieve my plugin in this way:

var db = request.server.plugins['hapi-mongodb'].db;

In my sample application, I was able to create few cases: add a new document (addbook route), retrieve all the books (allbooks route) and the details of a specific book (bookdetails route).

Screen Shot 2015-12-04 at 23.44.38

If you want to update a record in mongo, remember to use update method over insert method, because, if correctly handled, update method will check inside your database if there are any other occurrences and if there is one it will update that occurrence otherwise it will create a new document inside the mongo collection.
Below an extract of this technique, where you specify in the first object the key for searching an item, then the object to replace with and last object you need to add is an object with upsert set to true (by default is false) that will allow you to create the new document if it doesn’t exist in your collection:

db.collection('books').updateOne({"title": request.payload.title}, dbDoc, {upsert: true}, (err, result) => {
    if(err) return reply(Boom.internal('Internal MongoDB error', err));
    return reply(result);
});

SAMPLE PROJECT GITHUB REPOSITORY

Resources

If you are interested to go more in deep about Hapi.js, I’d suggest to take a look to the official website or to the book currently available.
An interesting news is that there are other few books that will be published soon regarding Hapi.js:

that usually means Hapi js is getting adopt from several companies and developers and definitely it’s a good sign for the health of the framework.

Wrap up

In this post I shared with you a quick introduction to Hapi.js framework and his peculiarities.
If you’ve enjoyed please let me know what you would interested on so I’ll be able to prepare other posts with the topics you prefer.
Probably the next one will be on the different template systems (handlebars, react…) or about universal application (or isomorphic application as you prefer to call them) or a test drive of few plugins to use in Hapi.js web applications.

Anyway I’ll wait for your input as well 😀

2015 the birth of London JS community

We are very close to the end of 2015 and it’s time give a look back to the first 11 months of this year understanding what I’ve accomplished and trying to get some resolutions for the new year as well!

2015 for my professional life  was a year of changes: I moved to a new job, I learnt new programming paradigms (reactive and functional programming), I met a lot of incredible and talented  people and many many other things.

Probably the biggest changes (or old loves?) are the creation of London JavaScript community and my returning as speaker on technical talks after a couple of years of inactivity.

Last May I started a new adventure creating a new JavaScript community in London; I spent a month to understand how and why I could do that properly.
I had the possibility in the past to be staff member of the largest Actionscript Italian community and it was really a great experience.
I was young, with a lot of passion, not much experience and the community was the perfect place for growing properly, meeting new friends, learning from the different people, trying to solve technical puzzle everyday and having fun why not!

Starting again this experience in a new country it was a real challenge for me, but this time, with way more experience than the first time, clear ideas and a touch of madness.

In 2013 I had the opportunity to spend few months in Silicon Valley and I went to several meetup events and conferences from San Francisco to San Jose.
What I was really impressed of that environment was for sure the vibe I was able to breathe in any of these events.
People from all over the world that help each others, facilitating the connections between individuals, creating opportunities and sharing knowledge.
I was astonished about this way of doing community and when I moved from Italy to London I spent the first 18 months going to different events trying to retrieve the same experience and vibe.

When I started the London Javascript community my main goal was definitely recreating that vibe in this great city where the best developers all over the world are working in interesting projects with a lots of challenges to solve.
That’s why I decided to do that, filling a gap present in London communities where there were many and strong vertical framework communities (like React and Angular one), but not a strong and general JavaScript community.

After 8 months I’ve to admit I’m very happy about the results that this community was able to generate:

  • ~1400 members
  • 7 live events
  • 1 code lab for half day
  • 2 webinars
  • an average of 60 people per event
  • Listed as O’Reilly Community partner, Google Community and Skillsmatter Community
  • Community Partner of great events like: FullStack conference and Dot.JS conference
  • more than 1900 tweets & retweets with more than 500 followers

I had also the opportunity to meet great speakers, amazing developers and passionate people.

What this community is giving me back is really invaluable and really hard to find in similar activities too, I’m really grateful of any single moment spent organising any event.

What about the resolutions for 2016?

Recently I started to gather the interest from several companies that are asking me to organise meetup events in their offices and that means all the hard work done is paying this community back!

I contacted few speakers from California and next year I’m organising a couple of webinars with speakers from Silicon Valley and directly from Google office in Mountain View.

I’m already in contact with few great speakers ready to share with the community tips and tricks on different topics like webpack, jspm, angular, webrtc, react and ES6! Keep an eye on the community page in order to discover more about these events.

Last but not least, I’m working right now on the official community website that will be a SPA website with socials integration and the possibility to subscribe to a technical newsletter where I’m going to share the best articles, tutorials and events on the web.

Obviously these are already in the roadmap but I’m really open to listen what the JavaScript community is looking for! So don’t waste this opportunity and share your ideas on how to grow and make more special OUR community!

ES2015 Destructuring assignment: by value or reference?

This week I’ve organised a meetup on ES2015 in my community, where the speaker presented his favourite features of the language.

Right after the talk I had a chance to talk with my best friend that was asking if destructuring assigns the values copying the value to the new variable or instead by reference if you work with Object or Array.
Because I hadn’t a change before to work with this new ES2015 feature I did a quick example just to get an answer to this question.

It looks like destructuring feature works by reference and it’s not copying the value.
That means anytime you’re going to change a value inside a variable that contains an Object or Array assigned via destructuring, also the original Object or Array will be affected as you can see in this simple example: destructuring example ES2015

destructuring ES2015

So when you work with destructuring bear in mind to pay a lot of attention when you change a value inside your destructured Objects and Arrays!

Automate, automate and automate!

Recently I’ve spent several days on find the best way to set up an automation process for Javascript developers and I investigated several tools strictly related to the Javascript world.
These tools allow you to save a lot of time when you perform repetitive and sometimes boring tasks in order to test your HTML5 game, website or web app.
In this post I’d like to share with you what tools I’ve found and used to create a full-stack Javascript automation pipeline for any front end developer or team.

Let’s see what a Javascript developer or a team could automate in their machine to have a better code quality and to save a lot of time when they are working on their own library or projects.
For this purpose, in my pipeline, I’ve used different CLI tools like mocha, grunt, yeoman, blanket or plato.
Each of this tool allows you to perform a specific task but combined all together these tools will provide in your projects:

  • tdd, bdd and unit test
  • code coverage
  • dependencies management
  • (custom) project template
  • static analysis
  • tasks automation (live reloading, deploy in localhost folder, files concatenation…)

These are only few of the multiple options that you can have “playing” with these tools, but let’s try to go a little bit more in deep to see what tool can effectively help to accomplish each of the item present in the list above.

TDD, BDD and UNIT TEST

Surfing on the web about this topic on Javascript you’ll find really a lot of good libraries, the one I decided to use is Mocha because is very well integrated with Blanket (code coverage) and karma (tests runner) and because it’s based on node.js so you can create your libraries and then testing in pure javascript without any need to pass through HTML pages and if you need to test javascript code that will run only inside the browser you could fake the window object with libraries like jsdom integrated in your test cases.
Mocha allows you to work in BDD, TDD and in Unit Testing you can easily mix with several assertion libraries and writing also async tests became really really easy.
Other libraries that could be useful could be Jasmine or QUnit.

CODE COVERAGE

As I wrote before I found an interesting library that work perfectly with Mocha that is Blanket.js.
Blanket is very simple and easy to use library in particular when you have all your test written in modules (node.js style) instead of a mix between html and js files.
Blanket works not only with Mocha but also with Jasmine and QUnit, so basically with the most famous testing libraries!
One thing that I really appreciate of blanket is the final output that could be exported in an interactive HTML where immediately you can recognise what it’s not tested yet and jump from a file to another one following the menu on the right side of the template.
Another one that it seems quite interesting is Istanbul.js, I didn’t try yet but it’ll be the next one for sure, I heard really good experiences from other developers with this library!

STATIC ANALYSIS

When you want to use a static analysis tool in your pipeline on of the most popular is….
But I suggest to give a try to Plato in particular if you work alone or in a small team and you want to do a sanity check of your project.

8ek3snRZ22Eq898NOi-l9Dl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9
Plato, in fact, store all the information of your code project locally in some JSON files and you can navigate through the report directly from an HTML page created by the tool (above a screenshoot sample).
These stats are very interesting to check the are of improvement of your project and in particular with these tools you can have an immediate feedback on where your efforts should be focused in order to deliver a better product and be sure that the maintenance shouldn’t cost too much later on.
Obviously you can also use more sophisticated solutions like SonarQube and install it inside your server with the Javascript plugin and run your static analysis every time a developer push his code in git or mercurial.
Depends always the dimension of the project and the team, my suggestion is to start with Plato in a small project and then when you see the real value move to SonarQube also if you are a small organisation.r

PROJECT TEMPLATE

When you talk about template for Javascript it’s impossible to forget of Yeoman.
Yeoman is a scaffolding tool that allow you to create skeleton of project with your favorite JS library ready to use.
I really suggest to use these kind of tools because it facilitates the beginning of new projects and give you at the same time some standards inside your company and between your projects.
There are several generators ready to use and searchable from the official website, if you can’t find what you’re looking for it’s very easy use Node.JS and the APIs already built in Yeoman to create your own generator with the functionalities that your company or projects need.

TASKS AUTOMATION and DEPENDENCIES MANAGEMENT

This is my favourite part, I found in Grunt a really good tool to automate more or less everything that is not strictly related to write the project code inside my IDE!
Grunt is the glue to assembly in a pipeline all the tools explained above, easily in one line inside your CLI: “grunt”.
The community is really huge and you can find more or less everything for Node.JS or plain Javascript, from minify, uglify and concatenate your JS files, to compile your LESS or SASS files, to convert your ES6 code to ES5, to run static analysis or push your code directly on git simply with a grunt task.
One thing that I really like of Grunt is that you can easily scale the way you are working with it using a yaml file and different js files (one per task) and assembly them at runtime.
This allows to create some common tasks for the whole company and at the same time have the freedom to add custom automation for each project and/or department of your company.
I really suggest to take a look to the official website where you can find also many technical information and then start to automate your daily Javascript workflow.
Obviously if you’re not working with JS you can still use Grunt in combination with your favourite programming language or technology like Haxe, Dart, Typescript, Coffeescript or Adobe AIR; the flexibility of this tool is really impressive!

An Alternative to Grunt could be Gulp where the main difference is that grunt favours configuration over code and Gulp exactly the opposite.
The Gulp community is growing day by day and it’s interesting to see the different approach between these two great task runners, probably in the long term the Gulp approach will be more successful but for now Grunt is exactly what I was looking for.

Conclusion

As you’ve read the JS world has got really a lot of useful tool that will save a lot of time during your daily job as developer or company.
The mix of these tools allow to create a pipeline in pure Javascript and they could really improve your code quality and your flow to have standards inside yout projects and a solid flow that will able to scale your company or projects in an easy and professional way.
Obviously there aren’t only these few tools and libraries that I’ve tried, there are many others outside there that I’d like to mention like PhantomJS or Buster or Lineman and so on, but form the next five minutes before come back on what you were doing before reading this post, try to think how to improve your flow, trust me you will remain surprise on how more productive you’ll become introducing them inside your routine.

Open letter to @Adobe and @Adobe Air: the hidden part…

I don’t know if you had already read the open letter that Gary wrote recently discussing about the arguable marketing choice made by Adobe on Adobe AIR but also previously about the Flash Platform in general, but I suggest you to start from there before read this post.

If you know me personally or you are following me in the social networks or reading this blog you should know that I’m a big fan of Flash Platform, in particular of Adobe AIR.
I’m very committed to deliver amazing and cutting edge projects made with this fantastic technology and I’m involved in the community to spread the word about AIR.
From a developer perspective I’m 110% with Gary and the community; an amazing technology like Adobe AIR with really a lots of success behind in terms of developers and companies that adopted this technology and in terms of numbers of apps in released during the past few years in different platform.
AIR, in my opinion, should have a better commitment from the company that create it (partially).
Obviously I agree also that there isn’t any competition between Actionscript 3 and HTML5 (read Javascript), what you can really do with HTML5 is what a flash developer could do 5 years ago more or less.
But you can’t approach a discussion like this talking only from a developer perspective, you and we should see it from different angles also.
What I’m asking you is to follow me until to the end of this post then you can send me an email and ask me if I became totally crazy or insult me with a comment, no worries 😀

I usually goes to Adobe Max since 2006, first MAX organised by Adobe, and I remember quite clearly that few MAX ago during both keynotes nobody said anything related to new Flash Platform improvements or plan for the future of the platform.
At the beginning I was so hungry and I spent literally hours on the phone to talk with Adobe people because the 100% of my business was based on this technology and they can’t really think that HTML5 could be better that Flash Platform, in particular in 2011/2012 where the most coolest websites, RIAs and desktop applications were realised with Flash.
But have you ever tried to think from a different point of view this situation? Let’s assume for few minutes that we are inside the meeting room of the Adobe.
You have an amazing technology that millions of people is using to innovate and create the best software in the world but you are not earning what you expect from it, don’t you believe me? Take a look at this chart (ADBE):

ADBE stock 2011/2012

 

This is the graph of Adobe stock (ADBE) from January 2011 to December 2012, the value of the stock was for few months (close to October when usually Adobe Max takes place) lower than $28 and never greater of $35.
Great, obviously our white collars friends, aren’t so interested about which is the best technology in the market or how many people is using it; they care about numbers, how to increase the profit of the company and make happy the analyst to have a better position in the stocks market and with the shareholders.
These results weren’t so good for Adobe in fact, if you remember well, a lots of people started to leave the company, a lots of team was closed in USA or Europe to move the development side in India or in places where the developers are cheaper and Adobe started his commitment on the big new trend of new web technologies products like the Edge family for instance.
Everybody now knows very well the following story about the new products and how they are trying to improve the way to create websites and apps, and I guess the majority of us it’s not so happy about that.
But let’s take a look again to some numbers, the next graph will show you the Adobe stock value from 2012 to March 2014 basically in the period where Adobe left to push the Flash Platform and started to increase the investment on designers products:

ADBE stock 2012/2014

I think is quite explicit that the politic to start selling their products on Cloud (first big mover in the IT panorama), the decision to try to improve a new technology like HTML5 with new tools and so on, create around the Adobe what the management was looking for!
I agree with you that there are many ways to make money but from the metrics perspective they are going in the right direction and they did the right choices for now.
I’m not an economist and I can’t say if this strategy will pay in the long term but for sure in the short term they arrived where they wanted to be.

With this post I’m not trying to defend Adobe, but after many years where the Flash Platform is in this status I started to leave my angry mood and to interrogate myself on why they took this decision, honestly I can’t say if that it’s the only reason that drives Adobe in these big changes but excluding the technical side that’s the only way I can see this thing and now most part of their decision make finally sense.
All the comments I’ve read in the past and also in these days after the Gary’s letter to Adobe is completely true but often, as developers, we forget that it’s not just a design pattern or a performance optimisation that could save the world, the marketing and the market are the real drivers, in front of them also a big corporation like Adobe could defeated.

ADBE stock 2009/2014

 

UPDATE FROM ADOBE

Chris, the new product manager of Adobe AIR, replied to Gary’s open letter, you can read the answer in the official blog

Isolates: how to work with multithreading in Dart

Here we are again with another topic about Dart language, first of all I’d like to start this article with an off-topic.

I joined to FluentJS in San Francisco few weeks ago, an event organize by O’Reilly focus on Javascript development, and I saw a Dart language session, the most amazing thing I’ve seen was the passion behind this project, trust me that it’s not easy today find people that believe in that way in something, Seth Ladd, the speaker and team member of Dart, gave us a great technical introduction to Dart but gave us something more, he transmitted us all his passion on Dart, really amazing!

After this quick off-topic, let’s go ahead with Isolates tutorial.

First of all, Isolates is the Dart way to work with threads and allow to take advantage of your multicore computer, but what is multithreading and when we should use it.

Multithreading

This is a good definition for me: “Multithreading is the ability of a CPU to execute several threads of execution apparently at the same time. CPUs are very fast at executing instructions. Modern PCs can execute nearly a billion instructions every second. Instead of running the same program for one second, the CPU will run one program for perhaps a few hundred microseconds then switch to another and run it for a short while and so on.” (source: cplus.about.com)

And when should we use threads?!

Basically every time you need to speed up an intensive process, for example when you have an heavy process like unzip of a big file or a for cycle with a lots of elements, you should use the threads to don’t freeze the main one and allow your user to work the interface without any issues.

Dart adds this capability in 2 different ways because, as you know you, it can export a project for Dart VM or in Javascript, with Dartium we can use the power of CPUs of your multicore computer and create different threads in each CPU where will be executed your code, in Javascript, Dart converts Isolates in web workers.

Before starting with code I decide to show in a chart how we’ll work with isolates, so basically first of all we create 2 isolates launched from the main isolate and then we pass the final informations elaborated in different isolates to the main one.

Isolates Schema

Last note, when you work with isolate you can have a sender and a receiver, so in the main isolate (launched by the application) you have a port object where you can listen when you receive informations from other isolates and you can pass the sendport object where you can send message to other isolates.

port.receive((data, SendPort replyTo){
replyTo.send("something");
});

Another important thing to remember when you work with isolates, if you need to receive messages from other isolates, is that you always set  the receiver in the main isolate, or you will n0t receive any message from other isolates because the execution of your program is not waiting for any reply without a receiver set.

I created a small project around this topic to show the powerful of the isolates, take a look here:

As you can see when I click on MONO link my CSS animation stops until to the heavy iteration is finished instead when I click on ISOLATE  link everything works well because all the iterations are accomplished in different isolates so the main one could go ahead with own job.

When you want to launch an isolate you have to call the spawnfunction method and pass the main isolate sender:

var isolate = spawnFunction(bigForCycle);
isolate.send("data", port.toSendPort());

After that you can operate with your isolate in this way for example:

void bigForCycle(){
 
 port.receive((data, SendPort replyTo){
 var count;
 for(var i = 0; i < FINAL_AMOUNT; i++){
   count = i;
 }
 replyTo.send(count);
});

}

It’s finally important remember to close isolates after received the message so when they have finished to accomplish own function, to do that you have only to call the close method in the main isolate and it will not receive any other information from other isolates.
In my example I launched 2 isolates to accomplish the task, so I created a counter variables to store how many reply the main isolate received, after received all replies I can close the communication with other isolates:

port.receive((data, SendPort replyTo){
 
 counterIsolate++;
 end = new DateTime.now();
 
 if(counterIsolate == 2){
 var finalTime = end.difference(start).toString();
 myH1.appendHtml("isolate total time: <b>$finalTime</b><br/>");
 // if you want to close isolates you have to use the line below
 port.close();
 
 }

 });

The most interesting thing is that you can accomplish the same task in 2 different way, the first one, as I did in my example, with inline isolates and the second one is loading code dinamically from external Dart files.
To take a look to the second one I suggest to read this post made by Seth Ladd.

Isolate technique is very useful also when you are working on a serverside project with Dart because it could optimize some intensive process that you have to achieve during your project.

I’ve just opened a github repository with all Dart examples that I’m working on, so feel free to check out at this link.
Enjoy!

A long weekend with Tizen, CreateJS and JQuery Mobile

Let’s start from the end of my weekend, this is what I’ve just finished:

And now it’s time to explain what there is behind.

What you have just seen is a PoC (Proof of Concept) for an application that I’ve in mind, it allowed me to study, test and having fun with different technologies, in this post I’d like to share what I’ve learnt in less than 24 hours.
I worked with different technologies as the post title suggest, I was really curios to see how I can create good application UI on Tizen OS and understand more about its limits (if there were of course) and performances.
At the beginning, I worked on the 2.5D animation where I had to scale, skew and rotate any images chosen by the user from the Gallery application.
When I started this part I tried immediately the CSS3 transitions, I thought: “They are new, so probably they care about performances on mobile!”, so after 3 hours to play with CSS3 transitions and trying to have a smooth animation on Tizen, I decide to move on Canvas!
CSS3 transitions are very good for web and desktop, but for mobile when you start to do many heavy animations they really suck, in this Tizen device (it has an hardware similar to Galaxy S3) that is so powerful everything has to work well and with them I can’t achieve my idea.

So I moved to Canvas, but I thought to find something that could help me during my “coding time” and that it feels me more comfortable so I remembered that I’ve used long time ago CreateJS for some test and in this case it helps me a lot.
When you work with CreateJS, more or less you are working with Actionscript with some small changes, for any Actionscript developer it should be a good start to move on Javascript, but there are many other options as Dart or Typescript for example that are good enough for any developer that is looking for something more than Javascript (my 2 cents).
But in this case CreateJS  helps me a lot because is highly focused on Canvas development so definitely what I was looking for.
I haven’t any trouble with this library on Tizen, the performance are so good as you have seen on the video and I didn’t write so much code, my Javascript file for the whole app is less than 260 lines, not a lot I guess.

After that I moved on and I start to work with Tizen web APIs to get images from the Gallery application.
In this case the Tizen developer forum and the online guide help me so much, in fact I found a working example in the forum that I had only to customise for my PoC.
The big issue that I found here is if I want to select more than one image, working with Gallery instance, I couldn’t do that or maybe I couldn’t find a way to do that, so I decided to create a quick picker (at the beginning of my application) to allow me to choose more than one image to the time.
To do that I had to work with filesystem APIs instead of the Gallery one, but in a while I had done everything, this is the code to retrieve all images from Image folder of Tizen OS, but you can use to retrieve any kind of files on Tizen OS:

function onResolveError() {
    console.log("error retrieve data");
}
function onsuccess(files) {
    for (var i = 0; i < files.length; i++) {
        console.log("File name is " + files[i].name + " and URL is " + files[i].toURI()); 
    }
}
function onResolveSuccess(dir) {
    dir.listFiles(onsuccess, onResolveError);
}
function openImages() {
    tizen.filesystem.resolve('images', onResolveSuccess, onResolveError, 'w'); 
}

After that I spend few hours to skin my app and get the right look and feel I had in mind with CSS and JQuery mobile and to create this post with the video.
A quick recap of my last experience:

  • on Tizen if you need to improve performances try to work with Canvas instead of CSS transitions
  • when you have to retrieve files (images, video or whatever) remember to set the right privileges on config.xml and then add the code you can find above
  • CreateJS is a really good library if you want to work with Canvas efficiently and without wasting your time
  • CreateJS has a good community and if you have a problem you can find a lot of solutions and suggestions
  • CreateJS is familiar for any Actionscript 3 developer

That’s it!
Ah, if you are asking if I changed my “religion”? Don’t worry, soon you’ll have news about Flash Platform in this blog, but sometimes I want to experiment new things.

Dart: elements iteration and CSS manipulation

In my exploration of Dart I’m trying to work in some easy examples that could help me to understand how to accomplish some tasks with this technology.
In this example I tried to understand better how iteration of elements works in Dart, how to create a layout with custom elements (more or less the same topic of a custom item renderer in Flex for example) and finally how to create some animations with CSS3 at runtime.

To accomplish those topics I decided to create a responsive image gallery that works on smartphone, tablet and web too.

image gallery with dart

Responsive image gallery

Iteration

Dart gives few opportunities to iterate trough elements:

  • with Dart language (a classic for cycle)
  • with an HTML template
  • with elements composed by an HTML template and some dart code to cover the business logic of the final element

I jump directly to the second and third method, the first one is quite easy for any developer 😉
In my sample I decide to use a simple HTML template, so basically you can define inside your html a tag <template/> that will allow you to repeat the HTML inside this tag associating it to a list for example, I give you a quick sample:

 <div id="imageCont" class="wrap">
      <template iterate="data in results">
        <div class="image">
          <img id="img_{{data[0]}}" class="faded" src={{data[1]}} width="320" height="240" on-click="onClick($event)" on-mouse-out="onOut($event)" on-mouse-over="onOver($event)" on-load="fadeIn($event)"/>
          <img id="zoom_{{data[0]}}" src="images/zoom.png" class="zoom"/>
          <h2><span>{{data[2]}}</span></h2>
         </div>
      </template>
    </div>

First of all take a look on how I can iterate this part of code; I add a simple iterate attribute associated to a list object (called results in my example) added in my dart file as a public variable.
The list could be a plain list or a list of objects, in this last case you can create multiple iteration item inside the template cycling trough your objects in the same way you have just seen.
I can substitute my data variable with any other name and I don’t need to define in my dart file, as you can see I can also define some variables inside the template getting values from my list object with this syntax: {{data[0]}} (or {{data[“value”]}} it’s the same, depends how you have create the list object).
If you need, you can also made your source variables bindable and any time you’ll change the values of your list, also the view will change the number of elements or the values showed in the HTML page.

Finally when you need to create an iterable object with a complex business logic and you want to separate from the original HTML file you can do that creating a Web Components, but in this case I suggest you to take a look to the Dart language guide that explain very well how to achieve this topic.

Modifying CSS with Dart

Another interesting topic is how to change, add or remove css styles to my DOM objects.
In Dart is so easy like any other javascript library, so basically any DOM element in Dart has a property called “classes” with its associated method add and remove, so when you want to change your CSS class with another one, you have, if you have any classes already associated to the element, remove the old class and then add the new one:

var myDomObj = query("#idObject");
myDomObj.classes.remove("class-to-remove");
myDomObj.classes.add("class-to-add");

You can also style any single property directly with “style” property and set them directly in this easy way:

var myDomObj = query("#idObject");
myDomObj.style
             ..color = "0xFFF"
             ..fontSize = "15px";

As you can see working with CSS in Dart is relative simple, if you want to take a look to the whole project feel free to download it.

Another cool thing that is so useful when you work with mobile apps or websites is to test quickly and frequently your content on the devices, so with DartIDE (you can find it downloading Dart SDK) you can easily test your content trough a web server that starts any time you are testing your app into the browser.
It’s so interesting because you save a lot of time in this way!

I’m trying to figure out right now an hypothetical workflow to create web app, web sites or any other thing with Dart and HTML5.
I believe that use Dart in combination with Edge Reflow could be the best way to create responsive application for any kind of devices, but we have to wait until the release of Edge Reflow (17th June) to know if my supposition is true or not.
When it’ll be released and I’ve few time to invest, I’ll prepare another tutorial around this workflow.
In the meanwhile I hope you are enjoying those experiments with Dart and if you are interesting in any kind of topics on Dart feel free to suggest trough a comment in this post or sending an email

HaXe, my new toy!

After Adobe MAX 2011 everything should not be the same for me and maybe for a lot of flash platform developers around the world, Adobe brings some “directions”  that didn’t find my consent mainly for the way that communicate these news and the impact that had in the market, but we know that Flash Platform is not dead and it will go ahead for many years.
Obviously nothing was the same after that, in fact many developers started to look around for new technologies and frameworks like Backbone.js, Sencha Touch, Ext JS and so on.
Personally I started to checked in last few months many Javascript frameworks because my aim was find something that could replace Flash Platform in the future and I have to spend time in next years to consolidate it and go ahead with Flash Platform too.
Last week a big friend of mine gave me this link: http://www.haxenme.org/ and when I started to read what you can do and how you can do it, I immediately started to go in deep with HaXe in my spare time and trust me that I had a lot of fun!

First of all what is HaXe?
HaXe is an open source multiplatform programming language, it allows to write once and deploy everywhere (in the right meaning of therm “everywhere”).
In fact with HaXe we can write in a programming language similar to Actionscript 3 (strictly typed, OOP, …) but more powerful (it has enum, generics, dynamic type, …), with HaXe we can target our projects for Flash, C++, Neko, HTML5, Node.JS, PHP, iOS, Android… if we work with multiplatform APIs we can write once and deploy our project for multiple targets.
So for many developers that come from Javascript, Actionscript, Java and so on, will be so easy to start deal with HaXe.
Another interesting thing of HaXe is that we can work with the library present in the SWF files and integrate movieclip in our project, we can create also SWF file without Flash Professional with SWFMill that is used for the generation of asset libraries containing images (PNG and JPEG), fonts (TTF) or other SWF movies.
That’s so interesting because it means that designers that usually prepare assets for developers don’t need to change own daily workflow!
If you need to extend your target platform we can add new features with external libraries, it’s so important because we can really cover everything with this feature; we can find a lot of ready to use libraries directly on the lib HaXe website.
With HaXe you can communicate between different languages like JS and Flash in both direction, you can easily find many frameworks and library porting in HaXe, for example javascript like JQuery, Sencha Touch, Node.JS and so on.

What about the IDE to work with HaXe (so important for a developer!)!?
On Mac you can use TextMate or FDT on Win FDT or FlashDevelop this one seems the best one but I didn’t try it. For more specs I suggest to take a look at HaXe site section, maybe you can find your favorite IDE in the list.

Finally I made an easy sample to understand better the powerful of HaXe NME, this sample loads an external XML file and an external SWF library with a movieclip inside exported for Actionscript, so I added a drag&drop feature to the list. Then I tried to compile it for iOS, Mac OS X Lion, C++ and SWF with the same basecode and everything work so well and smooth!


You can download source files here, to compile it take a look at HaXeNME section and you can find everything you need to try this sample and start to play with HaXeNME!

If you want to deal with HaXe, I suggest two books, the first one is really a good start to work with this fantastic language:
HaXe 2 beginner’s guide
Professional HaXe and Neko

Last but not least, next April in Paris there will be World Wide HaXe conference, I’ll be there to learn more about the future of this amazing platform if you are planning to be there it will be a pleasure for me catch up for a beer!

I hope soon to publish more experiments and informations about HaXe because it is a thrilling programming language!!!
So stay tuned!

Review: HTML5 Mobile Web Development

A couple of weeks ago I became blogger reviewer for O’really, so I take this opportunity to open my mind and learn new stuff about new technologies, programmation languages, etc.

So this is my first review and I start with an HTML5 video course.
Why am I talking about HTML5 in this blog? Because I think it’s important to know and learn if it could be useful in some projects or not.

Starting with this idea I’ve decided to watch this video course about HTML5 on mobile development.
Video courses aren’t my favorite media to learn new stuff because I love to sign my books, add some notes…you know what I mean… but this time I was really impressed about how O’Reilly organized it.
Seems you are in a real classroom with teacher in front of you that show code examples, tips & tricks using HTML5, CSS3 on iPad or iPhone.
Course is focused on mobile development, Jake Carter, the author, shows also Android world, how to configure your computer to work with emulator and simulator for Android, iPhone and so on.

I really love the way that he works in the classroom because first of all he explains the powerful of a particular feature, then show how to implement it and finally a little part of Q&A from internet people (I suppose).
During this video course you can learn useful stuff, take a look at table of contents in O’reilly website.
It was my first time with HTML5 and I think is an interesting technology, in particular, during this course I learn how to work with geolocation,  with JS and Canvas, with audio and video API and again how to save data directly on the device in a database.
I appreciate a lot al meta and css dedicated to iPhone and iPad, very useful.
Finally if you are interesting to learn a new way to develop on mobile, I suggest to take a look at this reference.
It’s useful, easy and I think is a fast method to learn.