2016'da JavaScript öğrenmek nasıl bir duygu?

Bu makalenin yazılması sırasında hiçbir JavaScript çerçevesi oluşturulmadı.

Aşağıdakiler Circle CI'ın "Gelecek bu" makalesinden esinlenmiştir. Orijinalini burada okuyabilirsiniz . Bu parça sadece bir fikirdir ve herhangi bir JavaScript çerçevesi gibi çok ciddiye alınmamalıdır.

Hey, yeni bir web projem var ama dürüst olmak gerekirse birkaç yıldır pek web kodlamadım ve manzaranın biraz değiştiğini duydum. Buradaki en güncel web geliştiricisi sizsiniz, değil mi?

-Asıl terim Front End mühendisi, ama evet, ben doğru adamım. 2016'da web yapıyorum. Görselleştirmeler, müzik çalarlar, futbol oynayan uçan dronlar, aklınıza ne gelirse. JsConf ve ReactConf'tan yeni döndüm, bu yüzden web uygulamaları oluşturmak için en son teknolojileri biliyorum.

Harika. Kullanıcıların son aktivitelerini görüntüleyen bir sayfa oluşturmam gerekiyor, bu yüzden sadece verileri REST uç noktasından alıp bir tür filtrelenebilir tabloda görüntülemem ve sunucuda bir değişiklik olursa güncellemem gerekiyor. Belki de verileri almak ve görüntülemek için jQuery kullanmayı düşünüyordum?

-Aman Tanrım hayır, artık kimse jQuery kullanmıyor. React'ı öğrenmeyi denemelisin, 2016 yılındayız.

Tamam, tamam. React nedir?

-Facebook'taki bazı arkadaşların yaptığı süper havalı bir kütüphane. Uygulamanıza kontrol ve performans getiriyor, görünüm değişikliklerini çok kolay bir şekilde yapmanıza olanak sağlıyor.

Kulağa hoş geliyor. Sunucudan veri görüntülemek için React'ı kullanabilir miyim?

-Evet, ama öncelikle web sayfanıza React ve React DOM'u kütüphane olarak eklemeniz gerekiyor.

Durun bakalım, neden iki kütüphane?

-Birisi gerçek kütüphane, ikincisi ise DOM'u manipüle etmek için, ki bunu artık JSX'te tanımlayabilirsiniz.

JSX? JSX Nedir?

-JSX, XML'e oldukça benzeyen bir JavaScript sözdizimi uzantısıdır. DOM'u tanımlamanın başka bir yoludur, onu daha iyi bir HTML olarak düşünün.

HTML'de ne sorun var?

-2016 yılındayız. Artık kimse doğrudan HTML kodlamıyor.

Tamam. Neyse, bu iki kütüphaneyi eklersem React'ı kullanabilir miyim?

-Tam olarak değil. Babel'i eklemeniz gerekiyor ve sonra React'ı kullanabilirsiniz.

Başka bir kütüphane mi? Babel nedir?

-Oh, Babel, JavaScript'in belirli sürümlerini hedeflemenize izin veren bir transpiler'dır, ancak herhangi bir JavaScript sürümünde kod yazabilirsiniz. ReactJS kullanmak için Babel'i dahil etmek ZORUNDA değilsiniz, ancak bunu yapmazsanız, ES5 kullanmaya mahkumsunuz ve gerçekçi olalım, 2016 yılındayız, diğer havalı çocukların yaptığı gibi ES2016+'da kod yazmanız gerekir.

ES5? ES2016+? Burada kayboluyorum. ES5 ve ES2016+ nedir?

-ES5, ECMAScript 5'in kısaltmasıdır. Günümüzde çoğu tarayıcı tarafından uygulandığı için en çok hedef alınan sürümdür.

ECMAScript?

-Evet, biliyorsunuz, JavaScript betik standardı 1995'teki ilk sürümünden sonra 1999'da temel alınmıştı, o zamanlar JavaScript Livescript olarak adlandırılıyordu ve yalnızca Netscape Navigator'da çalışıyordu. O zamanlar çok karmaşıktı, ancak şükürler olsun ki şimdi her şey çok açık ve bu uygulamanın 7 sürümüne sahibiz.

