Kod Öğrenmenin En İyi Yolu Kod Yazma: Uygulama Geliştirerek Uygulama Mimarisini Öğrenin

Uygulama Benjamin Stäudinger (CC BY-NC-ND 2.0) ile Mükemmelleştiriyor

Kodlamayı öğrenmek zor olabilir. Öğrenirken karşılaştığım en büyük zorluklardan biri, öğrenme kaynaklarından nasıl atlatacağınız ve temel bilgileri tam kapsamlı uygulamalara kodlamayı öğreten küçük uygulama zorluklarından nasıl geçeceğimizdi.

Etrafında başka yol yok. Öğrenmenin en iyi yolu atlamak ve binaya başlamaktır, ancak bu çok zor olabilir. Nereden başlıyorsun?

Kullanıcılar ve Kimlik Doğrulama?

Kullanıcı yönetimi ve kimlik doğrulamanın öğrenmenin ilk adımı olduğunu düşünebilirsiniz. Yanılıyorsun. Her şeyden önce, şifreler eskidir, bu nedenle tüm yeni uygulamalarınızın şifresiz kimlik doğrulaması kullanması gerekir.

İkincisi, kullanıcı kimlik doğrulaması çok büyük bir güvenlik riskidir ve hiçbir koşulda yenilere bırakılmamalıdır. Günün her saatinde güvenliği artırmak için çalışmadan başka hiçbir şey yapmayan özel güvenlik uzmanları olan büyük şirketlerden yüz milyonlarca giriş sertifikası çalındı. Bazı giriş bilgilerinizin çalınması ihtimali çok iyi.

Kullanıcı kimlik doğrulamasını bozarsanız, uygulamanız için tehlikeli değildir, kullanıcılarınız için tehlikelidir, çünkü e-posta sağlayıcıları veya banka hesapları gibi diğer uygulamalar için aynı giriş bilgilerini kullanıyor olabilirler. Başka bir deyişle, birileri uygulamanızdan şifreleri çalarsa, uygulamanızla ilgisi olmayan alanlarda gerçek zarar vermek için bunları kullanabilir.

Unutmayın, kullanıcı kimlik doğrulaması çok büyük bir güvenlik riskidir ve hiçbir koşulda yenilere bırakılmamalıdır.

Çoğu uygulamanın, kimlik doğrulama görevlerini Facebook, Twitter veya benzeri gibi dış kimlik doğrulama sağlayıcılarına devretmesini öneririm. Meşru nedenleri olan büyük işletmeler ve kendi kullanıcı kimlik doğrulama stratejilerini yönetmek için kaynakları destekleyen büyük uygulamalar bile, kendi kimlik doğrulamalarını sıfırdan almak yerine, popüler, savaş testli kütüphaneleri kullanmalıdır.

Ancak, kullanıcı kimlik doğrulaması gerektirmeyen, oluşturabileceğiniz pek çok küçük kullanıcı uygulaması vardır ve kullanıcı kimlik doğrulamasından yararlanabilecek bazı uygulamalar daha sonra bu özelliği ekleyebilir.

Gerçek uygulamalara geçişinizi başlatmanın iyi bir yolu 'localStorage' kullanarak tarayıcı tabanlı uygulamalar oluşturmak, yalnızca tek bir kullanıcıyı desteklemek ve ardından bu temelden ölçeklendirme yapmaktır. Modern istemci tarafı uygulama mimarisinin temellerine hakim olduktan sonra daha sonra birden fazla kullanıcı ve veritabanı bağlantısı ekleyebilirsiniz.

Müşteri Tarafı Uygulama Mimarisine Giriş

Peki, modern istemci tarafı uygulama mimarisi neye benziyor? Birkaç yıl önce MVC, MVP, MVVM, vb. MV * mimarileri hâkim oldu.

Çoğu model (veri) ve görünüm (UI / Sunum) arasında nasıl koordine edileceğini ele alıyor. Uygulama mimarisinde önemli bir kavram endişelerin ayrılmasıdır.

Ayrı kalmak istediğimiz bazı kaygılar:

  • Sunum / görünüm (düzen, stil, DOM manipülasyonu)
  • Olay işleme / eylemler (kullanıcılardan ve dış iletilerden gelen girdileri yakalayın ve uygulamadaki işlemlere dönüştürün)
  • Yönlendirme / URL'ler (URL’leri işlemlere çevirme)
  • İş mantığı (verinin nasıl işlendiğine ilişkin kurallar)
  • İstemci devlet yönetimi / model / mağaza (bellekteki istemci tarafı veri yapıları)
  • Veri kalıcılığı ve sunucu G / Ç (uzun vadeli veri depolama, AJAX, SSE)

MVC mimarisi şuna benzer:

“JavaScript Uygulamalarını Programlamak” MVC Diyagramı

