Blog.

Web i├žin Non-Hype Rehberi: ES Modules ile Gelece─če D├Ân├╝┼č

Cover Image for Web i├žin Non-Hype Rehberi: ES Modules ile Gelece─če D├Ân├╝┼č
Baris Guler
Baris Guler

DeLorean Credits: https://www.pngwing.com/en/free-png-ymhbn

Hat─▒rlatma: Bu makale size neyi nas─▒l yapaca─č─▒n─▒z─▒ de─čil, webÔÇÖin kabul g├Âren best practiceÔÇÖleri nas─▒l de─či┼čtirebilece─činizi anlat─▒yor. Yaz─▒n─▒n orjinaline buradan ya da buradan ula┼čabilirsiniz. Bu yaz─▒ bir s├╝redir Kjaer ile ├╝zerinde kafa patlatt─▒─č─▒m─▒z build ya da bundle olmaks─▒z─▒n geli┼čtirme yapma fikri ├╝zerine bir detay payla┼č─▒m─▒ olarak de─čerlendirilebilir.

Hat─▒rlatma 2: Gelece─če D├Ân├╝┼č temas─▒n─▒ neden se├žmemin sebebi, ge├žmi┼čte web geli┼čtirmenin daha ├žok HTML_ÔÇÖin i├žerisinde yap─▒lan geli┼čtirmeden olu┼čuyordu. G├╝n ge├žtik├že ortaya ├ž─▒kan ara├žlarla zaman i├žerisinde de─či┼čen paradigman─▒n yava┼č yava┼č terkedilip, webÔÇÖin orjinal yakla┼č─▒m─▒na daha ├žok yakla┼č─▒yoruz._

Ger├žekten ─░stedi─čimiz Bundler-ba─č─▒ml─▒ Geli┼čtirme mi?

Web uygulama code bundlerÔÇÖlar─▒ (Webpack vb.) bug├╝n neredeyse geli┼čtirdi─čimiz b├╝t├╝n web uygulamalar─▒nda kullan─▒l─▒yor. Bunu da bug├╝ne kadar ECMAScriptÔÇÖteki geli┼čmelere taray─▒c─▒ engineÔÇÖlerinin yeti┼čememelerine bor├žluyuz. Her ara├ž gibi bu ekstra stepÔÇÖin geli┼čtirme ya┼čam d├Âng├╝s├╝ne dahil olmas─▒ beraberinde ba┼čka dertleri de beraberinde getirdi. ├ľzetle bu ek ad─▒m, bir uygulama geli┼čtirmek istedi─činizde, projenizi canl─▒ya almadan ├Ânceki geli┼čtirme s├╝recinize ek bir adim eklemeniz anlam─▒na geliyor: build/bundle a┼čamas─▒. Deneyimleri farkl─▒ olsa da kulland─▒─č─▒m─▒z her bir code bundlerÔÇÖ─▒n geli┼čtirme suresince ald─▒─č─▒ kod exportÔÇÖu, yazd─▒─č─▒n─▒z kodun boyutu b├╝y├╝d├╝k├že geni┼čliyor, ┼či┼čiyor. Kald─▒ ki sorun sadece geli┼čtirme a┼čamas─▒nda de─čil. Canl─▒ya ├ž─▒k─▒ld─▒─č─▒nda e─čer do─čru bir caching stratejisinden bahsedemiyorsak canl─▒da bundleÔÇÖi remote noktadan fetch etmek i├žin harcanan bir de ek s├╝re s├Âz konusu. Bu da insan─▒ ┼čunu d├╝┼č├╝nmeye itiyor: nerede kald─▒ geli┼čtirme/geli┼čtirici deneyimi ya da tatmini?

https://httparchive.org/reports/page-weight#bytesTotalhttps://httparchive.org/reports/page-weight#reqTotal

