Per il suo primo anno, i consulenti Js-Republic si sono offerti una breve visita al Convegno Best Of Web. Questa conferenza dedicata alle tecnologie web e JavaScript si è svolta giovedì 9 e venerdì 10 giugno alla Grande Crypte di Parigi.
Ecco alcuni discorsi che ci hanno particolarmente segnato.
CSS, Compagnia e Vessillologia
Tim Carry vede le dimostrazioni del know-how dei compagni, lo ispira e gli ricorda la corrente Craftsman, tanto cara ai nostri cuori nello sviluppo software.
Come Sheldon Cooper (cfr. Personaggio di The Big Bang Theory sopra), Tim ha quindi intrapreso un progetto un po' folle sulla vessillologia:
Riproduci tutte le bandiere del mondo in CSS (e con un solo div per favore!).
Spiega come ha dovuto competere con inventiva e trucchi per utilizzare meccanismi CSS poco conosciuti per riprodurre strisce, stelle, diagonali e altri triangoli.
Ma ciò che dovrebbe essere ricordato da questa presentazione non è tanto il risultato. Perché sebbene sbalorditivo, non è affatto adatto alla produzione.
No, il vero valore di questa storia sta in tutta la conoscenza che Tim ha acquisito e ha saputo distillarci sui paesi, le bandiere e le loro storie, oltre a una profonda conoscenza dei CSS.
Come dice lui stesso “il viaggio conta più della destinazione”:
https://github.com/pixelastic/talk-css-flags
Mathieu BRETON, CEO di @JSRepublic
Applicazioni Web progressive
Uno dei grandi temi di quest'anno 2016 è stato senza dubbio le Progressive Web App che promettono di rivoluzionare l'uso e il consumo delle applicazioni mobili.
In effetti, poiché il tasso di conversione e conservazione si è rivelato drammaticamente basso per le applicazioni native, le Progressive Web Apps offrono un'interessante alternativa.
Si stima che l'80% degli utenti elimini un'applicazione durante i primi tre giorni di utilizzo.
Allo stesso modo, il percorso dell'utente per installare un'applicazione è lungo e solo il 20% degli utenti finirà per utilizzare la tua applicazione, mentre questo è molto più breve per un'app Web progressiva, che consente di raddoppiare il numero di utenti, ovvero il 40%.
Così, aziende come Flipkart o Aliexpress hanno recentemente svelato i loro primi case study accompagnati da cifre a dir poco incoraggianti.
Flipkart :
- i visitatori sono passati volte 3 più tempo sul sito
- il tasso di reinserimento è aumentato 40%
- il tasso di conversione è aumentato di 70%
- l'utilizzo dei dati è diminuito di volte 3
- il numero di nuovi utenti è aumentato di 104%
- il numero di visualizzazioni di pagina è stato foderato
- tempo trascorso in loco è aumentato di 74%
- l'utilizzo dei dati è diminuito di volte 3
Per raggiungere tali numeri, la tua Progressive Web App deve essere reattiva, sicura e potente per competere con un'applicazione nativa.
sicurezza
L'uso di a addetto all'assistenza ti consentirà di intercettare o modificare la navigazione e le richieste di risorse in modo asincrono e su HTTPS.
Sfortunatamente, questa API è attualmente scarsamente supportata dai browser.
Cache
La tua applicazione deve essere prima offline e utilizzare la cache per evitare la sindrome della bugia che rischia di far abbandonare molti dei tuoi utenti.
Cookie di prestazione
Il caricamento della tua applicazione deve essere istantaneo o quasi tramite l'utilizzo di async defer, la cache, il protocollo HTTP2 e ottimizzando al massimo i tuoi CSS.
SERVIZIO DI
Il Manifest è un file JSON che ti permetterà di descrivere la tua applicazione in modo che gli utenti possano aggiungerla alla schermata iniziale del proprio smartphone.
Riimpegno
Proprio come le applicazioni native, puoi utilizzare le notifiche push per informare i tuoi utenti delle ultime notizie sulla tua piattaforma.
Conclusione
In conclusione, le Progressive Web App ti consentono di evitare il lungo tunnel di installazione dei vari app store e di ottenere un'applicazione che funzioni in modalità offline pur essendo efficiente come un'applicazione nativa in modo da coinvolgere nuovamente i tuoi utenti e aumentare l'utilizzo del tuo servizio .
Appendici
Per approfondire l'argomento, potete consultare le slide della presentazione del team Sfeir al Devoxx:
http://fr.slideshare.net/SfeirGroup/devoxx-fr-2016-progressive-web-apps-par-florian-orpelire-cyril-balit
Oltre al loro laboratorio:
https://github.com/Sfeir/pwa-200
E prova il Pokédex, che risulta essere la Progressive Web App di maggior successo al momento:
https://www.pokedex.org
Il creatore ha anche condiviso il suo approccio nel seguente articolo:
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
Pierrick TURELIER, JS-repubblicano @JSRepublic
Emula un Gameboy in Javascript
Mentre alcuni hanno occhi solo per PS4 o Xbox ONE, altri non vedono l'ora del prossimo Zelda su Nintendo NX, altri nostalgici o semplicemente pazzi si sfidano a spingere i limiti di una piattaforma la cui crescita sembra infinita...
Ci sono ovviamente i limiti di JavaScript e più in generale del web di cui stiamo parlando… e più in particolare dell'emulazione di un Gameboy!
Quindi ti vedo arrivare, mi chiederai cos'è un emulatore. Secondo Wikipedia:
"En IT, l'emulazione consiste nel sostituire un elemento di hardware - come un terminale del computer, un ordinateur o una Console di gioco - dall'a logiciel. "
In sintesi, osserviamo come funziona l'hardware che stiamo cercando di imitare e riproduciamo il comportamento tramite uno script in modo da ottenere un risultato equivalente.
Mi dirai "Ma qual è l'hardware?"...
L'hardware si riferisce alla dotazione informatica, nel caso che ci interessa, ovvero il Gameboy.
Ci sono 4 elementi:
- il processore CPU
- Memoria MMU
- Processore grafico GPU
- e infine Timer, Ingressi e Suoni
In linea di principio ognuno svolge uno o più compiti più o meno complessi, che vanno compresi e non è necessariamente scontato, è un lavoro a lungo termine ma qui ci stiamo perdendo.
La CPU, il suo ruolo principale è convertire numeri interi (es: 0x80) in un'azione (es: A = A + B), capirai, l'implementazione può essere fatta in diversi modi, sia con una buona famiglia di switch che con una funzione array, anche funzioni auto-generate, realtà o finzione, l'idea è che sia come una macchina a stati facilmente verificabile.
La funzione della MMU è di indirizzare gli accessi alla memoria all'hardware, agisce come il getter/setter JavaScript, consentendo all'hardware di leggere o scrivere su di esso.
La sua implementazione è relativamente semplice perché le prestazioni sono da tenere in considerazione e non tutte le soluzioni sono uguali quindi esci dalla tabella delle funzioni, invece, preferiremo se per gestire il "range" e uno switch per gestire il resto, si noti che la MMU è facilmente testabile.
La GPU, mi è stato detto nell'auricolare, è più cotone...
La sua missione perché lo accetta è trasformare la VideoRAM in un array di pixel, anche se è un processore come la CPU, la GPU è una macchina con 4 stati diversi, soggetta a molte regole che sono vincolanti e per le quali spesso devono gestire le eccezioni.
Si scopre che l'implementazione è relativamente difficile da testare o eseguire il debug.
Ecco lo schema di ciò che sono riuscito a trattenere da questa presentazione, che rende bene l'idea di cosa sia un emulatore e di come funzioni nel caso di un Gameboy.
Emulare altre piattaforme può essere complicato, fortunatamente per noi ci sono persone curiose a cui piace condividere come hanno fatto Mael Nison al Best of Web 2016 durante la sua presentazione che mostra la diversità di applicazioni che possono essere create utilizzando JavaScript, ed è semplicemente fantastico.
Se questo antipasto vi è piaciuto, vi invito a interessarvi ai diversi progetti a cui si riferiva Maël.
- Virtjs : una raccolta gratuita di dispositivi di input standard che consentono di potenziare determinati motori che utilizzeranno questo tipo di interfaccia se disponibile.
- audiojs : implementa dispositivi di input aggiuntivi per Virtjs.
- Processi : semplifica l'applicazione della post-elaborazione.
- archjs : un Libretro il cui unico scopo è quello di essere facilmente compilato tramite Emscripten, il motore Virtjs può quindi essere istanziato al volo ovunque come la maggior parte dei motori.
- E infine, ciliegina sulla torta, Start9.io una piattaforma costruita su Archjs, che ti consente di archiviare i tuoi giochi, riprodurli e salvarne i progressi.
Se vuoi vedere un emulatore JavaScript in azione, ecco dove si trova!
Pierre-Arnaud LUMALE, JS-repubblicano @JSRepublic