MVC'de, model değişiklik olayları yayar ve görünüm mevcut durumu sorgulayarak ve güncelleyerek yanıt verir. Denetleyici olayları görüntülemeyi ve durumu güncelleyerek ve aynı zamanda görünümü değiştirerek veya yönlendirme değişikliklerine yanıt olarak yeni bir görünüm seçerek yanıtlamayı dinler.

2-yollu veri ile görünümdeki ciltleme değişiklikleri denetleyiciden geçmeden doğrudan modele yansır. Yalnızca durumu sorgulamak yerine, görüntünün durumu doğrudan güncelleyebileceğini hayal edin. Bu kısaca 2 yönlü bağlama.

Bir kullanıcı girişi, daha fazla DOM değişikliğini tetikleyebilecek başka bir durum güncellemesini tetikleyebilecek bir DOM değişikliğini tetikleyebilecek bir durum güncellemesini tetikleyebilir. Değişikliklerin uygulamanızın durumunu nasıl basamaklandırıp etkileyebileceğini anlamak zorlaşır ve yanlışlıkla sonsuz döngüleri tanıtmak kolaylaşır.

Buna örnek Açısal 1'dir. Açısal 1, UI durum güncelleme döngüsünün kontrolünü alarak (özet döngüsü olarak adlandırılır) bu karmaşıklığı yönetmeye çalıştı. Sonsuz mesajlaşma özyinelemesinden kaçınmak için, özet döngüsünün kablolu bir 10 döngü sınırı vardı, ancak bu, tek bir olay için daha fazla tetikleyebilecek çok sayıda DOM değişikliğine neden olacak bir kaskad göndermesi için hala çok fazla alan bıraktı. çevrimleri. Karmaşık ve anlaşılması zor olmasının yanı sıra, aynı zamanda Açısal'daki performans sorunlarının ortak bir nedenidir, çünkü tek bir değişiklik büyük bir güncelleme dizisini tetikleyebilir.

2013 yılında, Facebook, React: kullanıcı arayüzü bileşenlerini oluşturmak için yeni bir açık kaynaklı çerçeve olduğunu duyurdu. React, veri güncellemelerini nasıl işlediğinizle ilgilenmez, ancak 2 yönlü veri bağlamayı desteklemez. Bunun yerine, tek yönlü veri akışı kullanmaya teşvik edilir, Flux mimarisi gibi bir şeye tepki verin.

React & Flux, web platformu uygulamaları oluşturma yöntemimizi kökten değiştirdi ve tek yönlü veri akışı fikri de Angular ve Ember uygulamalarına yayıldı.

Flux mimarisi şuna benzer:

Akı Mimarisi

Değişiklikleri çok sayıda olay dinleyicisi aracılığıyla yaymak yerine, DOM olay dinleyicisi geri aramalarına bağlı olan geri çağırma işlevleri görünüme aktarılır. Geri çağırma, durum değişikliklerinin yönetildiği depoya gönderilen bir eylem nesnesi üretir.

Sunucuya G / Ç'yi karışıma eklediğinizde, şöyle görünebilir:

Sunucu G / Ç ile Akı

Geri aramaları görüntülemeye ek olarak, birçok uygulamada, sunucuyla iletişim kurmak üzere olay dinleyicileri de kablolu yayınlanacaktır. UI eylemleri ayrıca sunucu sorguları gönderebilir ve sunucuya güncellemeleri iletebilir. Bu nedenle, görünümden bir eylem geri çağırma bir sunucu sorgusunu veya güncellemeyi tetikleyebilir ve sunucuya gönderilen olayları dinleyen bir kişi, depoya gönderilebilecek başka eylemleri tetikleyebilir.

Şu anda en popüler Flux alternatifi olan Redux'u duymuş olabilirsiniz. Mağaza manipülasyonu için saf fonksiyonlar kavramını, redüktörler denir. Redüktörler, her bir durum güncellemesinin bağımsız olarak yönetilip test edilebildiğinden ve test edilebildiğinden ve düşürücülerden hiçbir yan etkisinin bulunmadığından emin olmak suretiyle mağaza hakkında nasıl bir sebep olduğunu basitleştirir. Redux mimarisine genel bir bakış için bu slayt desteğine bakın.

İlk uygulamalarınız için, muhtemelen tüm bu mimariyle uğraşmanıza gerek yok. Uygulama durumuna sınırsız paylaşılan erişimin kafa karıştırıcı ve karışık olabileceği büyük uygulamalar oluşturarak bu mimari güncellemelerine ulaştık. Bu soyutlamalar, uygulamadaki tüm devlet değişiklikleri için bize açık bir devre sağlar, ancak önemsiz uygulamalar için muhtemelen fazla müşfiktirler.