Bug├╝n, web teknolojilerindeki son geli┼čmeler ─▒┼č─▒─č─▒nda, taray─▒c─▒lar geli┼čtirici ve|veya geli┼čtirme deneyimini artt─▒rmak i├žin farkl─▒ bir yol izlemek zorunda oldu─čunu bir s├╝re ├Ânce anlad─▒. Bu deneyimi kolayla┼čt─▒rmak ve geli┼čtiricilerin sadece in┼ča etttikleri ├╝r├╝ne odaklanmalar─▒n─▒ sa─člamak icin yeni ├╝r├╝nler ├ž─▒kart─▒yorlar. ├ľrne─čin Vercel, Netlify, Amplify, vb. gibi ara├žlar bu i┼či daha kolay hale getirmek, geli┼čtirme d├Âng├╝s├╝n├╝ (code Ôçĺ CI/CD Ôçĺ Live) daha da h─▒zland─▒r─▒rken bug├╝n geli┼čtiriciler bir├žok nedenden ├Ât├╝r├╝ bu s├╝renin giderek uzamas─▒ndan muzdarip alabiliyor. Bunun bir├žok sebebi var: kullan─▒lan ara├žlara (tool) ├Âzel konfig├╝rasyon yapmak zorunda kalmak, ek compilation/build/bundle zamanlar─▒, ve export edilen kod ├ž─▒kt─▒s─▒na eklenen onca ilave kod nedeniyle runtimeÔÇÖda ya┼čanan performans sorunlar─▒.

Credits: https://v8.dev/blog/cost-of-javascript-2019

Burada de─činmek istedi─čim konu daha ├žok code bundleÔÇÖlar─▒. Web uygulamalar─▒n─▒ statik olarak ├ž─▒kt─▒ alman─▒n performans parametrelerine katk─▒s─▒ oldu─ču gibi, web geli┼čtirmeyi daha rahat ve a─čr─▒s─▒z, s─▒z─▒s─▒z yapman─▒n bir ba┼čka yolu bir s├╝redir zaten var; o da b├╝t├╝n uygulaman─▒n bir kod ├ž─▒kt─▒s─▒ olarak bir ya da birden fazla dosyalar halinde build-time s─▒ras─▒nda load etmek ya da i┼člemek yerine, runtimeÔÇÖda ba┼čka bir yakla┼č─▒ma yaslanmak. Ben buna ÔÇťbuildlessÔÇŁ diyorum ama ÔÇťbundlelessÔÇŁ, ÔÇťbundle-exportlessÔÇŁ gibi ifadelerle tan─▒mlamak da m├╝mk├╝n, hatta daha uygun gelebilir. (Ne de olsa bug├╝nlerde bir yakla┼č─▒m─▒ -less ekiyle tan─▒mlad─▒─č─▒n─▒zda daha ├žok ilgi g├Âr├╝yor: bkz. codeless, serverless, vb.)

Neden bundle almayal─▒m ki?

├çoktand─▒r bir EcmaScript standard─▒ olan mod├╝l sistemi hem sunucu hem de istemci taraf─▒nda desteklenir hale geldi diyebiliriz. B├Âylece daha az ba┼č a─čr─▒s─▒ ile tutarl─▒ bir geli┼čtirme deneyimi yasayabilirsiniz.

Bircok uygulamaya s─▒f─▒rdan ba┼čland─▒─č─▒ ilk anda ba┼čvurdu─ču haz─▒r boilerplate ├╝rete├žlerinin ├╝retti─či bundle boyutlar─▒ d├╝┼č├╝n├╝ld├╝─č├╝nde konunun ciddiyeti tabii ki daha da art─▒yor. node_modules dizininin ├╝n├╝ evrensel bir hale geldigi g├╝n├╝m├╝zde, bu konudaki her geli┼čmenin bize hem geli┼čtirme zaman─▒ olarak, hem de canl─▒ya ├ž─▒kma zaman─▒nda olarak art─▒s─▒ zaten ka├ž─▒n─▒lmazd─▒.

Credits: https://medium.com/better-programming/npkill-the-easy-solution-to-deleting-node-modules-with-style-1c591126f7a5

Nitekim a┼ča─č─▒daki tablo her deploy sonras─▒nda sunucular─▒n─▒zdan tekrar tekrar y├╝kledi─čimiz bundle dosyalar─▒n yan─▒s─▒ra build s─▒ras─▒nda export edilen dosyalar─▒n boyutlar─▒na dair bir fikir veriyor.

B├╝t├╝n bunlara ek olarak, daha ├Ânceleri BrowserSync ile a┼čina oldu─čumuz Save & Refresh yerini React.js ile geli┼čtirme yap─▒l─▒rken ilk kez tan─▒┼čt─▒─č─▒m─▒z HMRÔÇÖye (Hot-Module Reloading) b─▒rakt─▒. Bu s├╝re genellikle geli┼čtirmenin yaratt─▒─č─▒ hararetle es ge├žilen bir detay. Ancak geli┼čtirme esnas─▒nda her bir CTRL+S / Bundle Export i┼čleminin ald─▒─č─▒ s├╝re g├Âz ├Ân├╝ne al─▒nd─▒─č─▒nda geli┼čtiricinin ya┼čad─▒─č─▒ bu muhtemel zaman kayb─▒n─▒n geri d├Ân├╝┼č├╝ de ayr─▒ca bir memnuniyetsizlik konusu olabiliyor. V8'te halihaz─▒rda bulunan Dynamic import ile bu dert k─▒smen a┼č─▒labiliyor olsa da, her ┼čekilde bir code bundler tool kullan─▒ld─▒─č─▒ndan yine de ├Ân├╝m├╝zde ciddi bir bundle export time gibi bir can s─▒k─▒c─▒ parametre duruyor. Her save sonras─▒ bekleme, sonucu g├Ârme, kodu update etme ve yeniden ayn─▒ d├Âng├╝. Tabii kodun boyutu b├╝y├╝d├╝k├že bu zaman─▒n artmas─▒ da s├Âz konusu.

B├╝t├╝n bunlar─▒ d├╝┼č├╝n├╝rken tabii bir de kullan─▒c─▒ya bir an ├Ânce bir ├╝r├╝n ile ula┼čay─▒m derken urunun ba─člam─▒ndan kopup (zaten basta planlama olmak ├╝zere ba┼čka bir ton parametreyle u─čra┼č─▒rken bir de) bu t├╝r sadece geli┼čtirme d├Âng├╝s├╝nde varolan detaylarda bo─čulman─▒z ve (varsa) deadlineÔÇÖ─▒n─▒za yava┼č yava┼č el sallamaya ­čĹő­čĆ┐ ba┼člaman─▒z ├žok olas─▒. Elbette bu detaylar her uygulama geli┼čtirme surecinin neredeyse bir par├žas─▒ ama hype anlay─▒┼č─▒n ya da toolÔÇÖlar─▒n aksine ba┼čka bir imkan daha m├╝mk├╝n: ES Modules. Bunu bundle almadan geli┼čtirme olarak ├Âzetleyebiliriz.

Ve bu tarz bir mod├╝l kullan─▒m─▒, yani Node.jsÔÇÖin bir suredir stabil s├╝r├╝m├╝nde de yer verdigi ES Modules ├Âzelli─či taray─▒c─▒lar─▒n ├Ânemli bir k─▒sm─▒nda bug├╝n aktif ve kullan─▒labilir durumda.

https://caniuse.com/es6-module

Ayn─▒ zamanda halihaz─▒rda npmÔÇÖdeki herhangi bir packageÔÇÖ─▒ direk olarak skypack ├╝zerinden JS ya da HTML dosyan─▒za import ederek kullanabilirsiniz:

Veya direk HTML i├žerisinden import etti─činiz packageÔÇÖa ula┼čman─▒z m├╝mk├╝n.

type attributeÔÇÖ├╝ ÔÇťmoduleÔÇŁ olan her script tagÔÇÖi ve import edilen dosyan─▒n icinden export edilmi┼č entryÔÇÖniz ile kodunuzu direk HTML dosyan─▒zda run etmeniz m├╝mk├╝n demek, evet, webÔÇÖde tarihin tekerle─čini geriye do─čru ├ževrilmesi gibi gelebilir ama y├Ântemlerin basitle┼čmesiyle daha kullan─▒┼čl─▒ hale gelmeleri ho┼č bir detay. Hatta terminalinizde npm installÔÇÖ─▒ run etmenize gerek duymadan!

preactÔÇÖ─▒n skypack package skoru: https://www.skypack.dev/view/preact

