İçeriğe geç

Modern Frontend Geliştirme Araçları

2018’in ilk yazısıyla herkese merhabalar, uzun zamandır araştırmak ve öğrenmek istediğim bir konuda rehber niteliğinde olmasa da, dönüp bakılabilecek bir liste oluşturmak istiyordum. Araştırmalarım sırasında karşılaştığım bir blog yazısında tam da istediğim gibi bir içerik buldum ve çevirmeye karar verdim.

Bu yazıya beni teşvik eden şeylerin başında Adem İlter‘in YouTube’da canlı olarak yayınladığı bir eğitim serisi geliyor. Linkini buraya bırakıyorum.

Şimdi de yazıyı hazırladığım kaynağı paylaşayım.

My ideal front end development workflow for a new project

Yeni bir proje yolculuğuna çıkmak her zaman heyecan vericidir. Ama aynı zamanda son derece ağır bir iş olabilir. Projenin front-end süreci genellikle nispeten az önemsenir ve “nasıl olsa hallolur” benzeri bir düşünce vardır.

Geliştirici olmak, ürününüzü daha iyi hale getirmek, geçmişteki hatalardan ders almak ve herkesin anlayabileceği kolay ve akıcı bir süreç oluşturmak demektir. Bu ilkeleri iş akışımıza uygulamalıyız.  Projenin başlangıç aşaması, tüm geliştiricilerin kullanacağı kuralları, araçları ve teknolojileri kurmanın en iyi zamanıdır. Bu iş akışı, esnek, ölçeklenebilir ve bakımı kolay bir ürün sunmaya yardımcı olacaktır.

Yeni bir projeye başlamak, yeni teknolojileri denemek için ender bir fırsattır.

Bir front-end mühendisi olarak, herhangi bir yeni projeye başlamadan önce, iş akışımın organize edilmesini sağlarım. Bu makale, ideal iş akışımın neye benzediğini ve her zaman seçtiğim araçları tanıtacaktır.

1.Görev Çalıştırıcısı Kurmak

Görev çalıştırıcısı fikrine yabancı olanlar için, tekrar eden görevleri otomatikleştiren bir yazılımdır. Bazı yaygın örnekler arasında JavaScript sıkıştırması, dosya birleştirilmesi, dosya / dizinlerin kopyalanması, komut dizelerinin basılması ve CSS dosyalarının derlenmesi gibi görevler bulunmaktadır. Görev çalıştırıcısı genellikle komut satırından çalıştırılır ve bir geliştiricinin belirli dosyaları veya dizinleri değişiklikler için izlemesine, ardından uygun olduğunda görevleri çalıştırmasına izin verebilir.

Bu günlerde genellikle Grunt ve Gulp görev çalıştırıcıları seçenekler arasında en çok kullanılanlar. Elbette başka araçlar da var, ancak bu ikisi en güvenilir ve popüler (bu yüzden daha iyi topluluk desteği var).

Deneyimli bir front-end geliştirici, onların neredeyse aynı teknolojiye sahip olduklarını ve hangisini kullandığınızın önemli olmadığını iddia edebilir.

Hangisinin daha iyi olduğuna gelecek olursak, gerçekten bir tercih meselesidir. Grunt yapılandırma etrafında dönüyor ve daha yavaş, ancak daha yumuşak bir öğrenme eğrisi ve daha büyük bir topluluk barındırıyor. Gulp’ın ise, karmaşık bir kullanımı vardır, ancak genellikle daha hızlıdır.

Aşağıda, her ikisinin olumlu ve olumsuzluğunun kısa bir dökümü bulunmaktadır:

Grunt

+ Başlamak kolay

+ Konfigürasyon sayesinde daha ince kontrol seviyesi

+ Daha uzun soluklu, daha büyük topluluk, daha fazla eklenti

– Akışa hazır olmayan dosya I/O işlemini daha yavaş yapar.


Gulp

+ Daha az yapılandırma

+ Daha hızlı işlem

+ Eşzamansız dosya işlemlerine izin verir.

+ Daha az kod ihtiyacı

– Sınırlı API desteği

Hem Grunt hem de Gulp Node.js üzerinde çalışır, bu nedenle ekibinizdeki her geliştiricinin bilgisayarında yüklü olması gerekecektir.

Gulp.js için ayrıca bu videoyu da izlemenizi tavsiye ederim.

2.CSS işleminizi tanımlayın

İkincisi, bir CSS metodolojisine karar vermeniz gerekir; bu, BEM, SMACSS veya Atomic CSS olabilir.

