Kapüşonlu ile Tanışın: Ön Uç Geliştiriciler için Tam Yığın Geliştirme

Hoodie'yi henüz duymadıysanız, bir göz atmalısınız.

Hoodie, hem uygulama geliştirmeyi hem de kullanıcı deneyimini dönüştürmesi muhtemel bazı dikkate değer yeni felsefeleri benimseyen ön uç geliştiriciler için ilerici yeni bir kitaplıktır. Hoodie, tam yığın, ön uç uygulama geliştirme üzerindeki kontrolü tamamen ön uç geliştiricilerin ve kullanıcı deneyimi gurularının ellerine verir ve onları arka uç meslektaşlarının bazen anlaşılmaz teknik itirazlarından kurtarır. Ayrıca, Hoodie uygulamaları kullanıcıları kesintisiz bağlantının prangalarından kurtararak, uygulamanızı hareket halindeyken, havada veya deniz altında umursamadan kullanmalarına izin verir.

Platform henüz emekleme aşamasında olsa da, oyunun önüne geçmek isteyen herhangi bir ön uç geliştirici için denemeye değer bazı güçlü yeni araçlar sunuyor. Hoodie'nin arkasındaki ekip, CouchDB, Async, Mustache.js ve daha pek çok diğer başarılı projede çalışmış, kanıtlanmış bir geçmişe sahiptir.

Hoodie tam yığın geliştirme kitaplığının işlerinde neler olduğunu öğrendikten ve proje hakkında çok heyecanlandıktan sonra, kendim denemeye karar verdim. Size Hoodie hakkında biraz daha bilgi vereyim ve harika uygulamalar geliştirmek için sahip olduğu potansiyelin bir kısmını göstereyim.

Hoodie nedir?

Her şeyden önce, Hoodie nedir? Bu kadar harika olan ne? Hoodie, hem Hoodie uygulamaları oluşturan geliştiricilerin hem de bunlarla etkileşime giren son kullanıcıların yararına, birkaç güçlü yeni paradigmayı tek bir tam yığın geliştirme paketinde birleştiren açık kaynaklı, tamamen JavaScript platformu ve API'sidir. Bu kavramların başında, API'yi oluşturmak için "Dreamcode" olarak bilinen güçlü bir topluluk odaklı süreçle birlikte "noBackend" ve "Offline First" hareketleri yer alır.

noArka uç

Hoodie, harika bir ön uç uygulama geliştirmenin anahtarının, bir uygulamanın nasıl harika görünmesini ve kullanımdan zevk almasını bilen, ancak çoğu zaman arka uç teknikleriyle kısıtlanan kullanıcı deneyimi uzmanlarının ve geliştiricilerin elinde olduğuna inanıyor. üzerinde hiçbir kontrole sahip olmadıklarıdır. Kullanıcı kaydı/oturum açma, veri depolama veya e-posta gönderme gibi sonsuza kadar var olan temel sunucu etkileşimleri, her yeni uygulama için zaman alan özel uygulamalar gerektirmeye devam ederek, ön uç geliştiriciyi yeni yedeklemeyi öğrenmeye ve kodlamaya zorlar. her seferinde tuhaflıkları bitirin.

Hoodie, arka ucu tamamen soyutlayarak kontrolü ön uç tasarımcı ve geliştiricinin ellerine geri veriyor. Hoodie ön uç uygulama geliştirme ile, sunucu tarafınız hakkında endişelenmek yerine, endişelenmeniz gereken tek şey, Hoodie'de yerleşik, basit, öğrenmesi ve uygulaması kolay ön uç API'sidir. Örneğin, yeni bir kullanıcı mı kaydetmek istiyorsunuz? Bu, bir kod satırında yapılabilir:

 hoodie.account.signUp(username, password);

Hoodie'nin tamamen bağlı olduğu noBackend girişiminin arkasındaki fikir budur. noBackend, bir arka uç geliştiriciye ihtiyacınız olmadığı anlamına gelir! Sadece Hoodie arka ucunu sunucunuza dağıtın ve unutun .

Hoodie tamamen JavaScript ile yazılmıştır. Kendi kendine yeten arka ucu, veritabanı olarak Apache CouchDB ile Node.JS'yi kullanır. Bu yazıda, Hoodie'nin halihazırda uyguladığı temel özellikler arasında kullanıcı kaydı ve yönetimi, veri yükleme, depolama ve e-postalar yer alıyor. Bu temel özellik, ek Node.js eklentileri eklenerek kolayca genişletilebilir.

rüya kodu

Hoodie, her şeyden önce bir API'dir - noBackend'i mümkün kılan şey budur. Hoodie'nin uygulaması zaman içinde değişebilir ve gelişebilir, ancak geliştiricilere sağlanan arayüz aynı kalacak, böylece hiçbir zaman endişelenmenize gerek kalmayacak.