Gelin bir de bunu bi ger├žel bir use-case uzerinden inceleyelim. Bir ├žo─čumuz cookie set/get islemleri i├žin belli k├╝t├╝phaneler kullanm─▒┼čt─▒r. Benim bir s├╝redir tercih etti─čim js-cookie k├╝t├╝phanesinin readme dosyas─▒ndan yakalad─▒─č─▒m bir detay─▒ surada payla┼čay─▒m:

https://github.com/js-cookie/js-cookie#direct-download

An itibariyle ÔÇťama biz vanilla javascript sentaks─▒n─▒ sadece tooling i├žin kullan─▒yoruzÔÇŁ denildi─čini duyar gibiyim. Malumunuz bir aralar (asl─▒nda hala devam eden oranda) jQuery icin s├Âylenilenleri bug├╝n yava┼č yava┼č di─čer bir├žok favori tool icin s├Âyl├╝yoruz. Nitekim kullan─▒m oranlar─▒ giderek artan Vue, React, Angular, vb. ara├žlar─▒n ES Modules desteklemeye ba┼člamalar─▒n─▒n ├žok uzun zaman almayaca─č─▒n─▒ da belirteyim. Tek ihtiyac─▒m─▒z olan ┼čey ES Modules uyumlu bir entry fileÔÇÖ─▒n─▒n ├ž─▒kt─▒ olarak al─▒nmas─▒yd─▒. (Bu konuda Vue.jsÔÇÖi tebrik etmek laz─▒m! ­čĹĆ­čĆ┐) Hala desteklemeyenler i├žin sykpack gibi package CDNÔÇÖlerini kullanman─▒z─▒ tavsiye ederim.

├ľzetle i┼čin ucu ┼čuraya dayan─▒yor: paket ba─č─▒ml─▒l─▒klar─▒n─▒z─▒ ek olarak i┼č mant─▒─č─▒n─▒z─▒ i┼čleyen koda ekleyip bundleÔÇÖlar ├ž─▒kartarak ├žal─▒┼čmak yerine, runtimeÔÇÖda geli┼čtirmenizi yap─▒p, hi├ž geli┼čtirme ortam─▒n─▒z─▒ terk etmeden ayn─▒ ortam ile canl─▒ya ├ž─▒kman─▒z da m├╝mk├╝n diyebiliriz. Her g├╝n bir build-time zaman─▒n─▒ zaten yeterince bundler tanr─▒lar─▒na kurban ediyoruz; bu sefer de geli┼čtirici deneyimine katk─▒da bulunan bir ├Âzellik ile geli┼čtirme yapmak eminim geli┼čtirme s├╝recini daha zevkli hale getirecektir. Sadece taray─▒c─▒larda de─čil, farkl─▒ ortam ve platformlarda da ├žal─▒┼čan uygulamalar─▒ yazd─▒─č─▒m─▒z her g├╝n ÔÇťtek bir yerde (dosyada) yaz, hemen ├žal─▒┼čt─▒rÔÇŁ demek (a┼ča─č─▒daki ├Ârnekteki gibi) ├žok da zor olmamal─▒, degil mi?

Mesela preact kullanarak ES Modules ├Âzelli─činden faydalanarak bir uygulama yazmaya ba┼člad─▒n─▒z. Ben burada snowpack kullan─▒yorum, siz aralar─▒ndan se├žti─činiz ┼ču, ┼ču veya ┼ču toolÔÇÖu tercih ederek geli┼čtirme yapabilirsiniz.

