Nasıl Frontend Uzmanı Olurum? (Kısa)

Son Güncellenme Tarihi: 29.06.2022 ©Copyright: OnurDayibasi

Birçok eğitim içeriğinden faydalanmanıza rağmen Frontend alanında kendinizi derinleşmiş hissetmiyorsanız, işe başladığınızda Frontend konusunda kendinizden emin olamıyorsanız, mevcut mimariyi anlamanıza rağmen kendi kodlarınızı geliştiremiyorsanız, LearnReactUI.dev bu konudaki tüm ihtiyaçlarınızı tek bir yerde karşılayabileceğiniz bir eğitim sitesidir.

Bu site içerisinde örnekler ve anlatımlar her ne kadar React odaklı olsa da asıl hedefi UI geliştirmeyi öğretmektir. Konu anlatımları asıl işin temellerine ve mekaniğine dayalıdır, bu nedenle hangi UI kütüphanesini -React, Vue, Angular, Svelte, vb.- kullanıyor olursanız olun sitemiz üzerinden birçok konuyu dilden bağımsız olarak öğrenme imkanı bulacaksınız.

Kariyerinin henüz başında olan birçok kişinin aklında “**Nasıl bir öğrenme rotası izlemem gerekiyor?**” sorusu olabilir.

Her bireyin öğrenme yöntemi ve ihtiyaçları farklı olduğundan herkes için uygulanabilir olan hazır bir rota mevcut değildir. Piyasada konuların birbiri arkasına dizildiği, kolaydan zora belirli konulara göre gruplamaların olduğu roadmap çizimleri görebilirsiniz.

Bu sıralı adımları izleyerek uzmanlık seviyesine ulaşmak kolay ve hızlı bir süreç gibi görünse de gerçek hayatta farklı bir düzen ile karşı karşıya kalıyoruz. Birbiri altına sıralı yapılar yerine birbirine bağlı birçok atomik yapı olduğunu ve birtakım örnekler ile, geliştirdiğiniz projeler ile bağlantılı olarak bu kavramların içeriğinin daha çok olduğunu ve bağlantıların daha da fazla güçlendiğini görebilirsiniz.

Bu konuyu öğrenmeye de uygulayabiliriz. Gerçek Öğrenme nedir?

“Real learning is not memorizing knowledge. It’s understanding and knowing how to use and find knowledge. Learning is what you do with knowledge, how you integrate it, how you talk to your family, friends, and classmates about it. That’s what learning is. “(Dennis Littky)

Dennis Littky’nin yukarıdaki sözlerini Türkçeye aktaracak olursak şu ifadeleri kullanabiliriz; “Bilgiyi ezberleyerek elde edemezsiniz. Onu nasıl kullanacağınızı ve nasıl bulabileceğinizi anlamalı ve bilmelisiniz. Öğrenme o bilgiyle ne yaptığınıza, onu nasıl entegre ettiğinize ve çevrenize nasıl aktardığınıza bağlıdır.”

Konunun daha iyi anlaşılabilmesi için aşağıdaki görseller üzerinden bir açıklama sunulmuştur:

• Solda verilen örnek piyasada yaygın olarak kullanılan öğrenme yöntemidir.
• Sağdaki örnek ise gerçek dünyada bir uygulamanın geliştirilmesi sırasında ihtiyaç duyulan bilgi birikimini göstermektedir.

Eğitim İçerikleri ve Gerçek Dünyadaki Bilgiler Arasındaki Bağlantı

Eğitim içeriklerinin genelde belirli bir sırayı takip eden kavramları, dersleri arka arkaya anlatmaya çalışan içerikler olduğunu görürüz. Bu içeriklerin birbirleri ile nasıl bağlanacağı ve nasıl uygulamalar oluşturulacağından çok, soyutlanmış olarak bir konuya odaklanılır ve bu konu anlatılmaya çalışılır.

Ama gerçek dünya bu şekilde değildir. Gerçek dünyada bilgi birikimleri birbirleri ile bağlantılı düğümler şeklindedir. Bazı bilgileri, konseptleri çok kullanmanız, çok bilmeniz gerekirken, bazı konuları daha az bilmeniz yeterli olabilir. Bazı konular her yerde anlatılırken, bazı konularda bilgileri Stackoverflow’da ya da GitHub açık kaynaklı projelerin kaynak kodlarının derinliklerinde bulabilirsiniz veya benzer bir sorunu bulup, kendi projenize uygulamanız gerekir.

