Uber Eats’in WebView’e Geçiş Sürecinde Kullanılan Yazılım Yöntemleri
Uber Eats'in WebView'e Geçiş Sürecinde: Uber Eats'in WebView'e Geçiş Sürecinde Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, InfoQ Ana Sayfası Sunumlar Uber Eats Akışlarını Webview Mobile'a Taşıma Uber Eats Akışlarını Webview'e…
Uber Eats'in WebView'e Geçiş Sürecinde: Uber Eats'in WebView'e Geçiş Sürecinde
Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, InfoQ Ana Sayfası Sunumlar Uber Eats Akışlarını Webview Mobile’a Taşıma Uber Eats Akışlarını Webview’e Taşıma Okuma listesi Sunum Hızını Görüntüle: İndir 42:55 Özet Nick DiStefano, Uber Eats’in geleneksel yerel uygulama ekranlarından yerel odaklı, tek sayfalı bir WebView mimarisine nasıl geçiş yaptığını paylaşıyor.
Uber Eats'in WebView'e Geçiş Sürecinde nedir, nelere dikkat edilir
Uber Eats'in WebView'e Geçiş Sürecinde ile ilgili temel noktaları aşağıda adım adım özetliyoruz.
Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Yerel sürüm döngülerini atlamak, platformlar arası durumu yönetmek, genel yerel web mesaj köprüleri oluşturmak ve ölçümleri bozmadan büyük ölçekli kullanıcı arayüzü geçişlerini gerçekleştirmek isteyen mühendislik liderleri ve yazılım mimarları için temel stratejileri açıklıyor. Biyografi Nick DiStefano Konferans hakkında Yazılım dünyayı değiştiriyor.
Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, QCon San Francisco, geliştirici topluluğunda bilginin ve yeniliğin yayılmasını kolaylaştırarak yazılım geliştirmeyi güçlendirir. Uygulayıcı odaklı bir konferans olan QCon, ekiplerindeki yeniliği etkileyen teknik ekip liderleri, mimarlar, mühendislik direktörleri ve proje yöneticileri için tasarlanmıştır. Metnin Metni Nick DiStefano: Benim adım Nick DiStefano.
Tasarım ve teknik ayrıntılar
Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Ben bu değişimi yönlendiren şeylerim, çünkü bu çok büyük bir değişim. Denediğimiz şeylerden bazıları nelerdi? Temel zorluk, bizi bu adımı atmaya gerçekten iten yön, ki bu en azından bizim için oldukça köklü bir değişiklikti ve etrafında pek çok tartışma vardı. Daha sonra bunu yapmak istediğimize karar verdikten sonra gerçekten neye ihtiyacımız olduğu hakkında konuşacağız. bunu gerçekleştirmek için mi?
Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Yığın neye benziyor? Temel bileşenler nelerdir? Daha sonra temelleri oluşturduktan sonra, bu yerel uygulamaları geliştiriyoruz, Apple’ın ve Google’ın sanal alanlarına giriyoruz, üzerinde çalışmamız gereken uç durumlar nelerdir? Daha karmaşık şeyler daha büyük ölçekte ortaya çıkacak.
Uber Eats'in WebView'e Geçiş Sürecinde kapsamında, Sonra tekrar konuşmak istiyorum, bir prototip oluşturmak bir şeydir, teknoloji yığınına sahip olmak bir şeydir, katılıma sahip olmak bir şeydir, ancak yine de geçişi yapmanız gerekir. Bunu çözmenin kapsamı nedir? Çok büyük boyutlardaki şeylerden bahsediyoruz. Peki sınırlamalar nelerdir? Veya artık bir WebView yığınında olduğumuzu söylediğimizde bu ne anlama geliyor?
Bugünden bakınca ne kadar güvenilir?
Yalnızca bir Web Görünümü görüntülemekten farkı nedir? Çünkü yaptığımız şey aslında tamamen yalnızca web’e geçmek değil. Bu yerel odaklı, tek sayfalı Web Görünümü mimarisidir. Bunun ne anlama geldiğine daha fazla değineceğiz. Daha sonra bunu ne zaman yapmanız gerektiği, sınırlamaların neler olduğu veya bunun işe yaraması için gerçekten yaptığımız şeylerin neler olduğu hakkında konuşacağım.
Çünkü geleneksel olarak, bu çapraz yığın olayını mobil uygulamalarla yapmaya çalışmak, insanların peşinden koştuğu kutsal bir kâse olmuştur ve farklı platformlar arası yığınlarda bu sorunlar her zaman vardır. Bunun iyi bir fikir olduğunu düşündüğümüzde ve bunu başarılı kılmak için ne tür bir altyapıya sahip olmanız gerektiğine bakacağız. Çok oldu Başarılıyız ve geldiğimiz noktadan memnunuz.
Başlangıç Durumu ve Motivasyonlar İlk olarak, onu başlangıç durumuna geri götürmek. Bu yerel uygulama ekranlarımız vardı ve bunlar geleneksel yerel yığınlar, yerel öncelikli tasarım kullanılarak oluşturuldu ve yüzlerce ekrandan, yüzlerce geliştiriciden bahsediyordu. Analitikler de bunun büyük bir parçası; günlüğe kaydedilen binlerce ölçümden bahsediyoruz.
Okuyucu için pratik anlamı
Ayrıca, alışveriş dönüşüm hunisinin farklı bölümlerine ilişkin temel performans göstergelerini ölçmeye çalışmak için bunun üzerine inşa edilmiş yüzlerce ölçüm vardır. Bütün bu karmaşıklık var, yıllardır var. Bu konuda çalışan yüzlerce insan var. Temel sorular nelerdir veya neden bu konuda bazı değişiklikler yapmak istiyoruz?
Ana sayfa akışından tüm bu farklı arama sayfalarına ve tüm alışveriş uygulamasına giden çok karmaşık kullanıcı arayüzü geçişlerinden, zamanlamasından ve akışlarından bahsediyoruz. Mağaza sayfanız var, ödemeniz var. Bunların hepsini bir arada taşıyarak başlamadık, daha karmaşık feed’lerden biriyle başladık. Bu konu ve genel geçiş stratejisi hakkında daha sonra daha fazla konuşacağız.
Her zaman ortaya çıkan en büyük şeylerden biri, sadece bizim değil, sanırım birçok şirketin yerel kalkınma konusunda hayal kırıklığına uğramasının nedenlerinden biri, yığının tam mülkiyetine sahip olmamanızdır.
Her zaman bir şeyleri kontrol edebilmek, değişiklik yapabilmek, hızlı bir şekilde deney yapabilmek istersiniz, ancak bu ikili dosyaları Apple’a ve Google Play Store’a gönderiyorsunuz, istediğiniz kontrole sahip değilsiniz. Apple’ın ve Google’ın inceleme süreçlerine bağlı kalmadan nasıl kolayca değişiklik yapabiliriz?
Bir web sitesi oluştururken insanların alıştığı kadar hızlı bir şekilde veya tamamen arka uç odaklı bir şey oluştururken alıştıkları kadar hızlı yinelemeyi nasıl yapabiliriz? Bu yerel sürüm döngüsü akışına sahibiz ve bugün bile bir ton enerji harcanıyor, Google ve Apple ile olan bu ilişkiyi nasıl yönetiyorsunuz? Bunun bizim yaptığımız bir değişiklik olduğunu, kurallarınıza nasıl uyduğunu onlara nasıl bildirirsiniz?
Gönderim yapmamız gereken doğru tempo nedir? Her hafta mı? Her iki haftada bir mi? Başlangıçta Apple ve Google tarafından bağımsız geliştiriciler için oluşturulan bu döngüyü yönetmeye yardımcı olacak program yöneticileri ve araç sağlayıcılardan oluşan tam bir ekip var. Bu ölçeğe ulaştığınızda, uygulama platformlarıyla doğrudan çalışmanız gereken sorunlar ve karmaşıklıklar ortaya çıkar.
Temel motivasyon sadece daha hızlı teslimat yapmaktır. Yöneticilerinize geri dönüyorsunuz ve diyorsunuz ki, Apple tarafından geciktirildik, Google tarafından geciktirildik. İnsanlar bundan rahatsız oluyor. Soru tekrar tekrar ortaya çıkıyor: nasıl daha hızlı gönderim yaparız? Kontrolü nasıl yeniden kazanırız? Bu yapılandırılabilirliği nasıl elde ederiz? Elbette bu yerel SDK’ları oluşturmamızın bir nedeni var.
Kullanıcı arayüzü net. Geçiş kendimi temiz hissediyorum. Apple ve Google sizi gerçekten bunu yapmaya zorluyor ve kullanıcı kalitesinden ödün vermek istemiyorsunuz. Uzun bir beğenme geleneği var, sadece Web Görünümünü oraya atın. Bir web siteniz var, uygulamaya koyun. İnsanlar, kullanıcı deneyiminin net hissetmediğini fark ediyor. Kısayollar kullanılmış gibi görünüyor.
Bu tuhaf son durumlarla karşılaşırsınız, kullanıcı arayüzü ekran dışındadır. Web Görünümleri tarihsel olarak etraflarında çok kötü bir atmosfere sahipti. İnsanların daha hızlı deney yapabilmek ve gerçekten umursadığımız şeyin ne olduğunu söyleyebilmek için denediği pek çok farklı şey var. Bunun arka uca taşıyabileceğimiz parçası nedir? Bir sunum katmanı oluşturmak istediğimizi söylemek için sürekli bir baskı var.
Arka uç için sunum, tüm kullanıcı arayüzü mantığını tam kontrole sahip olduğumuz arka uçta yapın ve ardından uygulamaya gönderin. Uygulama sadece hafif bir kullanıcı arayüzü parçası yapacak. Belki sadece görüntülenecektir. Sonra neyi değiştirmek istediğinize bağlı olarak, aslında şunu değiştirmek istiyorsunuz, şu şeyi değiştirmek istiyorsunuz.
Üzerinde çok zaman harcadığımız sunucu odaklı bir kullanıcı arayüzü konsepti var. Pek çok şirket, düzen bileşenlerini oluşturma konusunda başarılı oldu ve siz, bu Lego bloklarına sahip olduğunuzu ve uygulamanın bunları tüm bu farklı şekillerde düzenleyebileceğini söylüyorsunuz. Arka ucun bir tür yapılandırma, bir tür spesifikasyon bulması gerekiyor ve ardından bunu uygulamaya gönderebilirsiniz.
Bu gerçekten iyi çalışıyorsa gerçekten katı bir tasarım diliniz var. Tasarımcılar, bu yapı taşlarını bu sandbox’ta kullanabileceğinizi söyleyebilirsiniz. Pek çok farklı kısıtlamanın ne kadar agresif olduğuna bağlı olarak, daha fazla değişikliği daha hızlı bir şekilde göndermek istediğinizi göreceksiniz ve bu, yerel geliştiriciye daha yakın olmanıza neden oluyor.
Öte yandan, bu daha sınırlı kullanıcı arayüzü kısıtlamalarıyla çalışma konusunda rahatsanız, çok iyi çalışabilir. Bazı kullanım örneklerinde diğerlerinden daha fazla başarı elde ettik. Web Görünümleri hakkında daha fazla düşünmeye başladığımız yerlerden biri, SDUI katmanına daha fazla karmaşıklık çektikçe, SDUI’nizin daha çok HTML’ye benzemeye başlamasıdır. Düzen kısıtlamaları yazıyorsunuz. Arayı kapatıyorsun.
Bizim için bu Go’da yazılmıştır. Şöyle olmaya başlıyor, bu sadece HTML değil mi? Bizi buna bir adım daha yaklaştırmak için ne gerekir? Web topluluğunda yıllardır var olana giderek daha da yaklaşan bu DSL’yi gerçekten yeniden mi icat ediyoruz? Temel Zorluk Bizi gerçekten zirveye iten başka bir motivasyon daha var, çünkü bu yine tartışmalı. Yerel katmanda yerleşik tüm bu yığınlar var.
Etrafında çok büyük bir kültür var. Bizi bu konuda deneme yapmaya gerçekten zorlayan başka bir kullanım durumumuz daha var; o da, yalnızca bu yerel uygulamalara sahip olmamamızdır. Android uygulamamız var. İOS uygulamamız var. Ayrıca ubereats.com’umuz ve Rider’ımız var uygulama. Yıllar boyunca, Rider uygulamasında, bahsettiğim WebView olayını yaptık, burada ubereats.com’u yan tarafa yüklediniz.
Bir nevi işe yarıyor ve sipariş verebilirsiniz, ancak gerçekte o kadar canlı bir his vermiyor. Herkes yerel geliştirme ekiplerine gelecek ve Rides uygulamasındaki Eats deneyiminin neden Eats uygulamasındaki kadar iyi olmadığını soracaklar. Sanki devasa bir yerel uygulama gibi. Bütün bunları ithal etmeniz gerekiyor. İkili boyut çok büyük olacak. Orada olması gereken çok şey var.
Yine, işlerin çoğu hâlâ yerel uygulamalarda olduğundan herkes yerel uygulamaları seviyor. Tüm özelliklerin gittiği yer burasıdır. Sonra sanki ubereats.com’umuz var, bu özelliği alamadı. Rider uygulaması deneyimimiz var, bu özelliği alamadı. Instacart gibi ortaklarla bu entegrasyonlarımız var ve onlar da bu web yığınını yeni alıyorlar. Zaten inşa ettiğimiz bir gölge ağ yığınımız var.
Android ve iOS için bir kez olmak üzere iki kez geliştirmiyoruz. Ayrıca bir web işimiz var ve bu, işin daha büyük ve büyümeye yönelik kısımlarını yönlendiriyor. Bu SDUI’ya sahibiz ve tüm bu yerel ekosistemi onun etrafında inşa ettik. Daha sonra yerel için oluşturulmuş SDUI’yi almaya başlarsınız ve onu web’e koymaya çalışırsınız.
Şimdi bu Go-yazılı DSL’i alıyoruz ve onu HTML’ye aktarmaya çalışıyoruz ve bu sadece geriye doğru geliyor. Bizi gerçekten kanala itti Bunun yapılamayacağına dair temel varsayımlara karşı çıkın ve onu farklı bileşenlere ayırın ve şunu söylemeye çalışın: eğer işe yaradıysa, nasıl işe yarardı veya oraya ulaşmak nasıl mümkün olabilir?
Temel Bileşenleri Yeniden İnşa Etmek Bununla başlamak için, bunun içinde yer alan parçaların neler olduğunu düşünmeye başlamalıyız. Veya ubereats.com’u Rides uygulamasına veya yerel bir uygulamaya soktuğumda neden çalışmıyor veya neden bizim istediğimiz gibi hissettirmiyor? Yerel yığına geçmeden önce, web sitesi yığınından biraz bahsetmek istiyorum.
Bununla ilgili birkaç temel kısıtlama veya gerçekten başlamak istediğimiz şeyler var ve yığında hala katı kısıtlamalar var. Birincisi, sunucu tarafı işlemeye sahip olmamız. Bu, bir mağaza sayfasının arama motoru optimizasyonu açısından gerçekten önemlidir, ancak aynı zamanda gecikme açısından da gerçekten hızlı bir şekilde yüklenmek istiyoruz.
Daha sonra, daha büyük, daha karmaşık WebView yığınlarında meydana gelme eğiliminde olan şeyler, yüzlerce geliştiriciden, pek çok ekipten bahsediyoruz ve onların teşviklerinin hepsi sadece kendi özelliklerinin çalışmasını sağlamak için. Küçük JavaScript parçaları burada birikiyor, orada birikiyor, karmaşıklık artıyor, istemci tarafı durumu büyüyor.
Çok az JavaScript’e, mümkün olduğu kadar az sahip olma yönünde güçlü bir önyargımız var. Ayrıca hala Go arka ucu var ve artık kendi DSL’imizi oluşturmaya çalışmak yerine bu açık kaynak kodlu l’yi kullanıyoruz. HTML şablonları oluşturmak için Temple adlı kütüphane. Daha sonra mobil yığına girerek web sitesini tekrar yüklemeye çalışırsınız. Varsayılan olarak bir giriş kapısı alacaksınız.
Çünkü uygulamanın tamamını aynı anda taşımıyoruz. Bir dilim seçeceğiz, diyeceğiz ki, bu ekran, ana sayfa akışı, gerçekten hızlı bir şekilde denemeler yapmak istiyoruz, nasıl daha hızlı yineleme süreleri elde edebiliriz? Web sitesinin bir kısmını oraya yükleyemezsiniz. Bunu doğal hissettirmek, daha önce yaşadığınız deneyimin aynısını yaşıyormuşsunuz gibi hissettirmek için her türlü şeye ihtiyacınız olacak.
Bunu mümkün kılmak için neyi inşa etmemiz gerekiyor? İlk şey kimlik doğrulamadır. Yerel uygulamanızda gezinemezsiniz ve aniden oturum açmanız gerekir. Bunun hiçbir anlamı yok. Kullanıcıyı deneyimin dışına çıkarır ve şifrelerini bilemez. Kimlik doğrulama listenin başında yer alır.
Yine, özellikle yeni başladığınızda, bu sayfa diğer yerel ekranların akışında mevcut olabilir ve hala yerel olan bir gezinme çubuğuna sahip olmak ve bunu nasıl güncelleyeceğinize dair bazı dinamik davranışlara sahip olmak isteyebilirsiniz. Sonra bekleyin, altında bir Web Görünümü bulunan yerel gezinme çubuğunuz var, ancak bunun bazı durumlarını değiştirmek istiyorsunuz.
Artık web kodu ile mobil kod arasında köprü kuruyorsunuz. Yükleme sırasında, ilk yükleme durumunu gösterecek bir web sitesi yoktur, bu nedenle yerel bir yükleme açılış ekranına ihtiyacınız vardır N. Sonra düşünmeye başlıyorsunuz, bu parçaları nasıl takip edeceğiz? Hata durumlarını ve yükleme süresini nasıl anlayacağız? Gözlemlenebilirlik var.
Bunu birden fazla ekran için yeniden kullanmaya başladığınızda, oluşmaya başlayan daha birçok eğlenceli şey var. Kimlik doğrulamasına daha fazla değinmek gerekirse, kullanıcı ilk etapta sayfaya girdiğinde, varsayılan olarak bu giriş anahtarına basacaktır, bu da yine çöptür. Yapmamız gereken, yerel uygulamada oturum depolamanın nasıl çalıştığını ve bunu web dünyasına nasıl bağlayacağımızı anlamaktır.
Bununla ilgili pek çok düşünce var. Kimlik ekibi tarafında, OAuth jetonunuzu bir çerezle değiştiren yerel bir uç noktaya sahip olduğunuz bu çerez tabanlı çözümü elde ettik. O halde herhangi bir şey göstermeden önce o işlemi yapmalısınız. Bu parçanın etrafında tam bir gecikme optimizasyon adımı var. Daha sonra hataları, yeniden denemeleri ve günlüğe kaydetmeyi ele alıyorsunuz.
Bunu yaptırdığınızda yerli gibi görünüyor. Bilemezsiniz ama deneyim kusursuzdur. Bu, kimlik doğrulamanın nasıl çalıştığını ve bu geçişi sorunsuz hale getirmek için nasıl yapabileceğinizi biraz derinlemesine incelemeyi ve anlamayı gerektiren şeylerden biridir. O zaman bu, Web Görünümünüzün etrafında bir miktar Chrome’un bulunduğu başka bir tanesidir. Belki de büyük bir parçasını değiştirmeye çalışıyorsun.
Bu iletişim nasıl çalışıyor? Bu yalnızca sayfanın tamamı için bir Web Görünümü değildir. Onun
İlgili yazılar
Ek okuma: MDN Web Docs
Editörün Notu
WebView mimarisi, platformlar arası tutarlılık ve hızlı güncelleme imkanı sunarak kullanıcı deneyimini iyileştirirken, geçiş sürecinde ölçüm ve durum yönetimine odaklanmak başarının anahtarıdır. Bu stratejiler, 2026’ya kadar ölçeklenebilir uygulama geliştirmede yol gösterici olacaktır.
