React / Firebase Chat- App

[dikodoksit]

Yüzlerce yıl aradan sonra bir 5 dakika döneyim, free chat uygulaması bırakayım gideyim dedim .

Firebase + React dışında ekstra bir kütüphane kullanmadım.

Öncelikle bazı arkadaşlar reklam ya da para amacıyla falan yaptığımı düşünmesin diye, özellikle reklam olmadığını belirteyim. Kodu da paylaşıyorum istediğiniz gibi çalıp oynayabilirsiniz. Fakat çalışması için index.js içerisinde, firebase config ayarını kendi projenize göre düzenlemeniz gerek.

Denemek için https://asirisuper-d61d7.firebaseapp.com/home bu adrese gelebilirsiniz. Kodlara aşağıda verdiğim github sayfasından ulaşabilirsiniz.

Bu pingdom aracılığıyla yaptığım performans testi. %90+ sonuç veriyor genelde. Caching dışında her şeyden tam puan alıyor. Onu da isterseniz çaldıktan sonra düzenleyip çözebilirsiniz zor değil .

Bir tane de siteden fotoğraf paylaşayım. Default profil fotoğrafının garip olması sanırım fazla küçük olmasından, build ettikten sonra buna dönüp tekrar uğraşmak istemedim. Onunla da uğraşıp halledebilirsiniz .

Kodlar için: https://github.com/cakmakfatih/asirisuper

(bug/buglar olması çok muhtemel)

Sorusu olan arkadaşlar özelden ya da buradan ulaşabilirler. Tekrar kaybolana kadar dönüş yaparım .

 

[MutantPanda]

Projeyi çok beğendim.Bu tarz bir js uygulaması yapmak ile alakalı eğitim videosu çeker misiniz? Ve sitenin bu kadar dinamik olma sebebi ne?
Sunucu tarafında çalışma muhabbeti ne açıklar mısınız?

 

[dikodoksit]

Projeyi çok beğendim.Bu tarz bir js uygulaması yapmak ile alakalı eğitim videosu çeker misiniz? Ve sitenin bu kadar dinamik olma sebebi ne?
Sunucu tarafında çalışma muhabbeti ne açıklar mısınız?

Öncelikle teşekkür ederim, birkaç işim vardı buraya bakamadım uzun süredir, biraz geç bir dönüş olacak.

Component(bileşen) tabanlı çoğu kütüphanenin (react[bu proje], vue, angular, ember, polymer ...) hızındaki en büyük etken, sayfalar arası değişiklikleri akılda tutarak gereksiz yükleme ve sunucuya istek yapmaması.

"create-react-app" CLI'ı ile oluşturulan React uygulamaları, React dışında birkaç özellik daha sunuyor. En basitinden, webpack sayesinde, bütün external dosyaları ayrı ayrı get request'leri yaparak çekmek yerine tek seferde çekebiliyoruz ve build ettikten sonra dosyalarımız minify edilmiş (olabilecek en küçük boyuta indirilmiş) halde oluyor. Bu da hızda oldukça büyük bir etken.

Diğer etken, Firebase'in, Google bulutunda çalışan muazzam bir sistem olması.

"react-router-dom", GET isteği yapmadan routing yapabilmemizi sağlayan ve çoğu component bazlı kütüphanede de farklı isim ve şekillerde varolan bir sistem, bunun etkisi de sayfalar arası geçişte önemli.

Bunlar haricinde, proje temel olarak 3 sayfadan oluşmakta, "giriş yap, kayıt ol, anasayfa". Geri kalan her şey React'in dinamik "state" değişkenleri sayesinde yönetilmekte. Kısaca anasayfada sekmeler arası geçiş yaparken ekstra bir şey yüklemiyoruz, zaten yüklediğimiz şeyi ekrana çağırıp ötekini arkaplana alıyoruz. Bu da ufak projeler için oldukça hızlı ve verimli

---

Eğitim videolarına devam etmeyi düşünüyorum uzun ara verdim fakat işten ötürü vakit bulamıyorum ne yazık ki, bulursam tabi neden olmasın yaparım bu tip bir proje.