SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
React Native 101
Tayfun YÜĞRÜK
mol42.com
Ben Kimim ?
● Project Consultantcy / Full Stack Software Architecht
● Mol42 Technologies
● Başlangıç
○ 2004 albumyap.com (UI + Backend)
○ 2005 yuzikizim.com ( UI + Backend + C++)
● Şimdi
○ Mol42 Technologies LTD
■ EatWithAva Frontend Team Lead
■ Broadage ( Oley.com, iddaa.com )
■ Hatay Büyükşehir Belediyesi
■ ….
İçerik - Genel
● İhtiyaç ne ?
● Neyi hedefliyor ?
● Alternatifler
● Farkı Ne ?
● Uygulamama entegre edebilir miyim ?
● Kimler Kullanıyor ?
İçerik - Teknik
● Demo Hello World Uygulaması
● Nasıl çalıştı ?
● React Native Uygulamalarının Genel Yapıtaşları
● Debug
● Test
● Anket Uygulaması
● Kişisel deneyimlerim - Önerilerim
İhtiyaç Ne ?
● En kısa zamanda
● En düşük maliyet ile
● En optimum kişi ile
● Her platforma ürün geliştirmek
Neyi Hedefliyor ?
● HTML (JSX)
● CSS
● JS ile native uygulamalar yazdırmak
● “Web Geliştirmeyi” “Native ortama” taşımak
Alternatifler
● Xamarin
● NativeScript
● PhoneGap
● Ionic Framework
Farkı Ne ?
● Native uygulama
● Javascript
● Büyük ve aktif topluluk
● Hot Reloading
● Chrome Inspector
● Geliştirme verimliliği çok yüksek
Uygulamama entegre edebilir miyim ?
● Evet
● Embed edilebiliyor
○ Walmart Electrode
Kimler Kullanıyor ?
● Facebook
● AirBnb
● WallMart
● Bloomberg
● Discord
● EatWithAva
● …….
Demo - Hello World
● Projenin Genel Yapısı
● Android kısmı
● iOS kısmı
Nasıl Çalıştı ?
Nasıl Çalıştı - 2
RN Uygulamaların Genel Yapıtaşları - 1
● React
● UI komponentleri
● Sistem Apileri
● Özel/3.Parti komponentler
● Stil (Styling)
○ CSS
○ Flexbox
RN Uygulamaların Genel Yapıtaşları - 2
● Veri Yönetimi
○ Redux
○ Mobx
● Navigasyon
○ React Navigation
○ React Native Navigation (Wix)
● Debugging
● Test ( Jest Framework )
React
● UI Komponent kütüphanesi
● Javascript tabanlı
● Shadow DOM
● Batch update
UI Komponentler
● View
● Button
● Text
● FlatList
● TextInput
● TouchableOpacity
● ….
Sistem Apileri
● AppState
● NetInfo
● Alert
● Keyboard
● Dimensions
● Linking
● Share
● Vibration
● …..
Özel / 3.Parti Komponentler
● UI komponent
● Yardımcı ( utility ) sınıflar/fonksiyonlar
● Sadece Javascript
● Javasript + Native
○ Native olanlar için linkleme yapmak gerekebiliyor
● NPM alt yapısından ekleniyor
● https://js.coach/react-native
Stil (Styling)
● CSS Benzeri yapı
○ CSS’in alt kümesi denebilir
● Flexbox
○ Web Flexbox’un alt kümesi
Veri Yönetimi (State)
● Redux
○ redux-thunk
■ Async işlemler yapmamızı sağlıyor
○ redux-saga
■ Paralelde işlemler yapmamızı sağlıyor
○ redux-observable
● MobX
Navigasyon
● React Navigation
○ Javascript tabanlı
○ En çok önerilen kütüphane
● React Native Navigation (Wix)
○ Native komponent
Debugging
● UI Inspector
● Chrome Inspector
● console.log
○ prod ortamında yer almamalı
● Loggly vb entegrasyonlar
Test ( Jest Framework )
● Hazır şekilde geliyor
● Javascript sınıfları test edilebiliyor
● React komponentleri test edilebiliyor
● Real device testi yapılamıyor
○ Uygulamayı aç, butona bas testi yok
Anket Uygulaması
Kişisel Deneyimlerim - Önerilerim
● Starter projeler ile başlamak çok hızlandırıyor
● React kütüphanesi ve Redux iyi anlayınca işler kolaylaşıyor
● Redux ve Redux-Saga ikilisi favorim
● Performans için önce Android tarafını kontrol etmek faydalı
● Animasyon için native driver kullanın
● Navigasyon için native çözüm daha performanslı
○ React Native Navigation
● Performansı etkileyen ana etken native ve JS arasındaki iletişim
● Değişken cihaz boyutları için yapılabilecekler
○ Responsive şekilde font boyutlarını değiştirmek
○ Metni değiştirmek
● 3.parti kütüphane buglı ise ve bug çok küçük ise
○ Fork edip bugı fixleyerek kullanabilirsiniz
○ Fork edip fixlediğiniz kısım için pull request talep ederek kütüphaneye katkı sağlayabilirsiniz
● Loglama için loggly ya da benzeri bir alt yapı kullanmak çok faydalı oluyor
Kişisel Deneyimlerim - Önerilerim - 2
● Text, View, Input vb en sık kullanılan komponentleri için
○ ya NativeBase benzeri bir kütüphane ile kullanın
○ ya da Temel komponentleri kapsayan komponentler kullanın
■ stil değiştirmesi kolay oluyor
● react-native-config ile environment bazlı ayarlamalar yapabilirsiniz
Sorular
Teşekkürler !
Email : tayfun @ mol42.com
Web : www.mol42.com - www.mol42.co.uk