Hoodie hala hızla büyüyor ve her zaman yeni özellikler ekleniyor. Hoodie, diğer noBackend projeleri gibi, Dreamcode adlı API'yi tasarlamak için topluluk odaklı bir yaklaşım kullanır. Esasen, yazmak istediğiniz kodu hayal ediyorsunuz ve topluluktan yeterince destek alırsa Hoodie bunu gerçekleştirecek.

Hoodie API'sini tasarlamaya yönelik bu API öncelikli, kitle kaynaklı yaklaşım, Hoodie kodunun yazmak için bir esinti ve okumak için bir esinti olduğu anlamına gelir. Bu hayallerinizin kodu!

Önce Çevrimdışı

Hoodie, noBackend, Dreamcode güdümlü API'si ile ön uç uygulama geliştiricileri için birçok sorunu çözer. Ancak Hoodie'nin birincil hedeflerinden biri, kullanıcılar için de büyük bir sorunu çözmektir - çoğu zaman bağlantıya olan bağımlılıkları.

Mobil uygulamalara sahip mobil cihazlara geçiş devam ederken, eski masaüstü tabanlı sürekli bağlantı varsayımı değişmedi. Bunca zaman, nereye giderseniz gidin internetin orada olacağı sözü verildi. Bu güne kadar, bağlantı kaybı bir anormallik olarak kabul ediliyor ve kullanıcıların tekrar çevrimiçi olana kadar her şeyi yapmalarını engelliyor. Ancak hepimizin bildiği gibi, telekom ağı bu vaadi yerine getiremedi. Uçaklarda, metrolarda, kırsal yollarda ve sayısız diğer durumda bağlantı pencereden dışarı çıkıyor. Ve bu dünyanın gelişmiş bölgelerinde! Gezegenin devasa bölgelerinde, istikrarlı internet erişimi, kuralın ender istisnasıdır.

Offline First hareketi, hayatın bu basit gerçeğiyle zarif bir uyum arayışında. Offline First ile bağlantısızlık, uygulamanın başka bir normal durumudur. Aslında bu varsayılan durum! Hoodie bu felsefeyi hevesle benimser. API'nin arkasında, geçici yerel depolamanın tam bir ön uç uygulaması ve bir bağlantı kullanılabilir olduğunda otomatik, zarif senkronizasyon bulunur.

Hoodie ile bağlantı kurma konusunda endişelenmeden yorum gönderebilir, e-posta gönderebilir, hesapları düzenleyebilir ve diğer günlük aktivitelerin çoğunu yapabilirsiniz. Tüm depolama ve eşitleme sistemi, veri kaybetme korkusu olmadan herhangi bir zamanda kesintiye uğrayabilir.

Tabii ki, bu model kendine özgü tasarım zorlukları ve yaklaşımları ile birlikte geliyor, ancak Hoodie'deki ekip bu zorlukları çözme tekniklerine öncülük ediyor.

Offline First, benimsemenin ilk aşamalarında uygulama geliştirmeye yönelik heyecan verici yeni bir yaklaşımdır. Gerekli teknikleri geliştirmek için yapılacak çok şey var. Hoodie'nin nasıl yaptığını görmek için buraya bir göz atın.

Hoodie Kullanan Basit Bir Uygulama

Hoodie'nin bir ön uç geliştirme aracı olarak kullanımını göstermek için, topluluk üyelerimizin kendi etkinliklerini oluşturmasına ve diğer mühendislerin göz atması ve programlarına eklemesi için yayınlamasına izin verecek basit bir uygulama yazmaya karar verdim. Buradaki amacın Hoodie'yi göstermek ve üretime hazır bir uygulama sağlamak olmadığını unutmayın. Kodu GitHub sayfamda bulabilirsiniz.

Kapakların altında Hoodie, esasen NodeJS'de yerleşik bir sunucu tarafı ve bir istemci tarafı JavaScript kitaplığının birleşimidir. Basit kurulum ve dağıtım sürecinin yanı sıra, uygulama üzerinde çalışan geliştirici yalnızca istemci tarafı kodunda çalışacaktır. Yerleşik kitaplık, geliştiricinin nasıl çalıştığı hakkında hiçbir şey bilmeden sunucu tarafıyla konuşabilir.

Uygulamamız sunucuda özel bir şey yapmamızı isterse ne olur? Her zaman Hoodie eklentileri oluşturabiliriz. İşte eklentiler hakkında biraz daha bilgi.

Hoodie Uygulamanızı Başlatma

Herhangi bir Hoodie uygulamasının tam yığın geliştirmesiyle ilk adım, bizi yerden kaldırmak için Hoodie komut satırı aracını kullanmaktır:

 hoodie new toptalCommunity

