Frontend Ekosistem
React.js Belgeselinden Çıkardığım Notlar -1
Bu blog React belgeselinden çıkardığım notlar üzerinden anlattığım bir yazı olacak. Bu içerik React’ın nasıl başladığı, nasıl geliştiği ve değiştiğini anlamak açısından oldukça önemli bilgiler içeriyor.
Aşağıda belgeselin linki bulunuyor. Vakti olanların orjinal video’yu izlemelerini öneririm.
Bir de ekstradan How React.JS Created With Pete Hunt şeklinde bir podcast de var dileyenler bunuda dinleyebilir.
React 2011 yılında başlayan, 2013 yılında Jordan Walke Facebook’ta çalışırken ortaya çıkardığı MIT lisansı olarak GitHub altına açık kaynaklı olarak koyduğu bir proje. Yazıyı yazdığım an itibari ile 205K star ve 43K yakın fork oluşturmuş bir proje.
Kişiler
Belgeseldeki Kişiler
- Sebastian Markbaga (2012–22 Facebook, Vercel)
- Shane O'Sullivan (2010–17 Facebook, Stripe, Promise, MaskMail)
- Sophie Alpert (2015- 2019 Facebook, Humu)
- Lee Byron (Facebook 2009–2018 , Robin Hood, GraphQL, Watershed)
- Tom Occhino (2009–2022 Facebook, Vercel)
- Tony Casporro (Box, Figma, Netflix)
- Adam Wolff (Facebook 2010–2018, )
- Christopher Chedeau (Facebook)
- Pete Hunt (Facebook 2010–2014, Instagram, Twitter, Elementl)
- Dan Abramov (Facebook 2015 ..)
- David Nolen
- Andrew Clark
Bahsi Geçen Kişiler
- Jordan Walke (İlk React Projesini GitHub gönderen kişi)
- Viladamir Klosnikov, Will Bailey (Bolt.js framework)
React’ın Ortaya Çıkışı
İlk başlarda JQuery, Mootools, Backbone, Knockout vb.. bir çok kütüphane bulunuyor fakat bunlar çok kompleks UI geliştirmek için yeterli değil.
Önceki kütüphanelerde DataBindig, render yönetmeye odaklanmış bir yapıdan bileşenler üzerinden update ile uğraşıp arkaplanda re-render kısmını tamamen bir kütüphaneye bırakıldığı bir yaklaşıma geçilme çabası React’ın doğmasına neden olmuş.
Shane O’Sullivan Dojo.js üzerine çalışırken 2010 yılında Facebook takımına katılıyor. O sıralar Mobile alanda HTML5 çılgınlığı var ve Native uygulamalar yerine HTML5 ve JS ile client uygulamalar sektörün hakimi olacak düşüncesi var. LinkedIn ve Facebook mobil uygulamalarını HTML5 ve JavaScript taşıma düşüncesindeyken uygulamaların performans ve kalite açısından Native yaklaşamamasından dolayı bundan vazgeçildi.
Not: Tam da bu dönemlerde 2012 yıllarında TürkTelekom içerisinde Bireysel Online Hizmet Merkezinin ilk mobil uygulamalarını JQueryMobile, Sencha Touch ve WNG kütüphaneleri ile Nokia, Blackberry, Android ve iPhone da çalışacak şekilde geliştirmiştik. Tabi aynı sorunlardan müzdarip olup sonra ObjectiveC ve Java ile Native Android ve iPhone uygulamalarını geliştirdik o sırada Blackberry ve Nokia ortadan kayboldu diyebilirim. (2014 yıllarında Microsoft, Nokia satın alarak Windows Phone ile geri dönmeye çalışmaları da suya düşünce Windows Mobile kısmıda ortadan kalktı) İnternet Uygulamaları için Altyapıların 2010–2020 Değişimi bu değişimi özetle anlatmıştım. Desktop ve webde Adobe Flash’ın üstünlüğü ve sonradan Steve Job’s ile birlikte ortadan kalkmasına dönüşen bir anıya dönüştü.
- Nokia, Blackberry
- Windows Phone
- Flash, Silverlight, JavaFX
ve bir çok teknoloji ve üzerine geliştirdiğimiz yazılımlar zaman içerisinde yok oldu.
İlk başlarda Shane O’Sullivan ve Viladamir Klosnikov, Will Bailey (Bolt.js) framework geliştiriyorlar. Facebook ClientSide MVC implementation sağlayan Dojo.js ve diğer kütüphaneleri kapsayan bir kütüphane geliştirler.
Yapı olarak backbone.js benziyor. 2011 Facebook Timeline oluştururken falan kullanmışlar sanırsam. Bolt.js bir toolset ötesinde bir Application Development Framework’müş ve Facebook ihtiyaçlarını karşılayacak şekilde geliştirilmiş.
Bu sırada server-side olan Facebook’a daha fazla interaction verebilmek için zaman içerisinde Timeline, Chat , Newsfeed, Photos, ve diğer kısımları değiştirilmeye başlanmış. Bu sırada 25 mühendis hem uygulamaları hem de Bolt.js geliştirmeye çalışıyorlarmış
Burada sorun Bolt.js değil, uygulama kompleks hale geldikçe mimari üzerinde değişiklik yapmak giderek zor bir hale gelmiş, Ürün büyüdükçe ekibin büyümesi, ekibin büyümesi ile kod değişikliklerinin kontrol edilebilmesi zorlaşmış
Bu sırada Ads(Advertisement) Takımından Jordan Walke, bu işi çözmenin farklı bir yolu olması gerekiyor diye düşünüyordu. Çünkü Bolt.js ekibin kodu anlaması ve daha karmaşık yapıları çözümlemesi için iyice karmaşık hale geliyordu.
Jordan bunu ilk önce daha Fonksiyonel bir şekilde yapabileceği yeni fikirleri Bolt.js değiştirerek FBold.js Functional Bolt olarak ortaya koydular. Burada ki temel değişiklik bir API’den veya kullanıcılardan gelen istekler doğrultusunda UI güncellemeri arka plandada ilgili kısımların güncellemesini sağlasın.
Aslında bakarsanız diğer Framework’lerde two-way data binding ile bunun bir benzerini yapıyorlar ama React’da arkada bu data binding olayını düşünmeden bunu kurguluyorsunuz. Uygulama mantığına odaklanıyorsunuz. View ile Model arasındaki güncellemeri düşünmeden bileşenler üzerinden update yapıyorsunuz, React ise arkada Virtual DOM ile en az değişiklik yaparak ekranı kendisi güncellemeye çalışıyor.
Not : Buradaki yazıda React DOM kullanımının nasıl çalıştığını anlatmıştım.
Jordan Walke ilk başta bu yöndeki fikirleri ekip içerisinde yapılması çok zor işler olarak görülüyormuş
React’ın İlk Geliştirme Sırasındaki Teknik Zorlukları
Christopher Chedeau , Jordan Walke ile ilk konuşmalarında Frontend konusunda UI geliştirmede en zor konunun ne olduğunu sormuş ?
- En zor konu Updates konusuymuş; DOM Node üzerindeki değişiklikleri dinleyerek bu kısımlarda olan değişiklikleri göre güncellemerin yapılması ve en çok hata bu değişimi yönetme kısmındaki karmaşıklıktan kaynaklanıyormuş
- Christopher Chedeau Facebook öncesi Warcraft oyunu için (find your guild) geliştirmeye çalışıyormuş 20.000 guild üzerinden arama yapıp, bunun performanslı bir şekilde bulunabilmesi için çalışıyormuş. Bunu performanslı ve realtime yakın nasıl yapabileceği üzerine 2 aydır çalışırken, odağına facebook react projesine çevirip, aynı mantığı çok kısa sürede React için yazmıştır. Daha sonra Facebook Photo takımında olup , tümüyle react projeleri geliştirmeye odaklanmış
- Buradaki kısmın VDOM yazma ve arkaplanda React tüm bu değişiklikleri bulması yönündeki algoritma olduğunu düşünüyorum. Yani Diff işleminin başlangıcı yani reconcilation kısmı diye düşünüyorum
React’ın Facebook içinde Geliştirilmesi İçin Destek
Jordan proje üzerinde ilerlese bile henüz yöneticilerin dikkatlerini çekemedikleri için henüz emekleme aşamasında, Yöneticiler Lee Byron, Jordan ile konuşmasını ve FBolt(React) geliştirmesini durdurmasını ve Bolt.js geliştirilmesine odaklanmasını ister. Lee ilk başta projenin ve geliştirmelerin neleri içerdiğini anlamaya çalışır. Doğru şeyleri mi yapıyoruz ?
Jordan burada Lee’ye bir demo gösterir ve yaptığı işleri anlatır ve Lee bu durumdan oldukça etkilenip daha sonra Lee’de koda girip kod React kodunu State Management yönetme anlamında ve diğer konularda bir değer içerdiğini ve ilgisini çektiğini söylüyor.
Lee buraya girip 2,3 ay React’ın yapısının oluşturulması ve Standardizasyonu için uğraşıyor ki , ilk versiyonun çıkarılması konusunda en önemli sorunlar bunlar. Lee React üzerinde ilk başladığında ilk kod yapısını anlayıp üzerinde kod geliştirmeye çalıştığında
- Tools
- Terminology,
- Syntax,
- Concepts Involved
- Mental Model
konularında normal UI geliştirme yöntemlerinden çok farklı bir yapı içeriyordu. Bu yapıyı daha basit bir hale dönüştürebileceklerini düşünmüş ve bir sözlük oluşturmaya karar vermiş. Bu süreç git gel ve kendi aralarındaki tartışma ve konseptleri ve kavramları düzeltmek ile geçmiş ve sonrasında aşağıdaki gibi bir API ortaya çıkarmışlar.
Bu aşamadan sonra React tüm ekip tarafından kullanılmaya başlanmış, daha anlaşılır ve düzgün bir APIsi olduğu için yapı yavaş yavaş Facebook içerisinde kullanılabilecek düzeye gelmiş.
Devamı ilerleyen yazılarda…
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