Bir kez daha, bu kişisel tercih meselesi ve muhtemelen ekibinizle görüşmeniz gereken bir şey. Şirketimizde BEM’i kullanıyoruz ve öğrenmeyi kolay bulduk, büyük bir ekipteki uygulama bileşenleri üzerinde çalışma konusunda çok etkili.

CSS’nizi hangi teknikle yazacağınıza dair bir dizi kural oluşturduktan sonra, CSS’nin nasıl yazılacağına karar vermelisiniz. Bu günlerde daha temiz, daha düzenli bir CSS yazmak için Sass veya Less gibi bir ön işlemciyi kullanmamak delilik gibi görünüyor. Bu günlerde hangisini kullandığınız önemli değil ve CSS4 bu “dilleri” yakın bir gelecekte geçersiz kılabilir.

Compass gibi Sass kütüphanesini kullanarak, Sass’ın yeteneklerini artırabilir, Sprite-map oluşturma gibi ilave işlevler ekleme, cross-browser çalışma imkanı, dosya okuma ve matematiksel yardımcı fonksiyonları yapma gibi imkanlara kavuşabilirsiniz. Sass ve Compass kullanılması tüm geliştiricilerinizin Ruby’yi yüklemesi gerekeceği anlamına gelir.

Alternatif olarak, CSS’nize post-processing için postcss gibi bir JS eklentisi kullanabilirsiniz. Genişletilebilir postcss eklentisi, gerekli tarayıcı desteğinizi temel alan tarayıcı ön eklerini otomatik olarak eklemenizi, CSS’yi incelemenizi, dosyaları sıkıştırmanızı, sprite oluşturmanızı ve daha fazlasını yapmanızı sağlar. Biz  postcss kullanıyor ve kesinlikle öneriyoruz.

3.JavaScript Yasalarını Oluşturun

Bu yeni bir projeye başlamak için en heyecan verici bölüm ve en teknik borcunuzu peşinen kaydedebileceğiniz nokta. JS’nizin nasıl yazılacağı, kullanacağınız framework ve geliştiricilerin izleyeceği tasarım kalıpları hakkında bazı ciddi kurallar koyabilirsiniz.

JavaScript’in hangi lezzetini kullanacağız? ES5, ES6 +, TypeScript veya başka bir şey var mı?

Bu büyük bir soru ve kimsenin net bir doğru cevabı yok. Tavsiyelerime hızlı bir şekilde göz atın:

ES5

ES5 sayesinde, tüm geliştiricilerinizin akıcı bir şekilde JavaScript ile uyumlu olmasını sağlayacak, yapıyı anlayacak ve dinamik dildeki çeşitli aksiliklerin çözümünde nasıl çalışılacağını öğreneceksiniz. Deneyimli geliştiriciler için bu konuda bir öğrenme eğrisi yoktur ve tüm önemli JS MVC frameworkleri onu destekleyecektir.

Elbette ki negatifler, hala eski bir JavaScript yazıyorsunuz. Bu ayrıntılı, gevşek yazım ve geleneksel OOP dil özelliklerinin olmaması, onu C #, Java, Ruby vb. için kullanan herhangi bir geliştirici için sıkıntı yaratıyor. Deneyimlerime göre, JavaScript yeni yazılım geliştiricileri için genellikle daha dik bir öğrenme eğrisi sunuyor.


ES6+

ES6 JavaScript’in geleceği mi, yoksa ES7 mi? Kim bilir? Kod yazma yeteneğinizi gelecekte ispatlamak için modern dil standartlarında yazmaya başlamak iyi bir fikirdir. ES6, bir bakışta bazı çok çekici dil özellikleri sunar: Sınıflar, arayüzler, lambda fonksiyonları, modül alma / verme işlevleri ve bir ‘gerçek’ programlama dilinde bulabileceğiniz diğer fantezi özellikler!

ES6’nın negatifleri, yamalı tarayıcı, sunucu ve işletim sistemi desteği nedeniyle kodunuzu ES5’e aktarmanız gerekeceğidir. Bu büyük bir sorun değildir ve umarım gelecekte ortadan kalkacaktır, ancak yapım sürecinde fazladan bir adım ekler. Olası bir diğer husus, bilmeyenlere bir öğrenme eğrisi sunması, ancak giriş tarafında, geliştirici ekibinizin becerilerini yükseltmesi için bir fırsat sunuyor olması.


TypeScript