7 sürüm. Gerçekten. Ve ES5 ve ES2016+ öyle mi?

-Sırasıyla beşinci ve yedinci baskılar.

Durun bakalım altıncısına ne oldu?

-ES6'dan mı bahsediyorsun? Evet, her sürüm bir öncekinin üst kümesidir, yani ES2016+ kullanıyorsanız önceki sürümlerin tüm özelliklerini kullanıyorsunuz demektir.

Doğru. Peki o zaman neden ES6 yerine ES2016+ kullanıyorsunuz?

-ES6'yı KULLANABİLİRSİNİZ, ancak async ve await gibi harika özellikleri kullanmak için ES2016+ kullanmanız gerekir. Aksi takdirde, uygun kontrol akışı için asenkron çağrıları engellemek için coroutine'lere sahip ES6 üreteçleriyle sıkışıp kalırsınız.

Az önce ne söylediğin hakkında hiçbir fikrim yok ve tüm bu isimler kafa karıştırıcı. Bak, bir sunucudan bir sürü veri yüklüyorum, eskiden bir CDN'den jQuery'yi dahil edip AJAX çağrılarıyla veriyi alabiliyordum, neden bunu yapamıyorum?

-2016 yılındayız dostum, artık kimse jQuery kullanmıyor, bir sürü spagetti koduna dönüşüyor. Bunu herkes biliyor.

Doğru. Bu yüzden alternatifim, verileri almak ve bir HTML tablosunu görüntülemek için üç kütüphane yüklemek.

-Peki, bu üç kütüphaneyi dahil ediyorsun ama bunları yalnızca bir dosya yükleyecek şekilde bir modül yöneticisiyle paketliyorsun.

Anladım. Peki modül yöneticisi nedir?

-Tanım ortama göre değişir, ancak web'de genellikle AMD veya CommonJS modüllerini destekleyen her şeyi kastediyoruz.

Tamam. Ve AMD ve CommonJS nedir…?

-Tanımlar. Birden fazla JavaScript kütüphanesi ve sınıfının nasıl etkileşime girmesi gerektiğini tanımlamanın yolları vardır. Biliyorsunuz, dışa aktarma ve gereksinimler? AMD veya CommonJS API'sini tanımlayan birden fazla JavaScript dosyası yazabilir ve bunları bir araya getirmek için Browserify gibi bir şey kullanabilirsiniz.

Tamam, bu mantıklı... Sanırım. Browserify nedir?

- CommonJS tarafından tanımlanan bağımlılıkları tarayıcıda çalıştırılabilen dosyalara paketlemenize olanak sağlayan bir araçtır. Çoğu kişinin bu bağımlılıkları npm kayıt defterinde yayınlaması nedeniyle oluşturulmuştur.

npm kayıt defteri?

-Akıllı insanların kod ve bağımlılıkları modüller halinde koyduğu çok büyük bir kamusal depo.

CDN gibi mi?

-Aslında hayır. Daha çok herkesin kütüphaneleri yayınlayabileceği ve indirebileceği merkezi bir veritabanına benziyor, böylece bunları yerel olarak geliştirme için kullanabilir ve daha sonra isterseniz bir CDN'ye yükleyebilirsiniz.

Ah, Bower gibi!

-Evet ama artık 2016 yılındayız, artık kimse Bower kullanmıyor.

Anladım... o zaman npm'den kütüphaneleri indirmem mi gerekiyor?

-Evet. Örneğin, React kullanmak istiyorsanız, React modülünü indirip kodunuza aktarabilirsiniz. Bunu neredeyse her popüler JavaScript kütüphanesi için yapabilirsiniz.

Ah, tıpkı Angular gibi!

-Angular 2015'in ürünü. Ama evet. Angular, VueJS veya RxJS ve diğer harika 2016 kütüphanelerinin yanında orada olurdu. Bunlar hakkında bilgi edinmek ister misiniz?

React'a devam edelim, zaten çok fazla şey öğreniyorum. Yani, React kullanmam gerekirse bunu şu npm'den alıp sonra şu Browserify şeyini mi kullanacağım?

-Evet.

Bir sürü bağımlılığı alıp birbirine bağlamak aşırı karmaşık görünüyor.

