2024'e Girerken JavaScript: Yeni JavaScript runtime’larıyla bir ekosistem örmek (R5)

Slide 1

Slide 1 text

2024'e Girerken JavaScript Yeni JavaScript runtime’larıyla bir ekosistem örmek Eser Özvataf Head of Engineering @ Teknasyon GDG DevFest Ankara 17 / 12 / 2023 eser.live

Slide 2

Slide 2 text

Twitter: @eserozvataf YouTube: https://eser.live Eser Özvataf Head of Engineering @ Teknasyon eser.live GDG DevFest Ankara 17 / 12 / 2023

Slide 3

Slide 3 text

2023 süresince JavaScript ile, 4 backend, 3 frontend proje geliştirdim. JavaScript’i Tercih ettiğim senaryolar: ➔ Sistem programlamaya inilmeyen “uygulama senaryoları”nda, ➔ Kod paylaşımı ve portatiﬂiği gerektiğinde, (RN, SSR, vb.) ➔ Tek bir thread kullanmak daha iyi olduğunda, (Concurrency vs Parallelism)

Slide 4

Slide 4 text

[[]]]] 01 Gözlemlerim

Slide 5

Slide 5 text

Mimari değişim - “Klasik Client/Server”

Slide 6

Slide 6 text

Mimari değişim - Islands Architecture UI Composition SPA Routing Load Optimization Server-Side Rendering Handling Forms Partial Loading * Full-Stack geliştirme, az context-switching * Geliştirme sürecini hızlandırma, daha az kurulum * Daha hızlı bir kullanıcı deneyimi, optimizasyon

Slide 7

Slide 7 text

Araç karmaşası giderek azalıyor… Burada yeni runtime’ların katkısı büyük.

Slide 8

Slide 8 text

➔ Geriye doğru uyumluluk ➔ Hızlı paket yöneticisi ➔ Safari’nin JavaScriptCore Motorunun Avantajları ➔ Bilinen tüm araçlar onun üzerine kurulu ➔ Sahibi OpenJS Vakfı Node.js Deno ➔ Ryan Dahl’ın yeni tasarımı ➔ Geliştirici deneyimi (DX) ➔ node_modules yok ➔ Standartlar ve güçlü kütüphane desteği ➔ Serverless hizmetler ➔ Jupyter Notebook desteği Runtime çeşitliliği - Aktörler Bun

Slide 9

Slide 9 text

Runtime çeşitliliği - Dahili araçlar Araç NPM Node.js Bun Deno Create Project - npm init bun init deno init Install Tool - npm install –global bun install –global deno install Task Runner - npm run bun run deno task Test Runner Jest node –test bun test deno test .Env Files dotenv –env-file ✔ –env TypeScript ts-node ❌ ✔ ✔ Bundler webpack ❌ bun build deno vendor Benchmarker benchmark ❌ ❌ ✔ Compiler pkg ❌ ❌ deno compile Linter eslint ❌ ❌ deno lint Formatter prettier ❌ ❌ deno fmt Docs typedoc ❌ ❌ deno doc

Slide 10

Slide 10 text

Runtime çeşitliliği - Bağımlılık ve kütüphane yönetimi ➔ Node.js ve Bun geriye doğru uyumluluk sağlıyorlar. ➔ Deno node_modules’suz çalışabiliyor. Buradaki yönetimi PNPM gibi değil, v8’in yönetimine veriyor. Web sayfaları dolaşırken bilgisayarınıza inen resimden ve CSS’den bir farkı kalmıyor JavaScript dosyalarının. ➔ Deno’da Go’nun standart kütüphanesine yakın bir kütüphanenin yanı sıra artık NPM desteği de oldukça olgun. ➔ Runtime’lardaki geliştirme deneyimi, browser’lara yaklaşıyor. Fetch, WebSockets, WebStreams, Intl v.b. Browser API’ları gün geçtikçe runtime’lara da ekleniyor. ➔ Deno ve Bun URL üzerinden modül yükleme desteği ile lerna, nx ve turbo gibi monorepo araçlarına ihtiyacı ortadan kaldırıyor.

Slide 11

Slide 11 text

[[]]]] 02 Araçlar

Slide 12

Slide 12 text

