Für ihr erstes Jahr boten sich die Berater von Js-Republic einen Kurzbesuch bei der an Best Of Webkonferenz. Diese den Webtechnologien und JavaScript gewidmete Konferenz fand diesen Donnerstag, den 9. und Freitag, den 10. Juni in der Grande Crypte in Paris statt.
Hier sind einige Vorträge, die uns besonders geprägt haben.
CSS, Kameradschaft und Vexillologie
Tim Carry sieht die Demonstrationen des Know-hows der Weggefährten, es inspiriert ihn und erinnert ihn an die Craftsman-Strömung, die uns in der Softwareentwicklung so am Herzen liegt.
Wie Sheldon Cooper (vgl. Charakter aus The Big Bang Theory oben) begann Tim dann mit einem etwas verrückten Projekt rund um die Vexillologie:
Reproduzieren Sie alle Flaggen der Welt in CSS (und bitte nur mit einem div!).
Er erklärt, wie er an Erfindungsreichtum und Tricks konkurrieren musste, um wenig bekannte CSS-Mechanismen zu verwenden, um Streifen, Sterne, Diagonalen und andere Dreiecke zu reproduzieren.
Aber was von dieser Präsentation in Erinnerung bleiben sollte, ist nicht so sehr das Ergebnis. Denn obwohl atemberaubend, ist es überhaupt nicht für die Produktion geeignet.
Nein, der wahre Wert dieser Geschichte liegt in all dem Wissen, das Tim sich angeeignet hat und uns über die Länder, die Flaggen und ihre Geschichten zusammenfassen konnte, sowie in einem fundierten Wissen über CSS.
Wie er selbst sagt „der Weg zählt mehr als das Ziel“:
https://github.com/pixelastic/talk-css-flags
Mathieu BRETON, CEO @JSRepublic
Progressive Web Apps
Eines der großen Themen dieses Jahres 2016 waren zweifellos die Progressive Web Apps, die versprechen, die Nutzung und Nutzung mobiler Anwendungen zu revolutionieren.
Da sich die Konversions- und Bindungsrate für native Anwendungen als dramatisch niedrig erweist, bieten Progressive Web Apps eine interessante Alternative.
Es wird geschätzt, dass 80 % der Benutzer eine Anwendung in den ersten drei Tagen der Nutzung löschen.
Ebenso ist die Benutzerreise zur Installation einer Anwendung lang und nur 20 % der Benutzer werden Ihre Anwendung letztendlich verwenden, während dies bei einer progressiven Webanwendung viel kürzer ist, was es ermöglicht, die Anzahl der Benutzer zu verdoppeln, oder 40 %.
So haben Unternehmen wie Flipkart oder Aliexpress kürzlich ihre ersten Fallstudien vorgestellt, begleitet von gelinde gesagt ermutigenden Zahlen.
Flipkart :
- Besucher kamen vorbei 3 mal mehr Zeit vor Ort
- Die Re-Engagement-Rate ist gestiegen 40%
- Die Konversionsrate hat sich um erhöht 70%
- Datennutzung verringert um 3 mal
- die Zahl der neuen Benutzer stieg um 104%
- die Anzahl der Seitenaufrufe war ich verdoppele
- Verweildauer vor Ort erhöht um 74%
- Datennutzung verringert um 3 mal
Um solche Zahlen zu erreichen, muss Ihre Progressive Web App reaktionsschnell, sicher und leistungsstark sein, um mit einer nativen Anwendung konkurrieren zu können.
Sicherheit
Die Verwendung von a Servicemitarbeiter ermöglicht es Ihnen, Browsing- und Ressourcenanforderungen asynchron und über HTTPS abzufangen oder zu ändern.
Leider wird diese API derzeit von Browsern nur schlecht unterstützt.
Cache
Ihre Anwendung muss zuerst offline sein und den Cache nutzen, um das Lie-Fi-Syndrom zu vermeiden, das dazu führen könnte, dass viele Ihrer Benutzer aufgeben.
Leistung
Das Laden Ihrer Anwendung muss sofort oder fast durch die Verwendung von async defer, dem Cache, dem HTTP2-Protokoll und durch maximale Optimierung Ihres CSS erfolgen.
Installation
Das Manifest ist eine JSON-Datei, mit der Sie Ihre Anwendung beschreiben können, damit Benutzer sie zum Startbildschirm ihres Smartphones hinzufügen können.
Wiedereinstieg
Genau wie native Anwendungen können Sie Push-Benachrichtigungen verwenden, um Ihre Benutzer über die neuesten Nachrichten auf Ihrer Plattform zu informieren.
Fazit
Zusammenfassend lässt sich sagen, dass Progressive Web Apps es Ihnen ermöglichen, den langen Installationstunnel der verschiedenen App-Stores zu vermeiden und eine Anwendung zu erhalten, die im Offline-Modus funktioniert und gleichzeitig so effizient wie eine native Anwendung ist, um Ihre Benutzer wieder einzubeziehen und die Nutzung Ihres Dienstes zu steigern .
Zubehör
Zur Vertiefung des Themas können Sie die Folien der Präsentation des Sfeir-Teams bei Devoxx konsultieren:
http://fr.slideshare.net/SfeirGroup/devoxx-fr-2016-progressive-web-apps-par-florian-orpelire-cyril-balit
Sowie ihre Werkstatt:
https://github.com/Sfeir/pwa-200
Und testen Sie den Pokédex, der sich derzeit als die mächtigste Progressive Web App entpuppt:
https://www.pokedex.org
Der Schöpfer teilte seinen Ansatz auch in folgendem Artikel mit:
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
Pierrick TURELIER, JS-Republikaner @JSRepublic
Emulieren Sie einen Gameboy in Javascript
Während einige nur Augen für die PS4 oder Xbox ONE haben, andere das nächste Zelda auf dem Nintendo NX kaum erwarten können, fordern sich andere nostalgisch oder einfach verrückt heraus, die Grenzen einer Plattform zu erweitern, deren Wachstum unendlich scheint ...
Es gibt natürlich die Grenzen von JavaScript und allgemeiner des Webs, von dem wir sprechen … und insbesondere der Emulation eines Gameboys!
Ich sehe Sie also kommen, Sie werden mich fragen, was ein Emulator ist. Laut Wikipedia:
"En IT, Emulation besteht darin, ein Element von zu ersetzen Hardware- - so ein Computerterminal, ein ordinateur oder Spielekonsole - durch eine logiciel"
Zusammenfassend schauen wir uns an, wie die Hardware, die wir zu imitieren versuchen, funktioniert und reproduzieren das Verhalten über ein Skript, um ein gleichwertiges Ergebnis zu erhalten.
Sie werden zu mir sagen: „Aber was ist die Hardware?“…
Die Hardware bezieht sich auf die Computerausrüstung, in dem Fall, der uns interessiert, nämlich den Gameboy.
Es gibt 4 Elemente:
- der CPU-Prozessor
- MMU-Speicher
- GPU-Grafikprozessor
- und schließlich Timer, Eingänge und Sounds
Im Prinzip erfüllt jeder eine oder mehrere mehr oder weniger komplexe Aufgaben, die verstanden werden müssen und es ist nicht unbedingt offensichtlich, es ist eine langfristige Aufgabe, aber hier verlieren wir uns.
Die Hauptaufgabe der CPU besteht darin, Ganzzahlen (z. B.: 0x80) in eine Aktion (z. B.: A = A + B) umzuwandeln. Sie werden verstehen, die Implementierung kann auf verschiedene Arten erfolgen, entweder mit einer guten Schalterfamilie oder einer Funktion Array, sogar selbst generierte Funktionen, Realität oder Fiktion, die Idee ist, dass es wie eine Zustandsmaschine ist, die leicht zu testen ist.
Die Funktion der MMU besteht darin, Speicherzugriffe an die Hardware weiterzuleiten, sie verhält sich wie der JavaScript-Getter/Setter, indem sie der Hardware erlaubt, darauf zu lesen oder zu schreiben.
Seine Implementierung ist relativ einfach, da die Leistung berücksichtigt werden muss und nicht alle Lösungen gleich sind. Verlassen Sie also die Funktionstabelle. Stattdessen bevorzugen wir die Verwaltung des „Bereichs“ und einen Schalter zur Verwaltung des Rests. Dies sollte beachtet werden die MMU ist leicht testbar.
Die GPU, so wird mir im Headset gesagt, ist mehr Baumwolle…
Ihre Aufgabe, weil sie es akzeptiert, ist es, das VideoRAM in ein Array von Pixeln umzuwandeln, auch wenn es sich um einen Prozessor wie die CPU handelt, die GPU ist eine Maschine mit 4 verschiedenen Zuständen, die vielen Regeln unterliegt, die bindend sind und für die es Sie oft gibt Ausnahmen behandeln müssen.
Es stellt sich heraus, dass die Implementierung relativ schwer zu testen oder zu debuggen ist.
Hier ist die Übersicht dessen, was ich von dieser Präsentation behalten konnte, die eine gute Vorstellung davon gibt, was ein Emulator ist und wie er im Fall eines Gameboys funktioniert.
Das Emulieren anderer Plattformen kann kompliziert sein, zum Glück gibt es neugierige Leute, die gerne so teilen Mal Nison bei Best of Web 2016 während seiner Präsentation, die die Vielfalt der Anwendungen zeigt, die mit JavaScript erstellt werden können, und es ist einfach erstaunlich.
Wenn Ihnen diese Vorspeise gefallen hat, lade ich Sie ein, sich für die verschiedenen Projekte zu interessieren, auf die Maël verwiesen hat.
- Virtjs : Eine kostenlose Sammlung von Standard-Eingabegeräten, mit denen bestimmte Engines verstärkt werden können, die diese Art von Schnittstelle verwenden, sofern verfügbar.
- audiojs : implementiert zusätzliche Eingabegeräte für Virtjs.
- Verfahren : erleichtert die Nachbearbeitung.
- archjs : vereint Libretro deren einziger Zweck darin besteht, einfach über Emscripten kompiliert zu werden, kann die Virtjs-Engine daher wie die meisten Engines überall im laufenden Betrieb instanziiert werden.
- Und schließlich, Sahnehäubchen auf dem Kuchen, Start9.io eine auf Archjs aufbauende Plattform, mit der Sie Ihre Spiele archivieren, spielen und ihren Fortschritt speichern können.
Wenn Sie einen JavaScript-Emulator in Aktion sehen möchten, sind Sie hier genau richtig!
Pierre-Arnaud LUMALE, JS-Republican @JSRepublic
