Front-End Developer, web sitesinin ve uygulamaların kullanıcı arayüzlerini tasarlayan ve geliştiren kişidir. Web veya Uygulamanın tasarımını belirlemekten, kullanıcı deneyimini iyileştirmesi, web uygulamalarını farklı cihazlar ve sistemler için optimize etmesinden, sayfaları hız ve işlevsel açıdan optimize etmekten, web sitesini kodlarken farklı İşaretleme dili (Markup language) dilleri kullanmaktan sorumludurlar. Basit bir ifadeyle, Front End geliştirme, kullanıcı arayüzünün çalışmasını ve yapısını belirleyen kod satırlarını ifade eder.
Bununla birlikte, Front End web geliştirme alanında yalnızca HTML, CSS veya JS kullanmakla sınırlı değildir, bunun yerine bu yıl önde gelen bir geliştirici olmak istiyorsanız öğrenmeniz gereken bir sürü başka teknoloji var.
Bir Front-End Geliştiricinin Sahip Olması Gereken En İyi Beceriler
HTML, CSS, Sass, LeSS, JavaScript ve TypeScript
Bir Front-End web geliştiricisi olmak için ilk adım, web’in temellerini, bir sunucunun ne olduğunu, farklı uygulamaların birbirleriyle nasıl iletişim kuracağını anlamaktır. Ağları, istemcileri, sunucuları ve veritabanlarını öğrendikten sonra, web geliştirmenin asıl temeline, yani kodlamaya geçebilirsiniz.
İstemci tarafı kaynak kodu oluşturmak için kullanılan kodlama dilleri HTML, CSS, Sass, LeSS, JavaScript ve TypeScript’ten oluşur.
HTML: HyperText Markup Language, her web sitesinin temelidir. Web sayfalarını bir web tarayıcısında görüntülemek için kullanılan standart biçimlendirme dilidir. HTML’yi öğrenmesi ve kullanması kolaydır. HTML kullanarak temel bir web sitesi oluşturabilirsiniz. HTML, daha sonra tarayıcı tarafından yürütülen sayfa içeriğini tanımlayan koddur. Web sayfasına metin, resim, video, ses, form, düzen ve çok daha fazlasını eklemek için HTML kullanabilirsiniz.
CSS: CSS, HTML için bir stil oluşturma dilidir. HTML, tarayıcıyı içerik hakkında bilgilendirirken, CSS bu içeriği biçimlendirmenin yolunu açıklar. Karşılaşacağınız CSS’nin temellerinden bazıları, CSS konumlandırma(positioning), ızgara(grid), kutu modeli(box model), flexbox(esnek kutu) ve duyarlı tasarımdır(responsive).
Sass: Syntactically Awesome Style Sheets (Sözdizimsel Olarak Müthiş Stil Sayfaları), CSS’ye derlenmiş bir önişlemci(preprocessor) stil sayfası dilidir. Sass, CSS’nin bir uzantısıdır ve tüm sürümleriyle uyumludur. Sass, karışımlar(mixins), işlevler(functions), değişkenler(variables), iç içe kurallar(nested rules), kısmi öğeler(partails), modüller(modules) vb. gibi CSS’de bulunmayan özellikler sunar. Tasarımın projeler arasında paylaşılmasını kolaylaştırırken büyük stil sayfalarının düzenlenmesine yardımcı olur.
LeSS: Leaner Style Sheets, CSS’de derlenmiş, ön işlemci ile geriye dönük uyumlu bir dildir. Sass’tan etkilenir ve yeniden kullanılabilir, yönetilebilir ve özelleştirilebilir stil sayfalarını kolaylaştırır. LeSS, CSS’ye karşı benzerliklere sahip, CSS bilen birisi için öğrenmesi kolay olabilir. CSS’ye yalnızca birkaç özellik ekledi, ör. Değişkenler(variables), yuvalama(nesting), iç içe kurallar ve köpürme(nested at-rules & bubbling), işlemler(operations), kaçış(escaping), calc() istisnası, işlevler ve çok daha fazlası.
JavaScript: JavaScript veya JS, ağ merkezli uygulamalar için geliştirilmiş hafif ve işlenmiş bir programlama ve komut dosyası dilidir. Hem Front-End hem de Back-End geliştirmede kullanılır. Hızlı ve dinamik web siteleri oluşturmaya yardımcı olur. JS’yi kullanırken etkileşimli animasyonlar ve haritalar gibi öğeleri uygulayabilirsiniz. Javascript hakkında öğrenmeniz gereken birkaç temel bilgi, sözdizimi(syntax), DOM manipülasyonu, kapatma kavramı, kapsam, zaman uyumsuz bekleme, kaldırma, gölge DOM, olay köpürme ve prototip ve API’leri getirmedir.
TypeScript: TypeScript, JavaScript’in bir üst kümesi olan açık kaynaklı bir programlama dilidir. Tamamen nesne yönelimlidir ve isteğe bağlı statik yazma, arabirimler ve daha sonra yürütülmek üzere JavaScript’te derlenen sınıflar sunar. TypeScript, IDE’lerin kod yazarken yaygın hataları belirlemek için daha zengin bir ortam sağlamasına olanak tanır.
CSS ve JavaScript Framework
Web Framework, bir web sitesi veya web uygulamasının geliştirilmesine başlamak için şablon olarak kullanılan, standartlaştırılmış kod içeren bir dosya ve klasör paketidir. Front-End programlamanın entegrasyonunu ve geliştirilmesini kolaylaştırır. Aralarından seçim yapabileceğiniz çeşitli frameworklar ile gereksinimleriniz için ideal olanı seçmek zor olabilir. İşte CSS ve JavaScript çerçevelerinin birkaçı.
CSS Frameworks
- Bootstrap
- Ulkit
- Semantic UI
- Tailwind CSS
JavaScript Frameworks
- Angular
- React
- Vue.js
- Node.js
- jQuery
Test Etme ve Kod Analiz Araçları
Test Etme, Front-End Developer bir web uygulamasının veya yazılımın işlevselliğinin, kullanılabilirliğinin ve GUI’sinin test edildiği bir tekniktir.Front-End testinin temel amacı, uygulamanın kullanıcı arayüzünün beklendiği gibi çalıştığından emin olmak için genel işlemleri ve işlevleri analiz etmektir. Front-End test türleri aşağıdaki testleri içerir:
- Birim Testi: Bireysel kod setleri, işlevleri açısından test edilir.
- Görsel Regresyon Testi: Eski ve yeni kod arasındaki farkı tanımak için görüntü karşılaştırması yapılır.
- Kabul Testi: Sistemin proje teslimi için kabul edilebilirliği için iş gereksinimlerine uygunluğu değerlendirilir.
- Performans Testi: Uygulamanın performansında mükemmelliği sağlamak için yanıt verme, kararlılık ve hız test edilir.
- Entegrasyon Testi: Uygulamanın bireysel modülleri mantıksal olarak birleştirilir ve bu modüller arasındaki etkileşimdeki hataları ortaya çıkarmak için bir grup içinde test edilir.
- Erişilebilirlik Testi: Uygulamaya herkesin erişebilmesini sağlamak için yapılır. Uygulamayı belirli engelli kişiler için erişilebilir hale getirmeye yardımcı olur.
- Uçtan Uca Test: Uygulamanın beklendiği gibi davranmasını sağlar.
- Çapraz Tarayıcı Uyumluluk Testi: Kullanıcıların farklı tarayıcılarda benzer bir web uygulaması deneyimine sahip olmalarını sağlamak için yapılır.
Kod Analizi ve Testi için Araçlardan Birkaçı
- LambdaTest
- Chrome DevTools
- Page Speed
Web Güvenliği ve İletişim Protokolleri
Bir geliştirici olarak, internete bağlanmak büyük güvenlik sorunlarına neden olabileceğinden, web güvenliğinin ve iletişim protokollerinin önemini bilmelisiniz. Geniş güvenlik protokolleri yelpazesiyle, uygulamaları için gereken güvenlik düzeyini kolayca belirleyebilir ve sanal olarak dağıtabilirsiniz. Web güvenliği ve iletişim için bilinmesi gereken başlıca protokoller şunlardır:
- IPsec – İnternet Protokolü Güvenliği
- IKE – İnternet Anahtar Değişimi
- SSH – Güvenli Kabuk
- SSL – Güvenli Yuva Katmanı
- HTTPS – Güvenli Gömülü Web Sunucusu
- RADIUS – Uzaktan Kimlik Doğrulama Çevirmeli Kullanıcı Hizmeti
- TLS – Aktarım Katmanı Güvenliği
- SET – Güvenli Elektronik İşlem
- PEM – Gizliliği Artırılmış Posta
Aşamalı Web Uygulamaları(Progressive Web Apps)
Aşamalı Web Uygulamaları(Progressive Web Apps) veya PWA’lar, modern web tarayıcısı API’leri kullanılarak oluşturulmuş ve geliştirilmiş web uygulamalarıdır. PWA’lar hem yerel hem de web uygulamaları işlevlerinden yararlanır. Tek bir kod tabanıyla herhangi bir cihazdan herhangi birine, herhangi bir yere ulaşmak için gelişmiş güvenilirlik, yetenekler ve entegrasyon sunar.
Responsive(Duyarlı) Web Tasarımı
Responsive(Duyarlı) web tasarımı uygulama veya web uygulaması, web sayfalarının görünümünü ve düzenini cihaz ekranının çözünürlüğüne ve genişliğine uyacak şekilde değiştirecek şekilde tasarlanmasıdır. Responsive bir web uygulaması tasarlamanın yolunu öğrenerek, onu kullanıcı dostu hale getirebilir ve aynı anda arama motorlarındaki sıralamayı iyileştirebilirsiniz.
Paket Yöneticisi
Paket yöneticisi, yazılım paketlerinin kurulum, yapılandırma, yönetim ve ortadan kaldırılması sürecini otomatikleştiren bir araçtır. Paket yöneticisinin ve araçlarından birinin temellerini bilmelisiniz.
Piyasadaki bazı popüler paket yöneticisi araçları şunlardan oluşur:
- NPM
- Yarn
- Bower
- JSPM
Öğrenmeye devam et!
Web değişmeye devam ediyor ve teknolojilerdeki gelişmelerle birlikte yeni yöntemler ve araçlar geliyor. Bu nedenle, kendinizi en son trendler ve teknolojilerle güncel tutmanız ve öğrenmeyi asla bırakmamanız çok önemlidir.
Bu, şimdiye kadar öğrendiklerinizin hiçbir faydası olmayacağı anlamına gelmez. Temel bilgileriniz her zaman kariyeriniz için bir avantaj olacaktır. Ancak daha iyi sonuç için becerilerinizi her geçen gün iyileştirmeye devam etmelisiniz.
