40 Yaşın Üzerinde, Teknik Altyapım Yok, Ön Uç Çerçevesini 2 Haftada Bu Şekilde Öğrendim

Geçtiğimiz iki hafta içinde, herhangi bir ön bilgi, deneyim veya rehberlik olmadan, HTML, CSS ve JavaScript'in temellerini hızlı bir şekilde öğrenme konusundaki kişisel deneyimlerimi paylaştım. Ancak amacınız, benimki gibi, tam kapsamlı bir web geliştiricisi veya kendi ürünlerinizi yaratabilen bağımsız bir geliştirici olmaksa, bu üç temel teknoloji yığınında uzmanlaşmak yeterli değildir. Bu hafta, ön uç çerçevesinin temellerini hızlı bir şekilde öğrenmek ve basit ürünler oluşturmak için yeni başlayanlara yönelik eksiksiz bir kılavuz paylaşacağım. Bu gönderide yer alan tüm öğrenme kaynakları ücretsizdir!

Öğrenimimi tamamladıktan sonra bu web uygulamasına benzer bir web uygulaması yaptım. Lütfen kendi projemi dağıtmadığım, bunun yerine ilgili eğitimdeki proje örneğini kullandığım için beni affedin. İşte benim kendi depom . Aslında örnek projedeki efektlerin %90'ından fazlasını kopyaladım. Dağıtımın yapılmamasının nedenleri daha sonra tartışılacaktır. Gördüğünüz gibi bu, ön uç ve arka uç iletişimi, ön uç animasyon tasarımı, yaşam döngüsü kanca tasarımı, arka uç veri yapısı tasarımı, durum yönetimi, rota yönetimi vb. gibi birçok hususu içeren nispeten eksiksiz bir projedir. Hatta bu projeye zengin bir metin düzenleyici ve kuyruk rüzgârı bile entegre ettim, böylece ön yüzün çok profesyonel görünmesini sağladım. Ben bile bir ön uç çerçevesinin temellerini hızlı bir şekilde öğrenebiliyorsam, neden siz yapamayasınız?

Her zamanki gibi öncelikle ön uç çerçeve öğrenme sürecim sırasında yaptığım dolambaçlı yollardan bahsedelim.

Bu kadar çok ön uç çerçevesi varken, yeni başlayan biri hangisini seçmelidir?

Bu, yeni başlayanlar için, özellikle de kendi kendini yetiştirmiş yeni başlayanlar için en kafa karıştırıcı sorulardan biridir. Temel becerilerinizi, öğrenme yolu seçiminizi, öğrenme yeteneğinizi, kısa ve uzun vadeli hedeflerinizi ve hatta yaşadığınız ülke ve bölgeyi içeren, oldukça kişiselleştirilmiş bir sorudur. Bu nedenle standart bir cevap vermek zordur. Yeni başlayanlar genellikle tüm bu faktörler arasında en iyi seçeneği değerlendirecek bilgi ve endüstri deneyimine sahip değildir.

Bu çok önemli bir konudur çünkü ön uç çerçevesi, bir web uygulaması oluştururken kullandığınız ana programlama diliyle yakından ilgilidir. Ayrıca, daha az popüler bir çerçeve seçerseniz, ilgili topluluk kaynaklarını bulmakta zorlanabilirsiniz ve hatta kurslara katılırken ve başkalarıyla işbirliği yaparken kendinizi kısıtlanmış hissedebilirsiniz. Uzun zamandır bu konuda kafam karışıktı ve hatta Flask ve Django'yu öğrenmeyi denedim ama sonunda çeşitli nedenlerden dolayı vazgeçtim.

Bu konuyla ilgili 10.000 kelimelik bir makale yazabilirim ama bugünkü yazının amacı bu değil. İşte kısa cevabım: Bir iş arıyorsanız, React'ı öğrenmek ve onu ana çerçeveniz haline getirmek en iyisidir. Benim gibi çok az ön bilgiye sahip, yeni başlayan biriyseniz ve hızlı bir şekilde öğrenmek, hızlı bir şekilde oluşturmak ve gelecekte bağımsız olarak ürünler geliştirmek istiyorsanız Vue3'ü seçebilirsiniz. Öğrenme eğrisi nispeten daha yumuşaktır ve yeni başlayanlar için başlaması daha kolaydır.

