React ile Cross Platform Düşünmek

Web ve mobil cihazlar için daha az efor ile ürün geliştirmek

Eğer bir ürününüz varsa tüm platformlardan erişilebilir olmak istemeniz oldukça doğru bir düşüncedir. Peki nasıl ? Web için farklı teknolojiler, mobilde android, ios ve hatta pastada daha az payı olan windows mobile platformları için ayrı ayrı teknolojiler ile geliştirme yapmak gerekiyorken nasıl olacakta daha az efor sarfederek tüm platformlara ürün geliştireceğiz ?

Bu soruyu bende zaman zaman kendime soruyorum. Soru beni ürünün ilk tasarlanma aşamasına götürüyor devamlı. Daha önceki yazılarımda teknoloji seçiminin önemine vurgu yapmaya çalışmıştım. Siz eğer mevcut bir ürünü yeniden geliştirmeye karar verdiyseniz teknolojiyi oldukça esnek ve dayanıklı bir yapı üzerine inşaa etmelisiniz.

Günümüzde artık tüm ürünler ortak data yapısı ile haberleşmeyi tercih ediyorlar. Bunun bir çok faydası var. Yarın biz artık ön yüzü x teknolojisi ile yeniden yazıyoruz dediğinizde değişecek tek şey ön yüz teknolojiniz olur. Asıl mimari devamlı ayakta durmaya devam eder. Tüm datayı micro servisler üzerinden sunarak daha esnek ve basit bir yapıyı tercih etmek bu nedenle oldukça mantıklıdır.

Ben bu yazımda tek bir dil ile nasıl kendi ürünlerimi cross platform haline getirebildiğimden bahsedeceğim.

Servisler, servisler ve servisler

Micro Service düşüncesini büyük ölçüde benimsemeye başladık. Benim bir frontend geliştiricisi olarak en sevdiğim şey uygulamanın ihtiyacım olan her şey için bir servisi olmasıdır. Böylece ön yüzde istediğim gibi datayı işleyerek son kullanıcıya eşsiz bir deneyim yaşatabilirim. Micro Service’ler Monolithic mimarilere göre çok daha iyi yönetilebilir, ekip halinde geliştirilebilir ve istenildiği gibi scale edilebilir mimarilerdir. Bizim taraftaki en büyük artısı frontend teknolojileri ile backend teknolojilerini birbirinden gerçek anlamda ayırmaktır.

Ön tarafta hız ve performans açısından benim favorim React! Son bir kaç yıldır kendisi ile çok güzel işler yapıyoruz. React ve EcmaScript’in yenilikleri sayesinde daha hızlı dinamik web uygulamaları üretebiliyoruz. Data storage için ise Redux kullanarak datayı istediğim gibi manipule edebiliyorum. Artık tüm html’i tabiri caiz ise bodozlama render eden mekanizmalar yerini daha ince detayları düşünen nazik araçlara bıraktı.

Bu araçlar sayesinde biz çok daha hızlı, çok daha performanslı ve kullanıcı deneyimi açısından iyileştirilmiş web uygulamaları geliştirebiliyoruz. Bu nedenle klasik frontend geliştiricinin iş tanmı bir miktar değişti diyebilirim.

Eskiden html, css ve jquery ile web sayfaları geliştirenler artık tüm uygulama mantığını yöneten uygulamanın önemli kısımlarını devralan geliştiriciler olarak evrim geçiriyorlar. Maalesef bu evrimi tamamlayamayanlar için gelecek pek parlak değil üzgünüm. ☹️

Eskiden her şeyi tek dosya içerisine yazanlar şimdilerde daha clean kod yazmaya, yazdığı kodu lint etmeye ve test driven geliştirmeye başlıyor. Bu durumdan ben her iki tarafında frontend-backend memnun olduğunu düşünüyorum. Backend geliştirici olması gerektiği gibi işin daha çok data tarafı ile ilgilenerek servis geliştiriyor frontend geliştirici servisleri kullanarak tüm uygulamayı tasarlayıp geliştiriyor.

Neden React Tercih Ediyorum?

