Ми були в Best Of Web!

IMG_2262
У перший рік роботи консультанти Js-Republic запропонували собі короткий візит Конференція Best Of Web. Ця конференція, присвячена веб-технологіям та JavaScript, відбулася цього четверга, 9 та п’ятниці, 10 червня в Grande Crypte в Парижі.
Ось деякі розмови, які нас особливо відзначили.

CSS, товариство та вексилологія
maxresdefault
Вигаданий веб-серіал «Забави з прапорами» із серії «Теорія великого вибуху».
Усе починається під час відвідування музею Компаньоннаж у Турі.
Тім Керрі бачить демонстрацію ноу-хау компаньйонів, це надихає його і нагадує про течію Craftsman, так дорогу нашому серцю в розробці програмного забезпечення.
Як і Шелдон Купер (пор. Персонаж із «Теорії великого вибуху» вище), Тім приступив до дещо божевільного проекту навколо вексилології:
Відтворіть усі прапори світу в CSS (і тільки з одним div, будь ласка!).
Він пояснює, як йому доводилося змагатися в винахідливості та хитрощах, щоб використовувати маловідомі механізми CSS для відтворення смуг, зірочок, діагоналей та інших трикутників.
Але з цієї презентації слід пам’ятати не стільки результат. Бо хоч і приголомшливий, але зовсім не придатний для виробництва.
Ні, справжня цінність цієї історії полягає у всіх знаннях, які Тім отримав і зміг передати нам про країни, прапори та їхні історії, а також у глибоких знаннях CSS.
Як він сам каже, «подорож має більше значення, ніж пункт призначення»:
https://github.com/pixelastic/talk-css-flags
Матьє БРЕТОН, генеральний директор @JSRepublic

Прогресивні веб-програми

Однією з головних тем цього 2016 року, безсумнівно, були прогресивні веб-додатки, які обіцяють революціонізувати використання та споживання мобільних додатків.
Справді, рівень конверсії та збереження виявляється надзвичайно низьким для нативних програм, прогресивні веб-програми пропонують цікаву альтернативу.
Підраховано, що 80% користувачів видаляють програму протягом перших трьох днів використання.
image00
Аналогічно, шлях користувача до встановлення програми тривалий, і лише 20% користувачів скористаються вашою програмою, тоді як для прогресивної веб-програми це набагато коротше, що дає можливість подвоїти кількість користувачів або 40%.
image05
image04
 
 
 
 
Таким чином, такі компанії, як Flipkart або Aliexpress, нещодавно оприлюднили свої перші кейси, супроводжувані цифрами, що м’яко кажучи, обнадійливі.
Flipkart :

  • пройшли відвідувачі 3 раз більше часу на сайті
  • відсоток повторного залучення зріс 40%
  • коефіцієнт конверсії зріс на 70%
  • використання даних зменшилося на 3 раз

AliExpress :

  • кількість нових користувачів зросла на 104%
  • кількість переглядів сторінки була подвійний
  • час перебування на сайті збільшився на 74%
  • використання даних зменшилося на 3 раз

Щоб досягти таких показників, ваша прогресивна веб-програма має бути чутливою, безпечною та потужною, щоб конкурувати з рідною програмою.

Безпека

Використання a обслуговуючий працівник дозволить вам перехоплювати або змінювати запити перегляду та ресурсів асинхронно та через HTTPS.
На жаль, цей API зараз погано підтримується браузерами.

image02Кеш

Ваша програма має бути спершу офлайн і використовувати кеш, щоб уникнути синдрому брехні, який ризикує змусити багатьох ваших користувачів відмовитися.

image03продуктивність

Завантаження вашої програми має відбуватися миттєво або майже за допомогою використання асинхронної відкладення, кешу, протоколу HTTP2 та максимальної оптимізації вашого CSS.

image01установка

Маніфест — це файл JSON, який дозволить вам описати вашу програму, щоб користувачі могли додати її на головний екран свого смартфона.
image06

Повторне залучення

Як і рідні програми, ви можете використовувати push-сповіщення, щоб інформувати своїх користувачів про останні новини на вашій платформі.
image07

Висновок

На закінчення можна сказати, що прогресивні веб-додатки дозволяють уникнути довгого тунелю інсталяції в різних магазинах додатків і отримати програму, яка працює в автономному режимі, водночас будучи такою ж ефективною, як рідна програма, щоб повторно залучити користувачів і збільшити використання вашого сервісу. .

Додатки

Щоб поглибити тему, ви можете переглянути слайди презентації команди Sfeir у Devoxx:
http://fr.slideshare.net/SfeirGroup/devoxx-fr-2016-progressive-web-apps-par-florian-orpelire-cyril-balit
А також їх майстерня:
https://github.com/Sfeir/pwa-200
І протестуйте Pokédex, який виявляється найпотужнішим прогресивним веб-додатком на даний момент:
https://www.pokedex.org
Творець також поділився своїм підходом у наступній статті:
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
П'єррік ТУРЕЛЬЄ, республіканець JS @JSRepublic

Емулюйте Gameboy в Javascript

Bestofweb2016_williamjezequel_154
У той час як деякі очікують лише на PS4 або Xbox ONE, інші не можуть дочекатися наступної Zelda на Nintendo NX, інші, ностальгуючи або просто божевільні, кидають виклик собі, щоб розширити межі платформи, зростання якої здається нескінченним...
Існують, звичайно, межі JavaScript і взагалі мережі, про яку ми говоримо… і, зокрема, емуляції Gameboy!
Тож я бачу, що ви йдете, ви збираєтеся запитати мене, що таке емулятор. Згідно з Вікіпедією:
"En обробка даних, емуляція полягає в заміні елемента обладнання - такий комп'ютерний термінал, А комп'ютер або Ігрова консоль - за а програмне забезпечення».
Підсумовуючи, ми дивимося, як працює апаратне забезпечення, яке ми намагаємося імітувати, і відтворюємо поведінку за допомогою сценарію, щоб отримати еквівалентний результат.
Ви скажете мені: «А що таке обладнання?»…
Під апаратним забезпеченням відноситься комп’ютерна техніка, у випадку, який нас цікавить, а саме Gameboy.
Є 4 елементи:

  • процесор ЦП
  • Пам'ять MMU
  • Графічний процесор GPU
  • і, нарешті, Таймер, входи та звуки

В принципі, кожен виконує одну чи декілька більш-менш складних завдань, які треба розуміти і це не обов’язково очевидно, це довгострокова робота, але тут ми губимося.
ЦП, його основна роль полягає в перетворенні цілих чисел (наприклад: 0x80) в дію (наприклад: A = A + B), ви зрозумієте, реалізацію можна виконати різними способами, або за допомогою хорошого сімейства перемикачів, або функції масив, навіть самогенеровані функції, реальність або вигадка, ідея полягає в тому, що він схожий на кінцеву машину, яку легко перевірити.
Функція MMU полягає в тому, щоб маршрутизувати доступ до пам’яті до апаратного забезпечення, він діє як геттер/налаштування JavaScript, дозволяючи апаратному забезпеченню читати або записувати в нього.
Його реалізація відносно проста, оскільки потрібно враховувати продуктивність і не всі рішення є однаковими, тому вийдіть з таблиці функцій, замість цього ми віддаємо перевагу, якщо керувати «діапазоном» та перемикачем для керування рештою, слід зазначити, що MMU легко перевірити.
GPU, мені кажуть у гарнітурі, більш бавовняний…
Його місія, оскільки він приймає це, полягає в тому, щоб перетворити VideoRAM у масив пікселів, навіть якщо це процесор, як і центральний процесор, GPU — це машина з 4 різними станами, підпорядкована багатьом обов’язковим правилам і для яких ви часто повинні обробляти винятки.
Виявляється, що реалізацію відносно важко перевірити чи налагодити.
Ось нарис того, що мені вдалося зберегти з цієї презентації, яка дає гарне уявлення про те, що таке емулятор і як він працює у випадку з Gameboy.
Емуляція інших платформ може бути складною, на щастя для нас, є цікаві люди, які люблять ділитися, як це робили Маель Нісон на Best of Web 2016 під час його презентації, яка показує різноманітність додатків, які можна створити за допомогою JavaScript, і це просто вражає.
Якщо вам сподобалася ця закуска, я запрошую вас поцікавитися різними проектами, про які згадував Маель.

  • Virtjs : безкоштовна колекція стандартних пристроїв введення, що дозволяє підвищити певний двигун, який буде використовувати цей тип інтерфейсу, якщо він доступний.
  • audiojs : реалізує додаткові пристрої введення для Virtjs.
  • Процес : полегшує застосування постобробки.
  • archjs : une Libretro єдиною метою якого є простота компіляції за допомогою Emscripten, тому двигун Virtjs може бути створений на льоту в будь-якому місці, як і більшість движків.
  • І, нарешті, глазур на торті, Start9.io платформа, побудована на основі Archjs, яка дозволяє архівувати свої ігри, грати в них і зберігати їх прогрес.
    Якщо ви хочете побачити емулятор JavaScript в дії, ось тут!

 П'єр-Арно ЛЮМАЛЕ, республіканець JS @JSRepublic