Birkaç gün önce, bahsedilen DevTrails projesine neden başlamaya karar verdiğime dair, ilk kılavuz üzerinde çalışmaya başlayacağım hakkında kısa bir makale yayınladım. Kişisel geçmişimin çoğu web geliştirme alanında olduğundan, buranın başlamak için iyi bir yer olduğunu düşündüm. Aynı zamanda hem girişimlerde hem de kurumsal sektörde yüksek talep gören sektörün en büyük segmentlerinden biridir. Bu kılavuz en temel bilgilerle başlayacak, bu yüzden yeni başlayanlar için daha ilginç olabileceğini düşünüyorum, ancak orta düzey geliştiriciler de yeni bir şeyler keşfedebilir.
Yeni başlayanlar için, web geliştirmeye girmek kolaydır çünkü nispeten düşük giriş engellerine sahip birçok dil, çok sayıda ücretsiz açık kaynak aracı ve geliştirmeyi basitleştiren birçok çerçeve vardır. Öte yandan, seçim yapabileceğiniz çok şey var. Geliştirme ile ilgili zor kısım, uygulamanızın çalışması için birçok bileşeni bir araya getirmeniz gerekmesidir. Hangi UI çerçevesi seçilmeli? Verilerinizi nerede saklayacaksınız? PHP, Python, Ruby veya başka bir şey? Uygulamanızı nasıl barındıracaksınız? Umarım bu rehber bu konuya biraz ışık tutacak ve web geliştirme konusunda yolunuzu bulmanızda ve hatta bir kariyere başlamanızda size yardımcı olacaktır.
Kılavuz birkaç bölüme ayrılacak ve bugün ilkiyle başlayacağız -front end (ön yüz) geliştirme ve sizi bu alandaki en önemli diller ve araçlar ile tanıştıracağız.
İçindekiler
front end(ön yüz) geliştirme dilleri ve araçları
En azından bu alanda oryantasyon yapmak için bilmeniz gereken şeyleri gösteren bir tür ön yüz manzara haritası ile başlayacağız.
Grafiğin renk kodlaması çok basittir: sarı çizgiler öğrenmeniz gereken temel şeyleri gösterirken, turuncu, daha sonra bırakabileceğiniz daha ileri konuları temsil eder.
UI geliştirme olarak da bilinen ön uç geliştirme, kullanıcının gördüğü ve etkileşim kurduğu uygulama bölümleri olan web kullanıcı arayüzleri oluşturmayı ifade eder. Ön yüz geliştirme, üç temelde sağlam bir şekilde duruyor: biçimlendirme için HTML, stil için CSS ve mantık ve etkileşimler için JavaScript. Bu üç teknolojinin zamana meydan okumasına rağmen, temeldeki araçlar ve çerçeveler sürekli olarak değişir. Bu bölüm, ön uç ekosistemini keşfetmeye başlamak için size bir başlangıç noktası verecektir.
Ön uç geliştirme ayrıca web tasarımı ve kullanıcı deneyimi ile yakından ilgilidir ve ikisi arasındaki sınır her şirkette farklı olabilir. Genel olarak ön uç geliştiriciler teknik konulara odaklanırken, web tasarımcıları estetik ve kullanıcı deneyimi ile ilgilenir.
HTML
Köprü Metni Biçimlendirme Dili (HTML) , kullanıcıya görüntülenen bilgileri yapılandırmanıza izin veren bir biçimlendirme dilidir. Bir HTML belgesi, başlık, metin paragrafı veya metin giriş alanı gibi her biri bir HTML etiketiyle temsil edilen öğelerden oluşur. HTML belgeleri, köprüler kullanarak diğer belgelere de bağlanabilir. Her etiket kendi içerik türünü taşır, belirli bir görünüme ve ekli davranışa sahiptir. HTML’ye alıştığınızda, çok basit statik HTML sayfaları oluşturabileceksiniz.
CSS
Basamaklı Stil Sayfaları (CSS) , HTML öğelerinin görsel görünümünü açıklamak için kullanılan bir stil dilidir. Bir öğenin konumlandırılması, boyutları, metin stili veya renkleri veya bir web sitesinin neredeyse tüm diğer görsel özellikleri gibi yönleri kontrol etmek için kullanılabilir. Stiller, sayfadaki bir öğe alt kümesinin tek bir öğesine uygulanabilen bir dizi kural olarak tanımlanır. Son CSS özellikleri, temel stillerin ötesine geçmenize ve animasyonlar gibi daha karmaşık görsel unsurları kontrol etmenize olanak tanır.
Ön işlemciler
CSS güçlü bir dildir, ancak kodun yeniden kullanımı, ayrıntı düzeyi ve izolasyonu söz konusu olduğunda kısıtlamaları vardır. Bu nedenle, büyük bir CSS kod tabanını korumak zor olabilir. Bu eksiklikleri gidermek için topluluk tarafından bir dizi çözüm oluşturulmuştur. Bu diller ve derleyicilerine genellikle CSS ön işlemcileri denir.
- Sass / SCSS , CSS kod tabanınızı daha sürdürülebilir hale getirmek için CSS’nin yeteneklerini genişletir. İç içe yerleştirme gibi bazı özellikler, CSS’yi daha az ayrıntılı ve yazmayı kolaylaştırırken, değişken ve karışımlar gibi diğerleri kodun yeniden kullanımına izin verir. Ayrıca, kodunuzu daha küçük dosyalara bölmenize olanak tanıyan diğer SCSS dosyalarını içe aktarmayı da destekler. Compass gibi bazı popüler CSS çerçeveleri Sass tabanlıdır.
- PostCSS , CSS dosyalarını dönüştürmek için JavaScript eklentilerini kullanan bir araçtır. Kod analizi yapan, değişken desteği ekleyen, kodu optimize eden vb. Eklentiler ekleyebilirsiniz. Özel biçimler olan SCSS veya Less’in aksine, PostCSS için gelecek standart CSS özelliklerini taklit eden çok sayıda eklenti vardır.
- Less , Sass’a benzer bir özellik kümesine sahip bir önişlemcidir. Benzerliklerine rağmen, temeldeki uygulamalarda bir takım farklılıklar vardır. Geçmişte popüler olmasına rağmen, pek çok geliştirici artık Sass veya PostCSS lehine Less’ten uzaklaşıyor.
JavaScript
JavaScript (JS) , web için kullanıcı arayüzleri geliştirmek için en çok kullanılan programlama dilidir. Web sitelerinize, kullanıcı olaylarına tepki verme, web hizmetlerinden veri yükleme ve bir sayfadaki öğeleri gösterme veya gizleme gibi özel davranışlar eklemenize olanak tanır. Ayrıca, çeşitli API’ler aracılığıyla tarayıcıyla etkileşim kurmanıza olanak tanır. Web sitenize hem ayrı etkileşimli öğeler eklemek hem de karmaşık web uygulamaları oluşturmak için kullanabilirsiniz.
JavaScript ile ilgili karşılaşabileceğiniz diğer bir terim, aslında JavaScript için bir dil spesifikasyonu olan ECMAScript’tir. Çoğu durumda, eşanlamlılar olarak ele alınabilir.
Çerçeveler
JavaScript güçlü bir dildir, ancak karmaşık bir uygulama yapmak istiyorsanız, onu bir çerçeve olmadan kullanmak, çok sayıda karmaşık standart kodla sonuçlanacaktır. Daha basit hale getirmek için, HTML manipülasyonu, veri yükleme, genel uygulama mimarisi vb. Gibi temel işlevselliğe yardımcı olan bir dizi çerçeve vardır. Şu anda en popüler üç çerçeve React, Angular ve Vue.js’dir.
- React , Facebook tarafından geliştirilen kullanıcı arayüzleri oluşturmak için bir kütüphanedir. React, girdi parametrelerine göre HTML oluşturabilen düğme veya yan menü gibi bileşenler oluşturmaya dayanır. React bileşenleri, JavaScript kodunu ve HTML’yi rahatça birleştirmenize olanak tanıyan JSX adlı bir JavaScript uzantısı kullanılarak yazılır . Bileşenler, karmaşık kullanıcı arabirimi öğeleri ve tüm uygulamaları oluşturmak için birlikte oluşturulabilir. React tek başına bir çerçeve değildir, yalnızca görünüm katmanını sağlar, ancak zengin araç ve kitaplık ekosistemi, karmaşık uygulamalar oluşturmak için ihtiyacınız olan her şeye sahiptir. React ile başlamak kolaydır, ancak zamanla eksik boşlukları doldurmak için yeni kütüphaneler öğrenmeniz beklenir.
- Angular – Google tarafından geliştirilen, bileşen odaklı “piller dahil” çerçeve türü. Açısal uygulamalar genellikle TypeScript ile yazılır. Projeyi önyüklemek, geliştirmek ve inşa etmek için bir CLI aracı ve ayrıca formları, veri yüklemeyi, yönlendirmeyi vb. Yönetmek için kitaplıklar da dahil olmak üzere bir web uygulaması oluşturmak için ihtiyaç duyacağınız pek çok şeyi sağlar. kutunun dışında, daha yüksek bir soyutlama ve karmaşıklık seviyelerine sahiptir ve TypeScript’i birincil geliştirme dili olarak öğrenme ihtiyacı, ilk öğrenme eğrisini daha da dikleştirir.
- Vue.js , modüler olacak ve aşamalı olarak benimsenebilecek şekilde tasarlanmış bir çerçevedir. Bunu bir görünüm katmanı olarak kullanmaya başlayabilir ve ihtiyaç duyduğunuzda ek kitaplıklar ekleyebilirsiniz. Diğer çerçevelerin aksine, en önemli kitaplıklar çekirdek Vue.js ekibi tarafından tutulur.
Ember.js veya AngularJS gibi daha küçük bir topluluğa sahip olan veya yerini alan başka çerçevelerle de karşılaşabilirsiniz .
TypeScript
TypeScript , statik tür denetimi ve async / await, sınıflar veya ok işlevleri gibi en son ECMAScript özelliklerini eklemek için JavaScript’i genişletir. Sonuç olarak, TypeScript vanilya JavaScript’te derlenir. Statik tür denetiminin yerinde olması, bir işlevi veya değişkeni imzasıyla eşleşmeyen bir şekilde kullanmaya çalıştığınızda derleyicinin sizi bilgilendireceği anlamına gelir. Bu aynı zamanda kod editörlerine daha iyi kod gezinme ve yeniden düzenleme yetenekleri sağlama yeteneği verir. Yazmalar isteğe bağlıdır, bu nedenle bunları mevcut JavaScript projenizde aşamalı olarak tanıtabilirsiniz. TypeScript kullanmak, daha büyük kod tabanlarına sahip projelerde çalışmayı çok daha kolaylaştırır.
Bileşen Kitaplıkları
Bileşen kitaplıkları, uygulamanızı bir araya getirmek için kullanılabilecek bileşen koleksiyonlarıdır. Bazıları düğmeler ve açılır pencereler gibi en yaygın bileşenleri uygularken, diğerleri aynı zamanda karmaşık duyarlı düzenler oluşturmak için yardımcı programlar sağlar. Her birinin kendine özgü bir görsel stili olsa da, genellikle projenizin tasarımına ve markasına uyacak şekilde özelleştirilebilirler. Çoğu, düz CSS ve JavaScript olarak mevcuttur, ancak, genellikle diğer popüler JavaScript çerçeveleriyle çalışmak üzere uyarlanırlar. Daha popüler kütüphanelerden bazıları şunlardır:
- Bootstrap , duyarlı web uygulamaları oluşturmak için güçlü bir çerçevedir. Yerleşimler ve bir tema motoru oluşturmak için yardımcı programların yanı sıra geniş bir bileşen setiyle birlikte gelir. Açılır menü gibi kullanıcı etkileşimlerini bileşenlere, minimum JavaScript bilgisi ekleyebilirsiniz. Bootstrap ile oluşturulmuş çok çeşitli hazır web sitesi temaları da vardır.
- Semantik UI , her türlü bileşene ve bir tema motoruna sahip başka bir popüler UI kitaplığıdır. Ancak, bileşenleri etkileşimli hale getirmek için, bazı JavaScript kodları yazmanız beklenir.
- Materyal Kullanıcı Arayüzü – Google’ın Materyal Tasarımının popüler bir uygulaması . Bir dizi bileşenin yanı sıra uygulamanızın Google’a göre nasıl görünmesi ve hissedilmesi gerektiğine dair yönergeler sağlar. Angular veya vanilla JavaScript için başka uygulamalar da mevcuttur .
Diğer bazı onurlu sözler arasında ant-design , Foundation , Bulma ve Pure sayılabilir .
front end araçları
Ön uç ekosistemi, her biri kendi amaçları için tasarlanmış büyük yardımcı araç cephaneliğiyle bilinir. Çok fazla sayıda olduğu için, bu kılavuzdaki her şeyi ele almamızın bir yolu yok, bunun yerine, başlamak için önemli olan birkaçına odaklanacağız.
NPM
Npm aslında iki anlama gelir:
1. Projenizde yükleyip kullanabileceğiniz binlerce açık kaynaklı kitaplık ve araç içeren bir yazılım kayıt defteri.
2. Paketleri kayıt defterinden yüklemenize, güncellemenize ve kaldırmanıza izin veren bir CLI aracı.
Npm kullanmak, projeniz tarafından kullanılacak kitaplıkları kurmanıza ve bunları bir JSON dosyasında belgelemenize izin verir. Bu dosyayı kod tabanı ile birlikte saklamak, projenizin bağımlılıklarını açıkça bildirebileceğiniz ve bunları farklı ortamlara hızlıca kurabileceğiniz anlamına gelir. Kendi kitaplıklarınızı yayınlamak ve diğer geliştiricilerle paylaşmak için de kullanabilirsiniz.
Npm CLI aracı ayrıca testleri yürütmek, kodu derlemek veya kod analizi gerçekleştirmek için kullanılabilecek komut dosyalarını çalıştırmanıza da olanak tanır.
UÖM’ye bir analog İplik teklifler bazı performans iyileştirmeleri ve kütüphane gelişimi için daha iyi destek ve npm paket kayıt ile uyumlu olduğunu,.
Web paketi
Webpack popüler bir modül paketleyicidir. JavaScript kodu, CSS stilleri, HTML şablonları ve hatta resimler gibi farklı türdeki varlıkları tarayıcı tarafından daha etkili bir şekilde yüklenebilen paketler halinde birleştirmenize olanak tanır. Webpack kullanırken, kodunuzu modüllere ayırırsınız. Her modül diğer modülleri içe aktarabilir. Webpack daha sonra içe aktarma grafiğini analiz eder ve kaynakları bir araya getirir. Paketlemenin yanı sıra, Webpack, paketlenmiş kodu dönüştürmek için yükleyicileri ve eklentileri kullanır, örneğin derleme, kod analizi veya küçültme gerçekleştirmek. Webpack ile başlamak zor olabilir, ancak modern yapı kurulumlarının çoğunun temel taşıdır.
Rollup.js bazen Webpack’e alternatif olarak kullanılır.
Chrome Geliştirme Araçları
Chrome DevTools , Chrome tarayıcısında bulunan zengin bir araç setidir. Kaynak koduna veya HTML öğelerine göz atmak, ağ isteklerini izlemek ve uygulamanızın farklı bölümlerinin performansını ölçmek gibi çok çeşitli hata ayıklama durumları için kullanılabilir. Küçük bir değişiklik grubunu hızlı bir şekilde test etmek için faydalı olabilecek sayfaları anında düzenlemenizi sağlar. Bu araçları sağlam bir şekilde kavramanız, saatlerce hata ayıklamadan tasarruf etmenizi sağlar. Ayrıca, diğer web sayfalarına bakmak ve nasıl çalıştıklarını görmek için de kullanabilirsiniz. Diğer tarayıcılarda da benzer araçlar mevcuttur.
Bu, ön uç geliştirme yoluna başlamanız için yeterli olacaktır. Merak etmeyin, bu sadece buzdağının görünen kısmı. Bunun daha detaylı öğrenmek istediğiniz bir şey olduğunu düşünüyorsanız, o zaman sizi bekleyen pek çok ilginç şey olacaktır.
Gelen sonraki bölümde , biz arka yüz gelişimi hakkında genel bir bakış yapmak ve sunucu tarafında ne var göreceksiniz.
Dilerseniz Bir Sonra Ki Blog Sayfalarımıza Göz Atabilirsiniz..
Görüşmek Üzere Hoşçakalın WebOdasıyla Kalın..
Hata!
Yorumunuz Çok Kısa, Yorum yapabilmek için en az En az 10 karakter gerekli