TypeScript, JavaScript ile ilgili yanlış olan her şeye Microsoft’un cevabıdır. Temel avantajlar, ES6+ ‘da bulunan tüm harika dil iyileştirmelerinin yanı sıra Visual Studio için araçlar ve Angular v2’nin güçlü desteği. TypeScript, modern dil özelliklerini ekleyerek JavaScript’i ölçeklenebilir hale getirmeyi ve .NET ortamında çalışan geliştiricilerin daha kolay çalışmasını sağlamayı amaçlamaktadır.

Negatif anlamda, yine TypeScript’i ES5’e aktarmanız ve ekibinize daha fazla beceri kazandırmanız gerekir.

Bu bizi bir sonraki soruya götürür.

Hangi JavaScript Framework’unu Kullanacağız?

Günümüzde dolaşan bir milyon JavaScript çerçevesi var ve her birini karşılaştırıp düşünmek imkansız olacaktır. Bunun yerine, en popüler üçlü olan, Angular, Ember ve Backbone’a bakacağım. Bu frameworkleri seçmemin nedeni, hepsinin bir süredir kullanılıyor olduğu, bu nedenle kapsamlı bir gelişme sağladığını, geniş bir topluluk bilgi tabanı yarattığı ve istemci tarafında uygulamalar oluşturmak için çok farklı üç yaklaşım sunduğudur.

İşte, her bir framework’un pozitif ve negatif sonuçlarının dökümü:

Angular

Angular v2 şu an ilk seçeneğim, Angular v1 ile mükemmel bir deneyimden sonra, bir sonraki projemde en yeni sürümü kullanacak olmaktan heyecan duyuyorum.

+ Prototip oluşturmak için çok hızlı

+ TypeScript ve Dart için dokümantasyon

+ Jasmine ve Karma ile test odaklı geliştirme kolaydır

+ Bir sürü büyü

– Bir sürü büyü

– Açısal şeyleri veya patlamaları takip etmelisiniz


Ember

İyi bir orta seviye seçenek.

+ Bileşene dayalı

+ Angular’dan daha az sihir, Backbone’dan daha fazla sihir

+ HandleBars şablon motorunu kullanır

+ CLI

+ CLI aracılığıyla test yapmak kolaydır.


Backbone

+ Neredeyse hiç büyü yoktur

+ Tasarım kalıpları, kod stili, mimari üzerinde tam kontrol

+ En büyük uygulamalar ve web sitelerinden bazıları hala Backbone’da çalışıyor

+ Kendi şablon motorunuzu seçin

+ Esasen temiz HTML, sihirli niteliklere gerek yok

– Çok daha fazla boilerplate kodu gerektirir

– Bağımlı değil, ancak Marionette gibi bir görünüm frameworku ile büyük fayda sağlıyor

– Genel olarak daha fazla kod yazılması gerekir, ancak daha fazla optimizasyona izin verir

– BYO test ortamı

Sonuç olarak

Her kararı takımla tartışmak, kimlerin hangi teknolojileri bildiğini öğrenmek önemlidir. Ürünün doğasını tartışın ve etrafındaki iş akışınızı oluşturun. Projenin yaşam döngüsünde bu aşamada iyi kararlar vermek, ürünün başarısı için kesinlikle kritik önem taşır.

Hayalimdeki iş akışı ise şu şekilde:

  • Görev çalıştırıcı için Grunt
  • CSS ön işlemcisi olarak Sass
  • Rötuş(Son düzenlemeler) için Postcss
  • TypeScript ile yaz
  • AngularJS ile ayağa kaldır

Hayalinizdeki iş akışı nasıl? Yorum yaparak katkıda bulunmanız beni çok memnun edecektir. 🙂

2 Yorum

  1. Yazınız için çok teşekkür ederim.

    Gulp benim gibi amatörler için bile gerçekten süper. Visual Studio Code kullanıyorum. Terminalde npm üzerinden browser-sync i kurdum, açtığımda “browser-sync start –server –files “*.*”” diyorum, o dakikadan sonra ekran, monitör, tablet, telefon ne istiyorsan aç karşına kullan. Yaptığın değişiklikler için sayfa yenilemekle uğraşmamak için bile kullanılır 🙂

    Adem ilter’in kullandığı yapılandırma ile çok çok daha müthiş ve ucu bucağı yok müthiş bir araç.

    • Yorumun ve desteğin için teşekkürler 🙂 Gulp kullanım açısından sağladığı kolaylıkla beraber, işlevsel olarak da insanı mutlu ediyor. 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir