Blog.

Snowpack 3.x Streaming Imports ile npmÔÇÖsiz ClientÔÇÖlar

Cover Image for Snowpack 3.x Streaming Imports ile npmÔÇÖsiz ClientÔÇÖlar
Baris Guler
Baris Guler

Bir s├╝redir ES Modules ├╝zerine yazmaya ├žal─▒┼č─▒p merakl─▒lar─▒na y├Ân vermeye gayret g├Âsterdi─čim bir d├Ânemin ├╝zerine buildless.siteÔÇÖta 2.x olan Snowpack versiyonunu 3.0 olarak g├╝ncellemek, bu yolla da bu versiyonda gelen yeniliklerden bahsetmek istedim.

Bundan ├Ânceki bir yaz─▒mda uzun uzad─▒ya bahsetti─čim bir ara├ž olarak Snowpack, modern web taray─▒c─▒lar─▒na ├žoktan gelmi┼č ve zamanla tamamen yayg─▒nla┼čacak olan ES Modules ile ÔÇśnative hisliÔÇÖ geli┼čtirme yapman─▒n kap─▒lar─▒n─▒ ard─▒na kadar a├ž─▒yor. Temelde yapt─▒─č─▒ ise, yayg─▒n olarak kullan─▒lan build ara├žlar─▒n─▒n devasa bundleÔÇÖlar alarak yapt─▒─č─▒n─▒, unbundled y├Ântem (ES Modules) ve kaynaklara (Skypack) ba┼čvurarak yap─▒yor, b├Âylece hem h─▒zl─▒ bir proje geli┼čtirme deneyimi ya┼č─▒yorken ayn─▒ zamanda favori ara├žlar─▒n─▒z─▒ da geli┼čtirme s├╝recinize dahil etmenize olanak tan─▒yor. K─▒sacas─▒ deneyinizÔÇŽ

O zaman ilk olarak Snowpack 3 ile gelen yeni ├Âzelliklere h─▒zl─▒ca bak─▒p, as─▒l dikkat ├žekmek istedi─čim konu olan npm olmadan geli┼čtirme konusuna yani streaming imports olay─▒na ge├želim.

Snowpack 3 ile Gelen ├ľzellikler

esbuild ile gelen built-in (├Ârn. bundling, preloading, minification ve benzeri) kod derleme / toparlama i┼člevsellikleri

Kod bundleÔÇÖlama i┼či bir build-sonras─▒ optizasyonudur fikriyle SnowpackÔÇÖin arka planda kulland─▒─č─▒ ve webpack ve rollup gibi builderÔÇÖlardan daha h─▒zl─▒ bir build toolÔÇÖu olan esbuild ile yeni optimizasyon tercihleri geldi. B├Âylece Snowpack, varolan build toolÔÇÖlar─▒ndan 100x daha h─▒zl─▒ oldu─ču iddias─▒nda olan esbuildÔÇÖi kullanarak a┼ča─č─▒daki i┼člemleri bu kolayl─▒kta hallediyor:

Yeni Snowpack JS API

SnowpackÔÇÖin client ve server ├Âzelliklerine daha kolay ula┼čmay─▒ sa─člayan aray├╝z geli┼čtirilmi┼č.

├ľrnek verilen kodda, yeni runtime ile sunucu taraf─▒nda client (├Ârn. react) componentÔÇÖinizin testlerini run edebilir, bir UI componentÔÇÖini sunucu tarafl─▒ render ettirebiliyorsunuz.

Hatta bir ad─▒m daha ileri giderek UI componentÔÇÖlerinizi sunucu taraf─▒nda test edebilece─činiz bir APIÔÇÖya d├Ân├╝┼čt├╝rm├╝┼č durumdalar. Biz ┼čimdilik e2e bir ├ž├Âz├╝m olan QAWolf ile devam edece─čiz. D├Âk├╝mantasyonundan da anla┼č─▒laca─č─▒ ├╝zere, olduk├ža basit bir aray├╝z ile e2e testlerdeki DOM operasyonlar─▒ yapma i┼čini interaktif ve kolay kullan─▒lan bir IDEÔÇÖnin yard─▒m─▒yla olduk├ža basite indirgeyerek ├ž├Âzen bu ara├ž ile h─▒zl─▒ca yazd─▒─č─▒m testi de ┼čuraya ili┼čtireyim. Ki┼čisel projeleriniz i├žin ├╝cretsiz olan arac─▒n scheduled test run ├Âzelli─čiyle belli aral─▒klarla ko┼čaca─č─▒n─▒z testlerinizin raporlar─▒n─▒ d├╝zenli olarak g├Ârebilmeniz de m├╝mk├╝n.

Son bir ek not, (Yeni nesil Sapper olan) SvelteKit ve (Snowpack ile geli┼čtirilmi┼č bir SSG olan) Microsite gibi toolÔÇÖlar ┼čimdiden Snowpack APIÔÇÖ─▒n─▒ arkada kullan─▒yor bile.

Yeni Node.js RuntimeÔÇÖ─▒

SnowpackÔÇÖin elinden ge├žen herhangi bir ESM formatl─▒ dosyan─▒n Node.js environmentÔÇÖ─▒ i├žerisine import edilmesi (ESM > CJS) sa─članm─▒┼č. S├╝r├╝m yaz─▒s─▒nda da belirtildi─či gibi, bu gibi bir esnekli─čin ger├žek SSR yapabilmek ve test runnerÔÇÖlar i├žin entegrasyonlar─▒ burada yapabilmek i├žin bir f─▒rsat olaca─č─▒ detay─▒na yer verilmi┼č.

Streaming Imports (aka. npmÔÇÖsiz ba─č─▒ml─▒l─▒k y├Ânetimi ve | veya kullan─▒m─▒)

Ba┼čl─▒kta kulland─▒─č─▒m ifadeye gelebilecek sorular─▒ ┼čimdiden referans alarak a├ž─▒kl─▒k getireyim. Snowpack, bu son 3.x versiyonunda client geli┼čtirme s─▒ras─▒nda kulland─▒─č─▒m─▒z paket registryÔÇÖsi olarak npm ba─č─▒ml─▒l─▒─č─▒na dair farkl─▒ bir yorum getirdi.

Buna g├Âre, SkypackÔÇÖin yard─▒m─▒yla npm install ile node_modules i├žerisine toplad─▒─č─▒n─▒z paketlerinizi art─▒k kendi ├Ânerdi─či bir y├Ântemle cacheÔÇÖliyor. B├Âylece client tarafta ihtiyac─▒n─▒z olan paketler i├žin npm install yapmak yerine, snowpack add package-name yapman─▒z ve snowpack.config.js dosyas─▒n─▒ a┼ča─č─▒daki ┼čekilde update etmeniz yeterli oluyor. Bunu da direk olarak canl─▒ bir ├Ârnek olarak buildless.site ├╝zerinden denemek istedim.

ilk ad─▒m olarak kullan─▒lacak packageÔÇÖlar─▒n art─▒k nodeÔÇÖten de─čil, snowpack arac─▒l─▒─č─▒yla skypackÔÇÖten gelmesi gerekti─čini belirtiyorum:

snowpack add [package-name] run edildi─činde snowpack.deps.json adl─▒ bir dosya ├╝retiliyor. Bu dosya da SemVer version bilgisi ve lockfile bilgisini i├žeriyor. B├Âylece snowpack cacheÔÇÖine ald─▒─č─▒n─▒z packageÔÇÖlardan sonra snowpack.deps.json dosyas─▒ proje dizininde olu┼čacak ve ┼č├Âyle bir ┼čekilde g├Âr├╝necek:

B├Âylece kodunuzda hi├žbir ┼čekilde CDN URLÔÇÖini hat─▒rlaman─▒za gerek kalmadan a┼ča─č─▒daki gibi kullanabiliyorsunuz:

Kulland─▒─č─▒m─▒z packageÔÇÖlardan h─▒zl─▒ca bahsedeyim:

csz: Uygulama tamamen tek bir sayfadan olu┼čtu─čundan, ekstra bir build-time k├╝t├╝phanesi kullanmak yerine runtimeÔÇÖda CSS-in-JS classÔÇÖlar─▒n─▒ generate eden bir ├ž├Âz├╝m kullanmak istedim.

preact: Boyut olarak (3KB) ReactÔÇÖten daha k├╝├ž├╝k boyuta sahip olan, yine JSX yazd─▒─č─▒n─▒z bir UI libraryÔÇÖsi. K├╝├ž├╝k farklar olsa da APIÔÇÖ─▒ da React ayn─▒.

preact-fetch: UI kodu i├žerisine eklenebilecek muhtemel bir native fetchÔÇÖi soyutlamak i├žin kullan─▒labilecek bir utility k├╝t├╝phanesi. Arkada native fetch kullan─▒yor ancak direk fetchÔÇÖden d├Ânen responseÔÇÖu i┼člemek yerine direk componentÔÇÖlara bind edebiliyorsunuz:

Streaming import detay─▒na tekrar geri gelelim. Snowpack burada bir ad─▒m daha ileri gidiyor ve bunlar─▒ t─▒pk─▒ bir node_modules dizininin yapt─▒─č─▒n─▒ browserÔÇÖ─▒n niteliklelerini kullanacak bi├žimde cacheÔÇÖliyor. Chrome kullan─▒yorsan─▒z, Network tabÔÇÖ─▒ndan preact.js dosyas─▒n─▒ filterÔÇÖlay─▒p ┼čunu g├Ârmeniz demek, dosyan─▒n art─▒k ilk browserÔÇÖla y├╝klenmesi d─▒┼č─▒nda (ve Cache-Control response headerÔÇÖ─▒n─▒zdaki max-ageÔÇÖi 0 ile set etmiyorsan─▒z) s├╝rekli cacheÔÇÖten getirilece─či anlam─▒na geliyor:

