Mir waren am Best Of Web!

IMG_2262
Fir säin éischte Joer hunn d' Beroder vun der Js-Republic sech e kuerze Besuch an der Best Of Web Konferenz. Dës Konferenz gewidmet fir Webtechnologien a JavaScript huet dësen Donneschdeg 9 a Freideg 10 Juni an der Grande Crypte zu Paräis stattfonnt.
Hei sinn e puer Gespréicher déi eis besonnesch markéiert hunn.

CSS, Begleedung a Vexillologie
maxresdefault
Fiktiv Webserie "Spaass mat Fändelen" an der Big Bang Theory Serie
Et fänkt alles bei engem Besuch an engem Compagnonnage Musée zu Tour un.
Den Tim Carry gesäit d'Demonstratioune vum Know-How vun de Begleeder, et inspiréiert hien an erënnert un den Handwierkeraktuell, sou d'Häerzer an der Softwareentwécklung.
Wéi den Sheldon Cooper (cf. Charakter aus der The Big Bang Theory uewen), huet den Tim dunn e bësse verréckte Projet ronderëm d'Vexillologie ugefaang:
Reproduzéiert all d'Fändelen vun der Welt an CSS (a mat nëmmen enger Div w.e.g.!).

Hien erkläert wéi hien an Erfindung an Tricken konkurréiere muss fir wéineg bekannte CSS Mechanismen ze benotzen fir Sträifen, Stären, Diagonalen an aner Dräieck ze reproduzéieren.
Awer wat aus dëser Presentatioun erënnert muss ginn ass net sou vill d'Resultat. Well obwuel se beandrockend ass, ass et guer net gëeegent fir d'Produktioun.
Neen, de richtege Wäert vun dëser Geschicht läit an all Wëssen, dat den Tim eis iwwer d'Länner, d'Fändelen an hir Geschichten erfaasst a konnt distilléieren, souwéi en déifgräifend Wëssen iwwer CSS.

Wéi hie selwer seet "d'Rees ass méi wichteg wéi d'Destinatioun":
https://github.com/pixelastic/talk-css-flags
Mathieu BRETON, CEO @JSRepublic

Progressiv Web Apps

Ee vun den Haaptthemen vun dësem Joer 2016 war ouni Zweifel déi Progressive Web Apps déi verspriechen d'Benotzung an de Konsum vu mobilen Uwendungen ze revolutionéieren.
Tatsächlech, d'Konversioun an d'Retentiounsquote beweist dramatesch niddereg fir gebierteg Uwendungen, Progressive Web Apps bidden eng interessant Alternativ.
Et gëtt geschat datt 80% vun de Benotzer eng Applikatioun während den éischten dräi Deeg vum Gebrauch läschen.
image00
Ähnlech ass d'Benotzerees fir eng Applikatioun ze installéieren laang an nëmmen 20% vun de Benotzer wäerten Är Applikatioun um Enn benotzen, wärend dëst vill méi kuerz ass fir eng progressiv Webapp, déi et méiglech mécht d'Zuel vun de Benotzer ze verduebelen, oder 40%.
image05
image04
 
 
 
 
Also, Firme wéi Flipkart oder Aliexpress hunn viru kuerzem hir éischt Fallstudien enthüllt mat Zuelen déi encouragéieren fir d'mannst ze soen.
Flipkart :

  • Visiteuren laanscht 3 Mol méi Zäit op der Plaz
  • d'Re-Engagement Taux ass eropgaang 40%
  • den Ëmrechnungsquote ass eropgaang duerch 70%
  • Datenverbrauch erofgaang vun 3 Mol

Aliexpress :

  • d'Zuel vun neie Benotzer geklomm vun 104%
  • d'Zuel vun Säit Meenung war duebel
  • Zäit op der Plaz verbraucht duerch 74%
  • Datenverbrauch erofgaang vun 3 Mol

Fir esou Zuelen z'erreechen, muss Är Progressive Web App reaktiounsfäeger, sécher a mächteg sinn fir mat enger gebierteg Applikatioun ze konkurréiere.

Sécherheet

Mat engem Service Aarbechter erlaabt Iech Surfen a Ressourceufroen asynchron an iwwer HTTPS z'ënnerscheeden oder z'änneren.
Leider ass dës API am Moment schlecht vu Browser ënnerstëtzt.

image02Cover

Är Applikatioun muss als éischt offline sinn a vum Cache benotzen fir de Lie-Fi Syndrom ze vermeiden, wat riskéiert datt vill vun Äre Benotzer opginn.

image03Leeschtung

D'Luede vun Ärer Applikatioun muss direkt sinn oder bal iwwer d'Benotzung vun Async Defer, de Cache, den HTTP2 Protokoll an andeems Dir Är CSS op de Maximum optiméiert.

image01Installatioun

D'Manifest ass eng JSON Datei déi Iech erlaabt Är Applikatioun ze beschreiwen sou datt d'Benotzer se op den Heembildschierm vun hirem Smartphone addéiere kënnen.
image06

Re-Engagement

Just wéi gebierteg Uwendungen, kënnt Dir Push Notifikatiounen benotzen fir Är Benotzer iwwer déi lescht Neiegkeeten op Ärer Plattform z'informéieren.
image07

Conclusioun

Als Conclusioun, Progressive Web Apps erlaben Iech de laangen Installatiounstunnel vun de verschiddenen App Stores ze vermeiden an eng Applikatioun ze kréien déi am offline Modus funktionnéiert wärend sou effizient wéi eng gebierteg Applikatioun fir Är Benotzer nei z'engagéieren an d'Benotzung vun Ärem Service ze erhéijen .

Annexen

