First steps with ES6 and Backbone

TL;TR Feedback on a mini-application based on ES6 and Backbone in promise land!

Here is a small feedback on a development that I made recently in JavaScript and I'm pretty happy to the extend I would like to talk about it.

As a quick background, the Customer asked for a mini-applications that has to be plugged onto an existing website. The application basically had to displayed a questionnaire interactively filled out by the User question by question.

At first, I embarked in ES6, the successor of ES5 which is the JavaScript we know / write today. This next iteration of the language allows to better organize the code with classes, templates, modules, etc .. In short all that we love and what professionalize the application.

Since all browsers do not support ES6, the code is passed through a transpiler. Eventually the ES5 version is served to the browser which makes it perfectly compatible. As browser vendors move forward in ES6 support, compatibility layer will be reduced until it can be fully removed. A famous transpiler gaining a lot of attraction at the moment is Babel which was formerly known as 6to5. To make transpilation on the fly, I use Grunt that works well for my needs. I was inspired by the project demonstrating this process with a variety of other tools, Gulp for example.

Meanwhile, I wanted to build the application upon the driven event approach. As example, when the user clicks a button, an event is fired. The adequate listener is responsible to react and triggers actions. This approach has the advantage of decoupling the application. Digging a little, I came across the project which was a great source of inspiration. It illustrates the famous Todo example using ES6 and Backbone. Backbone is a JS library that provides a view-model supported by an event dispatching system. Exactly what I was looking for ... This allows to write high level code not to compare with jQuery where we have to think at the level of the DOM with all side effects it has. For a brief overview here is the annotated version.

In summary, the pros:

  • Light and fast: the code is less than 80K all included, my code + libraries
  • Pluggable: it can be loaded on a existing / running web site (no radical architecture design)
  • Maintainable: ES6 drastically reduces the "boilerplate" code.

In less:

  • Transpiler: even if fast, it adds a layer and not all is "transpilable" to ES5 - although the large majority is covered.

I also keep an eye on the project Aurelia. The approach goes further and requires to dive into a framework, but with the promise to stick to the ES6 and ES7 standards.

My humble version of the code - still in development

This article is available in French also.

Tags: javascript, es6, babel, grunt, backbone

Date format in PHP

Formatting dates in PHP is one of those things that is more twisted / complicated than it looks. The case is simple, we want to display a date, taking into account the linguistic context. Let us first look the \DateTime ()

$date = new \DateTime();
print $date->format("d F Y"); // 20 Mar.2015

Mmm ... It works but unfortunately for us, the return of format method is in English only.

To translate a date, use the strftime function which will used the Locales of the system under the hood. However, the formatting syntax is different since it has percent "%" as symbol and different letters.

setlocale(LC_TIME, "fr_FR");
print strftime("%A %B %G"); // Vendredi mars 2015

By combining the object approach and the strftime function, this provides a more elegant solution.

setlocale(LC_TIME, "fr_FR");
$date = new \DateTime();
print strftime("%A %B %G", $date->getTimestamp());
// Vendredi mars 2015

Unfortunately, this is not final solutio because strftime has limitations and does not work properly with a time prior to 1970.

Finally, the safest approach is to use a PHP extension "Intl" which is specialized in this task. A quick example:

$date = new \DateTime();

$formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::SHORT, IntlDateFormatter::SHORT);
$formatter->setPattern('E d.M.Y');

print $formatter->format($date); // ven. 20.3.2015

QED!

This article is available in French also.

Tags: php, date

Automatic TER release from Github

As the maintainer of several extensions for TYPO3 CMS, I have always found the release process to the TER a little bit tedious. In fact, the operation is more complicated than it seems. We must be very carful about every detail: Git tags, commit message, update the correct version number, etc... To help in this task, I have a checklist that I follow step by step. But still! And if all goes well, the procedure takes arourd 10 to 15 minutes per extension.

I had on the radar several attempts to automate the upload of the TER via Webhooks available in Github. There was, among others, the approach of Kay Strobach with this proof of concept.

The underlying idea was to trigger the upload via the creation of a Git tag. Having discussed the matter with my colleague Adrien, we followed the approach explained in detail in this article written by Claus Due. The verbosity of the article can let thing about something complexd to set up. It is not so! The implementation can be summarized in a few steps.

Preparatory tasks

  • Create a subdomain, eg http://release.example.com
  • Clone extension https://github.com/Ecodev/fluidtypo3-gizzle, the "web" folder to be the root of the document root.
  • Add a webhook for the project on GitHub
    • URL: http://release.example.com/?settings=settings/ExtensionRelease.yml
    • Secret: 12356
  • Transfer the key extension to a member "release" on typo3.org. This step is optional but recommended.

Release task

  • Update the version number in the file ext_emconf.php and composer.json.
  • Create a tag and push this tag with the command git push --tags, the extension is uploaded to TER with a generic message that points to the log on Github. Very convenient!

A few screenshots

The setup of the Webhook


Analysis of paylod to verify what has been sent to Webhook.


The return of the Webhook actually corresponding to the message sent by the TER.

This article is available in French also.

Tags: ter, github