For its first year, the Js-Republic consultants offered themselves a short visit to the Best Of Web conference. This conference dedicated to web technologies and JavaScript took place this Thursday 9 and Friday 10 June at the Grande Crypte in Paris.
Here are some talks that particularly marked us.
CSS, Companionship and Vexillology
Tim Carry sees the demonstrations of the know-how of the companions, it inspires him and reminds him of the Craftsman current, so dear to our hearts in software development.
Like Sheldon Cooper (cf. Character from The Big Bang Theory above), Tim then embarked on a somewhat crazy project around vexillology:
Reproduce all the flags of the world in CSS (and with only one div please!).
He explains how he had to compete with inventiveness and tricks to use little-known CSS mechanisms to reproduce strips, stars, diagonals and other triangles.
But what should be remembered from this presentation is not so much the result. Because although stunning, it is not at all suitable for production.
No, the real value of this story lies in all the knowledge that Tim acquired and was able to distill to us about the countries, the flags and their stories, as well as an in-depth knowledge of CSS.
As he says himself “the journey matters more than the destination”:
https://github.com/pixelastic/talk-css-flags
Mathieu BRETON, CEO @JSRepublic
Progressive Web Apps
One of the major topics of this year 2016 was undoubtedly the Progressive Web Apps which promise to revolutionize the use and consumption of mobile applications.
Indeed, the conversion and retention rate proving to be dramatically low for native applications, Progressive Web Apps offer an interesting alternative.
It is estimated that 80% of users delete an application during the first three days of use.
Similarly, the user journey to install an application is long and only 20% of users will end up using your application, whereas this is much shorter for a progressive web app, which makes it possible to double the number of users, or 40%.
Thus, companies like Flipkart or Aliexpress have recently unveiled their first case studies accompanied by figures that are encouraging to say the least.
Flipkart :
- visitors passed 3 times more time on site
- the re-engagement rate has increased 40%
- the conversion rate has increased by 70%
- data usage decreased by 3 times
- the number of new users increased by 104%
- the number of page views has been I doublé
- time spent on site increased by 74%
- data usage decreased by 3 times
To achieve such numbers, your Progressive Web App must be responsive, secure and powerful in order to compete with a native application.
Safety
The use of a service workers will allow you to intercept or modify browsing and resource requests asynchronously and over HTTPS.
Unfortunately, this API is currently poorly supported by browsers.
cache
Your application must be offline first and make use of the cache in order to avoid the lie-fi syndrome which risks causing many of your users to abandon.
Performance
The loading of your application must be instantaneous or almost via the use of async defer, the cache, the HTTP2 protocol and by optimizing your CSS to the maximum.
Installation
The Manifest is a JSON file that will allow you to describe your application so that users can add it to the home screen of their smartphone.
Re-engagement
Just like native applications, you can use push notifications to inform your users of the latest news on your platform.
Conclusion
In conclusion, Progressive Web Apps allow you to avoid the long installation tunnel of the various app stores and to obtain an application that works in offline mode while being as efficient as a native application in order to reengage your users and increase the use of your service.
Attachments
To deepen the subject, you can consult the slides of the presentation of the Sfeir team at Devoxx:
http://fr.slideshare.net/SfeirGroup/devoxx-fr-2016-progressive-web-apps-par-florian-orpelire-cyril-balit
As well as their workshop:
https://github.com/Sfeir/pwa-200
And test the Pokédex, which turns out to be the most successful Progressive Web App at the moment:
https://www.pokedex.org
The creator also shared his approach in the following article:
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
Pierrick TURELIER, JS-Republican @JSRepublic
Emulate a Gameboy in Javascript
While some only have eyes for the PS4 or Xbox ONE, others can't wait for the next Zelda on the Nintendo NX, others nostalgic or simply crazy are challenging themselves to push the limits of a platform whose growth seems infinite...
There are of course the limits of JavaScript and more generally of the web we are talking about… and more particularly of the emulation of a Gameboy!
So I see you coming, you're going to ask me what an emulator is. According to Wikipedia:
"En IT, emulation consists in substituting an element of hardware – such a computer terminal, computer or an Game console - by a software. "
In summary, we look at how the hardware we are trying to imitate works and we reproduce the behavior via a script in order to obtain an equivalent result.
You will say to me “But what is the hardware?”…
The hardware refers to the computer equipment, in the case that interests us, namely the Gameboy.
There are 4 elements:
- the CPU processor
- MMU memory
- GPU graphics processor
- and finally Timer, Inputs and Sounds
In principle, each one fulfills one or more more or less complex tasks, which must be understood and it is not necessarily obvious, it is a long-term job but here we are getting lost.
The CPU, its main role is to convert integers (eg: 0x80) into an action (eg: A = A + B), you will understand, the implementation can be done in different ways, either with a good switch families or a function array, even self-generated functions, reality or fiction, the idea is that it's like a state machine that is easily testable.
The MMU's function is to route memory accesses to the hardware, it acts like the JavaScript getter/setter, by allowing the hardware to read or write to it.
Its implementation is relatively simple because performance is to be taken into account and not all solutions are equal so exit the function table, instead, we will prefer if to manage the “range” and a switch to manage the rest , it should be noted that the MMU is easily testable.
The GPU, I am told in the headset, is more cotton…
Its mission because it accepts it is to transform the VideoRAM into an array of pixels, even if it is a processor like the CPU, the GPU is a machine with 4 different states, subject to many rules which are binding and for which it You often have to handle exceptions.
It turns out that the implementation is relatively hard to test or debug.
Here is the outline of what I was able to retain from this presentation, which gives a good idea of what an emulator is and how it works in the case of a Gameboy.
Emulating other platforms can be complicated, fortunately for us there are curious people who like to share as did Mael Nison at Best of Web 2016 during his presentation which shows the diversity of applications that can be created using JavaScript, and it's just amazing.
If you liked this appetizer, I invite you to take an interest in the different projects to which Maël referred.
- Virtjs : a free collection of standard input device allowing to boost certain engine which will use this type of interface if it is available.
- audiojs : implements additional input devices for Virtjs.
- Process : makes it easy to apply post processing.
- archjs : a Bookcase whose sole purpose is to be easily compiled via Emscripten, the Virtjs engine can therefore be instantiated on the fly anywhere like most engines.
- And finally, icing on the cake, Start9.io a platform built on top of Archjs, which allows you to archive your games, play them and save their progress.
If you want to see a JavaScript emulator in action, this is where it's at!
Pierre-Arnaud LUMALE, JS-Republican @JSRepublic
