*iltimos

Signal API bilan biror ma'lumotni saqlash va uning o'zgarishini kuzatish mumkin. Xuddi React dagi state management ga o'xshaydi. Shuni JavaScript ning bir qismiga aylantirish uchun taklif kiritshibdi. Taklif hali 0-etapda, hali xom.

Agar bu JavaScript standartiga kiritilsa deyarli barcha UI freymvork va kutubxonalar hajmi qisqaradi. Page load performance uchun bu yaxshi. Bu birinchidan.

Ikkinchidan boilerplate-code kamayadi. Tushunarsiz murakkabliklar kamayadi. Bunday murakkabliklar faqat kutubxonalarga xos emas. State management katta dasturlarga kelganda har doim yoqimsiz mujmallikka sabab bo'ladi.

Uchinchidan DevTools.
Debugger ishlatganlar bormi? Ayniqsa React da biror narsani debugger orqali tekshiraman desangiz kutubxonaning ichki funksiyalari ichida qolib ketasiz. Bitta state update bo'lishi uchun "millionta" funksiya chaqiradi React! Nima bo'lyotganini tushunish qiyin va o'zingizning kodingiz qolib React ni ichida adashib qolasiz.
React va boshqa kutubxonalar qiladigan ishlarning katta qismini JavaScript ning o'zi qilsa qanday yaxshi? DevTools debugger ni ishlatish ancha oson va tushunarli bo'lardi.

Bu albatta mening ilk taassurot va mulohazalarim. Sizniki qanday?

https://github.com/proposal-signals/proposal-signals

Ba'zida Pinterest vebsaytini ustida ishlab o'tirganimda qiziq-qiziq rasm va videolarni ko'rib qilyotgan ishim esimdan chiqib ketadi.

Yaxshiyam Instagram yoki YouTubeda ishlamayman. 😬️️️️️️

Men (menejrimning yoniga borib): Kecha e-mail yuborgandim sizga, qaravoring. Juda zarur edi. 😬

Menejerim: Oh please, don't make me work. I don't wanna work today.🥲

Men: Manam jaa ishlagim kelyotgani yo'q. Shunday qaravoring o'zi kichkina narsa.🥲

React 19 Beta

Eng katta yangiliklar:

1. Server actions
2. use huki

Shaxsan menga eng yoqqan o'zgarishlar:

1. Funksiyaviy komponentlar uchun endi forwardRef shart emas. Shunchaki props.ref qilib ishlatsa bo'ladi.

function Comp({ ref }) {
  return <input ref={ref} />
}

2. <Context /> o'zini endi Provider qilib ishlash mumkin. Ya'ni <Context.Provider /> qilib o'tirmasadan. 💚

const Context = createContext('');

function App({children}) {
  return (
    <Context>
      {children}
    </Context>
  );  
}

3. Meta teglarni endi bemalol ishlatsa bo'ladi. Xatto CSS fayllarni qo'shish mumkin: 😍

function Page() {
  return (
    <div>
      <title>Sarlavha</title>
      <link 
        rel="stylesheet" 
        href="/page.css"
        precedence="default" 
      />
      <meta name="author" content="Diyor" />
    </div>
  )
}

4. useFormStatus
Endi <form> huddi Context kabi ishlaydi va uning ichida joylashgan komponentlar useFormStatus orqali formaning holatini o'qishlari mumkin (pending, submitted, ...).
Oldin bu ish uchun alohida Context yoki proplar zanjiri kerak bo'lardi.

Batafsil: https://react.dev/blog/2024/04/25/react-19#improvements-in-react-19

Juda yaxshi savollar va javoblar berildi. 👍

https://www.tgoop.com/dev_thinking_loud/290

Web Animations API

Shu paytgacha CSS animatsiyalarni JS orqali ham yozsa, boshqarsa bo'lishini bilmagan ekanman!
CSS dagi animatsiyalarni JS orqali boshqarish desa faqat ular bo'glangan klasslarni elementga biriktirish/o'chirishni tushunardim.