Bir bileşen veya web sayfası oluştururken tüm bu bilgileri harmoni içerisinde kullanmanız ve birleştirmeniz gerekir. Bu oluşturma safhasında birçok konsepte hakim olmanız, en iyi pratikleri bilmeniz ve detaylarda gizli birçok noktadan haberdar olmanız büyük önem taşır. En önemlisi de kapsamları nasıl harmanlayacağınızı biliyor olmanızdır.

Yani bu eğitimlerde elde edeceğiniz kapsam, örneğin pişireceğiniz yemeğin malzemelerini, araçları ve hangisinin ne işe yaradığını verse de bunlarla yapabileceğiniz yemeklerin (bileşenlerin) tarifini verMiyor olacaktır.

LearnReactUI.dev sitesi, gerçek dünya uygulamalarına yakın örnekler içeren anlatımları ile gerçekten hızlı bir şekilde hedefinize ulaşmanızı sağlar, bunu yaparken de yukarıda belirtilen ilişkileri ve derinliği öğrenebileceğiniz eğitim yöntemini baz alır.

1. LearnReactUI.dev Sitesi İçerik Olarak Diğer Eğitim Sitelerinden Neden Farklıdır?

Öncelikle sizi gerçek dünyadaki proje geliştirme sürecinize hazırlayacak bir eğitim sitesidir. Bunun için gerçek proje örneklerinden gelen pratikler üzerine bir eğitim bulacaksınız.

20 yıllık yazılım geliştirme sürecinde UI konusunda farklı diller ve kütüphaneler kullanarak

• Java, Swing, JavaFX
• JS, JQuery, ExtJS
• JS, React

farklı sektörlerde

• Askeri
• Sigorta ve Bankacılık
• Devlet Kurumları
• APM (Application Performance Monitoring)

farklı büyüklükteki ekipler ile

• Küçük Boyutlu Ekipler (5-20)
• Orta Büyüklükteki ekipler (20-50)
• Çok Büyük Ekipler (50-100)

farklı Backend ortamlarında çalışan

• On Prem Makinede, Near Real Time
• Cloud Üzerinde HTTP ve WebSocket

uygulamaların UI geliştirme ekiplerinde yer aldım. Bu projelerden birçok deneyim elde ettim. Oluşturacağım bu eğitim içeriklerinde, bu deneyimleri güncel teknolojiler ve kütüphaneler kullanarak gerçeğe yakın örnekleri ile sizlere anlatmaya çalışacağım.

1.2 LearnReactUI.dev Eğitim Süreci Olarak Diğer Sitelerden Ne Gibi Farklılıklar İçerir?

Eğitim içeriklerindeki Öğrenme Süreci ile Gerçek Projelerdeki Öğrenme Sürecinin Karşılaştırılması

Eğitim sitelerinde genelde dersler yukarıda bahsettiğimiz gibi belirli bir sıra ve düzende, aşağıdaki şekilde anlatılırken, yapısı genelde şu şekildedir:

• Konu Anlatımı
• Quiz
• Örnek

Bu anlatım şekli, bir konuya yabancıysanız ve bu konuyu ilk kez öğrenmeye çalışıyorsanız izlenebilecek bir yol iken, bu konuda biraz bilgi sahibiyseniz sizi gereksiz detaylarla uğraştırabilir veya başlarda hatırladığınız birçok konuyu dersin diğer konularını dinledikçe unuttuğunuz bir hale dönüşür.

Gerçek dünyada ise öğrenme Hata, Projeye Yetenek Geliştirme veya PoC (Proof of Concept) çalışmaları ile karşımıza çıkar. Proje geliştirirken aynı zamanda üzerimizde bir zaman baskısı da vardır. Geliştirmeyi yaparken birçok konuya dikkat etmeniz gerekir:

• Önceki Legacy kodu bozmamak
• Mimariyle uyumlu olmak
• Verilen zaman içerisinde işi tamamlamak
• Daha sonrası için bakımı yapılabilir ve tekrar kullanılabilir kod geliştirmek

1.3 LearnReactUI.dev Farklı Perspektiflerden Bakış Kazanımı Sağlar

Frontend kapsamına farklı perspektiflerden bakabiliyor olmak biz geliştiricilere büyük avantajlar sağlar.

• Tarayıcı Ortamı
• Geliştirici Ortamı
• Sunucu Ortamı

Frontend Geliştirmeye Farklı Perspektiflerden Bakış

• Frontend ile ilgili olarak öncelikle geliştiriciler tarafından **kendi ortamlarındaki geliştirme süreçlerinde ****kullanılan araçlar ve kütüphaneler mevcuttur.
• Sonraki süreçte bunların çıktıları belirli sunuculara deploy edilmektedir ve bu sunuculardan kullanıcılara servis verilirken kullanılan hizmetler, araçlar mevcuttur.
• Ayrıca, kullanıcının tarayıcılar aracılığı ile sunucudan çektiği HTML, CSS, JS gibi verileri ve diğer verileri (JSON, Audio, Video, Image, Base64) tarayıcı üzerinde görüntülediği ve kullanıcı etkileşimlerini yönettiği bir kısım da vardır.

Yani özetle 3 ortamdan bahsedilebilir. Teknoloji ve kavramların bu küme içerisinde nerede olduğunu tam olarak öğrendiğinizde birçok konuyu daha iyi kavramanız mümkündür.

Küme içerisindeki kavramların yer aldıkları alanları aşağıdaki şekilde daha net olarak görebiliriz.

Frontend Geliştirmeye Farklı Perspektiflerden Bakışın Teknik Detayları

1.4 LearnReactUI.dev Farklı Kütüphaneler Deneyerek Bunlardan Elde Ettiği Deneyimleri ve Karşılaştırmaları Paylaşır

Günümüzdeki Web Uygulama geliştirme süreci açık kaynaklı kütüphaneler üzerinden işler. Özellikle React Ekosisteminde binlerce farklı kütüphane bulunur. Bu kütüphaneleri yeri gelince doğru şekilde kullanmak, doğru seçimleri yapmak oldukça önemlidir. Projeden projeye, ihtiyaçlara göre kullanacağınız kütüphaneler farklılık gösterebilir.

Örneğin React için State yönetiminde birden fazla kütüphane bulunur: Redux, Apollo GraphQL, React-Query vb. Burada bu kütüphanelerden hangisi seçeceğinizi anlamanız için State Management kavramının neleri içerdiğini anlıyor olmanız gerekir. LearnReactUI.dev söz konusu konseptleri bu kütüphanelerden biri üzerinden örnekler ile anlatarak konuyu kavramanızı sağlar.

1.5 LearnReactUI.dev İçerisindeki Eğitimler Mikroservis Mantığına Benzer Şekilde Hazırlanır

Mikroservis son dönemlerde öncelikle Sunucu tarafında daha sonra da Frontend kısmında popüler olmuştur. Peki Mikroservis nedir? Mikroservis mantığında, uygulamalar monolitik değil de küçük küçük uygulamalar olacak şekilde tasarlanır; böylece, bu parçalar hem uygulamanın genelini etkilemez hem de ölçeklenebilir olur.

ReactLearnUI’da yer alan eğitim yönteminin Mikroservis ile benzerliği

LearnReactUI.dev eğitimleri de benzer şekilde küçük uygulama parçaları halinde olacaktır. Bu uygulama parçaları gibi eğitimleri de daha küçük şekilde seçebilecek ve uygulamanıza yakın eğitimi birbiri ile ilişkili parçalardan oluşturabileceksiniz. Bu sayede, mevcut eğitim örneklerini kendi projelerinize hızlı bir şekilde adapte edebileceksiniz.

NASIL FRONTEND UZMANI OLURUM?

LearnReactUI.dev sitesine üye olarak bu hedef için ilk adımı atabilir ve bunun yanında, her zaman sizi ileriye taşıyacak içeriklere ulaşabilirsiniz. Bu yazının devamı olan Teknik Detay dokümanı her eğitimle birlikte güncellendikçe, ilgili bildirim e-postasını alacak ve istediğiniz eğitim içeriklerinden faydalanabilmeniz için sürekli bilgi sahibi olabileceksiniz.