Más contenido relacionado

Similar a React native 101

Symfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari Oluşturma
Symfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari OluşturmaSymfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari Oluşturma
Symfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari OluşturmaHüseyin Mert
 
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013Hüseyin Mert
 
JUnit ve Docker yardimiyla kolay entegrasyon testleri
JUnit ve Docker yardimiyla kolay entegrasyon testleriJUnit ve Docker yardimiyla kolay entegrasyon testleri
JUnit ve Docker yardimiyla kolay entegrasyon testleriİlkin Balkanay
 
React.js Web Programlama
React.js Web ProgramlamaReact.js Web Programlama
React.js Web ProgramlamaCihan Özhan
 
WordPress Hız Optimizasyonu
WordPress Hız OptimizasyonuWordPress Hız Optimizasyonu
WordPress Hız OptimizasyonuMustafa UYSAL
 
Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri Ömer ÖZKAN
 
Spring application framework
Spring application frameworkSpring application framework
Spring application frameworkKenan Sevindik
 
Gradle ile Proje Insası
Gradle ile Proje InsasıGradle ile Proje Insası
Gradle ile Proje InsasıÖmer ÖZKAN
 
Web İçin Teknoloji Geliştirmek
Web İçin Teknoloji GeliştirmekWeb İçin Teknoloji Geliştirmek
Web İçin Teknoloji GeliştirmekVolkan Özçelik
 
Meteor.js Hakkinda
Meteor.js HakkindaMeteor.js Hakkinda
Meteor.js HakkindaUğur Oruc
 
Go Programlama Dili - Seminer
Go Programlama Dili - SeminerGo Programlama Dili - Seminer
Go Programlama Dili - SeminerCihan Özhan
 
Programlama odev-sitesi
Programlama odev-sitesiProgramlama odev-sitesi
Programlama odev-sitesisersld96
 
Angular Web Programlama
Angular Web ProgramlamaAngular Web Programlama
Angular Web ProgramlamaCihan Özhan
 
WP REST API ve WordPress Ekosisteminin Geleceği
WP REST API ve WordPress Ekosisteminin GeleceğiWP REST API ve WordPress Ekosisteminin Geleceği
WP REST API ve WordPress Ekosisteminin GeleceğiBora Yalcin
 
Yazılım ve-yazılımcı-nedir- net-ve-net-platformu
Yazılım ve-yazılımcı-nedir- net-ve-net-platformuYazılım ve-yazılımcı-nedir- net-ve-net-platformu
Yazılım ve-yazılımcı-nedir- net-ve-net-platformuAhmet S.
 
Vhdl odev-sitesi
Vhdl odev-sitesiVhdl odev-sitesi
Vhdl odev-sitesisersld80
 

Similar a React native 101 (20)

Symfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari Oluşturma
Symfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari OluşturmaSymfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari Oluşturma
Symfony2 ve Doctrine ile PostgreSQL'i Kullanarak Performanslı Mimari Oluşturma
 
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
 
JUnit ve Docker yardimiyla kolay entegrasyon testleri
JUnit ve Docker yardimiyla kolay entegrasyon testleriJUnit ve Docker yardimiyla kolay entegrasyon testleri
JUnit ve Docker yardimiyla kolay entegrasyon testleri
 
React.js Web Programlama
React.js Web ProgramlamaReact.js Web Programlama
React.js Web Programlama
 
Çevik testler
Çevik testlerÇevik testler
Çevik testler
 
WordPress Hız Optimizasyonu
WordPress Hız OptimizasyonuWordPress Hız Optimizasyonu
WordPress Hız Optimizasyonu
 
Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri
 
Spring application framework
Spring application frameworkSpring application framework
Spring application framework
 
Gradle ile Proje Insası
Gradle ile Proje InsasıGradle ile Proje Insası
Gradle ile Proje Insası
 
Web İçin Teknoloji Geliştirmek
Web İçin Teknoloji GeliştirmekWeb İçin Teknoloji Geliştirmek
Web İçin Teknoloji Geliştirmek
 
Meteor.js Hakkinda
Meteor.js HakkindaMeteor.js Hakkinda
Meteor.js Hakkinda
 
Selenium
SeleniumSelenium
Selenium
 
Web Programlama
Web ProgramlamaWeb Programlama
Web Programlama
 
Go Programlama Dili - Seminer
Go Programlama Dili - SeminerGo Programlama Dili - Seminer
Go Programlama Dili - Seminer
 
Zed attack-proxy-web
Zed attack-proxy-webZed attack-proxy-web
Zed attack-proxy-web
 
Programlama odev-sitesi
Programlama odev-sitesiProgramlama odev-sitesi
Programlama odev-sitesi
 
Angular Web Programlama
Angular Web ProgramlamaAngular Web Programlama
Angular Web Programlama
 
WP REST API ve WordPress Ekosisteminin Geleceği
WP REST API ve WordPress Ekosisteminin GeleceğiWP REST API ve WordPress Ekosisteminin Geleceği
WP REST API ve WordPress Ekosisteminin Geleceği
 
Yazılım ve-yazılımcı-nedir- net-ve-net-platformu
Yazılım ve-yazılımcı-nedir- net-ve-net-platformuYazılım ve-yazılımcı-nedir- net-ve-net-platformu
Yazılım ve-yazılımcı-nedir- net-ve-net-platformu
 
Vhdl odev-sitesi
Vhdl odev-sitesiVhdl odev-sitesi
Vhdl odev-sitesi
 

