Workshop: Pure JavaScript Web Components

Оnline workshop для розробників JavaScript від Dylan Beattie
Online
Подія відбулась
Workshop: Pure JavaScript Web Components
Workshop: Pure JavaScript Web Components
Подія відбулась
Подія відбулась
Подія відбулась

Квитки на наступну конференцію Конференція React+ fwdays’24 вже у продажу!

Поглиблений практичний воркшоп зі створення інтерактивних веб-компонентів із використанням сучасного JavaScript. Без фреймворків, без бібліотек; навчіться створювати швидкий інтерфейс користувача, створений на основі 100% власного коду.

Воркшоп пройде 17 та 18 квітня з 11:00 до 15:00 (UTC+3). Timezone: EEST.

Перегляньте відео-запрошення від Dylan Beattie:



Огляд воркшопу

JavaScript працює в кожному веб-браузері, планшеті та смартфоні на планеті. Він використовується для створення всіх видів додатків, починаючи від інструментів для підвищення продуктивності бізнесу, закінчуючи програмами для соціальних мереж та онлайн-іграми. Сучасний JavaScript - це гнучка, потужна платформа для розробки, яка постачається набором стандартів, фреймворків та інструментів. Починаючи з темних часів document.layers, через jQuery та прототип, до сучасних екосистем, таких як React та vueJS, розробники вже давно покладаються на фреймворки та бібліотеки, коли йдеться про побудову компонентів та систем на стороні клієнта за допомогою JavaScript.

З сучасним JavaScript вам цього не потрібно. Такі технології, як веб-компоненти, власні елементи та Shadow DOM, в основному підтримують понад 90% браузерів, і, використовуючи ці технології, ми можемо створювати легкі веб-компоненти, які використовують API сучасних браузерів для забезпечення надзвичайно швидкої продуктивності.

На цьому дводенному воркшопі ви дізнаєтесь, як розробляти та створювати власні веб-компоненти, побудовані на чистому власному JavaScript. Протягом воркшопу учасники створять декілька веб-компонентів, від простої програми «Hello World» до гри в стилі Тетріс, реалізованої повністю як спеціальний елемент та побудованою за допомогою HTML та JavaScript.

Цільова аудиторія та технічні вимоги

Кількість учасників: до 20.

Мова проведення - англійська.

Цей воркшоп призначений для професіоналів програмного забезпечення, що мають певний досвід веб-розробки. Вам не потрібно бути експертом JavaScript - якщо вам зручно редагувати код у текстовому редакторі, ви знаєте, що робить document.getElementById, і ви можете написати якийсь базовий HTML, решту ви зможете дізнатися з нами.

Учасникам буде потрібен ноутбук із сучасним веб-браузером (Chrome, Firefox або Microsoft Edge). Для розділів семінару на базі SASS / SCSS, Webpack та Babel вам знадобиться середовище виконання nodeJS v12 або новішої версії. Будуть надані інструкції щодо його встановлення, якщо ви ще не встановлювали його раніше.



Спікер Dylan Beattie

— Dylan Beattie створив свою першу веб-сторінку в 1992 році;

— Маючи майже 25-річний досвід професійного розробника, він працював над усім, від статичних веб-сайтів до розподілених архітектур мікросервісів ;

— Dylan - Microsoft MVP та творець езотеричної мови програмування Rockstar;

— Представляв доповіді про розробку технологій та програмного забезпечення на конференціях та заходах у всьому світі;

Структура та зміст воркшопу

Огляд сучасної архітектури веб-компонентів

  • Сучасні API браузера: веб-компоненти, власні елементи
  • Розуміння подій та обробників подій
  • Інструментарій на стороні клієнта: робота з DOM
  • Серверні інструменти: представлення Webpack та Babel
  • Робота з Shadow DOM

  • Що таке Shadow DOM, чому це важливо?
  • Візуалізація елементів HTML за допомогою JavaScript
  • Робота з шаблоном HTML
  • Стилізація компонентів за допомогою CSS
  • Архітектура веб-компонента

  • Робота з класами JavaScript
  • Реєстрація нестандартних елементів
  • Структурування коду: моделі, подання, візуалізатори та обробники
  • Поєднавши все це: побудуйте свій перший веб-компонент
  • Стратегії візуалізації веб-компонентів

  • Управління станом за допомогою моделей та поглядів
  • Макети CSS: документ, гнучкість та сітка
  • Робота з елементом canvas HTML
  • Швидкі міркування щодо дизайну веб-компонентів
  • Взаємодія з користувачами та події

  • Події з обробки миші та клавіатури
  • Мобільний та планшетний інтерфейси: робота з подіями
  • Анімація, цикли та тайм-аути
  • Взаємодія з компонентами за допомогою нестандартних подій
  • Тестування веб-компонентів за допомогою Jest

  • Вступ: модульне тестування JavaScript за допомогою Jest
  • Тестування програми: перевірка поведінки за шаблоном упорядкування / дії / затвердження
  • Тестування взаємодії: моделювання подій та насмішка над обробниками
  • Стратегії тестування веб-компонентів: наскільки достатньо охоплення тестом?
  • Інструментарій веб-компонентів

  • Групування та публікація компонента за допомогою Webpack
  • Робота з SASS та SCSS
  • Підтримка старих браузерів, що використовують Babel
  • Управління версіями та випуском
  • Увійти
    Або поштою
    Увійти
    Або поштою
    Реєстрація через e-mail
    Реєстрація через e-mail
    Забули пароль?