Yeni başlayan birinin tek bir çerçeveyi öğrenmesi yeterli mi?

Bir zamanlar ana programlama dilimin ekosisteminde bir ön uç çerçeve seçmenin tüm sorunları çözeceğini düşünmüştüm çünkü ana akım çerçeveler, geliştirme aşamasındaki her türlü senaryoyu ele alabilecek çok zengin ekosistemlere sahiptir. Ancak yavaş yavaş diğer dersleri öğrendikçe ve ürünler ürettikçe bu fikrin saf olduğunu fark ettim.

Örneğin, şu anda Alchemy Üniversitesi'nin Solidity eğitim kampını öğreniyorum. Bu kursun resmi önkoşulu temel JavaScript bilgisidir. Sadece HTML, CSS, JavaScript değil aynı zamanda Vue3 de öğrendiğim için bu dersi rahatlıkla halledebileceğimi düşündüm. Ancak üçüncü haftada birdenbire hafta projesinin React'ın ön yüzü ile yapıldığını öğrendim. Şaşkına dönmüştüm. Neyse ki haftanın projesi basitti ve yalnızca React'ın temellerini gerektiriyordu. Yine de React'ın temellerini hızlı bir şekilde öğrenmem yarım günümü aldı ve sonunda haftanın projesini başarıyla tamamladım. Bu nedenle, yeni başlayan biri olarak asla umutlarınızı tek bir teknoloji yığınına bağlamayın. Hızlı öğrenme ve uyum sağlama bizim için temel becerilerdir.

Ön Uç Çerçeve Öğrenme Stratejim

Basitlik, Pratiklik ve Hedef Odaklılık

Sadece 2 hafta içinde ön uç çerçevede uzman olmayı beklemiyorum. Vue3, React'tan daha yeni başlayanlar için uygun olmasına rağmen, ekosistemi zengin ve Vue3'ün kendi belgeleri, Vite, Vue Router, Pinia ve daha fazlası gibi çok sayıda belge dahil olmak üzere içerikle doludur. Kaliteli bir ön uç kullanıcı arayüzü oluşturmak istiyorsanız Element Plus gibi kullanıcı arayüzü kitaplıklarını da incelemeniz gerekir. Ayrıca ürünümüzün bazı özel özellikleri varsa, web uygulamama entegre ettiğim zengin metin editörü wangEditor gibi o özelliğe özel bazı kütüphaneleri öğrenmemiz gerekiyor.

Tüm bunları 2 haftada öğrenmek imkansız, bu yüzden Vue3'ün temel işlevlerini kavramak ve başlangıçta profesyonel görünümlü bir arayüz oluşturmak için hedefimi belirledim.

Vue3 Dokümantasyonuna Odaklanma ve Kademeli Olarak Artan Uygulama Karmaşıklığı

Kendi kendine programlamaya başladığımdan beri birçok belgeyi inceledim ve Vue3'ün yeni başlayanlar için en uygun olanlardan biri olduğunu kabul etmeliyim. Belgelerin mükemmel yazımı, ön uç çerçeveleri öğrenmemi mümkün kıldı. Bu nedenle, herhangi bir üçüncü taraf eğitimini tavsiye etmek yerine, Vue'yu öğrenmek isteyenlere, Vue3'ün kendi belgelerini temel çalışma materyalleri haline getirmelerini şiddetle tavsiye ediyorum.

İyi çalışma materyallerine sahip olmak tek başına bir çerçeveye hakim olmak için yeterli değildir; Bir çerçeveyi kavramanın en iyi yolu onu projeler oluşturmak için kullanmaktır. Ancak bu makalenin başında gösterdiğim web uygulamasını oluşturmaya çalışmak iyi bir fikir olmayabilir. Aslında çalışmam sırasında iki proje geliştirdim; ilki çok basitti; temel olarak çerçeveyi kullanma, genel süreci ve temel parçaları anlama konusunda fikir sahibi olmak için. İkinci proje, birincisinin bir uzantısı olup, bir çerçevenin ekosistemi içinde gerçek bir web uygulaması oluşturmak için gereken kaynakların nasıl bulunacağını öğrenmektedir.

Çalışma Süresi ve Programı

1. Yarım günümü, başta bazı belgeler ve özenle seçilmiş iki proje dersi olmak üzere olası öğrenme kaynaklarını ayırmakla harcadım. Belgeler şunları içerir: Vue3 belgeleri , Vite belgeleri , Vue Router belgeleri , Axios belgeleri , Element+ belgeleri ve Pinia belgeleri . Vue3 dokümantasyonu bunlardan en önemlisidir.

   
   

2. Daha sonra yaklaşık 3 buçuk günümü Vue belgelerinin çoğunu okuyarak geçirdim. Odak noktası temel konulardır ve yeni başlayan biri olarak bile bu bölümü zorluk çekmeden geçebileceğinizi garanti ederim. Ancak ilerleyen kısımlara geldikçe bazı içerikler giderek daha az anlaşılır hale geldi. Yeni başlayanlar için bu normaldir ve sorun değildir. Şimdilik anlayamadığım yerleri not ettim ve devam ettim. En İyi Uygulamalar, TypeScript ve Gelişmiş Konular gibi bazı bölümleri tamamen atlamaya karar verdim. Kısacası sadece en önemli ve temel kısımlara odaklanırsanız 3 buçuk gün yeterli bir süre. Hızlı öğrenen biri değilim ve temel bilgilerim zayıftı, belki o kadar zamana ihtiyacın olmaz.

   
   

3. Ertesi bir buçuk gün içinde Traversy Media'nın klasik ücretsiz eğitimini takip ettim ve küçük bir proje yaptım: görev izleyici. Burada özellikle Brad'in öğretme tarzından bahsetmek istiyorum. Kendisi kesinlikle efsanevi bir şahsiyettir ve kendi kendine öğrenen birçok kişi tarafından programlamanın vaftiz babası olarak kabul edilir. Derslerini her izlediğimde çok şey öğreniyorum. Bir teknoloji yığınında öğrenilmesi gereken tüm yönleri tam olarak göstermek için küçük bir projeyi kullanma konusunda çok iyidir. ** Ama yeni başlayan biri olarak bir şeye dikkat etmelisiniz, derslerini temelsiz dinlemeyin. ** Çünkü Brad'in öğretme tarzı çok özlü ve zariftir. Eğer temel bilginiz yoksa onun hızına yetişemeyebilirsiniz. Bu nedenle, bu küçük proje eğitimini bilinçli olarak öğrenimimin ilk aşamasında değil ikinci aşamasında planladım.

   
   

4. Eğer eğitimini ciddi bir şekilde takip ettiyseniz, bir çerçeve ile bir ön uç oluşturma hissini bulduğunuzu düşünüyorum, ancak aynı zamanda daha fazla sorunuz var. Ben de böyleydim, vite, vue Router, Axios ve pinia belgelerine hızla göz atmak için sabırsızlanıyordum. Bu sefer sadece bir buçuk gün geçirdim. Bir vue3 projesi oluşturmak için yukarıdaki teknoloji yığınına ilişkin hangi temel bilgilerin gerekli olduğunu kabaca bildiğim için bu içeriklere odaklanıyorum. Ve nispeten karmaşık ama çok yaygın olarak kullanılmayan diğer içeriklere hızlıca göz attım. Hepsini bir anda anlamadıysanız, atlayın.

   
   

5. İkinci haftaya gelindiğinde, nispeten karmaşık bir proje oluşturarak ilk haftada öğrendiğim temel bilgileri pekiştirecek kadar kendime güveniyordum. Ve gerçek bir web uygulaması oluşturmanın ihtiyaçlarına göre daha önce öğrenilen içeriği genişletin. Bu sefer yine popüler bir vue öğreticisini seçtim - Traversy Media'dan FireBlog. Bu eğitim John Komarnicki tarafından açıklanmaktadır, neden bu eğitimi seçtiğimi açıklamama izin verin.

   
   

• Bu projenin avantajı, profesyonel bir ön uç kullanıcı arayüzü ve firebase yardımıyla uygulanan bir arka uç API'si ile son derece eksiksiz olmasıdır. Projenin tamamı, ön uç ve arka uç iletişimi, ön uç animasyon tasarımı, yaşam döngüsü kanca tasarımı, arka uç veri yapısı tasarımı, durum yönetimi, rota yönetimi vb. gibi birçok hususu içerir. Hatta yapım aşamasında dokümantasyonu okurken anlamadığım birçok içeriği öğrendim. Gelecekte web uygulamaları geliştirmek istiyorsak bu, pratik deneyim için harika bir fırsat.