Bu, halihazırda bazı kodları olan, başlatılmış bir Hoodie uygulaması oluşturacak ve uygulamamızı zaten çalıştırabiliriz! yazarsak

 cd toptalCommunity hoodie start

tarayıcı, Hoodie ekibinden bir örnek uygulama ile açılacaktır:

Bu noktada biraz temizlik yaptım. Hoodie uygulamaları şu anda Bootstrap ve Prism ile birlikte geliyor, ancak sağlanan sürümleri çıkardım. Prism'e ihtiyacım yoktu ve kullanmak istediğim yazı tiplerini ve JS'yi kullanabilmek için kendi Bootstrap sürümümü kullanmak istedim. Uygulamayı oluştururken, kendi stilini vermek ve basit önyükleme şablonuma izin vermek için main.css'de de bazı değişiklikler yaptım. JQuery'yi yalnızca DOM manipülasyonu ve olayları için kullandım. Hoodie diğer her şeyle ilgilenir.

Hoodie ve Dreamcode

Bu örnek uygulamayı oluşturmaya çalışırken Hoodie ile çalışmanın tüm faydalarını çabucak fark ettim. Bir projeye başlarken yanıtlanması gereken sıradan soruların çoğu orada değildi. Hoodie sadece kod yazmama ve uygulamayı canlı ve çalışır durumda görmeme izin verdi.

Kullanıcı hesabı yönetimi için hangi stratejiyi kullanmalıyız? Cevap, Hoodie hesap eklentisidir. Verilerimizi arka uçta nasıl saklamalıyız? Hoodie'nin ölü basit depolama API'si bunu bizim için hallediyor ve bize Offline First işlevselliğini ücretsiz veriyor! Bu Hoodie uygulamasının çevrimdışı çalışması için hiçbir çabaya gerek yoktu, sadece çalışıyor.

Bazı uygulamalar üzerinde biraz daha derine inelim:

Kullanıcı Hesabı Yönetimi

Hoodie, bizim için hoodie-plugin-users adlı hesap yönetimiyle ilgilenen bir eklentiye sahiptir. API daha basit olamazdı.

Yeni bir kullanıcıyı nasıl ekleyeceğiz?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Bir kullanıcıya nasıl giriş yaparız?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Giriş yapmış bir kullanıcımız var mı?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

Bu gerçekten daha basit olamazdı. Oh bekle ve kullanıcı arayüzümüz tüm bunlara nasıl tepki verecek? Hoodie'nin sizin için hazırladığı etkinlikler var

Kullanıcı oturum açarken tepki verin:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

Veri depolama

Örnek uygulamamız, kullanıcıların kendi etkinliklerini (özel veriler) oluşturmalarına ve isterlerse yayınlamalarına (verileri herkese açık hale getirme), böylece diğer kullanıcıların etkinliğe katılabilmesine olanak tanır.

Hoodie, oturum açmadan yerel deposuna veri eklememize izin veriyor, peki bu verilerin hangi kullanıcıya ait olduğunu nasıl biliyor? Eh, onu yerel tutar ve o kullanıcı oturum açana kadar sunucuyla eşitlenmez. Hoodie ayrıca yalnızca o kullanıcının bu verilere erişebildiğinden emin olur.

İşte nasıl çalıştığı:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

Bu kadar basit! Tamam, bu bir etkinlik oluşturmamıza yardımcı olur, bunu başkalarıyla nasıl paylaşacağız? global share plugin bize yardımcı olacağı yer burasıdır. Varsayılan bir eklenti olmadığı için yüklememiz gerekiyor:

 hoodie install global-share

Şimdi eklentiyi kurduk, hadi kullanalım! Kullanıcı mağazamıza eklediğimiz verileri global mağazaya yayınlamamız gerekiyor.

 hoodie.store.findAll('event').publish();

Bu, bu kullanıcı için kaydedilen tüm olayları genel olarak işaretler, böylece global mağazayı sorguladığımızda sonuç olarak bu verileri alırız.

 hoodie.global.findAll('event'); //This is read-only

Etkinliklerim sayfasında, kullanıcı doğrudan global mağazada yayınlanan etkinlikler oluşturabilir.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Yayınlanan etkinlikler herkes tarafından görülebilir, bu nedenle artık herhangi bir kullanıcı Etkinlikler sayfasında oluşturulan etkinlikleri görebilir.

Peki kamuya açık olmaması gereken veriler ne olacak? Kullanıcımızın başvurduğu etkinlikleri saklar ve Etkinlikler sayfasında gösteririz. Kullanıcı uygula düğmesine tıkladığında, şu şekilde yürütülür:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

