Let's talk about the complexity of modern frontend applications and the challenges facing contemporary development — security, performance, accessibility, and other non-functional requirements that a front-end developer must take into account while developing their application in 2023.

2. • Віталій Рубан
• Працюю в Itera
• React, Angular, .NET, etc.
• Автор YouTube каналу React
для початківців

3. ФОРМОШЛЬОПИ Про складнощі
сучасного
фронт-енду
Активуймося

4. ПОГОВОРИМО ПРО
• Екрани
• Браузери
• Доступність
• Швидкодію
• Безпеку
VITALII RUBAN. ITERA. KYIV. 2023 2023 4
Форма – це лише початок

5. SAMPLE FOOTER TEXT
ІСТОРІЯ
№1
Королівство тисячі
екранів
Vitalii Ruban, Itera, 2023, 5

6. МІЙ ТЕЛЕФОН
ОЧІКУВАННЯ
• 2020 рік
• 5.8 дюймів
• 4к екран
РЕАЛЬНІСТЬ
• 360Х640px
VITALII RUBAN, ITERA 2023 6

7. IPHONE
VITALII RUBAN, ITERA 2023 7
414 x 896 375 x 812 390 x 844 360 x 780
428 x 926 393 x 852 430 x 932 320 x 568

8. IPHONE
VITALII RUBAN, ITERA 2023 8
414 x 896 375 x 812 390 x 844 360 x 780
428 x 926 393 x 852 430 x 932 320 x 568
+ Mac

9. IPHONE
VITALII RUBAN, ITERA 2023 9
414 x 896 375 x 812 390 x 844 360 x 780
428 x 926 393 x 852 430 x 932 320 x 568
+ Mac + IPad

10. IPHONE
VITALII RUBAN, ITERA 2023 10
414 x 896 375 x 812 390 x 844 360 x 780
428 x 926 393 x 852 430 x 932 320 x 568
+ Mac + IPad + IWatch

11. IPHONE
VITALII RUBAN, ITERA 2023 11
414 x 896 375 x 812 390 x 844 360 x 780
428 x 926 393 x 852 430 x 932 320 x 568
+ Mac + IPad + IWatch + IBox

12. IPHONE
VITALII RUBAN, ITERA 2023 12
9.95%
6.34% 6.19%
43%
0.00%
5.00%
10.00%
15.00%
20.00%
25.00%
30.00%
35.00%
40.00%
45.00%
50.00%
1920Х1080 360X800 1366X768 Інше
Розширення екранів
Розширення екранів
Спробуй вгадай!

13. SAMPLE FOOTER TEXT
ЕКРАНІВ БАГАТО,
ВАШІ ЗДОГАДКИ ХИБНІ
Vitalii Ruban, Itera, 2023 14
Я митець. Я так бачу

14. SAMPLE FOOTER TEXT
ІСТОРІЯ
№2
Маленьке віконечко
жахів
Vitalii Ruban, Itera, 2023, 15

15. SAMPLE FOOTER TEXT Vitalii Ruban, Itera, 2023 17
Я мріяв про це

16. SAMPLE FOOTER TEXT Vitalii Ruban, Itera, 2023 18
Провалені тести в розрізі браузерів
https://wpt.fyi/results/?label=experimental&label=master&aligned

17. Повідомлено: 2008-11-14
Рішення: нічого не робимо
Причина: так зручніше
користувачам Mac
А специфікація?
Ви її не правильно читаєте
https://bugs.webkit.org/show_bug.cgi?id=22261

18. SAMPLE FOOTER TEXT
БРАУЗЕРІВ
БАГАТО,
ВОНИ РОБЛЯТЬ
ЩО ХОЧУТЬ
Твій назавжди, XMLHttpRequest
Vitalii Ruban, Itera, 2023 20

19. SAMPLE FOOTER TEXT
ІСТОРІЯ
№3
ТРИ КОЛА ADA
Vitalii Ruban, Itera, 2023, 21

20. SAMPLE FOOTER TEXT
AMERICANS WITH DISABILITIES
Vitalii Ruban, Itera, 2023 22
• 75_000$ за перше порушення
• 150_000$ за наступне
• Кожен штат має право встановлювати
додаткові штрафи

