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 İzmir 02 / 12 / 2023 eser.live

Slide 2

Slide 2 text

Portfolyomu incelemek ve bana ulaşmak için https://eser.live’ı inceleyebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live GDG DevFest İzmir 02 / 12 / 2023

Slide 3

Slide 3 text

[[]]]] 01 Mimari seçimler 02 Runtime çeşitliliği 03 Elimizdeki araçlar 04 Karmaşadan odaklanmaya

Slide 4

Slide 4 text

Mimari “Birden fazla bileşenin birlikte oluşturduğu, birbirleri arasındaki ilişkileri de içeren bütün” İyi Mimari “Bir ihtiyacı en iyi karşılayacak tasarım"

Slide 5

Slide 5 text

➔ Sistem programlamaya inilmeyen “uygulama senaryoları” ➔ Kod paylaşımı ve portatifliği, JavaScript çok platforma sahip: ◆ Web Sayfaları/Uygulamaları ◆ Web Servisler ◆ Bulut Hizmetleri ◆ Komut Satırı (CLI) Uygulamaları ◆ Masaüstü Uygulamaları ◆ Mobil Uygulamalar ➔ Tek bir thread yeterli, hatta daha iyi (Concurrency vs Parallelism) Mimari seçimler - JavaScript ne zaman seçilmeli?

Slide 6

Slide 6 text

Mimari seçimler - “Klasik Client/Server”

Slide 7

Slide 7 text

Mimari seçimler - Islands Architecture UI Composition SPA Routing Load Optimization Server-Side Rendering Handling Forms Partial Loading

Slide 8

Slide 8 text

➔ 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 Mimari seçimler - Ne ifade ediyor? Nasıl etkileniyoruz?

Slide 9

Slide 9 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) ➔ Paket yöneticisi yok ➔ Standartlar ve güçlü kütüphane desteği ➔ Serverless hizmetler ➔ Jupyter Notebook desteği Runtime çeşitliliği - Aktörler Bun

Slide 10

Slide 10 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 11

Slide 11 text

➔ Go ve Rust’ın geliştirici deneyiminin iyi yönleri JavaScript ekosistemine aktarılıyor. Dahili araçlar sayesinde bağımlılıklar azalıyor, standardizasyon artıyor. ➔ ES Modules her geçen gün daha da fazla destekleniyor. Deno node_modules’suz bir hayat vaadinde bulunuyor*. ➔ TypeScript Deno ve Bun’da dahili geliyor. Bu da araç entegrasyonunu azaltıyor. ➔ 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. Runtime çeşitliliği - Kazanımlarımız

Slide 12

Slide 12 text

➔ 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. ➔ 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. Runtime çeşitliliği - Bağımlılık yönetimi

Slide 13

Slide 13 text

➔ Full-Stack geliştirme (Islands Architecture ile) ◆ Next.js ◆ Astro ◆ Deno Fresh (veya Deno SaaSKit) Elimizdeki araçlar - Frameworkler

Slide 14

Slide 14 text

➔ Deno aynı zamanda bir serverless çözüm. ◆ 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 15

Slide 15 text

Node.js Deno Elimizdeki araçlar - Serverless hizmetler Bun

Slide 16

Slide 16 text

Elimizdeki araçlar - Deno’nun Serverless Hizmetleri

Slide 17

Slide 17 text

Elimizdeki araçlar - Örnek: Deno KV

Slide 18

Slide 18 text

Elimizdeki araçlar - Örnek: Deno KV

Slide 19

Slide 19 text

Elimizdeki araçlar - Örnek: Deno KV Queues

Slide 20

Slide 20 text

Elimizdeki araçlar - Örnek: Deno KV Queues

Slide 21

Slide 21 text

Elimizdeki araçlar - Örnek: Deno Cron

Slide 22

Slide 22 text

Elimizdeki araçlar - Örnek: Deno Cron

Slide 23

Slide 23 text

Karmaşadan odaklanmaya - Codebase ➔ Built-in araçlarla, araç konfigurasyonları 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 24

Slide 24 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 25

Slide 25 text

Karmaşadan odaklanmaya - Bir örnek

Slide 26

Slide 26 text

Karmaşadan odaklanmaya - Bir örnek

Slide 27

Slide 27 text

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