React native 101

  • 1. React Native 101 Tayfun YÜĞRÜK mol42.com
  • 2. Ben Kimim ? ● Project Consultantcy / Full Stack Software Architecht ● Mol42 Technologies ● Başlangıç ○ 2004 albumyap.com (UI + Backend) ○ 2005 yuzikizim.com ( UI + Backend + C++) ● Şimdi ○ Mol42 Technologies LTD ■ EatWithAva Frontend Team Lead ■ Broadage ( Oley.com, iddaa.com ) ■ Hatay Büyükşehir Belediyesi ■ ….
  • 3. İçerik - Genel ● İhtiyaç ne ? ● Neyi hedefliyor ? ● Alternatifler ● Farkı Ne ? ● Uygulamama entegre edebilir miyim ? ● Kimler Kullanıyor ?
  • 4. İçerik - Teknik ● Demo Hello World Uygulaması ● Nasıl çalıştı ? ● React Native Uygulamalarının Genel Yapıtaşları ● Debug ● Test ● Anket Uygulaması ● Kişisel deneyimlerim - Önerilerim
  • 5. İhtiyaç Ne ? ● En kısa zamanda ● En düşük maliyet ile ● En optimum kişi ile ● Her platforma ürün geliştirmek
  • 6. Neyi Hedefliyor ? ● HTML (JSX) ● CSS ● JS ile native uygulamalar yazdırmak ● “Web Geliştirmeyi” “Native ortama” taşımak
  • 7. Alternatifler ● Xamarin ● NativeScript ● PhoneGap ● Ionic Framework
  • 8. Farkı Ne ? ● Native uygulama ● Javascript ● Büyük ve aktif topluluk ● Hot Reloading ● Chrome Inspector ● Geliştirme verimliliği çok yüksek
  • 9. Uygulamama entegre edebilir miyim ? ● Evet ● Embed edilebiliyor ○ Walmart Electrode
  • 10. Kimler Kullanıyor ? ● Facebook ● AirBnb ● WallMart ● Bloomberg ● Discord ● EatWithAva ● …….
  • 11. Demo - Hello World ● Projenin Genel Yapısı ● Android kısmı ● iOS kısmı
  • 14. RN Uygulamaların Genel Yapıtaşları - 1 ● React ● UI komponentleri ● Sistem Apileri ● Özel/3.Parti komponentler ● Stil (Styling) ○ CSS ○ Flexbox
  • 15. RN Uygulamaların Genel Yapıtaşları - 2 ● Veri Yönetimi ○ Redux ○ Mobx ● Navigasyon ○ React Navigation ○ React Native Navigation (Wix) ● Debugging ● Test ( Jest Framework )
  • 16. React ● UI Komponent kütüphanesi ● Javascript tabanlı ● Shadow DOM ● Batch update
  • 17. UI Komponentler ● View ● Button ● Text ● FlatList ● TextInput ● TouchableOpacity ● ….
  • 18. Sistem Apileri ● AppState ● NetInfo ● Alert ● Keyboard ● Dimensions ● Linking ● Share ● Vibration ● …..
  • 19. Özel / 3.Parti Komponentler ● UI komponent ● Yardımcı ( utility ) sınıflar/fonksiyonlar ● Sadece Javascript ● Javasript + Native ○ Native olanlar için linkleme yapmak gerekebiliyor ● NPM alt yapısından ekleniyor ● https://js.coach/react-native
  • 20. Stil (Styling) ● CSS Benzeri yapı ○ CSS’in alt kümesi denebilir ● Flexbox ○ Web Flexbox’un alt kümesi
  • 21. Veri Yönetimi (State) ● Redux ○ redux-thunk ■ Async işlemler yapmamızı sağlıyor ○ redux-saga ■ Paralelde işlemler yapmamızı sağlıyor ○ redux-observable ● MobX
  • 22. Navigasyon ● React Navigation ○ Javascript tabanlı ○ En çok önerilen kütüphane ● React Native Navigation (Wix) ○ Native komponent
  • 23. Debugging ● UI Inspector ● Chrome Inspector ● console.log ○ prod ortamında yer almamalı ● Loggly vb entegrasyonlar
  • 24. Test ( Jest Framework ) ● Hazır şekilde geliyor ● Javascript sınıfları test edilebiliyor ● React komponentleri test edilebiliyor ● Real device testi yapılamıyor ○ Uygulamayı aç, butona bas testi yok
  • 26. Kişisel Deneyimlerim - Önerilerim ● Starter projeler ile başlamak çok hızlandırıyor ● React kütüphanesi ve Redux iyi anlayınca işler kolaylaşıyor ● Redux ve Redux-Saga ikilisi favorim ● Performans için önce Android tarafını kontrol etmek faydalı ● Animasyon için native driver kullanın ● Navigasyon için native çözüm daha performanslı ○ React Native Navigation ● Performansı etkileyen ana etken native ve JS arasındaki iletişim ● Değişken cihaz boyutları için yapılabilecekler ○ Responsive şekilde font boyutlarını değiştirmek ○ Metni değiştirmek ● 3.parti kütüphane buglı ise ve bug çok küçük ise ○ Fork edip bugı fixleyerek kullanabilirsiniz ○ Fork edip fixlediğiniz kısım için pull request talep ederek kütüphaneye katkı sağlayabilirsiniz ● Loglama için loggly ya da benzeri bir alt yapı kullanmak çok faydalı oluyor
  • 27. Kişisel Deneyimlerim - Önerilerim - 2 ● Text, View, Input vb en sık kullanılan komponentleri için ○ ya NativeBase benzeri bir kütüphane ile kullanın ○ ya da Temel komponentleri kapsayan komponentler kullanın ■ stil değiştirmesi kolay oluyor ● react-native-config ile environment bazlı ayarlamalar yapabilirsiniz
  • 29. Teşekkürler ! Email : tayfun @ mol42.com Web : www.mol42.com - www.mol42.co.uk