Hooks Behind
Overreacted.io Üzerine Notlar
Dan Abramov Redux, Hook vb.. bir çok React özelliğinin ve kütüphanesinin geliştiriminde ana ekip içerisinde yer alıyor. Bundan dolayı sitesinde yer alan içerikler biraz daha konuların detayına ,arka planını anlatan konular. Bu yazı serisinde bu blog yazılarını analiz ediyor ve örnek kodlar ile deniyor olacağız.
Dan Abramov kişisel blog sitesinde yer alan yazıların React ve JS ekosistemdeki bir çok konuyu derinlemesine anlatması ve analiz etmesi nedeniyle çok zengin bir bilgi kaynağı. Bizde bu yazı ile başlayarak içerikleri analiz etmeye başlayacağız. Her bir blog yazısı üzerine belki bir veya daha fazla inceleme yazısı oluşturacağız, bazıları ise ilgimi çekmediği onlardan da hiç bahsetmeyeceğim. İşte bu ayrımı yapabilmek için bu yazıda önce yazdığımı blog yazılarına göz gezdireceğiz.
1. Why Do We Write super(props)?
Bu yazıda Class Component Constructor içerisinde super(props) neden ve nereye yazmamız gerektiğini irdeliyor.
2. How Does React Tell a Class from a Function?
Bu yazıda React Class ve Function Component arkaplanda React tarafından nasıl ele alındıklarını oluşturduklarını ele alıyor.
ayrıca yazı içerisinde new, this, class, arrow functions, prototype, __proto__, instanceof kavramlarını detaylı bir şekilde analiz ettiğini görebilirsiniz.
3. Why Do React Elements Have a $$typeof Property?
Bu yazıda React JSX kullanarak arayüz geliştirmek de arka planda React.createElement React elemanları oluşturulur. Peki bu elemanların içerisinde neden type, props, key, ve ref fields yanında neden $$typeof diye bir değişken var ve Symbol() değerini taşıyor ?
4. My Wishlist for Hot Reloading
Bu yazıda React Hot Reloading öneminden ve kendi uğraşlarından bahsediyor, gerçektende geliştirdiğimiz UI değişiklikleri anında canlı olarak görebilmek Frontend Dev katkıları çok fazla. Burda bir istek/dilek listesi de oluşturmuş ve bunları aşağıdaki başlıklar altında toplamıştır.
- Correctness (Doğruluk)
- Locality (Yerellik)
- Feedback (Geribildirim)
5. How Does setState Know What to Do?
Bu yazıda React setState dendiğinde arkaplanda ne işler döndüğünü anlatıyor. React farklı farklı Renderer bulunduğunu react-dom, react-dom/server, react-native, react-test-renderer, react-art. Implementation bu renderer içerisinde gerçekleştiğini ve Hook bu konuyu nasıl ele aldığını bu yazı içerisinden okuyabilirsiniz.
6. Optimized for Change
Bu yazıda iyi bir API nasıl tasarlanması gerektiği üzerinde durmuştur. Çünkü React API üzerinde en çok uygulama geliştirilen API’lerden birisidir. Yeni taleplere ve isteklere karşı, değişime karşı nasıl optimize hale getirdiklerini anlatmaya çalışıyor.
7. Why Do React Hooks Rely on Call Order?
Bu yazıda Hooks kavramının ne olduğu, hangi ihtiyaçlardan ortaya çıktığını ve geliştirme süreci anlatılıyor.
Hooks are like functional mixins that let you create and compose your own abstractions.
En çok kullanılan Hook lar useState ve useEffect kullanımı ve Custom Hook nasıl geliştirebileceğimizin anlatılmaktadır.
8. Preparing for a Tech Talk, Part 1: Motivation
Bu yazıda teknik konuşma sırasında kendisini nelerin motive ettiği. İçeriği neden, nasıl oluşturmalıyım sorusunun aynı zamanda kendine en doğru soruları sorman için bir fırsat olmasından bahsediyor.
9. Things I Don’t Know as of 2018
2018 yılı bilmediği veya az bildiği, pek de ilgilenmediği konuları listelemiş.
- Unix commands and Bash, Low-level languages, Networking stack, Containers, Serverless, Microservices, Python, Node backends, Native platforms, Algorithms, Functional languages, Functional terminology, Modern CSS, CSS Methodologies. SCSS / Sass, CORS, HTTPS / SSL, GraphQL, Sockets, Streams, Electron, TypeScript, Deployment and DevOps, Graphics,
10. The Elements of UI Engineering
Önceki yazısında bilmediği konulardan bahsetmiştir. Bunları sıra ile bir Roadmap içerisinde öğrenme gerekliliği olmadığından bir UI Problemi veya tasarıma nasıl yaklaştığını, bunu nasıl basitleştirip, soyutlaştırdığını, nasıl parçalara bölüp ele aldığını anlatıyor. UI Engineering elemanlarını ele alıyor;
- Consistency, Responsiveness, Latency, Navigation, Staleness, Entropy, Priority, Accessibility, Internationalization, Delivery, Resilience, Abstraction
11. Preparing for a Tech Talk, Part 2: What, Why, and How
Tech Talk içeriği hazırlarken neye göre hazırladığını ve bu konuları Neden , Niçin ve Nasıl kavramları ile bir şekilde sunuma dönüştürdüğü konuları üzerinde duruyor. Anlatmayı düşündüğü temel konular.
Hot Reloading: “Functional principles improve the development workflow.”
Beyond React 16: “Waiting for CPU and IO has a unified solution.”
Introducing Hooks: “Hooks make stateful logic reusable.”
12. The “Bug-O” Notation
Bu yazıda API tasarımı ile Algoritma arasında benzerlik kurarak. Algoritmanın performansını ve kompleksini ölçümlemek için Big-O kullanılıyorsa, tasarlanan API yani React API geliştiricilere ne kadar performanslı bir altyapı sağladığı üzerinde duruyor.
The Big-O describes how much an algorithm slows down as the inputs grow.
The Bug-O describes how much an API slows you down as your codebase grows.
13. Why Isn’t X a Hook?
Bu yazıda neden her API’nin Hook olamayacağı, neyin Hook neyin Hook olmayacağına nasıl karar verebileceğimiz anlatılıyor . .
“Why isn’t <some other API> a Hook?”
useState, useEffect, userContext Hook olarak kullanabilirken, React.memo ve <Context.Provider> bu iş için neden uygun olmadığı, React API tasarımında bulunması gereken iki özelliğin (Composition ve Debugging) kavramlarının Hook’ larla nasıl ele alındığını anlatıyor.
14. React as a UI Runtime
Bu yazıda React UI Kütüphanesi ötesinde UI Uygulamaları geliştirmek için bir Runtime olduğunu ve derinlerdeki React Programlama Modelinin nasıl çalıştığını anlatıyor.
- Host Tree, Host Instances, Renderers, React Elements, Entry Point, Reconciliation, Conditions, Lists, Components, Purity, Recursion, Inversion of Control, Lazy Evaluation, State, Consistency, Memoization, Raw Models, Batching, Call Tree, Context, Effects, Custom Hooks, Static Use Order, What’s Left Out
15. Making setInterval Declarative with React Hooks
Bu yazıda bir çok kişinin setInterval ve Hooks beraber çalıştırırken karşılaştığı sorun için useInterval şeklinde bir kullanımla Hook modelini kullanmanın gerektiğinden bahsetmiş.
16. Fix Like No One’s Watching
Bu yazıda Teknik Borç türlerinden bahsediyor. Herkesin bildiği ve fark edebildiği hata oluşturan, performans problemleri oluşturan , yeni yetenek eklemeyi engelleyen teknik borçların dışında daha sinsi ve gözükmeyen teknik borçlar var.
The friction killed them
17. Coping with Feedback
React’ın ilk stable versiyonunu çıktıktan sonra, geliştiricilerden gelen ve gelecek geri bildirimler ile başa çıkması için belirlediği bir takım kurallardan bahsediyor.
18. How Are Function Components Different from Classes?
Bu yazıda React’ın sağladığı 2 Bileşen Modeli (Function Component ve Class Component) arasında ne gibi farklar üzerinde duruyor.
19. A Complete Guide to useEffect
Bu yazıda Hook’ larda useEffect nasıl kullanmamız konusunda bilgiler veriyor ? Aşağıda yer alan soruları cevaplayarak konuyu anlatıyor
🤔 How do I replicate
componentDidMountwithuseEffect?
🤔 How do I correctly fetch data insideuseEffect? What is[]?
🤔 Do I need to specify functions as effect dependencies or not?
🤔 Why do I sometimes get an infinite refetching loop?
🤔 Why do I sometimes get an old state or prop value inside my effect?
20. Writing Resilient Components
Bu yazısında esnek bileşenler yazmak için react’ın bir style guide neden olmadığı konusu üzerinde duruyor. Esnek bileşen yazmak için faydalı bulduğu tasarım prensiplerinden bahsediyor
Don’t stop the data flow
Always be ready to render
No component is a singleton
Keep the local state isolated
21. Name It, and They Will Come
Yeni bir şey buldun ve bunu hayata geçirmek istiyorsun, bu süreci ve yayınlama sonrasında insanlardan gelen yorumları değerlendiriyor bu yazısında Dan Abramov. Bu noktada problem ve buna çözümü için ilk önce buna bir isim vermenin gerektiği sonrasının geleceğini anlatıyor.
How do you give a name to a problem?
The same way humans always did.
By telling a story.
Name it, and they will come.
22. Preparing for a Tech Talk, Part 3: Content
Bu yazısında Tech Talk sunum içeriğini nasıl oluşturduğunu ve konu diziliş ve anlatış stratejisinden bahsediyor.
- Top-Down Pass: The Outline, Bottom-Up Pass: The High-Energy Section
23. Algebraic Effects for the Rest of Us
Bu yazıda Algebraic Effect ve bunun programla dilleri sağladıkları üzerinde duruyorlar. Bu React özelinde değil JS dilinde de try/catch async/await yapılarının oluşturulabilmesi için temel algebra etkisi olmasından bahsediliyor.
24. How Does the Development Mode Work?
Bu yazıda React, Vue vb… Development ve Production Mode kod ayrışımının nasıl yapıldığını ve bu 2 modun farkları üzerinde duruluyor
25. What Is JavaScript Made Of?
Bu yazısında Javascript oluşturan Elemanlar üzerinden JS temellerini anlatmaya çalışmış
- Value, Literal, Object, Function
26. On let vs const
Bu yazıda let ve const üzerinde duruyor. Bir değer bir değişkene bir defa atanıyor ve bir daha atanmıyorsa const olarak kullanılmalı ama illa bu kod yapısında bu şekilde zorunlu mu olmalı. Linter bu problemi çözmüyor mu gibi sorulara cevap ararken, Const kavramını daha derinlemesine analiz ediyor.
- Tercih Etme Nedenleri: One Way to Do It, Reassignments May Cause Bugs, Learning About Mutation, Meaningless Assignments, Performance Benefits
- Tercih EtmeMe Nedenleri: Loss of Intent, Confusion with Immutability, Pressure to Avoid Redeclaring, Reassignments May Not Cause Bugs, No Performance Benefits
27. What Are the React Team Principles?
Bu yazısında React takımındaki Jordan, Sebastian, Sophie ile birlikte çalışma, problemlere yaklaşım ve takım prensiplerinden bahsetmiş
UI Before API
Absorb the Complexity
Hacks, Then Idioms
Enable Local Reasoning
Progressive Complexity
Contain the Damage
28. My Decade in Review
Bu yazısında 10 yıllık geçmişini anlatmış. Bir değerlendirme yazısı yazmış.
29. Goodbye, Clean Code
Bu yazısında geliştirmiş olduğu bir kodu. Clean(daha basit ve anlaşılır) DRY(Tekrarlardan arınmış) şekilde daha iyi bir abstraction(soyutlama) uygulayarak nasıl yazılabileceğini örnek üzerinden anlatıyor. Tabi bu şekilde yaklaşımının ekip içerisinde nasıl değerlendirildiğinide anlatıyor 😃
30. The WET Codebase
DRY (Don’t Repeat Yourself) başka şekillerde adlandırılması
write every time
write everything twice
we enjoy typing
waste everyone’s time
Bunun üzerine Deconstruct yaptığı 2019'daki konferans konuşmasını anlatıyor
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
