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

GDG DevFest Denizli 2023 için yapmış olduğum sunum

Transcript

1. 2024'e Girerken JavaScript Yeni JavaScript runtime’larıyla bir ekosistem örmek Eser Özvataf Head of Engineering @ Teknasyon GDG DevFest Denizli 09 / 12 / 2023 eser.live
2. Portfolyomu incelemek ve bana ulaşmak için https://eser.live’ı inceleyebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live GDG DevFest Denizli 09 / 12 / 2023
3. Başlamadan önce… JavaScript’in sorunları neler?
4. Ekosistemde “JavaScript’in sorunları neler?” sorusu etrafında üretim yapan aktörler. - Technical Committee (TC) 39 - OpenJS Foundation - Vercel - Deno - Bun
5. ➔ 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) JavaScript ne zaman tercih edilmeli?
6. [[]]]] 01 Mimari geçiş 02 Runtime çeşitliliği 03 Elimizdeki araçlar 04 Karmaşadan odaklanmaya
7. 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"
8. Mimari değişim - “Klasik Client/Server”
9. Mimari değişim - Islands Architecture UI Composition SPA Routing Load Optimization Server-Side Rendering Handling Forms Partial Loading
10. ➔ 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 değişim - Ne ifade ediyor? Nasıl etkileniyoruz?
11. ➔ 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
12. 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
13. ➔ 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
14. ➔ 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
15. ➔ Full-Stack geliştirme (Islands Architecture ile) ◆ Next.js ◆ Astro ◆ Deno Fresh (veya Deno SaaSKit) Elimizdeki araçlar - Frameworkler
16. ➔ 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
17. Node.js Deno Elimizdeki araçlar - Serverless hizmetler Bun
18. Elimizdeki araçlar - Deno’nun Serverless Hizmetleri
19. Elimizdeki araçlar - Örnek: Deno KV
20. Elimizdeki araçlar - Örnek: Deno KV
21. Elimizdeki araçlar - Örnek: Deno KV Queues
22. Elimizdeki araçlar - Örnek: Deno KV Queues
23. Elimizdeki araçlar - Örnek: Deno Cron
24. Elimizdeki araçlar - Örnek: Deno Cron
25. 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ı.
26. 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.
27. Karmaşadan odaklanmaya - Bir örnek
28. Karmaşadan odaklanmaya - Bir örnek
29. Teşekkürler Sorularınızı https://eser.live üzerinden iletebilirsiniz. Eser Özvataf Head of Engineering @ Teknasyon eser.live