Masalan, g'oyib bo'lish animatsiyasini solishtirsak bo'ladi:

CSS

#element {  
  animation: fade 3s ease forwards;  
}  
  
@keyframes fade {
  from { opacity: 1; }  
  to { opacity: 0; }
}  

JS

const element = document.getElementById('element');  
  
const keyframes = [  
  { opacity: 0 },
  { opacity: 1 }
];  
 
const options = {  
  duration: 3000,
  easing: 'ease',
  fill: 'forwards',
};  

const animation = new Animation(new KeyframeEffect(element, keyframes, options));

animation.play()
animation.pause()
animation.finish()
animation.cancel()

Qachon qaysi birini ishlatamiz?

Animatsiyalar uchun requestAnimationFrame() dan foydalanish ham mumkin. Faqat u CPU dan foydalanadi. CSS animatsiylar esa GPU dan.

Web Animations API

1. bizga aynan CSS dagi animatsiyalarni boshqarish imkonini KENGAYTIRADI.

2. lekin baribir aslida siz CSS animatsiyalarni ishlatayotgan bo'lasiz.

3. piksellarning hisob kitobi "main thread"dan tashqarida bo'ladi.

4. UI komponentlar yaratish uchun juda mos.

5. Deklarativ


requestAnimationFrame()

1. animatsiyani kardma-kadr yartish imkonini beradi.

2. animatsiyani boshqarish to'laqonli JS kodga bog'liq boladi.

3. shu sabab, har bir kard uchun piksellarni hisoblash "main thread" da amalga oshadi.

4. O'yinlar va o'ta murakkab, sinxron harakat qiluvchi elementlardan iborat animatsiyalar uchun mos.

5. Imperativ

Bu narsalarni kovlayotganim, yaqinda Pinterest dizayn sistemasiga animatsiya qo'shish ishlarini boshladik.

Boshladim deyishim kerak, chunki animation library ustida faqat men ishlayman. 😬
Reja bo'yicha keyingi 1 yil shu proyekt bilan shug'ullanamizman.

TransitionEvent

Animatsiya bilan bir qatorda transition'lar haqida ham gaplashsak.

Buni qarangki, CSS orqali boshqariladigan transition'larni JS bilan kuzatish imkoni ham bor ekan.
Buni ham yaqinda bilib qoldim. 🤯

Masalan, ":hover" qilganda kengayadigan elementni olaylik:

#box {
  width: 50px;
  transition: 2s;
  transition-dalay: .5s;

  &:hover {
    width: 100px;
  }
}

Aytaylik, keygayib kichrayyotgan paytda, element ichidagi tugmacha yoki linklar "disabled" bo'lishi kerak (JS bilan). Buni qanday qilardingiz?

Misol uchun men "mouseenter", "mouseleave" event'laridan foydalanib, "setTimeout" orqali transition tugashini kuzatardim. Bunda albatta "timeout" vaqti "transition-duration" + "delay" ga teng bo'ladi.
Tepadagi misolga ko'ra 2 + 0.5 = 2.5 sekund.

Bu usul ishlaydi. Lekin ikkovi bir-biriga bog'liq bo'magan parallel operatsiyalar hisoblanadi. Chunki sinxronizatsiyani "qo'lda" qilyapmiz.

TransitionEvent bilan esa buni qilish ancha sodda:

const box = document.getElementById('#box');

box.addEventListener('transitionstart', () => button.disabled = true)
box.addEventListener('transitionend', () => button.disabled = false)

TransitionEvent o'zi 4 ta event'dan iborat:

1. transitionrun - transition'ni boshlovchi even sodir bo'lganda (hover, focus, click, v.h.k.) va "delay" taymeri boshalanganda.

2. transitionstart - aynan transition boshlangada, ya'ni o'zgarish boshlanganda; "delay" taymeri tugagadan keyin.

