Javascriptin en gıcık konuları: Webpack, Babel, Eslint ve Diğerleri
Herkese Merhaba :)
React yazı dizisinin ikinci makalesi olarak, konfigurasyonlardan bahsetmek istiyorum. Baş ağrıtan, gıcık, eğlencesiz, uyuz hiç sevmediğim konular. Biri bunları yapsa da ben direk kodlamalara geçsem diye geçirmişimdir herzaman. Başa gelen çekilir, yapacak birşey yok. Bunlardan en baştan bahsedelim, aradan çıksın.
Yinede önce zevkli konulardan bahsedelim.
NPM: Node Package Manager
Npm, paket yönetim sistemidir. .NET’te ki ‘Nuget’ paketlerinin bir benzeri. Ama çok daha geniş. Belli başlı birkaç komutu var. Bu komutlarla işin çoğunu hallediyorsun.
Işığı gören javascript projesi yapıp npm paketi haline getiriyor. Sende npm install paket-adı diyerek projene dahil ediyorsun. Hemen hemen herşey için bir npm paketi var. Yeni birşey aklınıza geldiğinde, acaba var mıdır diye önce bi bu paketlere göz atıyorsun, genelde de birileri yapmış oluyor zaten, sen sadece alıp kullanıyorsun. Zor bir yanı yok, ama olmazsa da olmaz. Mesela React dediğin şey aslında bir npm paketi. Command promptu açıp npm install react dersen react’ın dosyalarını node_modules adlı dosyanın içine atıyor, sende ordan alıp kullanıyorsun.
Yeni javascript: EcmaScript 6
Javascript dilinin yeni sürümü es6, ve bu dili çok daha kolaylaştırıyor, gerçek bir programlama dili haline getiriliyor. Aslında es6 gelişti bitti, artık es7 geliştiriliyor . Javascript’in şu anki sürümü ise es5 (Vanilya’da deniyor).
Kim yapıyor bunları? ECMA International adında 1961 de kurulmuş bir kuruluş var (kurulmuş bir kuruluş ??). Bu kurum Javascript’in kurallarını belirliyor, ve gelişimini başlatıyor. Gelişimde açık kaynak olarak yapılıyor.
es6 gerçekten birçok kolaylıklar getiriyor ve bu dille kod yazmak inanılmaz keyifli. Önceden sayfalarca uğraştığın şeyleri artık birkaç satırda yapabiliyorsunuz.
Hadi ozaman, bir fonksiyon yazalım. Bir sayının karesini alsın.
var squere = function(a) {
return a * a;
};Bu kod güzel.
const squere = (a) => (a * a)Ama ya bu kod? Aynı işi yapıyor ve çok daha basit. ‘function’ yazmanıza gerek yok. Parantezi aç kapa ve sonuna bir ok koy, olsun sana arrow function.
parantez bile açmana gerek yok.
const squere = a => a * a//buda olur aynı şey
Bu es6'yı tam benim kafada üşengeç adamlar yapmış. Besbelli :)
Mesela bir web uygulamanız var ve bu sisteme kullanıcı kaydı yapacaksınız. kullanıcı size obje olarak geldi. Bazı kontroller yapacaksınız.
var register = function (user) {
var username = user.username;
var password = user.password;
var confirmPassword = user.confirmPassword;
var email = user.email;
//...};
User objesininin her elemanı için farklı farklı tanımlamalar yapacaksınız. ohooo…
const register = (user) => {
const { username, password, confirmPassword, email } = user
}Buyrun. Siz parantez içinde almak istediğiniz alanları yazın yeter. es6 sizin için aynı işi yapıyor. Bu kodlar aynı. Hatta yeni bir case. Şifre ile şifre tekrarı aynı mı değil mi? Bunu kontrol edecek bir fonsiyon yazmak istiyorsunuz.
const validatePassword = ({password, confirmPassword}) => {
//…
}Artık fonksiyon içinde password ve confirmPassword değişkenlerini kullanabilirsiniz. es6 sizin için size ne lazımsa onu çekti aldı. Hadi tamamlayalım fonksiyonu. Eğer password ve confirmPassword eşit ise true dönsün, değil ise false dönsün.
const validatePassword = ({password, confirmPassword}) =>
(password === confirmPassword)Bukadar…
Mesela, JQuery ile bir butona tıklanınca, gelen değeri ikiye katlayan bir fonksiyon yapacaksınız.
$('#button').on('click', function (value) {
return value * 2;
}); İlk olarak click eventından sonra ikinci parametre olarak bir fonksiyon tanımlıyorsunuz, ve kod bir anda karmaşıklaşıyor.
$(‘#button’).on(‘click’,(value) => (value * 2))Bide buna bakın. Şiir gibi değil mi? İstersen parantezleri de kaldır. miss.
es6'yı ben daha fazla yazmayacağım, Üstün Özgür’ün ve Alpcan Aydın’ın çektiği muhteşem videolara göz atabilirsiniz. Buralarda hemen hemen tüm özelliklerden bahsediyorlar. O yüzden benim daha fazla yazmama gerek kalmamış. Bunları izlerseniz ve örnekleri, ödevleri uygularsanız, ‘tamam artık es6 ile kod geliştirmeye başlayabilirim’ diyebilirsiniz.
Üstün Özgür: https://www.youtube.com/watch?v=Vp4K03xWsgE
Alpcan Aydın: https://www.youtube.com/watch?v=kRknZ6ejQ_8Babel
Yukarıdaki videoları izleyip es6 hakkında baya bir fikir sahibinden sonra muhtemelen anlamışsınızdır ki, şu anki browserlar es6 kodlarını çalıştırmıyor. Henüz es6'nın bütün özelliklerini implemente etmediler.
Bu ne demek?
Programlama dillerinde aslında insanların kullandığı diller gibidir. Bir nevi o kodu çalıştıran ‘kurum(IIS,Apache server, işletim sistemleri vs..)’ ile iletişim sağlarlar. Sen kendini anlatmaya çalıştığında, karşındaki insan senin konuştuğun dili bilmezse seni anlamaz. Sen Türkçe konuşuyorsan, karşındaki insan isterse 40 tane farklı dil bilsin, eğer Türkçe bilmiyorsa sana bön bön bakar. İletişim kuramaz.İletişim için bir tercümana ihtiyaç duyarsınız. Javascript kodları için bu kurum browserlardir. Javascript kodunu browserlar calistirir. Tıpkı html ve css gibi. Bugünkü browserlar(Chrome, Firefox, İnternet Explorer vs.) javascript’in es5 sürümünü biliyorlar. es6 dilini görünce bön bön bakıyorlar. Birkaç kelime biliyorlar ama tamamen bir uygulamayı henüz anlayacak seviyede değiller. Bir tercümana ihtiyaç duyuyorlar bu güzel es6 kodlarını anlamak için. İşte bu tercüman Babel’dir. Hemde resmen simültane tercüme yapıyorlar. Sizin yazdığınız es6 kodlarını browserlara translate eder. Yani es5’e cevirir ve tarayiciya oyle sunar.
Bu sitede soldaki frame içinde es6 kodlarını yazıp, sağ tarafta es5 çıktısını görebilirsiniz. Yapıştırın içinizden ne geliyorsa, korkmayın bozulmaz :)
Babel’in yaptığı budur. es5 ile React geliştirmek baya baya zor. Şimdilik es6 kullanmak mecburi gibi. O yüzden projenize babel’i mecbur entegre edeceksiniz. Ne zaman browserlar es6yı öğrenir, ozaman babele ihtiyaç kalmaz. Gerçi es7 geliştiriliyor. Bide o var. Tamam tamam, en kötü bi 7–8 senesi garanti bu babelin.
Aslında burada sizin yapacağınız çok birşey yok. Birkaç konfigurasyon yapmak yeterli.
Spread Operasyonu
es6 ile ilgili daha yazmayacağım deyince inandınız değil mi? bu konuyu atlarmıyım be, ayıbediyosunuz. Babelden sonraya bıraktım sadece.
Spread namı diğer ‘üç nokta’. es6'nın belkide en zor anlaşılan konusu bu. Aslında basit. Türkçe’si yayılmak. Adamlar çok güzel isim bulmuşlar. Bildiğin yaymak, yayılmak. Çobanlar koyunları toplu halde çayıra götürür ya otlasınlar diye, götürürken toplu halde götürmeye çalışırlar. Dağılmasınlar diye ellerinde ince bir değnek ile sürüden ayrılmaya çalışan koyunları geri içeri sokarlar hemen ki kaybolmasınlar. Sürüden ayrılanı kurt kapar.
Burda da aynı mantık var. Objeleri, arrayleri toplu halde taşıyoruz ki kaybetmeyelim. Nolur nolmaz.
Sonra genişce bir çayır düşünün, sürü geldi çayıra, bi anda bütün çayıra yayılırlar.
Yine aynı mantık. Hemen bir örnek yapalım.
const koyunlar = {boncuk: 1, maviş:2, karaoğlan:3, deli: 4 ,kınalı: 5}
Aldık koyunları geldik çayıra. Deliyi çayırın bir köşesine göndereceğiz, karaoğlanı da başka bir köşesine, onlar biraz daha besili, çok ot lazım gitsin orda otlasınlar, gerisi bizimle birlikte gelecek.
const {deli,karaoğlan,…gerisi} = koyunlar
Şimdi bu kodları alın gidin babel’e bir yapıştırın. sonrada deyin ki
console.log(gerisi)
Sağ alt köşede bizimle gelen koyunları göreceksiniz. Gördünüz değil mi sihri?
Yani spread operasyonu gerçekten yayıyor.
Misal, bir fonksiyonunuz var, 3 tane parametre alıyor.
function ucDegerliFunc(a,b,c) {}
Tesadüfe bakın ki birtane de array’iniz var içinde 3 tane değer olan.
const arr = [1,2,3];
Şimdi bu üç değerli arrayin üç değerini, üç değerli fonksiyonun üç parametresine nasıl verirsiniz?
Normalde yine loop falan dönersiniz ne bileyim tek tek verirsiniz falan.
Ama bundan sonra şöyle yapacaksınız.
function ucDegerliFunc(...arr) {}
Arrayin o üç değeri, yayılacak ve her biri, foksiyonun parametrelerinin yerine girecek.
Gördüğünüz gibi arkadaşlar zor bir tarafı yok, aslında birçok şeyi kolaylaştıran bir tarafı var.
Mesela şöyle bir elementiniz var. <button class='title' style='background:red' id='myButton' type='submit' value='Formu Gönder'/> Elementin bir sürü propertysi var. Öyle bir durum oluştu ki, (Olmaz ya hadi oldu diyelim..) size bu propertyler obje olarak geldi.
const properties = {
class:’title’,
style:’background:red’,
id:’myButton’,
type:’submit’,
value:’Formu Gönder’
}Ve bu propertyleri bir butona koymanız lazım. Bunu nasıl yaparsınız?
Farzedinki html’in içine javacsripti cart diye koyabiliyoruz. öyle bir dünyadayız yani. hadi javascript olduğu belli olsun diye de süslü paranteze alalım.
<button {properties} />e bu olmaz ki, bu şöye birşey çıkarır bize.
<button properties={
class:’btn btn-default’,
style:’background:red’,
id:’myButton’,
type:’submit’,
value:’Formu Gönder’
} />peki şöyle yapsak?
<button {
class={properties.class}
style={properties.style}
id={properties.id}
type={properties.type}
value={properties.value}
/>tamam bü güzel oldu. da, ya bize gelen objede mesela style gelmezse?
Undefined errorrr
Ya şöyle bi yaysak bizim propertiesi butonun içine nasıl olur?
<button {...properties} />İşte budur!!!1!
Burada properties objesinin içindeki tüm alanlar, tektek tektek butonun içine yayılacak. Butonun rengi kırmızı olacak, tipi submit olacak classı btn btn-default olacak, ööyle iğrenç bir buton çıkacak karşımıza işte.
Eslint
Eslint bir ‘lint’ projesi. Biz .Net’çilerin çoğu lint mint bilmeyiz aslında, çünkü elimizin altında tam anlamıyla bir ‘hayvan’ var. Visual Studio. Her hatayı gösteriyor, intellicence on numara, leb demeden leblebiyi anlıyor, hatta biçok yerde bir iki harf yazıyosun taba basıyosun kodu yazıyor falan(Code snippet). Ama javascript’in sıkıntısı büyük, çünkü Visual Studio yok (Gerçek visual studio, code olan değil). IDE’lerin şahı. Neyse konuya dönelim…
Bu arkadaşın yaptığı iş, hataların altını kırmızı ile çizmek. Lint’te zaten o anlama geliyor hemen hemen. Türkçesi keten tiftiği. Ama bu Eslint sadece hataların değil, belirlenen standartlara uymayan kodların da altını çiziyor.
Sen projeye başlarken Eslint ayarları ile standartlar belirliyorsun. Mesela yazılımcıların en büyük derdi noktalı virgül. Hataların yüzde 70i bu melet yüzünden. Sen konfigurasyonda diyorsun ki, noktalı virgül koyma istemiyorum. Eslint busefer, noktalı virgül koyarsan hata gösteriyor, altını çiziyor(Javascript’te noktalı virgül mecburi değil ama bir koyarsan, bir koymazsan kötü gözükür, herşey standart olmalı). Veya diyorsun ki, arkadaş ben kodumda 2 defa arka arkaya enter’a basılsın, orda büyükçe bir boşluk olsun istemiyorum. Eslint orayıda çiziyor. Diyorsunki, Ben bu projemde satırların önündeki boşlıkları 3 er boşluklu istiyorum diyorsun. Hani şu muhabbet.
...<div
......<div
.........<div
......<div
...<divİşte burada bile bir yanlış görürse eslint çiziyor hemen. Kardeş kodu iyi hoş yazdın, çalışıyor da, ama gel gör ki standartlara uymuyor. Ne yapacaz ki diye soruyor. Hatta zaman zaman nasihat verdiği bile oluyor.
İşin güzeli bazı büyük firmalar, kendi standartlarını paylaştılar bile. google, airbnb, ve diğerleri.
Projeyi oluştururken, konfigurasyon yapıyorsun, eslint sana soruyor. Ne şekilde yazacaksın kodu, hangi standartları istiyorsun?
Ben Google’ın standartları ile kod yazmak istiyorum diyebilirsin mesela. Google’ın mühendisleri ile aynı kalitede kod yazmanı sağlıyor yani. Ben Airbnb kullanıyorum, daha bi hoşuma gitti. Ama bakarsın bizimkilerden biri kendi standartlarını belirler (nerdeee), bütün dünyaya kabul ettirir onun gibi kod yazarız. Belli mi olur?
Webpack
Bu arkadaş dananın kuyruğunun koptuğu yer. Bir ‘Module Bundler’. Türkçesi modül paketleyici. Sizin yazdığınız kodu düzenler, karıştırır, birleştirir, çalışır hale getirir. Bu arkadaş öyle tek başına çalışmaz. Bisürü yancıları vardır. Mahallenin kabadaysıdır. O ne derse odur. ‘Babel’ mesela Webpack’in yancılarından biridir React projelerinde.
Sen farklı farklı yerlerde, farklı farklı kodları yazarsın. Projenin bir tarafında es6 yaz, bir tarafında es5 yaz, başka biyerde coffeescript yaz, sonra git cssleri less denen formatta yaz, imageleri koy kazanın içine, deki kardeşim bu proje nasıl çalışacak? Her çiçekten bal var burda, ama… Webpack var. O herşeyi toparlar ve çalıştırır projeni. Öyle bişey bu.
Nasıl Yani?
Mesela C# kodu yazarken başka namespaceleri nasıl import ediyosun?
using selamBenBaşkaNamepspace
‘C’ kodunda?
include <stdio.h>
Javascript’te?
Yok öyle bişey. Javascript’te script dosyalarını alt alta html dosyasının içine koymanız lazım. Şöyle ki…
<script src=”lib/jquery/jquery.js” type=”text/javascript”></script> <script src=”lib/director/director.js” type=”text/javascript”></script>
<script src=”lib/mousetrap/mousetrap.js” type=”text/javascript”></script> <script src=”index.js” type=”text/javascript”></script> <link href=”index.css” rel=”stylesheet” type=”text/css”/>İnternette herhangi bir sitenin kaynağını görüntülerseniz, buna benzer kodlar görürsünüz.
Ama eğer webpack kullanırsanız, farklı farklı dosyalarda javascript kodu yazıp, istediğinizi istediğinize import edebilirsiniz.
Nasıl Yapacağız Bu İşi?
Hemen webpack’in sitesindeği örneği açıklayayım, anlayacaksınız zaten oradan. Azıcık ucundan değiştirdim ben.
Example fonksiyonunu eğer başka dosyalarda kullanmak istiyorsanız, export diyorsunuz. O zaman webpack, bu fonksiyonun başka dosyalarda kullanılacağını anlıyor ve ona göre paketliyor. Her dosyanın yalnızca bir tane default item’i olabilir.
//example.jsexport default function Example() {
//bişeyler bişeyler
}export const name='Murat';
export const surname = 'Türkay';
Single Page uygulamalarda birtane root dosya olur, genelde ismi index.js veya app.js olur ve tüm diğer yönlendirmeler buradan yapılır. Mesela C# console.application’ da bu startup.cs, C projelerinde Main fonksiyonu burasıdır.
Bizim burada da app.js olsun. Proje ayağa kalkarken ilk bakacağı yer burası yani.
Başka dosyalardan Default olarak export edilen herneyse (fonksiyon yada variable olabilir) normal buraya normal bir şekilde import debilirsiniz. Ancak default olarak export etmediğiniz şeyleri, süslü parantez içinde import etmeniz gerekiyor. es6 konusunu hatırlayın
const { username, password, confirmPassword, email } = user
aynı mantık...
//app.jsimport Example from './example';
import {name} from './example';Example();console.log(name);
Gördüğünüz gibi başka bir .js uzantılı dosyayı, app.js dosyasına import ettik, ve fonksiyonları, değişkenleri kullanabiliyoruz.
webpack.config dosyasına bakalım
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
}
}Webpack config’de entry ve output vermeniz gerekiyor. ‘Entry’, projedeki ana javascript dosyası. app.js veriyoruz.
Webpack ne yapacak?
Webpack, app.js ye bakacak, orada importlar var, sonra o import edilen dosyalara bakacak, oralarda da importlar olacak, onlarada bakacak, sonuna kadar gidecek, ve import edilen bütün o doslyaları alacak, sırası ile bir dosyanın içine koyacak. Yani bütün modülleri tek tek paketleyecek, ve bir dosyanın içine koyacak. İşte output alanına da bu dosyayı veriyoruz. Biz projelerde belki yüzlerce .js uzantılı dosya yazacağız. Webpack bir çalışacak, pir çalışacak ve elimizde 50 kilobaytlık bir bundle.js dosyası kalacak, hatta bunu isterseniz minify edecek ve elinize 10 kb’lık bir bundle.js verecek. Hani şu jquery.min.js gibi. Sihir gibi birşey.
Not: dosya deyince kafanız karışmasın, bildiğiniz .js uzantılı dosyalar. webpack bunlara modül diyor.
page.html
<html>
<head>
...
</head>
<body>
...
<script src="bundle.js"></script>
</body>
</html>Hani bütün ihtiyacınız olan o javacsript dosyalarını tek tek bir html dosyasına <script bilmemne /> diye koyuyordunuz ya alt alta, mesela jquery’yi koymayı unuttunuz da $ is undefined dedi, (ben bir sayfada 40–50 tane dosyanın yazıldığını bile gördüm), işte bu işlemlerden sonra, sadece bundle.js ‘yi koyacağız.
Mesela kocaaaa instagramın kaynağına bir bakın.
view-source:https://www.instagram.com/(bunu link yapmaya çalıştımda olmadı, siz instagramın sitesinde sağ tuş kaynağı görüntüle deyiverin :)
Üst taraftaki o karışık kodlar, sadece ihtiyacları olan objeleri json hale getirip oraya yazmışlar. Uzun olmasının sebebi, çok bilgiye ihtiyaç duymaları. Oraları geçin, 106. satıra gelin.(ben 106 olarak görüyorum sizde 3 aşşağı beş yukarıdır.) sadece iki adet javascript dosyası refere etmişler. Tıklayın açın ornları, işte webpack sizin yazdığınız kodlar o hale getirecek. Topu Topu 1-2 javascript dosyasıyla koca instagramın web sitesi bu şekilde çalışıyor. Tüm modüller bundle ediliyor.
<script type=”text/javascript” src=”/static/bundles/tr_TR_Commons.js/65bfd72011fe.js” crossorigin=”anonymous”></script><script type=”text/javascript” src=”/static/bundles/tr_TR_FeedPage.js/c561b5331d27.js” crossorigin=”anonymous”></script>Bu makale biraz uzunca ve birazda sıkıcı oldu, ama bu konular gerçekten önemli. Bunları işlemeden React’a geçmek biraz mantıksız geldi. Ayrıca Angular, ve diğer frameworkler ile de uygulama geliştirmek istiyorsanız, yine bu arkadaşlar gerekli bir nevi ‘hammaddeler’. En azından nedir ne değildir şeklinde bahsetmeye çalıştım. Umarım faydalı olmuştur :)
Sonraki makalemde artık React’a ufak bir uygulama ile giriş yapmak istiyorum. Ancak sizden isteğim özellikle Üstün Özgür ve Alpcan Aydın’ın es6 videolarını izlemeniz. İleride en çok lazım olacak şey es6 bilgisi.
Herkese mutlu kodlamalar :)