-Öyle, bu yüzden Browserify'ı otomatik olarak çalıştırmak için Grunt veya Gulp veya Broccoli gibi bir görev yöneticisi kullanırsınız. Hatta Mimosa'yı bile kullanabilirsiniz.

Grunt? Gulp? Brokoli? Mimosa? Şimdi ne hakkında konuşuyoruz?

-Görev yöneticileri. Ama artık havalı değiller. Bunları 2015'te kullandık, sonra Makefiles'ı kullandık ama şimdi her şeyi Webpack ile sarıyoruz.

Makefiles? Bunun çoğunlukla C veya C++ projelerinde kullanıldığını sanıyordum.

-Evet, ama görünüşe göre web'de işleri karmaşıklaştırmayı ve sonra temellere geri dönmeyi seviyoruz. Bunu her yıl veya daha sık yapıyoruz, bekleyin, web'de bir veya iki yıl içinde montaj yapacağız.

Ah. Webpack adında bir şeyden mi bahsettin?

-Tarayıcı için bir başka modül yöneticisi olmasının yanı sıra bir tür görev yürütücüsü. Browserify'ın daha iyi bir versiyonu gibi.

Tamam. Neden daha iyi?

-Belki daha iyi değil, sadece bağımlılıklarınızın nasıl bağlanması gerektiği konusunda daha fazla fikir sahibi. Webpack farklı modül yöneticilerini kullanmanıza izin verir, hem de sadece CommonJS olanları değil, örneğin yerel ES6 destekli modüller.

Bu CommonJS/ES6 olayı beni çok şaşırttı.

-Herkes öyle ama artık SystemJS ile ilgilenmenize gerek yok.

Aman Tanrım, bir başka isim-js. Peki, bu SystemJS nedir?

-Browserify ve Webpack 1.x'in aksine SystemJS, birden fazla modülü tek bir büyük dosyada birleştirmek yerine birden fazla dosyada birleştirmenize olanak sağlayan dinamik bir modül yükleyicisidir.

Durun bakalım, kütüphanelerimizi tek bir büyük dosyada oluşturup onu yüklemek istediğimizi sanıyordum!

-Evet, ancak artık HTTP/2 geldiği için birden fazla HTTP isteği aslında daha iyi.

Durun bakalım, React için orijinal üç kütüphaneyi ekleyemez miyiz?

-Aslında hayır. Yani, bunları bir CDN'den harici betikler olarak ekleyebilirsin, ama yine de Babel'i eklemen gerekir.

Ah. Ve bu kötü, değil mi?

-Evet, tüm babel-core'u dahil etmiş olursunuz ve bu üretim için verimli olmaz. Üretimde, Şeytan'ı çağırma ritüelini haşlanmış yumurta tarifi gibi gösterecek şekilde projenizi hazır hale getirmek için bir dizi ön görev gerçekleştirmeniz gerekir. Varlıkları küçültmeniz, çirkinleştirmeniz, katlamanın üstüne css yerleştirmeniz, betikleri ertelemeniz ve ayrıca-

Anladım, anladım. Peki kütüphaneleri doğrudan bir CDN'ye dahil etmeyecekseniz, bunu nasıl yapardınız?

-Webpack + SystemJS + Babel kombinasyonunu kullanarak Typescript'ten derlerdim.

Typescript mi? JavaScript ile kodladığımızı sanıyordum!

-Typescript JavaScript'tir veya daha iyi bir ifadeyle, JavaScript'in bir üst kümesidir, daha spesifik olarak ES6 sürümündeki JavaScript'tir. Daha önce bahsettiğimiz altıncı sürümü biliyor musunuz?

ES2016+'nın zaten ES6'nın bir üst kümesi olduğunu düşünüyordum! Neden şimdi Typescript denen şeye ihtiyacımız var?

-Oh, çünkü JavaScript'i türlendirilmiş bir dil olarak kullanmamızı ve çalışma zamanı hatalarını azaltmamızı sağlıyor. 2016 yılındayız, JavaScript kodunuza bazı türler eklemelisiniz.

Ve Typescript bunu açıkça yapıyor.

-Flow da öyle, ancak yalnızca yazım denetimi yapıyor, Typescript ise derlenmesi gereken JavaScript'in bir üst kümesi.

Ah... ve Akış nedir?

-Facebook'taki bazı adamlar tarafından yapılmış statik bir tip denetleyicisi. Bunu OCaml'de kodlamışlar çünkü fonksiyonel programlama harika.

OCaml? Fonksiyonel programlama mı?

-Günümüzde havalı çocukların kullandığı şey bu dostum, bilirsin işte, 2016? Fonksiyonel programlama? Yüksek dereceli fonksiyonlar? Currying? Saf fonksiyonlar?

Az önce ne söylediğini anlamadım.

-Başlangıçta kimse bunu yapmaz. Bakın, sadece fonksiyonel programlamanın OOP'den daha iyi olduğunu ve 2016'da bunu kullanmamız gerektiğini bilmeniz gerekir.

Dur, ben üniversitede OOP öğrendim, bunun iyi olduğunu düşünmüştüm?

- Oracle tarafından satın alınmadan önce Java da öyleydi. Yani, OOP eskiden iyiydi ve bugün hala kullanımları var, ancak artık herkes durumları değiştirmenin bebekleri tekmelemekle eşdeğer olduğunu fark ediyor, bu yüzden artık herkes değişmez nesnelere ve fonksiyonel programlamaya geçiyor. Haskell adamları bunu yıllardır söylüyordu -ve beni Elm adamlarıyla başlatmayın- ancak neyse ki web'de artık düz JavaScript'te fonksiyonel programlamayı kullanmamızı sağlayan Ramda gibi kütüphanelerimiz var.

Sadece isim olsun diye mi isim veriyorsun? Ramnda da neyin nesi?

-Hayır. Ramda. Lambda gibi. Biliyor musun, David Chambers'ın kütüphanesi?

David kim?

-David Chambers. Harika bir adam. Coup oyununu çok iyi oynuyor. Ramda'ya katkıda bulunanlardan biri. Eğer fonksiyonel programlamayı öğrenmek konusunda ciddiyseniz Erik Meijer'e de göz atmalısınız.

Peki Erik Meijer kimdir…?

- Fonksiyonel programlama uzmanı da. Harika bir adam. Garip renkli bir tişört giyerek Agile'ı yerden yere vurduğu bir sürü sunumu var. Ayrıca Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani'nin yazdıklarından bazılarını da kontrol etmelisiniz.

Tamam. Sizi burada durduracağım. Bunların hepsi iyi ve güzel, ancak bence bunların hepsi sadece veri almak ve görüntülemek için çok karmaşık ve gereksiz. Dinamik verilerle bir tablo oluşturmak için bu insanları tanımam veya tüm bu şeyleri öğrenmem gerekmediğinden oldukça eminim. React'a geri dönelim. React ile sunucudan verileri nasıl alabilirim?

-Aslında React ile verileri çekmiyorsunuz, sadece React ile verileri görüntülüyorsunuz.

Ah, kahretsin. Peki verileri almak için ne kullanıyorsun?

-Verileri sunucudan almak için Fetch'i kullanırsınız.

Özür dilerim? Verileri almak için Fetch'i mi kullanıyorsun? Bu şeyleri adlandıran kişinin bir eş anlamlılar sözlüğüne ihtiyacı var.

-Biliyorum değil mi? Fetch, bir sunucuya karşı XMLHttpRequest'leri gerçekleştirmek için kullanılan yerel uygulamanın adıdır.

Ah, yani AJAX.

-AJAX sadece XMLHttpRequests'in kullanımıdır. Ama elbette. Fetch, daha sonra geri arama cehenneminden kaçınmak için çözebileceğiniz sözlere dayalı AJAX yapmanıza olanak tanır.

Geri çağırma cehennemi mi?

-Evet. Sunucuya karşı her asenkron istek gerçekleştirdiğinizde, yanıtını beklemeniz gerekir, bu da sizi cehennemden gelen geri çağırma piramidi adı verilen bir fonksiyon içinde bir fonksiyon eklemenizi gerektirir.

Tamam. Ve bu söz verme olayı bunu çözüyor mu?

-Gerçekten de. Geri aramalarınızı vaatler aracılığıyla manipüle ederek, anlaşılması daha kolay kod yazabilir, bunları taklit edebilir ve test edebilir, ayrıca aynı anda eş zamanlı istekler gerçekleştirebilir ve hepsi yüklenene kadar bekleyebilirsiniz.

Peki bu Fetch ile yapılabilir mi?

-Evet, ancak yalnızca kullanıcınız sürekli yeşil bir tarayıcı kullanıyorsa, aksi takdirde bir Fetch polyfill eklemeniz veya Request, Bluebird veya Axios kullanmanız gerekir.

Tanrı aşkına kaç tane kütüphane bilmem gerekiyor? Kaç tane var?

-Bu JavaScript. Aynı şeyi yapan binlerce kütüphane olmalı. Kütüphaneleri biliyoruz, aslında en iyi kütüphanelere sahibiz. Kütüphanelerimiz çok büyük ve bazen içlerine Guy Fieri'nin resimlerini ekliyoruz.

Guy Fieri mi dedin? Hadi bitirelim şunu. Bu Bluebird, Request, Axios kütüphaneleri ne işe yarıyor?

-Bunlar, promise döndüren XMLHttpRequest'leri gerçekleştirmek için kullanılan kütüphanelerdir.

jQuery'nin AJAX metodu da promise döndürmeye başlamadı mı?

-2016'da artık "J" kelimesini kullanmıyoruz. Sadece Fetch'i kullanın ve tarayıcıda olmadığında polyfill yapın veya bunun yerine Bluebird, Request veya Axios kullanın. Daha sonra, asenkron bir fonksiyon içinde await ile vaadi yönetin ve işte, doğru kontrol akışına sahip oldunuz.

Üçüncü kez "await" kelimesini kullanıyorsunuz ama ne olduğunu bilmiyorum.

-Await, eşzamansız bir çağrıyı engellemenize olanak tanır, böylece verilerin ne zaman alınacağı konusunda daha iyi bir kontrole sahip olursunuz ve genel olarak kod okunabilirliğini artırırsınız. Harika, sadece Babel'de stage-3 ön ayarını eklediğinizden veya syntax-async-functions ve transform-async-to-generator eklentisini kullandığınızdan emin olmanız gerekir.

Bu çılgınlık.

-Hayır, çılgınlık, TypeScript kodunu önceden derlemeniz ve daha sonra await'i kullanmak için Babel ile derlemeniz gerektiğidir.

Ne? Typescript'e dahil değil mi?

-Bir sonraki versiyonda bunu yapacak, ancak 1.7 versiyonundan itibaren sadece ES6'yı hedefliyor, dolayısıyla tarayıcıda await kullanmak istiyorsanız, önce Typescript kodunuzu ES6'yı hedefleyecek şekilde derlemeniz ve ardından Babel'i ES5'i hedefleyecek şekilde düzenlemeniz gerekiyor.

Bu noktada ne diyeceğimi bilmiyorum.

-Bakın, kolay. Her şeyi Typescript'te kodlayın. Fetch kullanan tüm modüller onları ES6'yı hedefleyecek şekilde derler, onları bir aşama 3 ön ayarında Babel ile transpile eder ve SystemJS ile yükler. Fetch'iniz yoksa, onu polyfill yapın veya Bluebird, Request veya Axios kullanın ve tüm sözlerinizi await ile işleyin.

Kolayın çok farklı tanımları var. Yani, bu ritüelle sonunda verileri aldım ve şimdi React ile görüntüleyebilirim, değil mi?

-Uygulamanız herhangi bir durum değişikliğini işleyebilecek mi?

Hımm, sanmıyorum. Sadece verileri göstermem gerekiyor.

-Oh, şükürler olsun. Aksi takdirde sana Flux'ı ve Flummox, Alt, Fluxible gibi uygulamaları açıklamak zorunda kalacaktım. Dürüst olmak gerekirse Redux kullanmalısın.

Sadece bu isimlerin üzerinden uçacağım. Tekrar ediyorum, sadece verileri görüntülemem gerekiyor.

-Oh, eğer sadece verileri görüntülüyorsanız, başlangıçta React'a ihtiyacınız yoktu. Bir şablonlama motoruyla iyi olurdunuz.

Şaka mı yapıyorsun? Bunun komik olduğunu mu düşünüyorsun? Sevdiklerine böyle mi davranıyorsun?

-Sadece sana ne kullanabileceğini anlatıyordum.

Dur. Dur artık.

-Yani, sadece şablon motoru bile kullansam, ben olsam Typescript + SystemJS + Babel kombinasyonunu kullanırdım.

Bir sayfada veri görüntülemem gerekiyor, Sub Zero'nun orijinal MK fatality'sini gerçekleştirmemem gerekiyor. Bana sadece hangi şablonlama motorunu kullanacağımı söyleyin, gerisini ben halledeyim.

-Çok var, hangisini biliyorsun?

Ugh, adını hatırlayamıyorum. Uzun zaman önceydi.

-jTemplates? jQote? PURE?

Hımm, bir şey çağrıştırmıyor. Başka biri mi?

-Şeffaflık? JSRender? MarkupJS? KnockoutJS? Onun iki yönlü bağlaması vardı.

Bir tane daha mı?

-PlatesJS? jQuery-tmpl? Handlebars? Bazı insanlar hala kullanıyor.

Olabilir. Sonuncusuna benzerleri var mı?

- Bıyık, alt çizgi? Dürüst olmak gerekirse artık lodash'ın bile bir tane olduğunu düşünüyorum ama bunlar 2014'ün bir parçası.

Hımm... belki daha yeniydi.

-Jade? DustJS?

HAYIR.

-DotJS mi? EJS mi?

HAYIR.

-Nunjuck mı? EKT mi?

HAYIR.

-Mah, zaten Coffeescript sözdizimini kimse sevmiyor. Jade?

Hayır, zaten Jade dedin.

-Pug demek istedim. Jade demek istedim. Yani Jade artık Pug.

Ah. Hayır. Hatırlayamıyorum. Hangisini kullanırdın?

-Muhtemelen sadece ES6 yerel şablon dizeleri.

Tahmin edeyim. Ve bu ES6 gerektirir.

-Doğru.

Kullandığım tarayıcıya bağlı olarak Babel'e ihtiyaç duyuyor.

-Doğru.

Eğer çekirdek kütüphanenin tamamını eklemeden dahil etmek istiyorsam, bunu npm'den bir modül olarak yüklemem gerekiyor.

-Doğru.

Bunun için Browserify, Wepback veya büyük ihtimalle SystemJS adı verilen başka bir şeye ihtiyaç vardır.

-Doğru.

Webpack olmadığı sürece, ideal olarak bir görev yürütücüsü tarafından yönetilmesi gerekir.

-Doğru.

Fakat fonksiyonel programlama ve yazılı diller kullanmam gerektiği için öncelikle Typescript'i önceden derlemem veya bu Flow şeyini eklemem gerekiyor.

-Doğru.

Ve eğer await'i kullanmak istersem bunu Babel'e gönderebilirim.

-Doğru.

Böylece Fetch'i, promise'leri, kontrol akışını ve tüm o sihirleri kullanabilirim.

-Desteklenmiyorsa Fetch'i polyfill yapmayı unutmayın, Safari bunu hala kaldıramıyor.

Biliyor musun? Sanırım burada işimiz bitti. Aslında, sanırım ben bittim. Web'le işim bitti, JavaScript'le işim bitti.

-Önemli değil, birkaç yıl içinde hepimiz Elm veya WebAssembly'de kod yazıyor olacağız.

Ben sadece arka uca geri döneceğim. Bu kadar çok değişiklik, sürüm, edisyon, derleyici ve transpiler ile başa çıkamıyorum. JavaScript topluluğu, herhangi birinin buna ayak uydurabileceğini düşünüyorsa çıldırmış demektir.

-Seni anlıyorum. O zaman Python topluluğunu denemelisin.

Neden?

-Python 3'ü duydunuz mu?

Güncelleme: Yazım hatalarını ve yanlışları belirttiğiniz için teşekkürler, makaleyi belirtildiği gibi güncelleyeceğim. HackerNews ve Reddit'teki tartışma .