• Başlıca dezavantajı, bunun iki yıl önceki bir eğitim olması ve dolayısıyla bazı teknoloji yığınlarının kaçınılmaz olarak yükseltilmesidir. Örneğin eğitimde kullanılan vue-cli şu anda bakım durumunda, ben inşa ederken vite kullandım. Başka bir örnek, eğitimde kullanılan zengin metin düzenleyicinin uzun süredir güncellenmemesidir; ben de hafif olan ancak daha yeni bakıma sahip olan ve oluştururken vue3 ile daha iyi entegre olan wangEditor'u kullandım.

  
  

6. Bu eğitimin arka ucu, karmaşık olmasa da, oluşturmak için firebase'i kullanıyor, kendi uygulama ihtiyaçlarımızı karşılamayabilir. Örneğin, ideal arka ucum, node.js+express+mongodb+mongoose ile oluşturulmuş huzurlu bir API'dir. Bu nedenle, bir firebase arka ucu oluşturmak için öğreticiyi takip etmedim, ancak dinlendirici bir API'nin davranışını simüle etmek için geçici olarak json-server ile sanal bir arka uç oluşturdum. Bu yüzden projemi çevrimiçi olarak dağıtmadım. Hem github sayfası hem de vercel yalnızca statik web sayfalarını dağıtabildiğinden ve json-server terminali yalnızca yerel olarak çalışabildiğinden, bunlara dağıtılamaz. Bu öğreticiyi takip ederken kendi ihtiyaçlarınıza göre seçim yapabilir veya buna benzer bir firebase arka ucu oluşturabilirsiniz.

   
   

7. Bu eğitim altı buçuk saat sürmektedir. Normalde, her gün bir saat ders çalışırsanız altı gün fazlasıyla yeterli olacaktır. Yaşım ilerledikçe öğrenme hızım yavaşlıyor. Yapıyı altı günden daha kısa bir sürede tamamlayabilirsiniz. Son gün yine her zamanki gibi önceki içeriği gözden geçirdim, en önemli şey iki haftalık öğrenme boyunca aldığım notları düzenlemek ve iyi bir kopya kağıdı hazırlamak. Çünkü bu eylemi çok önemli buldum. Çoğunlukla öğrenmeyi bitirdikten bir ay sonra kodumu tekrar açtığımda anlamadığım veya hatırlamadığım birçok kısım oluyor. Bu noktada yeni bir proje oluşturmak istiyorsanız notlar ve kısa notlar çoğu zaman işinize yarayabilir.

Son bir tavsiye:

1. Daha önce her zaman "mükemmel öğreticiyi" bulma konusunda takıntılıydım. Ancak daha sonra aslında mükemmel bir eğitimin olmadığını keşfettim. Örnek olarak ikinci haftada öğrendiğimiz FireBlog eğitimini ele alalım, birçok eksiği var ve hatta bazı kısımları gereksinimlerimizi karşılamıyor. Ama ne olmuş yani? Hala mükemmel bir öğretici ve nadir bir pratik projedir. Yalnızca gereksinimleri karşılamayan parçaları yükseltmemiz veya değiştirmemiz gerekiyor.

   
   

2. Bir ön uç çerçeveyi öğrenmek, geçen hafta bahsettiğimiz javascript öğrenmeye biraz benzer; her şeyi iki haftada tamamlamayı beklemeyin. Ekosisteminde çok fazla içerik var ve sürekli olarak güncelleniyor. Daha önce de tartıştığımız gibi, yalnızca tek bir çerçeveyi öğrenerek tüm yönleri kazanmayı beklemenin gerçekçi olmadığını, dolayısıyla bunun sürekli bir öğrenme süreci olacağını belirtmeye bile gerek yok. Bizim yapmamız gereken tüm bunlardan keyif almak ve bunları bir yük olarak görmemek.

   
   

3. Vue yerine react, hatta angular öğrenmeyi planlıyorsanız yukarıda bahsettiğim içerik yine de geçerlidir. Ön uç çerçevelerde de durum böyledir, öğrenme yöntemleri ve öğrenme kaynaklarını seçme yönü aslında oldukça benzerdir.

   
   

#WebDevelopment #FrontendDevelopment #VueJS #JavaScript #LearningToCode #CodeNewbie #TraversyMedia #Kendini Geliştirme #Kendi Kendini Öğretme #CodingResources #React