Fir d'Thema ze verdéiwen, kënnt Dir d'Rutschen vun der Presentatioun vum Sfeir Team bei Devoxx konsultéieren:
http://fr.slideshare.net/SfeirGroup/devoxx-fr-2016-progressive-web-apps-par-florian-orpelire-cyril-balit
Souwéi hiren Atelier:
https://github.com/Sfeir/pwa-200
A test de Pokédex, deen sech als déi erfollegräichste Progressive Web App am Moment erausstellt:
https://www.pokedex.org
De Schëpfer huet och seng Approche am folgenden Artikel gedeelt:
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
Pierrick TURELIER, JS-Republican @JSRepublic

Emuléiert e Gameboy am Javascript

Bestofweb2016_williamjezequel_154
Wärend e puer nëmmen Aen fir de PS4 oder Xbox ONE hunn, anerer kënnen net op déi nächst Zelda op der Nintendo NX waarden, anerer nostalgesch oder einfach verréckt fuerdere sech selwer fir d'Limite vun enger Plattform ze drécken, där hire Wuesstum onendlech schéngt ...
Et ginn natierlech d'Limite vu JavaScript a méi allgemeng vum Web iwwer mir schwätzen ... a méi besonnesch vun der Emulatioun vun engem Gameboy!

Also ech gesinn dech kommen, du frot mech wat en Emulator ass. Laut Wikipedia:
"En Computerentwécklungen, Emulatioun besteet aus engem Ersatz vun engem Element vun Hardware - esou eng Computerterminal, un Computer oder Spillkonsol - vum a Software. "

Zesummegefaasst kucke mir wéi d'Hardware déi mir probéieren ze imitéieren funktionnéiert a mir reproduzéieren d'Verhalen iwwer e Skript fir en gläichwäertegt Resultat ze kréien.
Dir wäert mir soen "Awer wat ass d'Hardware?" ...
D'Hardware bezitt sech op d'Computerausrüstung, am Fall deen eis interesséiert, nämlech de Gameboy.
Et gi 4 Elementer:

  • der CPU Prozessor
  • MMU Erënnerung
  • GPU Grafiken Prozessor
  • an endlech Timer, Input an Kläng

Jiddereen erfëllt am Prinzip eng oder méi méi oder manner komplex Aufgaben, déi musse verstane ginn an et ass net onbedéngt evident, et ass eng laangfristeg Aarbecht awer hei gi mer verluer.
D'CPU, seng Haaptroll ass ganz Zuelen (zB: 0x80) an eng Handlung ëmzewandelen (zB: A = A + B), Dir wäert verstoen, d'Ëmsetzung kann op verschidde Manéiere gemaach ginn, entweder mat enger gudder Schaltfamilljen oder enger Funktioun Array, souguer selwer generéiert Funktiounen, Realitéit oder Fiktioun, d'Iddi ass datt et wéi eng Staatsmaschinn ass déi liicht testbar ass.
D'Funktioun vum MMU ass d'Erënnerung Zougang zu der Hardware ze routen, et handelt wéi de JavaScript Getter / Setter, andeems d'Hardware et erlaabt ze liesen oder ze schreiwen.
Seng Ëmsetzung ass relativ einfach, well d'Performance muss berücksichtegt ginn an net all Léisunge sinn gläich, also fuert d'Funktiounstabell aus, amplaz wäerte mir léiwer de "Gamme" verwalten an e Schalter fir de Rescht ze managen, et sollt bemierkt ginn datt de MMU ass einfach ze testen.
D'GPU, hunn ech am Headset gesot, ass méi Koteng ...
Seng Missioun well et akzeptéiert ass de VideoRAM an eng Array vu Pixelen ze transforméieren, och wann et e Prozessor ass wéi d'CPU, d'GPU ass eng Maschinn mat 4 verschiddene Staaten, ënnerleien zu ville Reegelen déi bindend sinn a fir déi et Dir dacks mussen Ausnahmen handhaben.
Et stellt sech eraus datt d'Ëmsetzung relativ schwéier ass ze testen oder ze debuggen.
Hei ass de Kontur vun deem wat ech aus dëser Presentatioun konnt halen, wat eng gutt Iddi gëtt wat en Emulator ass a wéi et funktionnéiert am Fall vun engem Gameboy.
Emuléieren aner Plattformen ka komplizéiert sinn, glécklecherweis fir eis ginn et virwëtzeg Leit déi gären deelen wéi et gemaach huet
Mael Nison am Best of Web 2016 wärend senger Presentatioun déi d'Diversitéit vun Uwendungen weist, déi mat JavaScript erstallt kënne ginn, an et ass einfach erstaunlech.
Wann dir dësen Aperitif gefall hutt, invitéieren ech Iech fir déi verschidde Projeten, op déi de Maël bezeechent huet, ze interesséieren.

  • Virtjs : eng gratis Sammlung vu Standard-Input-Apparater, deen et erlaabt e gewësse Motor ze boosten, deen dës Zort Interface benotzt wann et verfügbar ass.
  • audiojs : implementéiert zousätzlech Input Geräter fir Virtjs.
  • Prozess : mécht et einfach d'Postveraarbechtung z'applizéieren.
  • archjs : une Libretro deem säin eenzegen Zweck ass einfach iwwer Emscripten kompiléiert ze ginn, de Virtjs-Motor kann also iwwerall iwwerall instantiéiert ginn wéi déi meescht Motoren.
  • A schlussendlech, Glace op de Kuch, Start 9.io eng Plattform uewen op Archjs gebaut, déi Iech erlaabt Är Spiller ze archivéieren, se ze spillen an hir Fortschrëtter ze späicheren.
    Wann Dir e JavaScript Emulator an Aktioun wëllt gesinn, ass dat wou et ass!

 Pierre-Arnaud LUMALE, JS-Republikaner @JSRepublic