Aşağıdaki iki ekran görüntüsü, aynı anda çalışan iki tarayıcı penceresini göstermektedir. İlk tarayıcıda, kullanıcı A Event'e başvuran a@aa kullanıcısı olarak oturum açar. İkincisinde, b@bb kullanıcısı oturum açtı ve B Event'e başvurdu.

uzun yoklama

Hoodie tarafından sağlanan bazı etkinliklere abone olarak, uzun yoklama gibi teknikleri şeffaf bir şekilde kullanabiliriz, bu da farklı kullanıcıların kullandığı ve üzerinde işbirliği yaptığı uygulamamıza ilginç bir özellik kazandırıyor.

Bunu yapmak gerçekten çok kolay. Örnek uygulamamızda tek bir satır hile yaptı:

 hoodie.global.on('add:event', loadEvent);

Bu basit satır, diğer kullanıcılar tarafından eklenmiş olabilecek yeni olayları kontrol etmek ve bunları Etkinliklerim sayfasına eklemek için sunucuyu uzun süre yoklamakla ilgilenecektir.

Bazı endişeler

Hoodie ve onun ön uç uygulama geliştirme özellikleriyle oynamak için bu örnek uygulamayı oluşturduktan sonra, sunduğu şeyler konusunda çok heyecanlıyım. Ancak, birkaç açık konu benim için göze çarpıyordu.

Hoodie, geliştiricinin sunucuyla iletişim kurmasını o kadar kolay hale getiriyor ki, herhangi bir geliştiricinin yalnızca konsolu kullanarak veritabanımıza bir şeyler ekleyebileceği ve bunun büyük güvenlik ve veri bütünlüğü etkileri olduğu açıkça görülüyor.

Kitaplık ayrıca, veri doğrulama, bağlanabilir URL'ler, bir test çerçevesi ve verilerin özel paylaşımı gibi herhangi bir üretim uygulamasında ihtiyaç duyacağınız pek çok temel şeyi hala eksik (bu sonuncusunda zaten iyi ilerleme kaydetmelerine rağmen). Hoodie'yi şu anda üretimde kullanmak için, onu AngularJS, Ember gibi başka bir çözümle veya Front-End projelerimiz için düzgün yapılandırılmış ve sürdürülebilir JavaScript koduna sahip olduğumuzdan emin olmamıza yardımcı olan diğer birçok çözümden herhangi biriyle eşleştirmemiz gerekir. Bu çerçeveler bugünlerde arka uç teknolojilerinin karmaşıklığına yaklaştığından, bu çözüm Hoodie'nin amacını büyük ölçüde ortadan kaldıracaktır.

Hoodie'nin Geleceği

Hoodie, tüm bu sorunları çözmek için hala yoğun bir geliştirme sürecinden geçiyor. Ekip, platformu toplu tüketime hazır hale getirmek için yeni özellikleri uygulamak ve mevcut olanları iyileştirmek için çok çalışıyor ve elbette bu süreç zaman alıyor. Şu anda yeni bir tam ölçekli uygulama planlıyorsanız, bu sefer onu oluşturmak için farklı bir platform bulmak isteyebilirsiniz.

Bu arada, ancak, az önce gösterdiğimi umduğum gibi, Hoodie kullanarak ön uç uygulama geliştirmeyle uğraşmaya başlamak için kesinlikle çok erken değil. Hoodie'de halihazırda yerleşik bir çok güçlü yeni fikir var ve bunların muhtemelen çok popüler hale geleceğini düşünüyorum. Bu şeylerle oyunun önüne geçmek muhtemelen kötü bir fikir değil.

Hoodie'deki ekip sıkı çalışmaya devam ederse, API hemen kullanıma hazır hale gelecektir. Hoodie ekibinin ilerlemesini takip etmek istiyorsanız, kilometre taşı takipçisine bir göz atın.

Hoodie, nakliyeciler ve çalkalayıcılar için harika uygulamalar geliştirmeyi çok kolay hale getirmeyi vaat ediyor. Hoodie'nin içerdiği fikirler yakalanırsa, her yeni proje için bir arka uç geliştirici ekibine duyulan ihtiyacın geçmişte kaldığını görebiliriz. Bunun gibi projelerle, çok uzak olmayan bir gelecekte ön uç geliştiriciler için altın bir çağ hayal etmek kolaydır. Benzer şekilde, Offline First idealinin kullanıcılara sunduğu avantajlar, mobil, bağlantılı yaşam tarzımızın erişimini internetin kendisinin gitmediği yerlere kadar genişleterek erişilebilirlik için büyük bir adımdır.

Hoodie'nin ilerlemesini takip etmek ve başlatmaya hazırlandığı heyecan verici yeni değişikliklerin bir parçası olmak için Hoodie'ye gidin.

Hoodie ekibine özel teşekkürler . Hoodie Open Source Project'in izniyle kullanılan Hoodie logosu