npx create-snowpack-app app --template @snowpack/app-template-preact --use-npm && cd ./app && npm start
```![](https://miro.medium.com/max/984/1*s8oJw6O7T5YfT6tUxIpLUg.png)Terminaliniz ┼ču ├ž─▒kt─▒y─▒ verdi─činde haz─▒rs─▒n─▒z demektir. ­čĹî![](https://miro.medium.com/max/1400/1*ztZ5iIefotFoW7cn4YqkPQ.png)App.js dosyas─▒ ­čĹŹ![](https://miro.medium.com/max/422/1*z9m4iDMfask83YdO50M05Q.png)Taray─▒c─▒dak─▒ sonu├ž ­čÄë

**public** dizinindeki index.htmlÔÇÖin i├žeri─čine bakt─▒─č─▒n─▒zda g├Ârece─činiz ┼ču sat─▒r ile kodunuz taray─▒c─▒da ko┼čmaya haz─▒r:


`_dist_`dizini i├žindeki dosyayi bundle edilmi┼č kod olarak kabul edebilirsiniz. snowpack'in burada yapt─▒─č─▒ ┼čey, geli┼čtirdi─činiz kodu ilgili package'lar ile size browser ortaminda direk run edebileceginiz hale [getirmesi](https://github.com/snowpackjs/snowpack/blob/c929b04a27a73b431aff7bfc707b90a0d5e8945a/snowpack/src/build/file-urls.ts#L8). Fark─▒, bunu ekstra eklenti olmadan yap─▒yor olmas─▒ ve ES Modules-native bir dosya ├ž─▒kartmas─▒. ├ľrne─čin, `index.js`dosyas─▒n─▒ herhangi bir HTML dosyas─▒nda ya da bir JS istediginiz tool'u kullanabilir, hatta hicbir tool'a bagimli olmadan gelistirmenizi [yapabilirsiniz](https://docs.skypack.dev/skypack-cdn/code/javascript#getting-started).

E─čer kodu productionÔÇÖda run edecekseniz skypackÔÇÖin her package i├žin sundu─ču [pinned urlÔÇÖleri](https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized) kullanmam─▒z tavsiye ediliyor. Yukar─▒daki kodun direk olarak browserÔÇÖdan ├žal─▒┼čan halini merak ediyorsan─▒z, buyrun burada:

![](https://miro.medium.com/max/1400/1*vAF6oWH2peC4SrpukfRX9g.png)me┼čhur index.html

Ben deployment stepÔÇÖini [Vercel](https://vercel.com/) uzerinden konfig├╝re ettim. Yapman─▒z gereken _Settings_ Ôçĺ _Build & Development Settings_ k─▒sm─▒na giderek _Build_ **npm run snowpack:build** ile de─či┼čtirmeniz. Ard─▒ndan her bir masterÔÇÖa merge i┼čleminizde deploy ettiginiz kodunuz **public** dizininden canl─▒ya al─▒nacakt─▒r. E─čer custom bir distribution dizininin var ise, onu da _Output Directory_ÔÇÖde belirtebilirsiniz, aksi durumda sorunsuz ├žal─▒┼čacakt─▒r.

Ge├ži┼či nas─▒l yapsak?
====================

ES Modules ├žoktan bir├žok taray─▒c─▒ taraf─▒ndan desteklendi─činden bundler kullanarak geli┼čtirme yapmaktan uzakla┼č─▒p kodunuzda daha modern bir yakla┼č─▒m benimsemek i├žin, kod taban─▒n─▒z─▒n ihtiya├žlar─▒na uygun olarak bir [strateji](https://jasonformat.com/modern-script-loading/) izleyebilirsiniz. Bu konuda (├Ârn.) Rollup ile [ba┼člay─▒p](https://bundlers.tooling.report/output-module-formats/es-modules/), kodu k├╝├ž├╝k islem par├žalar─▒na b├Âl├╝p kucuk migrationÔÇÖlar yapmak her bir featureÔÇÖ─▒n─▒z─▒ module d├Ân├╝┼čt├╝rmenizi sa─člayabilir. Veya direk olarak kodunuzu ES modules exportÔÇÖu alabilece─činiz herhangi bir tool uzerinden uygulamalar─▒n─▒za entegre edebilirsiniz.

Geli┼čtirme deneyiminizi b├Âyle artt─▒r─▒rken ayn─▒ zamanda domain-specific ├╝r├╝nlerinizi ba┼čka uygulamalar─▒n─▒za kod taban─▒ndaki k├╝├ž├╝k konfig├╝rasyon de─či┼čiklikleriyle ekleyece─činiz ES Modules deste─čiyle entegre edebilirsiniz. Bu konuda ┼ču [├Ârne─či](https://github.com/kjartanm/microfrontends/blob/master/packages/home/index.html) verebilirim. ├ľzellikle son zamanlarda framework ve toolÔÇÖlar aras─▒ ├žak─▒┼čmalar─▒n sadece ├Âzel kod ├žat─▒lar─▒yla ├ž├Âz├╝lebildi─či g├╝n├╝m├╝zde temiz bir entegrasyon sunan ES ModulesÔÇÖ├╝n [microfrontend](https://github.com/rajasegar/awesome-micro-frontends#frameworks) yakla┼č─▒m─▒nda nas─▒l yard─▒mc─▒ bir ara├ž haline gelebildi─čini g├Âreceksiniz. Eminim _production.like.bla.bla.bla.config.js_ dosyalar─▒ndan kurtuldu─čunuza sevinirken, artan geli┼čtirme tatmini ile i┼č odaklanman─▒z─▒ saglayabilirsiniz.

Tak─▒mca yapt─▒─č─▒n─▒z [grooming](http://www.yilmazcihan.com/product-backlog-refinement-grooming-nedir/) oturumlar─▒nda, [guild](https://achardypm.medium.com/agile-team-organisation-squads-chapters-tribes-and-guilds-80932ace0fdc) toplant─▒lar─▒nda, kahve sohbetlerinizde bu konudan bahsedip arkada┼člar─▒n─▒z─▒n konudan heyecan duymas─▒n─▒ saglayabilir, birlikte ├že┼čitli inisiyatifler yaratarak mevcut kod taban─▒n─▒z─▒ ES Modules ├╝zerinden kolayl─▒klar yeniden tasarlayabilirsiniz. B├Âylece belki de _lead-by-example_ i├žin bir konu bulmu┼čsunuzdur.

Patronu / y├Âneticinizi [burada](https://web.dev/publish-modern-javascript/) detaylar─▒yla anlat─▒lan [EStimator](http://estimator.dev/)ÔÇÖdan alaca─č─▒n─▒z raporu kullanarak bu modern web paradigmas─▒n─▒ kullanmak i├žin ikna etmeye ba┼člayabilirsiniz.

![](https://miro.medium.com/max/1400/1*_7zI3FQkgJ1L7AD5QRHJOQ.png)

B├╝t├╝n bunlara ek olarak, bir sure once [Kjaer](https://github.com/Kjaer/) ile birlikte yay─▒na ald─▒─č─▒m─▒z [buildless.site](https://buildless.site/)ÔÇÖa ([awesome-buildless](https://github.com/hwclass/awesome-buildless) ├╝zerinden) g├Ânderece─činiz repo/ornek/makale vb. kaynaklarla destek verebilir, modern web teknolojilerini etraf─▒n─▒za ve geli┼čtirme d├╝nyas─▒n─▒n geri kalan─▒na yaymaya yard─▒mc─▒ olabilirsiniz. Ayn─▒ firmada cal─▒┼čt─▒─č─▒m─▒z d├Ânemde konu ile ilgili haz─▒rlad─▒─č─▒m─▒z sunuma da [buradan](https://slides.com/kjaer/deck-7d99d4) ula┼čabilirsiniz.

![](https://miro.medium.com/max/1400/1*Q-Mc4pyjt-dU5erG_8m3Cg.png)[

buildless.site
--------------

### A collection of sites, apps, packages, articles and other stuff about ES modules.

buildless.site

](https://buildless.site/)[

hwclass/awesome-buildless
-------------------------

### A collection of sites, apps built based on & packages, articles and other stuff about ES modules ÔÇŽ

github.com

](https://github.com/hwclass/awesome-buildless)

Umar─▒m yaz─▒l─▒m geli┼čtirme s├╝re├žlerinizde size yard─▒mc─▒ olacak bir yakla┼č─▒m ile tan─▒┼čt─▒rm─▒┼č─▒md─▒r. Destek ve tart─▒┼čmay─▒ yaymak icin payla┼čabilir, bana [twitter](https://www.twitter.com/hwclass) ya da [linkedin](https://www.linkedin.com/in/hwclass) ├╝zerinden ula┼čabilirsiniz. Di─čer yaz─▒lar─▒ma da [hwclass.dev](https://hwclass.dev)ÔÇÖden okuman─▒z m├╝mk├╝n.

Zaman ay─▒r─▒p okudu─čunuz i├žin te┼čekk├╝rler. Geri bildirimlerinizi sab─▒rs─▒zl─▒kla bekliyorum. ­čĹő