• Buradasın

    React Native ve Mono Repo Geliştirme Sunumu

    youtube.com/watch?v=V1P6Gj06mQg

    Yapay zekadan makale özeti

    • Bu video, Ouzomerra Çakmak tarafından sunulan teknik bir sunumdur. Konuşmacı, Airties'da staj yapmış, Mynet'te iOS developer olarak çalışmış, San Francisco'da Uber'de full stack developer olarak görev yapmış ve şu anda San Francisco'da In and Horse'de çalışan bir yazılım geliştiricisidir.
    • Sunum, mono repo, cross platform app development, React Native ve web geliştirme kavramlarını tanımlayarak başlıyor ve Him-Senses adlı e-ticaret ve tele-tıp platformunda geliştirilen mono repo projesini detaylı olarak anlatıyor. Video, React Native'in çalışma prensibi, bridge mekanizması, performans özellikleri, mono repo avantajları, kod paylaşımı, type-safe kodlama ve proje mimarisi gibi konuları ele alıyor.
    • Sunumda ayrıca data layer'ı mono repo'ya entegre etme, platform agnostik navigation çözümü, isomorfizm kavramı, patch package kullanımı, component yapısı, core bölümü, storybook kullanımı, duck yaklaşımı ve styled components gibi geliştirme teknikleri de anlatılmaktadır. Video, mobil dağıtım yöntemleri, güvenlik özellikleri ve özel bir preview link sistemi geliştirme süreci ile sonlanmakta ve mono repo'ya başlamak isteyenler için kaynaklara yönlendirme yapılmaktadır.
    00:16Giriş ve Sunum Hakkında Bilgiler
    • Konuşmacı, React Native web ve React ile oluşturulan mono repo'yu, bu sürece giderkenki yolu ve neler düşünerek bu noktaya geldiğini hikaye şeklinde anlatacağını belirtiyor.
    • Sunum kırk dakika sürecektir ve çok kod bazlı olmayacak, daha çok sos skillere dokunacak ancak teknik taraftan da detaylara değinilecek.
    • Konuşmacı, Airties'da staj yapmış, Mynet'te iOS developer olarak çalışmış, San Francisco'da Uber'de full stack developer olarak çalışmış ve şu anda San Francisco base in and horse'de çalışmaktadır.
    02:02Sunumun Outline'ı
    • Sunum tanımlamalarla başlayacak, ardından yaşadığım problem anlatılacak.
    • Problemin nasıl bir fırsat karşısında değerlendirildiği ve nasıl bir öneri ile geldiği anlatılacak.
    • Implementasyon süreci ve halihazırda sahip oldukları sonuçlar hakkında bilgi verilecek.
    02:26Tanımlamalar
    • Mono repo, tek bir repository'de tüm dependency'lerin aynı şekilde versiyonlanıp host edildiği, versiyon sıkıntısı yaşanmayan ve büyük firmaların tercih ettiği bir yaklaşım.
    • Cross platform app development, bir codebase ile Android ve iOS aynı anda uygulama çıkartabildiğimiz environmentları ifade eder.
    • React, dekoratif bir şekilde UI yazmanızı sağlayan bir kütüphane; React Native ise bu component'ları bridge vasıtasıyla cross-platform şekilde iOS ve Android'e ulaştırmanızı sağlayan bir yapıdır.
    04:28Him-Senses Hakkında Bilgi
    • Him-Senses, Tale Madison şirketi tarafından geliştirilen bir e-commerce tele-health platformudur.
    • Doktorlar, video call, voice call veya text message ile hastalarla görüşerek reçete yazabilmektedir.
    • Platform, Amerika'nın elli eyaletinde faal bir şekilde çalışmaktadır.
    05:48Proje Hikayesi
    • Konuşmacı, şirkete katıldığında uygulamanın sadece yirmisekiz eyalette çalıştığını ve yirmiiki eyaleti daha eklemek için video chat ve voice chat fonksiyonlarının eklenmesi gerektiğini fark etmiştir.
    • Projede npm pack veya share code kullanılmadığı için, Storybook ile TypeScript kullanarak tek başına standalone bir package (Cactis) oluşturmayı ve bu pack'ı hem store hem de emr kendi taraflarından tüketmesini önermiştir.
    • Şirketin her yeri kaktüslerle dolu olduğu için, projenin de kaktüs olarak adlandırılmasını tercih etmiştir.
    06:51Veri Tabakasını Paylaşma Fikri
    • Şirketin UI developer'ları, iOS developer'ı desteklemek için bazı özellikleri geri planda bırakıp core functionally implement etmeye çalışırken, iOS developer'ı web developer'ı çevirmek zor bir süreç olduğunu fark etmiştir.
    • Veri tabakasını paylaşarak network kolları, constantlar, formlar, utility functionlar, component ve styling, business logic, data alma ve kütüphaneleri paylaşmayı planlamışlardır.
    • Facelift projesi kapsamında, MR'ın modern bir görünüme kavuşması için yüzde seksen kodu paylaşmayı ve type safe bir yapı oluşturmayı hedeflemişlerdir.
    09:55Proje Mimarisi Hakkında Düşünceler
    • Var olan EMR projesinde Hulk'lar kullanılmıyordu ve React 15 kullanılıyordu, bu nedenle class component'leri figürat etmek gerekiyordu.
    • CSS konusunda CSS first bir developer olmayan konuşmacı, CSS'in JS ile birlikte kullanılmasının hoşuna gittiğini belirtmiştir.
    • Componentların daha isolated olması ve project architecture'ın bir yola koyulması gerektiğini düşünmektedir.
    11:03Geliştirici Deneyimi ve Teknoloji Seçimi
    • Geliştirici deneyimi ve geliştirici hızı (velocity) çok önemlidir çünkü projelerin maliyetleri çoğunlukla çalışanlara atfedilir.
    • Geliştiricilerin yerel kurulumlarını çözmeye zaman harcamaması için güvenilir teknolojiler kullanılmalıdır.
    • Linter ruhları, kod kalitesini kontrol etmek için önemli bir araçtır ve farklı kod tabanlarında tutarlılık sağlar.
    12:23Teknoloji Seçenekleri
    • Proje için üç seçenek vardı: Code Native Web, React Native for Web ve Flutter.
    • Code Native Web, Java Virtual Machine'e kod çalıştırabilen ve farklı platformlarda çalışabilen bir yaklaşım sunar ancak web desteği alphada ve güvenilir değildir.
    • React Native for Web, resmi destek olmasa da Twitter gibi büyük şirketler tarafından kullanılmakta ve komünite desteği güçlüdür.
    15:14Flutter ve React Native Karşılaştırması
    • Flutter, kendi UI rendering engine'i ve saniyede 60 FPS frame per second render etme özelliğine sahiptir.
    • React Native, Facebook tarafından geliştirilmiş, iOS öncelikli olarak yayınlanmış ve %30-40 daha az kod gerektiren bir teknolojidir.
    • React Native'in performansı iyi olup, özellikle React geliştiricileri için web komünitesinin refah içinde yaşadığı bir deneyim sunar.
    19:32React Native Çalışma Prensibi
    • React Native'de React kodu yazılır, Metro tarafından bundle edilir ve JavaScript Runtime'ında çalışır.
    • Bridge, C ve C++ ile yazılmış olup Android ve iOS API'larına erişim sağlar ve veri aktarımı için kullanılır.
    • Bridge, veri aktarımında serileştirme ve serializasyon işlemleri yaparak performans sorunlarına yol açabilir.
    21:30React Native for Web ve Monorepo
    • React Native for Web, React Native'in API'larını web API'larına mapleyerek çalışır.
    • Proje için React Native ve monorepo (tek depo) tercih edilmiştir.
    • Mevcut üç yıllık test edilmiş kod tabanı tamamen değiştirilemez, bu nedenle mevcut kodun da kullanılması gerekmektedir.
    23:01Redux ve Data Layer Paylaşımı
    • Redux ve data layer'ı mono repo'ya koyarak projeyi rahatlattı.
    • Metro bandır'da import export'ların çalışmaması nedeniyle üç saat on bir dakika süren bir süreç yaşadı.
    • Data layer'ın paylaşılması ilk hedef olarak gerçekleşti ve Android, iOS ve data layer'lar aynı anda çalışıyor.
    24:19Roading ve Platform Agnostiklik
    • Web'de page'ler, mobil'de view'lar ve parametre geçişlerinin unify olmadığı fark edildi.
    • React Navigation yerine React Router ve React Navigation'ı aynı anda kullanarak platform agnostik bir çözüm bulundu.
    • Use Navigation hook'u ile platform agnostik kullanım sağlandı ve içeride hangi platforma göre ne yapılacağını karar veriyor.
    25:24Isomorfizm ve Patching
    • Isomorfizm kavramı, hem web'de hem native platformlarda çalışan package'lar için kullanılıyor.
    • Bazı package'lar Android ve iOS'ta çalışırken web'de çalışmıyor veya web için düşünülmemiş yazılmış.
    • Patching paketi kullanılarak Node.js paketlerinde yapılan değişiklikler otomatik olarak uygulanabiliyor.
    27:07Metro ve Webpack Sorunları
    • Web'de Webpack, native'de Metro çalışıyor ve Metro package'ları Webpack'e instruct etmek gerekiyor.
    • Metro'nun optimize edilebilir bir durumda olduğu belirtiliyor.
    • Bu durum, package'ları eklerken ve bağımlılıkları eklerken sorun yarattı.
    27:55Project Architecture
    • Mono repo'da common package, components, core, web ve assets klasörleri bulunuyor.
    • Mobil ve web spesifik build dosyaları, configuration'lar ve core paylaşılıyor.
    • Component klasöründe atomic component'lar bulunuyor ve buton, modal, calendar gibi component'lar bu klasörde yer alıyor.
    30:18Core ve Duck Yaklaşımı
    • Core klasöründe tüm uygulama, business logic, saga'lar, Redux ve view'lar bulunuyor.
    • Feature geliştirirken Duck yaklaşımı kullanılıyor, yani her feature için ayrı bir folder oluşturuluyor.
    • Bu yaklaşım, yeni geliştiricilerin discovery'sini kolaylaştırıyor ve uygulamayı daha test edilebilir hale getiriyor.
    32:23Stil ve Tasarım
    • Styled Components kullanılıyor ve light/dark team, spacing gibi ayarlar yapılabiliyor.
    • Renkler, typography ve fontlar (Be Himmels ve Behn Hers) önemli bir yer tutuyor.
    • Android uygulamasında slayt tab'ler ve slider tab'ler gibi popüler özellikler bulunuyor.
    33:27React Native Performans Sorunları
    • Browser'lar kötü React kodu çalıştırabilirken, native uygulamalar bridge nedeniyle frame drop gibi performans sorunlarına maruz kalabilir.
    • 60 FPS'in mobil uygulamalarda çok önemli olduğu, aksi takdirde kullanıcı deneyimi olumsuz etkilenir ve kullanıcı kaybedilir.
    • React Redux Logger gibi konsol logları, metro bandları tarafından otomatik olarak istenmediği için performansı düşürebilir.
    35:54Performans Optimizasyonu
    • Bridge'i yormamak için olabildiğince az iletişim kurulmalı ve bridge üzerinden veri geçmeden önce JavaScript tarafında gerekli kontroller yapılmalıdır.
    • Native kütüphaneler varsa asla JavaScript versiyonunu kullanmamak gerekir çünkü native versiyonlar cihazda optimize edilmiş kaynak üzerinde çalışır.
    • Mono-repo kullanmak, poly-repo'ya göre daha iyi bir versiyon yönetimi sağlar ve in-compatible sorunları önler.
    38:34Geliştirme ve Test Süreci
    • CI/CD süreci için CircleCI ve Appium kullanılıyor, CI'da Cycles vasıtasıyla en az iki test run ediliyor.
    • Centri kullanılarak source map'ler build'dan sonra upload ediliyor ve Netlify ile preview linkler oluşturuluyor.
    • Her PR yapıldığında Netlify otomatik olarak build ediyor ve test edilebiliyor.
    39:14Mobil Dağıtım ve Güvenlik
    • Code Push over the Air update, React Native'in ana satış noktalarından biri olabilir ve native dependency'nin olmaması şartıyla kullanılabilir.
    • TestFlight kullanılarak uygulama dağıtılıyor ve Bitrise ile otomatik build ve testflight'a yükleme yapılabiliyor.
    • Güvenlik için Touch ID/Face ID biometric authentication ve Two Factor Authentication kullanılıyor.
    41:49Previewing Çözümü
    • Expo app'lerinde QR kod tarayarak test edilebiliyor ancak custom React Native web uygulamalarında bu kadar kolay değil.
    • GitHub Actions kullanılarak yeni bir bucket oluşturulup QR kod oluşturuluyor.
    • Deep link şeklinde uygulama açılıyor, hash ile preview content isteniyor ve app Code Push ile senkronize ediliyor.
    44:23Mono Repo Avantajları
    • Proje %80 kod paylaşımı, Type SAE, Type Script ve CSS kullanılarak geliştirilmektedir.
    • Proje kitapçığı daha iyi olmasına rağmen daha da iyileştirilebilir.
    • Geliştiriciler mutlu ve verimlilik artmış, aynı kurallar ve dil kullanılarak aynı şeyler yazılmaktadır.
    44:57Mono Repo Kaynakları
    • Mono repo'ya başlamak isteyenler için ikinci linkten başlanabilir.
    • Konuşmacının kendi blogunda ve Postmo'da Bruno adlı Brezilya'dan bir arkadaşın React Native ve mono repo kurulumu hakkında yazısı bulunmaktadır.
    • Türkiye'den Zafer Ayhan'ın da Türkçe bir yazısı mevcuttur ve bu iki proje incelenerek mono repo deneyimi edinilebilir.
    45:49Sunumun Sonu
    • Sunum tamamlanmıştır ve dinleyicilere teşekkür edilmektedir.
    • Sorular için zaman ayırdığı için teşekkür edilmektedir.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor