Kendinden Menkul Notlar

Öncesi: Eslint Proje için derleme, küçültme, dil denetimi gibi ayarları yapmış, birim testlerimi yazıp işlemlerin çalıştığına emin olmuştum. Ve yazdığım kodu bir tarayıcı üzerinde test etmek istedim. Bunun içinde zaten birim testeri için kullandığım mocha/chai ikilisi ile bir html test sayfası yapmaya karar verdim. Öylede yaptım. index.html JSCalculator Tests Ve testlerimi içerecek javascript dosyamı hazırladım. index.js 'use strict'; const assert = chai.assert; const expect = chai.const; const should = chai.should; const notEqual = assert.notEqual; const equal = assert.equal; const calculator = new Simple(); let container = document.getElementById("container"); before('Setting up Once', function () { //... } after('Teardown Once', function () { // runs once after the last test in this block }); describe('Dummy String Test', () => { it('should return nu...

Öncesi: Küçültme (Minimization) Nedir ? Lint kavramı kodların belli kurallara göre analiz edilmesidir. Kodu hatalardan arınmış, tutarlı bir halde tutmak aynı zamanda dile özgü yazım kurallarını denetlemek için kullanılır. Lint araçları ise kodumuzda bu kısımları görmemizi sağlayan araçlardır. ESLint Javascript için bu araçlardan bir tanesidir. Kodumuzda oluşacak hataları gösterdiği gibi otomatik düzeltmede yapabilmektedir. Projeme dahil etmek için her zamanki komutu kullandım. $ npm install --save-dev eslint Aynı zamanda VSCode editörüne "dbaeumer.vscode-eslint" isimli eklentiyi yükledim. Eslint projeye dahil ettikten sonra sonra .eslintrc adında bir dosya oluşturdum. Bu dosya ile yazım kurallarımı belirleyebilecektim. Geriye nmp derlenme işleminde kurallarıma göre kontrol için scripts alanıma çalışmasını sağlamak kalmıştı. ... "scripts": { ... "lint": "npm run lint:js", "lint:js": "eslint src test example spec...

Öncesi: Proje Testleri Küçültmek işlemi en basit anlatımla, programlama kodunun gereksiz karakterlerini işlevini değiştirmeden temizleme işidir. Bu karakterler çoğunlukla aşağıdakilerden oluşur; - Boşluk karakterleri, - Yeni satır karakterleri, - Yorumlar, - Blok sınırlayıcılar. Peki bunu neden yapıyoruz, ya da yapmalıyız? Küçültme; kaynak kodunun boyutunu azalttığından ağ üzerinden iletimi daha verimli hale gelir. Küçük ve/veya önemsiz kod parçacıklarının el ile küçültülebilir. Ancak büyük kod parçacıkları için ölçeklenebilir bir çözüm değidir. Bunun için çeşitli araçlar geliştirilmiştir. Peki oluşturduğum projemde bu araçlardan hangisini kullanmalıydım. Kullanıcıların azımsanmayacak çoğunluğunun; kodu sıkıştıran ve küçülten "UglifyJS" kullandığını gördüm. Bu kütüphane hem kodun daha küçük boyutlu olmasını hemde tarayıcılaer tarafından kolay yorumlanmasını sağlıyordu ancak sayfasında belirttiği üzere şu an ECMAScript 2015 e kadar desteklemekte. Bu durumda başka bir ...

Öncesi: Proje Sınıfları JavaScript test kütüphanesi olarak seçenekler bir hayli fazlaydı. Bunları elemek için öncellikle hangilerinin daha yaygın olarak kullanıldıklarına göz attım, Jasmine ve Mocha kütüphanelerinin bir hayli populer olduğunu gözlemledim ve bu ikisi arasında seçim yapmaya karar verdim. Öncelikle iki kütüphanede tek başlarına yeterli olmayıp ek kütüphaneler kurmak gerekiyordu. Jasmine tek başına bir test runner içermediği ve mocha kütüphanesinin yazılımı bana daha anlaşılır geldiği için Mocha üzerinden gitmeye karar verdim. Mocha test kütühanesi kendi içerisinde bir Assertion kütüphanesi ile gelmediği için Chai adında bir yardımcı kütüphane kurmak gerekiyordu. Bu durumda aşağıda ki gibi kurulumları gerçekleştirdim. $ npm install --global mocha $ npm install --save-dev mocha $ npm install --global chai $ npm install --save-dev chai $ mkdir test $ touch test/test.js Yukarıdaki kısımda yer alan "--global", " --save-dev" parametrelerinin ne işe yar...

Öncesi: Proje Başlangıcı VSCode uygulamasını çalıştırdıktan sonra workspace olarak "workshop" dizinimi seçtim, VSCode uygulamasının terminali üzerinden aşağıdaki adımları izledim, sınıflarımı oluşturacağım 4 adet dosya oluşurdum. Tek dosya üzerinde de bu sınıfları oluşturabilirdim ancak 4 güzel bir sayı olduğunu düşündüm (aslında düşünmedim import ve extends kavramlarını da denemek istedim). $ cd ./js-calculator $ touch calculator.js simple.js exception.js operator.js Daha sonra editor üzerinden bu dosyaları açıp, kodlarımı oluşturmaya başladım. Sınıf tanımlarının ES6 ile "export default class" ile başladığını biliyordum. "class" olarak tanımlar isek sınıf tanımızın sonunda "export.default=SINIF_ADI" biçiminde bir ek satır yazmamız gerekeceğinden kısa olmasını istedim ve aşağıdaki yapıyı oluşturdum. /** * exception.js */ export default class Exception { ... } /** * calculate.js */ export default class Calculator { ... } ... /** * simp...

Öncesi: Kimsenin ilgilenmeyeceği bir proje Local makinam üzerinde "workshop" dizini oluşturdum. Kurulumunu yaptığım GitBash'i calistirarak ilgili dizine girdim. Oluşturduğum Git reposu üzerinden ilgili projeji indirdim ve npm ile yapılandırdım. Yapılandırma sonucunda "package.json" dosyası oluştu. $ git clone https://github.com/vuraldincer/js-calculator $ cd js-calculator $ npm init ES6 kullanabilmek için edindiğim bilgi kadarı ile yazdığım ES6 dilinin tanımlamalarını web tarayıcımızın anladığı, uyumlu olduğunu JavaScript dili tanımlarına çevirmek için bir derleyici gerekmekteydi. Yeterli sayıda olduğunu düşündüğüm teknik bıdı bıdı yazısı inceledikten sonra ES7 desteği de olan (sloganı hoşuma gittği için de olabilir.) Babel kullanmaya karar verdim. Peki projeme nasıl ekleyecektim. Bu sorumun çözümüde doğal olarak ilgili projenin Setup linkinde idi. Bu linke girdiğimde işime yarayacak satırı buldum ve aşağıdaki gibi çalıştırdım, bunun sonucunda "package....

Öncesi: ES6 Günlükleri ES6 öğrenme aşamasında kimsenin ilgilenmeyeceği bir proje bulmalıydım, hem kimsenin umrunda olmasın hemde kolay uygulanabilir olsun. "Merhaba Dünya" uygulamasının bir tık üstü olan "Hesap Makinası" uygulması yapmaya karar verdim. Peki uygulmayı bulmuş idim ancak bu uygulamayı hangi kullanıcı arayüzü ile geliştirecektim! Windows notePad uygulaması başta olmak üzere bir sürü seçenek vardı. Daha önceden de kullandığım Microsoft'un geliştirdiği işletim sisteminden bağımsız bir ücretsiz bir editör olan Visual Studio Code aklıma geldi, kurulum aşamasını tamamladıktan sonra puanlamada üst sıralarda olan ES6 eklentilerinden bir kaçını kurdum. Şüphesiz projeyi geliştirmek için bana geliştirme çerçevesi gerekiyordu. Çerçeve içerisine zorunlu olarak; ES6 kodlarımı derleyecek Node.js ve bu kodları gitHub repoma taşıyacak Git SCM dahil ettim. Daha önceden oluşturuğum ancak herhangi bir proje başlatmadığım GitHub hesabıma bir repo oluşturdum. ...