3. transitionend - transition tugaganda, ya'ni element o'zgarishi tugagach.

4. transitioncancel - transition paytida uni bekor qiladigan event sodir bo'lganda, ya'ni `transitionrun`'dan keyin, `transitionend`'dan oldin.

ReactJS ni noldan yozib ko'rishim kerak o'zim. Albatta o'rganish maqsadida.

1 yilcha oldin React'ni jQuery'ga o'xshatib ishlatsa bo'ladigan experimental library yozgandim. O'shani topolmayapman. Menimcha eski noutbukimda qolib ketgan. 😕

Mana shunaqa jinnicha sintaksis edi 🥶️️️️️️

function Component(props) {
  return (
    $('div').css('display', 'flex')
      .children(
        $(Button)
          .label('Print')
          .click(props.onClick)
      )
  )
}

React state'ni DOM boshqarganda

O'zi TransitionEvent haqida yozganimning sababi, uni noto‘g‘ri usulda ishlatib qo'yganimni aytish edi. Hozir shu haqida aytib beraman.

Bu API haqida o'qiganimdan keyin, transitionstart va transitionend bilan komponent state'ni boshqarmoqchi bo'ldim.

Kursor komponent ustida borganda, ya'ni "mouseover" bo'lganida, u animatsiya bilan ochilishi kerak. Komponent ichidagi tugma bosilganda esa komponent yopilishi kerak edi.

// pseudo kod
<Component
  ref={compRef}
  onMouseOver={() => {
    if (disabled) return;

    startTimer({ disabled: true });
    setOpen(true);
  }}
  onButtonClick={() => {
    if (disabled) return;

     startTimer({ disabled: true });
     setOpen(false);
  }}
  style={{ transition: "1s" }}
/>

Ochilish va yopilish animatsiyasi vaqtida event listener'lar ishlamasligi kerak, ya'ni "disabled" bo'lishi kerak. Chunki unday qilmasangiz "mouseover" ishga tushib komponent yana ochilib, animatsiya ishga tushib ketishi mumkin. "disabled" bu yerda React state.

Buning uchun men setTimeout'da foydalanyotgandim. Transition boshlanganda disabled===true bo'lib, taymerni ishlatib, tugaganda disabled===false bo'lishi kerak edi.

// pseudo kod
function startTimer({ disabled }) {
  setDisabled(true);
  setTimeout(() => setDisabled(false), 1000);
}

Shu yerda taymerni butunlay o'chirib tashlab, o'rniga transitionstart va transitionend dan foydalanib ko'rdim. Chunki taymer bilan ishlash murakkab va ko'pincha "bug"larga sabab bo'ladi.

// pseudo kod
<Component
  onMouseOver={() => {
    if (!disabled) setOpen(true);
  }}
  onButtonClick={() => {
    if (!disabled) setOpen(false);
  }}
  onTransitionStart={() => setDisabled(true)}
  onTransitionEnd={() => setDisabled(false)}
  style={{ transition: "1s" }}
/>

Refaktor qilganimdan so'ng, kod ancha soddalashdi va endi "transitionstart"da disabled===true, "transitionend"da esa disabled===false bo'lishi kerak edi. Lekin endi komponent "lipirlay" boshladi. 🤔

Nega? Axir "transitionstart"da event listener'lar "disabled===true" bo'lishi kerak edi-ku?

Biroz mulohazadan keyin tushundimki, "React falsafasi"ga qarshi ish qilib qo'yibman. 😕

Komponent tugmasi bosilganda "transition" ishga tushadi. Bu payda kursor hali komponent ustida turgan bo'ladi-ku, to'g'rimi? Shuning uchun "mouseover" ishga tushib komponentni yana ochib yuboradi (yani ochilish animatsiyasi ishlab ketadi).
Undan KEYINGINA "disabled===true" bo'ladi --- deb o'ylasangiz yanglishasiz. 😄
Chunki endi "transitionend" ishlab "disabled===false" bo'lib qoladi!