Başlangıçta, etkinlik dinleyicileri kurabilir ve yanıt olarak doğrudan uygulama durumunuzu değiştirebilir ve bu sorun değil. Koşmadan önce yürümeyi öğren. Daha karmaşık uygulamalara geçmeye hazır olduğunuzda, Dan Abramov’un “Redux ile Başlarken” ve “Idiomatic Redux ile Tepki Uygulamaları Oluşturma” mükemmel kurslarına göz atın.

Uygulama Uygulamaları

Her geliştiricinin bir kod portföyüne ihtiyacı vardır. Uygulama uygulamaları bir tane oluşturmak için harika bir yoldur.

Yukarıda belirtilen kursları keşfederken, yaygın olarak kullanılan Yapılacaklar listesi örnek uygulamasına maruz kalacaksınız. Dersleri takip etmenizi ve kendiniz bir araya getirmenizi öneririm.

Ama başka hangi ilginç uygulamaları oluşturabilirsin? Kodlamayı öğrenmekle ilgili en zor şeylerden biri, uygulamaların oluşturulması için iyi fikirlerin ortaya çıkmasıdır.

Uygulama fikirlerini bir araya getirip oylayan siteler var. Fikir arıyorsanız, kesinlikle bir göz atın.

“Eric Elliott ile JavaScript Öğrenin” öğrencileri, kısa özellik listeleriyle küratörlüğünü yapılan yeni bir öğrenci projeleri listesi bulacaklar. Hem uygulamalar hem de özellikler, öğrencilerin mevcut öğrenme seviyesindeki zorluklarla eşleşmelerine yardımcı olmak için “temel”, “ara” ve “gelişmiş” zorluk derecelerine sahiptir.

Örnek Proje: Reddetme

Eric Elliott ile JavaScript Öğrenmek için bir öğrenci projesi.

Takım olarak çalışmak ister misiniz? Öğrenci sohbetinde kodlayan bir arkadaş bulun.

Kazanmak için kaybetmek zorundasın.

Kendinizi eğitin:

  • Zam almak
  • Daha fazla sat
  • Daha fazla iş geliştir
  • Daha iyi fırsatlar için pazarlık et

Oyunun bir kuralı var:

Günde en az bir kez bir insan tarafından reddedilmeniz gerekir.

Konfor bölgesinin dışındaki şeyleri isteyin ve kendinizi çok daha fazla kazanırsınız.

Kazanma = 1 puan. Reddetme = 10 puan.

Reddedilme çizginizi ne kadar sürebilir?

Temel Seviye

Puanınızı takip etmenizi sağlayan bir kullanıcı arayüzü oluşturun. İstediğiniz, sorduğunuz kişi için bir metin girişi ve iki düğme ekleyin: “Kabul edildi” veya “Reddedildi”. E-postalar veya mesajlar gibi zaman uyumsuz istekler için, yanıtı aldığınız zaman, istediğiniz zamanda değil, skoru kaydedin.

HTML + CSS kullanın ve verilerin bir kaydını yerel depoda saklayın.

Kullanıcının o anki skorunun çalışan bir hesabını tutun. Günün alt toplamının, bir talep kabul edildiğinde veya reddedildiğinde her zaman yeniden hesaplanması gerektiğini unutmayın; bu nedenle listeyi, her yeni yanıtla azaltabileceğiniz bir dizide tutmak yararlı olacaktır.

Orta seviye

  • Bir web servisi ve veritabanı kullanarak veri depolamak için bir API ekleyin.
  • Kimlik doğrulama ekleyin ve birden çok kullanıcıyı izleyin. İpucu: Redis, Mongo veya RethinkDB iyi bir veritabanı adayı olabilir.
  • Facebook veya Twitter gibi sosyal girişler, iyi kimlik doğrulama seçenekleri olacaktır (kullanıcı adı / şifre girişlerinden daha kolay ve güvenli).

İleri düzey

  • Puanınızı paylaşın ve Facebook'ta arkadaşlarınızla yarışın.
  • Her kullanıcı için, lider tablosunu arkadaş çevrelerinden uzak tutun.

Ekstra kredi

  • Mobil uygulamalar ekle

Uygulamaya:

  1. Repoyu çatalla
  2. Çözümünüzü uygulayın.
  3. Çatalınıza bir bağlantı açın.

Kredi alabilmek için, çatalınıza bir bağlantı içeren bir sorun açmalısınız.

Projeyi GitHub'da görüntüleyin.

Eric Elliott ile JavaScript öğren

Eric Elliott, “JavaScript Uygulamalarını Programlama” (O’Reilly) ve “JavaScript'i Eric Elliott ile Öğren” in yazarıdır. Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC ve Usher, Frank Ocean, Metallica ve daha birçokları dahil olmak üzere en iyi kayıt sanatçıları için yazılım deneyimlerine katkıda bulundu.

Zamanının çoğunu San Francisco Körfez Bölgesi'nde, dünyanın en güzel kadını ile geçiriyor.