Рендер-інженери — найкращі програмісти, а вебдевелоперів назвати програмістами можна лише з натяжкою: заява геймдев-розробника
Привіт, спільното! Наштовхнулися в соціальних мережах на гучну заяву розробника ігор щодо веброзробки. Хочеться почути ваші думки. Роберт Алдрідж — VR-розробник, засновник студії Big Top Game Studio. На своїй сторінці в соцмережі X він зазначив, що рендер-інженери — найкращі програмісти на планеті, а от веброзробників навряд чи взагалі можна назвати програмістами.
Поштовхом для дискусії став допис провідного програміста з компанії 37signals Хорхе Манрубія.
«Сучасна відеогра може рендерити мільярди трикутників за секунду. Тим часом додаєш 1000 div’ів на вебсторінку — і ми раптово опиняємося в режимі жорсткої економії продуктивності. Я впевнений, що цьому є гарне технічне пояснення», — написав він.
Алдрідж на це відреагував доволі радикальною думкою:
«О так, це воно. Інженери з рендерингу — одні з найкращих програмістів на планеті. Тоді як веброзробників навряд чи взагалі можна назвати програмістами».
Пізніше Алдрідж додав, що десять років працював з вебом і саме тому його ненавидить. Вітм, під оригінальним дописом Манрубія знайшлося багато адекватних аргументів, чому так відбувається:
«Тому що графічні процесори створювалися та оптимізувалися саме для того, щоб рендерити простий список переданих їм трикутників. Браузерам доводиться парсити DOM і будувати повне дерево, парсити CSS, зіставляти селектори по всьому дереву DOM, вираховувати макет, обробляти перерахунок геометрії, коли елементи зсуваються чи змінюються, і лише потім усе це малювати. Додайте зверху JavaScript — і ви отримаєте неймовірно важке для обчислень завдання. Ми просто не створили під все це спеціалізованого заліза».
«Технічне пояснення полягає в тому, що рендеринг мільярда трикутників — це чиста математика. Тоді як спроба вирівняти один нещасний div по вертикалі вимагає чорної магії та жертвоприношення».
«Тому що div — це не трикутник. Наступне запитання».
«Трикутник в ігровому рушії — це переважно просто геометрія. Крім того, браузер має приблизно 16 мс на кадр при 60 fps, тож виконання JavaScript, перерахунок стилів, компоновка, малювання та композиція — усі вони конкурують за цей обмежений бюджет часу на один кадр. Це змушує мене замислитися: яка частка цих витрат ресурсів насправді йде на сам рендеринг, а яка — на все те, що браузер змушений підтримувати навколо DOM-вузла: макет, перерахунок стилів, дерево доступності та обробку подій?».
Жодним чином не підтримуємо думку Роберта Алдріджа — всі розробники прекрасні, незалежно від стека та технологій. Особливо українські розробники.
7 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарівThe problem with the Web
youtube.com/watch?v=...N-yzs?is=fWA-MRww9HAywcXb
Є ще така манічка що треба напхати сотні кілобайт або навіть мегабайти скриптів щоб ті асинхронно вантажили дані щоб потім вставляти їх у DOM. Типу так швидше хоча насправді майже все навпаки.
да ладно, пять уровней тормозящих говноабстракций можно за пару минут сделать и в unity
Тут напрошується жарт, що в UE для такого ж ефекту вистачить трьох рівнів :)))
Павутинні (web — павутина) програмісти все ж таки програмісти, але найнижча форма. Терпіти не можу розробку сайтів.
а чому?
Бо зачасту вимагається писати скрипти для серверу, писати скрипти для браузера, верстати в тій чи іншій мірі щоб було красіва. Все в різних пропорціях. Три роботи в одній.
JavaScript — одна з найбридкіших з відомих мені мов програмування.
PHP теж таке собі, але краще ніж JavaScript.
HTML і CSS призначалися для оформлення тексту а перетворення їх в засіб побудови GUI — костилі на костилях. Простині з десятка, зазвичай, DIV’ів з перевизначеними властивостями через купу класів, вбудованих стилів і скриптами десь за кадром. Для прикладу, ось з цього зроблено те що виглядає як заокруглене поле вводу на google.com:
<div class="SDkEP"><div jsname="kex3F" class="UMOYhd"><div class="A7sPV tX61Ub" jscontroller="VtMfj" jsname="aAJgZ" jsdata="I8wsob;_;u-YuauSNJoOxi-gPmd2lsQo3" jsaction="jNhznf:NgonQc;TsIFpc:aGAD7e;FU8dpd:VH3XBb;by9jW:bfvkpd;pWVKxb:yMLvUd;blur:dOOLne;keydown:nB4eBb"><button jsname="ko0Zye" class="UbbAWe" aria-label="Завантажити файли або зображення" aria-haspopup="menu" tabindex="0" type="button" jsaction="AO4mJ;blur:dOOLne;keydown:YR8sId;mouseenter:QgVLnf" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQ0J0RCBk"><span class="wPSZBe"><svg aria-hidden="true" focusable="false" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path d="M434.5-434.5H191.87v-91H434.5v-242.63h91v242.63h242.63v91H525.5v242.63h-91V-434.5Z" fill="currentColor"></path></svg></span></button><div class="oMByyf" data-hveid="26" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQupYSCBo"><ul class="FHRw9d" role="menu"><li role="presentation"><button class="izN7If" role="menuitem" jsname="EBXFob" jsaction="q13TGf" tabindex="0" type="button" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQ1p0RCBs"><span aria-hidden="true" style="height:20px;line-height:20px;width:20px" class="z1asCe"><svg focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height="24" width="24"><path d="M480-480ZM200-120q-33,0-56.5-23.5T120-200V-760q0-33 23.5-56.5T200-840H520q0,17 0,37t0,43H200v560H760V-520q23,0 43,0t37,0v320q0,33-23.5,56.5T760-120H200Zm40-160H720L570-480L450-320L360-440L240-280ZM680-600v-80H600v-80h80v-80h80v80h80v80H760v80H680Z"></path></svg></span><span>Завантажити зображення</span><span class="bgM5Ee z1asCe rH6l6" style="height:20px;line-height:20px;width:20px"><svg focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg></span></button></li><li role="presentation"><button class="izN7If" role="menuitem" jsname="h0TD3" jsaction="q13TGf" tabindex="0" type="button" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQ1J0RCBw"><span aria-hidden="true" style="height:20px;line-height:20px;width:20px" class="z1asCe"><svg focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height="24" width="24"><path d="M720-330q0,104-73,177T470-80T293-153T220-330V-700q0-75 52.5-127.5T400-880t127.5,52.5T580-700v350q0,46-32,78t-78,32t-78-32t-32-78V-720h80v370q0,13 8.5,21.5T470-320t21.5-8.5T500-350V-700q-1-42-29.5-71T400-800t-71,29t-29,71v370q-1,71 49,120.5T470-160q70,0 119-49.5T640-330V-720h80v390Z"></path></svg></span><span>Завантажити файл</span><span class="bgM5Ee z1asCe rH6l6" style="height:20px;line-height:20px;width:20px"><svg focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg></span></button></li></ul><input jsname="wcaWdc" accept="image/avif,image/bmp,image/jpeg,image/png,image/webp,image/heif,image/heic" hidden="" type="file" jsaction="change:fj0v0b;rHjPpc"><input jsname="vhfHxd" accept="application/pdf,image/avif,image/bmp,image/jpeg,image/png,image/webp,image/heif,image/heic" hidden="" type="file" jsaction="change:fj0v0b;rHjPpc"></div></div></div><div jscontroller="vZr2rb" jsname="gLFyf" class="a4bIc" data-mnr="20" jsaction="KjsqPd;input:Lg5SV;blur:fpfTEe;paste:V64iSc;mousedown:LhvU2e"><style>.gLFyf,.YacQv,.jOAti{font:16px Google Sans,Arial,sans-serif;line-height:40px;font-size:16px;flex:100%;}textarea.gLFyf,.YacQv,.jOAti{line-height:22px;border-bottom:8px solid transparent;padding-top:14px;overflow-x:hidden}.sbfc textarea.gLFyf{white-space:pre-line;overflow-y:auto}.gLFyf{width:100%;resize:none;background-color:transparent;border:none;margin:0;padding:0;color:rgba(0,0,0,.87);word-wrap:break-word;outline:none;display:flex;-webkit-tap-highlight-color:transparent}.a4bIc{display:flex;flex-wrap:wrap;flex:1;position:relative}.YacQv,.jOAti{color:transparent;white-space:pre;position:absolute;pointer-events:none;scrollbar-width:none}.YacQv span{text-decoration:#b3261e dotted underline}.gLFyf::placeholder{color:var(--IXoxUe)}</style><div jsname="vdLsw" class="YacQv"></div><textarea jsname="yZiJbe" class="gLFyf" aria-controls="Alh6id" aria-owns="Alh6id" autofocus="" title="Пошук" value="" aria-label="Пошук" placeholder="" aria-autocomplete="both" aria-expanded="false" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" id="APjFqb" maxlength="2048" name="q" role="combobox" rows="1" spellcheck="false" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQ39UDCB0"></textarea></div><div class="fM33ce dRYYxd"><style>.dRYYxd{display:flex;flex:0 0 auto;align-items:stretch;flex-direction:row;height:50px;background:inherit;border-radius:inherit}.ywK6Rd{background-color:inherit;display:flex;align-self:center}</style> <style>.BKRPef{background:transparent;align-items:center;flex:1 0 auto;flex-direction:row;display:flex;cursor:pointer;position:relative}.vOY7J{background:transparent;border:0;align-items:center;flex:1 0 auto;cursor:pointer;display:none;height:100%;line-height:44px;outline-offset:-2px;padding:0 8px;}.M2vV3{display:flex}.ExCKkf{height:100%;vertical-align:middle;outline:none;color:var(--YLNNHc);}</style> <div jscontroller="PymCCe" jsname="RP0xob" class="BKRPef"> <div class="vOY7J" jsname="pkjasb" aria-label="Очистити" role="button" tabindex="0" jsaction="AVsnlb;rcuQ6b:npT2md" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQ05YFCB4"> <span jsname="itVqKe" class="ExCKkf z1asCe rzyADb"><svg focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg></span> </div> </div> <div jsname="UdfVXc" class="ywK6Rd"><style>.DdBH5{flex:1 0 auto;display:flex;cursor:pointer;align-items:center;border:0;background:transparent;outline:none;padding:0 8px;width:24px;line-height:44px;position:relative;}.VlXRkf{height:24px;width:24px;display:flex}.UKU4Cf{visibility:hidden;height:0;width:0}</style><div jscontroller="Y9t9Sc" class="DdBH5" aria-label="Транслітерація" role="button" tabindex="0" jsaction="h5M12e;rcuQ6b:npT2md"><span class="VlXRkf"><img class="UKU4Cf" src="/tia/tia.png" tia_disable_swap="true" tia_field_name="q" jsname="JyIpdf" alt="" data-csiid="u-YuauSNJoOxi-gPmd2lsQo_4" data-atf="0" tia_property="web"><svg aria-hidden="true" height="24px" viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg"><path fill="var(--YLNNHc)" d="M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm160-120h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Z"></path></svg></span></div><style>.fzj3ad{flex:1 0 auto;display:flex;cursor:pointer;align-items:center;border:0;background:transparent;padding:0 8px;width:24px;line-height:44px;position:relative;}.ByCvB{height:24px;width:24px;vertical-align:middle}</style><div jscontroller="unV4T" jsname="F7uqIe" class="fzj3ad" data-hp="1" aria-label="Пошук голосом" role="button" tabindex="0" jsaction="h5M12e;rcuQ6b:npT2md;KHxBOb:EANhx;hATt5e:AkD3se;CQJmec:efDZmf" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQvs8DCB8"><svg class="ByCvB" aria-hidden="true" focusable="false" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="var(--YLNNHc)" d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm-40 280v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Z"></path></svg></div><style>.etxtjc{flex:1 0 auto;display:flex;cursor:pointer;align-items:center;border:0;background:transparent;padding:0 8px;width:24px;line-height:44px;position:relative}.hWdRGb{height:24px;width:24px;vertical-align:middle}</style><div jscontroller="lpsUAf" jsname="R5mgy" class="etxtjc" data-is-images-mode="false" aria-label="Пошук за зображенням" role="button" tabindex="0" jsaction="rcuQ6b:npT2md;h5M12e;AMruCe:Zpug7c" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQhqEICCA"><svg class="hWdRGb" aria-hidden="true" focusable="false" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="var(--YLNNHc)" d="M480-320q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35Zm240 160q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160Zm-440 40q-66 0-113-47t-47-113v-80h80v80q0 33 23.5 56.5T280-200h200v80H280Zm480-320v-160q0-33-23.5-56.5T680-680H280q-33 0-56.5 23.5T200-600v120h-80v-120q0-66 47-113t113-47h80l40-80h160l40 80h80q66 0 113 47t47 113v160h-80Z"></path></svg></div></div><button jsname="B6rgad" tabindex="0" jscontroller="jNZDL" class="plR5qb Y5MKCd" role="link" jsaction="click:bujKIf;mouseenter:vG60uf;mouseleave:NS5Xl;C7YCKd:wezfDd;rcuQ6b:npT2md;jNhznf:Jscxsc;TsIFpc:fIti1b;by9jW:bfvkpd;" type="button" data-ved="0ahUKEwik19HBooeVAxWD2AIHHZluKaYQteYPCCE"><style>.plR5qb.PHjFye .bvUkz{transition:none;filter:none}.plR5qb:focus-visible .bvUkz{outline:2px solid var(--Nsm0ce);outline-offset:2px}.plR5qb.VzUPFe .PD3zdc{color:var(--TMYS9)}.plR5qb.VzUPFe .lTxWLe{color:var(--rrJJUc)}.plR5qb.VzUPFe .bvUkz{background:var(--DEeStf)}.plR5qb:not(.Sw4CSc) .L0nkUd{inset-inline-start:0;opacity:1;transition:opacity 383ms cubic-bezier(0.38, 0.72, 0.00, 1.00)}.plR5qb.Sw4CSc .L0nkUd{opacity:0;visibility:hidden;transition:opacity 0s,visibility 0s}.hMo0Tb{inset-inline-end:0;opacity:0;visibility:hidden;transition:opacity 383ms cubic-bezier(0.38, 0.72, 0.00, 1.00),visibility 0s linear 383ms}.plR5qb.Sw4CSc .hMo0Tb{opacity:1;visibility:inherit;transition:opacity 333ms cubic-bezier(0.38, 0.72, 0.00, 1.00),visibility 0s linear 0s}.lTxWLe{transition:transform 383ms cubic-bezier(0.38, 0.72, 0.00, 1.00)}.plR5qb.Sw4CSc .lTxWLe{transition:transform 333ms cubic-bezier(0.38, 0.72, 0.00, 1.00);transform:translateX(calc(-1*17*1px));}html[dir='rtl'] .plR5qb.Sw4CSc .lTxWLe{transform:translateX(calc(17*1px));}.plR5qb .PD3zdc{position:absolute;color:var(--YLNNHc)}.lTxWLe{display:inline-block;margin-inline-start:20px;transform:translateX(0)}.u4Uk3c{align-items:center;display:flex;justify-content:center;position:relative;z-index:1}.PD3zdc{display:inline-flex;align-items:center}.lTxWLe{padding:0 4px}.plR5qb{align-self:center;background:inherit;border-radius:100px;cursor:pointer;flex-shrink:0;font-family:var(--qR8X0);font-optical-sizing:none;font-size:var(--hbmnje);font-weight:var(--p2Lqxe);line-height:var(--CbdmE);margin-inline-start:8px;padding:0 8px;position:relative;height:36px;}.minidiv .plR5qb{height:24px}.plR5qb:hover::before{background:var(--Lm570b)}.xL0qi,.mTurwe{overflow:hidden;border-radius:100px;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ezmlJf{position:absolute;inset:0;pointer-events:none;opacity:0.6}.xL0qi{filter:blur(5px);inset:-1px;opacity:0.7;}.iydNQb{background:conic-gradient(transparent 20%,#3186ff20 34%,#9378ff30 37%,#f96bd680 39%,#fc413dbb 41%,#fc413d 48%,#ff6b2b 50%,#fec700 52%,#ffdb0f 56%,#88de42 58%,#0ebc5f 61%,#0ebc5f 65%,#2eaab2 70%,#00a9bb 72%,#3186ffbb 73%,transparent 95%);height:200%;top:-50%;right:0;bottom:0;left:0;position:absolute;scale:2 1;opacity:0;transform:rotate(180deg);filter:blur(3px);transition:opacity 400ms linear}.plR5qb:not(.PHjFye):hover .mTurwe .iydNQb{opacity:.3;}.plR5qb:not(.PHjFye):hover .xL0qi .iydNQb{opacity:1}.Y5MKCd .iydNQb{animation:ae-fg 2000ms linear backwards,ae-rg 2000ms cubic-bezier(0.20, 0.00, 0.00, 1.00) backwards}@keyframes ae-fg {0%{opacity:0}30%{opacity:1}50%{opacity:1}100%{opacity:0}}@keyframes ae-rg {from{transform:rotate(0deg)}to{transform:rotate(180deg)}}.bvUkz{position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:100px;clip-path:inset(0 0 0 0 round 100px);background:var(--XKMDxc);}.plR5qb:not(.PHjFye):hover .bvUkz{filter:blur(2px);}.plR5qb .bvUkz::after{content:'';top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:100px;position:absolute;background:inherit;opacity:.5}.MTa47b{display:block;position:absolute;top:42px;left:-190px;overflow:visible}@media (forced-colors:active){.plR5qb .PD3zdc,.plR5qb .lTxWLe{color:LinkText}}</style><div jsname="IVmF1e" class="ezmlJf BznTFe" style="--BgHDjb: 100px; --bFlrOb: 4px; --HM63Tc: -1px; --sjdAce: 4; --mWus4b: 1.5;"><div jsname="HQj0A" …Типовий сайт будується довкола перекладання чогось в БД і представляє з себе примітивний шаблонізм. З мого досвіду найбільше мороки саме з версткою і скриптами для брозуреа. Треба щоб було красіва і сучасно а то, навіть якщо дані в БД перекладаються як треба, не видно за що давати гроші і починається марудне длубання в портянках CSS і JavaScript, склеювання чужих скриптів насмиканих по інтернету між собою та з яким—небудь фреймворком. Мене аж вивертає від цього. Для порівняння слід подивитися на VCL, Qt, WPF, GTK, Windows forms і т.п. Там є візуальний редактор, готові компоненти, чітко розписано що від чого наслідується та як створювати власні компоненти, немає мішанини серверних скриптів з клієнтськими а поведінка та вигляд зазвичай знаходяться в одному а не розмазані по файлам з CSS, атрибутам style, файлам з власними скриптами, файлам з чужими скриптами.