Teknoloji fanatikliğine karşı biri olarak ön yüzde React’ın oldukça başarılı olduğunu deneyimlediğim için bir süredir React benim view katmanındaki en iyi yol arkadaşım. Aynı zamanda React component’ları cross platform geliştirilebiliyor. Yani web için geliştirdiğiniz bir component’ı isterseniz React Native ile kullanmak üzere mobil uygulamalarda kullanabiliyorsunuz.

Electron ve React kullanarak aynı zamanda cross platform native desktop app’ler geliştirebiliyoruz.

Bu benim için oldukça önemli çünkü bir ürün geliştiriyorsam ve micro servislere sahipsem tek bir dil ve teknoloji ile tüm platformlar için uygulama geliştirebilirim. Bu sayede daha az efor ile web uygulamam için geliştirdiğim reusable component’larımı mobil uygulamam içinde kullanarak belki bir kaç stil değişikliği ile hızlıca geliştirme yapabilirim.

Neden JavaScript ?

JavaScript son yıllarda gerçekten iyi yönde gelişmelere sahne oluyor. ES Proposal’larını takip edenler bilir gerçekten güzel fikirler hayata geçiyor. Bu sayede bizlerde JavaScript’i gerçek bir dil olarak pure şekilde kullanabiliyoruz.

Tek bir dil ile bütün uygulamayı hatta tüm platformlara kod yazabilmek ilk olarak zamandan tasarruf demektir. Tek bir dil olduğu için ortak kod paylaşımları yapılabilir. Tüm bunlar tek bir geliştiricinin ürünün tüm platformlarına kod yazabilmesi demek kısacası. Native tarafta üretilen çıktı gerçek bir objective-c veya java kodu olduğu için benim React Native ile JavaScript yazarak tüm platformlar için kod yazmam oldukça doğru bir seçim sanırım.

Böylece benzer stack’leri kullandığım için her platformda konuya hakim olabiliyorum. Eğer istersem Electron ile yine cross platform desktop uygulamalar geliştirebilirim.

Daha basit…

Bir native mobil uygulama yapmak için objective-c, java gibi öğrenmesi daha zor ve geliştirmesi daha maliyetli diller kullanırsınız. React bize basit bir yapı sunuyor ve tek bir dil yapısı ile yazdığımız kodu objective-c, java gibi dillere compile ederek gerçek native bir uygulama yapmamızı sağlıyor. Bu durumda neden React ? sorusuna daha net yanıt verebildiğimi düşünüyorum. Bana göre React’ın diğer teknolojilerden ayrıldığı noktalardan biri cross platform için sunduğu basitlik!

Daha hızlı..

Hız para kazandıran bir ürün için oldukça önemli bir kavram. Amazon hız konusunda oldukça başarılı bulduğum ürünlere sahip bir şirket. Yaptıkları bir araştırmaya göre her 100ms gecikmenin satışlara %1'lik bir etkisi olduğunu tespit etmişler. Yani yavaşlık = para kaybetmek demek.

Müşteriler beklemekten nefret ederler hatta bu bekleme süreleri ms olsa dahi. O nedenle ürününüzün oldukça hızlı olması gerekiyor. React bu konuda oldukça başarılı bir render mekanizmasına sahip. Sadece React değil Vue gibi çok sıcak baktığım teknolojiler söz konusu. Seçim size kalmış ancak her ne yaparsanız yapın hızlı olmalısınız bu kaçınılmaz maalesef. Burada bazı pratiklerden faydalanmak gerekebiliyor bunlara şu yazımdan ulaşabilirsiniz.

Özetle…

Teknoloji seçimi önemli bir kriter. Doğru teknolojileri bir araya getirerek daha az efor ile birden fazla platforma kod yazabilirsiniz. Ancak bu süreci doğru yönetmek oldukça önemli.

Her zaman söylediğim gibi yeni ve modern teknolojiler ile ürün geliştirmek klasik yöntemlere göre biraz zaman gerektirir. Ancak bu harcadığınız zamana değecektir. Her biri kendi alanında başarısını kanıtlamış teknolojileri bir araya getirmek ve ortaya cross platform bir yapı çıkarmak sabır gerektiren bir süreç.

Artık frontend bir zamanlar bildiğiniz frontend gibi değil. Bunu anlamaya başladıktan sonra çok daha hızlı, güvenli ve kullanıcıların kullanmaktan hoşlanacağı ürünler ortaya çıkarabilirsiniz.

Sevgiler.