➔ Full-Stack geliştirme (Islands Architecture ile) ◆ Next.js ◆ Astro ◆ Deno Fresh (veya Deno SaaSKit) ➔ Signal bazlı client-server iletişim ◆ Qwik ◆ Preact ◆ Deno Fresh ◆ Angular Elimizdeki araçlar - Frameworkler

Slide 13

Slide 13 text

➔ Deno aynı zamanda bir serverless çözümler sunuyor*. ◆ Deno Deploy ◆ Deno KV ◆ Deno KV Queues ◆ Deno Cron* ➔ Vercel hizmetleri daha çok Node.js merkezli çalışıyor. ◆ Vercel ◆ Vercel KV ◆ Vercel Postgres ◆ Vercel Blob Elimizdeki araçlar - Serverless hizmetler

Slide 14

Slide 14 text

Elimizdeki araçlar - Deno’nun Serverless Hizmetleri

Slide 15

Slide 15 text

Elimizdeki araçlar - Deno Deploy

Slide 16

Slide 16 text

Elimizdeki araçlar - Deno Deploy

Slide 17

Slide 17 text

Elimizdeki araçlar - Deno Deploy

Slide 18

Slide 18 text

Elimizdeki araçlar - Deno Deploy

Slide 19

Slide 19 text

Elimizdeki araçlar - Deno KV

Slide 20

Slide 20 text

Elimizdeki araçlar - Deno KV

Slide 21

Slide 21 text

Elimizdeki araçlar - Deno KV

Slide 22

Slide 22 text

Elimizdeki araçlar - Deno KV

Slide 23

Slide 23 text

Elimizdeki araçlar - Deno KV

Slide 24

Slide 24 text

Elimizdeki araçlar - Deno KV Queues

Slide 25

Slide 25 text

Elimizdeki araçlar - Deno KV Queues

Slide 26

Slide 26 text

Elimizdeki araçlar - Deno KV Queues Realtime

Slide 27

Slide 27 text

Elimizdeki araçlar - Deno Cron

Slide 28

Slide 28 text

Elimizdeki araçlar - Deno Cron

Slide 29

Slide 29 text

[[]]]] 03 Evrim

Slide 30

Slide 30 text

Karmaşadan odaklanmaya - Codebase ➔ Built-in araçlarla, araç konﬁgurasyonları ve birbirleri ile entegrasyonları giderek azalıyor. Eskisi gibi testing suite’e TypeScript tanıtmak zorunda kalmıyoruz. ➔ Bundler ve transpilerları hayatımızdan çıkartmak eskisinden daha kolay. Bu sayede monorepo yönetimi de sorun olmaktan çıkıyor. ➔ Kısmen PNPM ve Deno ile birlikte node_modules yükünden kurtulmaya doğru gidiyoruz. ➔ ES Modules’u kullanarak konum-bağımsız JavaScript modülleri/dosyaları kullanılabilmeye başlandı.

Slide 31

Slide 31 text

Karmaşadan odaklanmaya - Hızlı prototipleme ➔ CDN üzerinden uygulama bootstrap edebiliyorsunuz! ➔ Deno kendi yerel ortamınızda geliştirmeyi kolaylaştırıyor. ➔ TDD için hazır bir ortam vaad ediyor. ➔ Deno ve Bun stand-alone binary oluşturup hızlıca Dockerize edebilmenizi sağlıyor. ➔ deno.dev üzerinden GitHub’la login olup ister copy-paste ile, ister deployctl ile saniyeler içinde bir API yayına alabiliyorsunuz.

Slide 32

Slide 32 text

Karmaşadan odaklanmaya - Bir örnek

Slide 33

Slide 33 text

Karmaşadan odaklanmaya - Bir örnek - IDE

Slide 34

Slide 34 text

Karmaşadan odaklanmaya - Bir örnek - Testler

Slide 35

Slide 35 text

Karmaşadan odaklanmaya - Bir örnek - Testler

Slide 36

Slide 36 text

Karmaşadan odaklanmaya - Bir örnek - Testler

Slide 37

Slide 37 text

Karmaşadan odaklanmaya - Bir örnek - Testler

Slide 38

Slide 38 text

Teşekkürler Sorularınızı https://eser.live üzerinden iletebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live