URLÔÇÖdeki kayna─ča gitti─čimizde a┼ča─č─▒daki gibi bir kaynak ile kar┼č─▒la┼č─▒yoruz. Sanki preactÔÇÖi i├žeren as─▒l kayna─ča bir referans noktas─▒n─▒ and─▒ran bu dosyan─▒n i├žeri─či ┼č├Âyle:

export { a as Component, y as Fragment, S as cloneElement, q as createContext, b as createElement, h as createRef, p as default, b as h, O as hydrate, l as isValidElement, n as options, N as render, w as toChildArray } from './common/preact-c0ba709d.js';

Evet, tahmin etti─čimiz gibi i├žeride ba┼čka bir pathÔÇÖe bir referans var. Buradan export edilmi┼č kod par├žalar─▒n─▒n oldu─čunu d├╝┼č├╝nebilirsiniz. Bu da asl─▒nda SkypackÔÇÖten Snowpack cache folderÔÇÖ─▒na indirilmi┼č preactÔÇÖ─▒n orjinal ama uglify (├žirkinle┼čtirilmi┼č) edilmi┼č kodu:

buildless.siteÔÇÖtaki 3 (├╝├ž) ba─č─▒ml─▒l─▒─č─▒ da b├Âylece direk snowpackÔÇÖin sorumluluk alan─▒na ta┼č─▒yarak geri kalan di─čer ba─č─▒ml─▒l─▒klar─▒m─▒z ya sunucu tarafl─▒ geli┼čtirme i├žin gereken ya da build-timeÔÇÖda kulland─▒─č─▒m─▒z packageÔÇÖlardan ibaret hale geldi. Zaten bir s├╝redir ivmelenen ES Modules ile geli┼čtirme yapmak daha da pop├╝lerle┼čtik├že ve bu t├╝r toolÔÇÖlar─▒n artmas─▒ ve yetkinle┼čmesiyle giderek bu y├Ânde bir e─čilim izliyor olaca─č─▒z.

buildless.siteÔÇÖ─▒ vercelÔÇÖin sa─člad─▒─č─▒ built-in API dizininde serverless endpointÔÇÖler deploy edebilme ├Âzelli─či nedeniyle package.json dosyas─▒na ihtiyac─▒m─▒z var. B├Âyle bir ihtiya├ž olmasayd─▒, npm kullanmak sadece config/build toolÔÇÖlar─▒n─▒n proje contextÔÇÖine dahil edilmesi i├žin gerekecekti.

Bunlar─▒n yan─▒s─▒ra, cors libraryÔÇÖsini 2 (iki) endpoint i├žin (/sections ve /tools) preflight requestÔÇÖleri method baz─▒nda konfig├╝re edip sadece GETÔÇÖe izin vermek i├žin, markedÔÇÖ─▒ ise githubÔÇÖdan gelen markdown i├žeri─či HTMLÔÇÖe ├ževirerek jsdomÔÇÖa aktar─▒p browserÔÇÖdaym─▒┼č gibi i├žeri─če m├╝dahale edebilmek i├žin kulland─▒k.

https://github.com/hwclass/buildless-site/blob/master/package.json#L20

Umar─▒m yaz─▒daki baz─▒ detaylar yapaca─č─▒n─▒z geli┼čtirmelere katk─▒da bulunur ufak da olsa ayr─▒nt─▒lar i├žeriyordur. Son olarak, merakl─▒s─▒na repoÔÇÖyu public g├Âr├╝n├╝me ├žekmi┼č olduk ki her t├╝rl├╝ geri bildirim, ├Âneri ve fikrinize ula┼čabilelim.

[

hwclass/buildless-site

A collection of sites, apps, packages, articles and other stuff about ES modules. Note: Since everytime when somethinngÔÇŽ

github.com

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

Projede eksik gedik ├žok, zaman bulduk├ža geli┼čtiriyoruz. Gelecek her t├╝rl├╝ PRÔÇÖa ┼čimdiden te┼čekk├╝rler.

Bundan ├Ânce yay─▒nlad─▒─č─▒m ve g├╝ncel olarak bir s├╝redir i┼člemeye ├žal─▒┼čt─▒─č─▒m ES Modules yaz─▒ma da buradan ula┼čabilirsiniz:

[

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

Hat─▒rlatma: Bu makale size neyi nas─▒l yapaca─č─▒n─▒z─▒ de─čil, webÔÇÖin kabul g├Âren best practiceÔÇÖleri nas─▒lÔÇŽ

hwclass.medium.com

](https://medium.com/web-i├žin-non-hype-rehberi-es-modules-ile-gelece─če-d├Ân├╝┼č-5aa4348e3743)

Ay─▒rd─▒─č─▒n─▒z zaman i├žin te┼čekk├╝rler. Soru, g├Âr├╝┼č ve ├Ânerileriniz i├žin hem email yoluyla, hem de isterseniz bi call iste─či a├žarak yapabilirsiniz.