Mana sizga chigallik!

React har bir (sinxron) state'lar zanjiri to'liq o'zgarib, virtual DOM "pishgandan" keyin haqiqiy DOM ga o'zgarishlarni kiritadi.
Ya'ni event loop bir marta aylanishiga bitta render bo'ladi!!! (Har holda shunga harakat qiladi. Xato aytgan bo'lsam to'g'irlanglar)

Sichqoncha bilan bog'liq har bir event/hodisa event loop'gai bitta aylanish vazifasini yuklaydi. Komponentimizdagi "onButtonClick" listeneri "disabled" state'ini o'zgartirmaydi. "Disabled" o'zgarishi keyingi event loop'da sodir bo'ladi. Shuning uchun orada undan oldin "mouseenter" tiqilib olishga ulguradi.

Xullas kalom, bu yerdagi eng katta xato shuki, men state'ni DOM dan o'qiganim bo'ladi. Chunki "transitionstart" bu DOM o'zgarishi orqali sodir bo'luvchi event!
React'da state DOM'ni boshqaradi, DOM state'ni emas!!!
Buni React'ni endi o'rganayotgan paytimda o'qiganman.

Shuning uchun e'tiborli bo'linglar. 🙂

Brauzer yozib ko'rishim kerak. Noldan. Chromium yoki tayyor engine'larsiz. Zamonaviy brauzerlardek bo'lishi shart emas. Berilgan URLni ochsa, ma'lum bir sodda HTML, CSS, JS opereratsiyalarini baraja olsa bo'ldi.
Zo'r pet-project bo'lardida o'ziyam.

P. S. Albatta o'rganish maqsadida. For educational purposes.

CSS prefers-reduced-motion

Agar kompyuteringizda yoki telefoningizda Reduce Motion (Harakatni Kamaytirish) yoqilgan bo'lsa, UI ortiqcha animatsiyalarsiz ishlashni boshlaydi.
Masalan, tugmacha odatda bosilganda kichrayib-kattalashsa, Reduce Motion holatida faqat rangi o'zgaradi va hech qanday animatsiya ko'rmaysiz.

Bu sozlama nega kerak:
1. "Accessibility", ya'ni ko'rish bog'liq nuqsoni bor odamlar uchun.
2. dastur tezroq ishlashi uchun
3. kamroq energiya sarfi uchun va h.k.

Veb-saytingiz yoki veb-dasturingiz "Accessible" bo'lishi uchun sistema sozlamalari bilan mos ishlashi zarur. Agar sistemada Reduced Motion yoqilgan bo'lsa animatsiyalarni o'chirishingiz yoki kamaytirishingiz kerak.

CSS da bu quyidagicha qilinadi:

div {
  transition: transform 1s;
  animation: fadeIn 2s;
}

@media (prefers-reduced-motion) {
  div {
    transition: none;
    animation: none;
  }
  
/* yoki boshqa juda oddiy 
  animatsiya bilan almashtiriladi*/
}

Reduced motion GIF

Jamoamizda "Accessiblity" bo'yicha mutaxassis bor. Kecha dizayn sistemamiz veb-saytiga GIF lari bor sahifa qo'shgandim. Keyin yozib qoldi:

- Diyorbek, animatsiya qoidalari bo'yicha sahifani qo'shibsiz-u, sahifani o'zida qoidalarni ishlatmabsiz! 😬

- 😐🤦‍♂️

Profilimdagi "seniOr" degan yozuvdan uyalib ketdim. 😄️️️️️️

Xullas, Reduce Motion bo'lganda GIFlar to'xtatish kerak ekan. Chunki GIF rasmlar ham sahifaning harakatlanuvchi elementlaridan biri.

Reduce Motion bo'lganida GIF ni statik rasm bilan almashtirilsa, masala hal. Buni qilish uchun esa shunchaki HTML ni yaxshi bilish yetarli! JavaScript kerakmas.

Mana:

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)">
  <img src="animated.gif">