21. БУЛИ ПОДАНІ ПОЗОВИ ПРОТИ
Amazon
Nike
The Wall Street Journal
Domino’s Pizza
Fox News Network
Burger King

22. WCAG 2.1 - AA Сприйнятливий
Робочий
Зрозумілий
Доступний

23. SAMPLE FOOTER TEXT
ДОСТУПНІСТЬ –
МАЙЖЕ
ОБОВ’ЯЗКОВА
Narrator чекає на тебе
Vitalii Ruban, Itera, 2023 25

24. SAMPLE FOOTER TEXT
ІСТОРІЯ
№4
Стобальний шторм
Vitalii Ruban, Itera, 2023, 26

25. 0.3 секунди = 8 мільйонів
фунтів стерлінгів на рік
1 секунда = до +2%
конверсії

26. ЯК ПЕРЕВІРИТИ ШВИДКОДІЮ?

27. АЛЕ Є НЮАНС
VITALII RUBAN, ITERA 2023 30
• SPA (викидаємо)
• Не стабільні та погано прогнозовані умови
• Кожен новий шматок коду сповільнює
• Залежність від бекенду
• І замовник який хоче сто балів

28. SAMPLE FOOTER TEXT
ЗАКОНИ ФІЗИКИ,
ОСОБЛИВІСТЬ
ФРОНТ-ЕНДУ
Від себе не втечеш
Vitalii Ruban, Itera, 2023 32

29. SAMPLE FOOTER TEXT
ІСТОРІЯ
№5
Небезпека це
безпека
Vitalii Ruban, Itera, 2023, 33

30. MCDONALDS XSS МЕНЮ
VITALII RUBAN, ITERA 2023 34

31. НУ ЯК ТАК, GOOGLE?
VITALII RUBAN, ITERA 2023 35

32. І ТИ ТЕЖ, ЛИСИЧКО?
<EMBED SRC="DATA:IMAGE/SVG+XML;BASE64,PHN2Z
YB4BWXUCZPZDMC9IMH0DH A6LY93D3CUDZMUB3JN
LZIWMDAVC3ZNIIB4BWXUCZ0IAHR0CDOVL3D3DY53M
Y5VCMCV MJAWMC9ZDMCIIHHTBG5ZONHSAW5RPSJO
DHRWOI8VD3D3LNCZLM9YZY8XOTK5L3HS AW5RIIB2Z
XJZAW9UPSIXLJAIIHG9IJAIIHK9IJAIIHDPZHROPSIXOTQI
IGHLAWDODD0IMJAW IIBPZD0IEHNZIJ48C2NYAXB0IH
R5CGU9INRLEHQVZWNTYXNJCMLWDCI+YWXLCNQOILH
TUYIPOZWVC2NYAXB0PJWVC3ZNPG==" TYPE="IMAGE
/SVG+XML" ALLOWSCRIPTACCESS="ALWAYS"></EMBE
D>
VITALII RUBAN, ITERA 2023 36

33. ПРОБЛЕМА ЕКОСИСТЕМИ
VITALII RUBAN, ITERA 2023 37
• False/positive повідомлення
• Відсутність контролю за оновленнями
• Відсутність розділення прав пакетів
• Self XSS + Шкідливі розширення з якими неможливо
боротися

34. SAMPLE FOOTER TEXT
СТОРОННІЙ КОД,
РІЗНОМАНІТТЯ
БРАУЗЕРІВ,
РУКОДУПСТВО
Небезпека це безпека
2023 38

35. І ЦЕ Я ЩЕ НЕ ГОВОРИВ ПРО:
Мікрофронтенди
Прогресивні веб
застосунки
Робота з часом

36. ВІДПОВІДІ Є
• Гумова верстка
• Мультибраузерні інструменти тестування (BrowserStack,
Playwright)
• Інструменти для перевірки доступності з рекомендаціями
(Wave)
• Інструменти для аналізу швидкодії (webpagetest), CDN
• SCA, SAST, DAST та інструменти що їх виконують
VITALII RUBAN, ITERA 2023 40

37. ФРОНТЕНД
• Потребує багато знань
• Потребує багато зусиль
• Форма – це лише початок
VITALII RUBAN, ITERA, 2023 2023 41

38. ВСІМ ДЯКУЮ
Vitalii Ruban t.me/reactbeginners youtube/@reactdev
2023 42