</picture>

<picture> tegini ishlatishni bilarmidingiz? Masalan men <source> tegida "media" atributi borligini bilmasdim! 😬

Accessibility Tree

Chrome'da sahifaning "accessibility tree"sini ko'rish mumkin. Assisstiv texnologiylar (ko'zi ojizlar uchun ovozli yordamchilar, screen reader'lar) aynan shu "accessibility tree" orqali sahifangizni o'qishadi.

Yuqorida Wikipedia sahifasining "accessibility tree"sini ko'rishingiz mumkin. Deyarli har bir DOM element ma'noli izohlangan. Bu izohlar asosan "aria-*" atributlari orqali beriladi.
Screen reader (ekranni o'quvchi dastur) lar aynan shu izohlarni o'qishadi.

Chrome DevTools orqali shu usulda elementlarning maxsus izohlarini tekshirish juda qulay. Chunki DOM ning o'zida ularni ko'rish/topish qiyin.

Aytgancha,

JavaScript ni zo'r o'rganmoqchi bo'lsangiz C++ ni o'rganing.

Nega?

1. JavaScript ostida C++ da yozilgan kodlar yotadi.

Hech o’ylab ko’rganmisiz, “setTimeout” o’zi qanday ishlaydi? Uning kodi qanday yozilgan?
Yoki “addEventListener” aslida signalni qayerda oladi?
Yoki oddiy “<button>” HTML tegi qanday qilib ekranga tugmacha chiqaradi?
“Event loop” o’z nomi bilan oddiy “while loop” asosida ishlashini bilarmidingiz?

O’ylab ko’rmagan bo’lsangiz, endi o’ylab ko’ring!

2. Xotirani boshqarish (Memory management)

JavaScript da bu narsani siz qilmaysiz. Sahna ortidagi JS engine bu ishlarni siz uchun qiladi. Uning qanday ishlashini tushunsangiz, quyidagi JS ko’nikmalaringiz rivojlanadi:
a. kod optimizatsiyasi
b. katta ma’lumotlar bilan ishlash
c. “memory-leak“larni payqay olish (ha JS da ham bo’ladi)

3. Multithreading

Bu ham JS da yo’q - desam xato gapirgan bo’laman. Shunchaki JS da boshqacha konstruksiya bor xolos (WebWorker lar). Undan tashqari “event-listener”lar va shu kabi brauzerning asinxron API lari boshqa thread da ishlaydi. Ularni yaxshi tushunish uchun “multithreading” qanday ishlashini bilish foydali.

4. Har bir texnologiya aslida sodda texnologiyalar jamlanmasi ekanini tushunish

Ularning murakkabligi o’sha jamlanmaning kattaligida, ko’pligida. Lupa ostiga olib qarasangiz ularning qanchalik sodda ekanligini ko’rasiz.

P.S. C++ dan tashqari Go, Rust kabi tillarni ham misol qilsam bo’lardi. Lekin ularda memory management bo’yicha qo’shimcha konstruksiyalar kiritilgan. Shu sabab "memory-management"ni yaxshi tushunish uchun C/C++ ga teng kelolmaydi (IMHO).

Undan tashqari eng kuchli JS engine bo’lmish V8 C++ da yozilgan. Chrome ustiga qurilgan har bir brauzerda V8 ishlaydi. NodeJS va Deno ham. Bun ham ancha-muncha C++ kodga ega.

Shu gapga bir maqtanib qo'yay aytib ketay. 1.5 yilcha oldin Samsung kompaniyasiga C++ dasturchi bo'lib ishga kiryotgandim. Lekin oxirida oyligini kelisholmadik shekilli keyin qaytib chiqishmadi. 😬

Tasavvur qilyapsizmi?