5 yıl sonraki JavaScript'e bugünden bakış (R2)

GDG DevFest 2022 İzmir etkinliği için yapmış olduğum sunum

Transcript

1. 5 yıl sonraki JavaScript'e bugünden bakış Eser Özvataf GDG DevFest İzmir 17/12/2022
2. Bugün Konuşacaklarımız 01 JavaScript Geliştirme Ekosistemi 02 03 Geleceğin JavaScript Standartları 04 ES2015'den Sonra JavaScript 5 Yıl Sonra? "Son büyük güncelleme"den sonra neler oldu? JavaScript'in arkasında kim, hangi kuvvetler var? Bugün fırında ısıtılan yeni özellikler… Çatışmalar ve olası senaryo
3. Eser Özvataf Yazılım geliştirmeye çocuk yaşlarda, profesyonel anlamda yazılımdan geçim sağlamaya ise 2002'de başladım. Yüksek lisans eğitimimi tamamlayana dek eğitim hayatım çalışma hayatına paralel gitti, bu anlamda hem alaylı hem de mektepliyim. Startup, ajanslar ve kurumsallarda yöneticilik tecrübem oldu. Bugün bir SaaS girişimi olan Datapad'de CTO görevini üstleniyorum. Kalan tüm zamanımı yazılım toplulukları için harcıyorum. CTO @ Datapad youtube.com/EserOzvataf twitter.com/eserozvataf github.com/eserozvataf
4. youtube.com/EserOzvataf
6. 01 ES2015'den Sonra JavaScript "Son büyük güncelleme"den sonra neler oldu?
7. Topluluk ES2015'den sonra JavaScript'e gelen birçok yapıyı net takip edemedi. Bir iddia… 2015 yılına kadar JavaScript'in toplamda 4 farklı sürümü yer alıyordu ve her sürümde büyük güncellemeler duyuruluyordu. Daha sonra bu yapının yerini yıllık güncellemeler aldı. Neden?
8. ES2015 ' den Sonra JavaScript 1995'den bu güne hayatımızda olan JavaScript'e gelen son* büyük güncellemeden sonra neler değişti, bir gözden geçirelim… • • Array.prototype.includes Exponentiation için ** operatörü​ ES2016 • • • • • async/await, Promise Parametre listelerinde trailing comma'lar Object.values, Object.entries Object.getOwnPropertyDescriptors String.prototype.padStart, .padEnd ES2017 • • • • • • Objeler için Rest ve Spread (…) operatörü Template literal stringler Promise.prototype.finally​ for await (const p in [p1, p2]) SharedArrayBuffer, Atomics RegExp'de Named Groups, Look Behind, Unicode Escape'ler, dotAll ES2018 • • • • • Array.prototype.flat, flatMap String.prototype.trimStart, trimEnd​ Object.fromEntries "try/catch"ler için opsiyonel catch Symbol.prototype.description ES2019 • • • • • • • • Dynamic importlar import.meta nesnesi ?? ve ?. operatörleri globalThis nesnesi export from kullanımları BigInt nesnesi String.prototype.matchAll Promise.allSettled ES2020 • • • • • String.prototype.replaceAll Promise.any Nümerik ayraçlar (_) Mantıksal atamalar (??=) WeakRef ve FinalizationRegistry ES2021 • • • • • • • • Top-level await Dynamic import'larda try-catch Class'larda static fieldlar Class'larda static initializer Error.prototype.cause Array.prototype.at, String.prototype.at Object.hasOwn RegExp /d flag ES2022
10. 02 JavaScript Geliştirme Ekosistemi JavaScript'in arkasında kim, hangi kuvvetler var?
11. • • • • • • • • • • Dil Standartizasyonu Topluluk (ECMA International - TC39) ❤️ Web API'lar Çalışma Grubu ve Konsorsiyumlar (W3C, WHATWG) ❤️ Browser ve Runtime'lar Chromium Geliştiricileri ❤️ WebKit Geliştiricileri 🤔 Node.js Geliştiricileri 💔 Deno Geliştiricileri ❤️ Bun Geliştiricileri ❤️ • • • • • • • • • • • Araçlar Microsoft 💔 TypeScript Facebook 💔 Babel Metro Bundler Vercel 💔 Next.js Diğer 💔 Webpack … Ekosistemi Geliştirenler JavaScript hem herkes hem de hiçkimse tarafından geliştiriliyor.
12. Dilin Standartizasyonu TC39 Süreci nasıl işliyor? Sahiplik Standart Teklif Süreci Her şey açık! • • • JavaScript tek bir kuruluşa ait değildir. ECMA (European Computer Manufacturers Association) standartlaşmasında destek olur. ECMA'da geliştirici ve akademisyenlerden oluşan ​TC39 (Technical Committee 39) isimli komite JavaScript'ten sorumludur. Her yıl Haziran'da yeni bir ECMAScript standartı duyurulur.​ • • • • • Stage 0 tartışma. Stage 1 topluluğa sunum. Stage 2 taslak. Stage 3 adaylık.​ Stage 4 sonraki sürümde bizlerle.​​ https://github.com/tc39/proposals https://tc39.es/ Benzer süreç yapıları çoğu zaman diğer çalışma grupları ve konsorsiyumlar için de geçerli oluyor…
13. 03 Geleceğin JavaScript Standartları Bugün fırında ısıtılan yeni özellikler…
14. ES2023 ve Sonrası İçin Değerlendirilen Teklifler Bugün fırında ısıtılan yeni özellikler… • • Array.prototype.findLast, findLastIndex Hashbang / Shebang desteği Stage 4 • • • • • • • • • • Inline throw expressionları Set.prototype.intersection, union, difference, symmetricDifference, isSubsetOf, isSupersetOf, isDisjointFrom Array.isTemplateObject Iterable.prototype.map, filter, take, drop, indexed, reduce, toArray, forEach, some, every, find, from Record'lar ve Tuple'lar Modül blokları Pipe (|>) operatörü Decorator Metadata Import Reflection JSON.parseImmutable Stage 2 • • • • • Export consts Generator Arrow Functions Pattern Matching Type Annotations … Stage 1 • • • • • • • • • • Atomics.waitAsync Import Assertions import mod from "f.js" assert { type: "json" }; Temporal Resizable ArrayBuffers ​ShadowRealm Array.prototype.group, groupToMap Decorators Array.prototype.toReversed, toSorted, toSpliced, with JSON.parse Array.fromAsync Stage 3
15. Web API'lar Deno, Node.js ve Bun 'a geliyor Ekosistemin tamamlayıcılarını sunucularda kullandığımız runtime'lar da kucaklamaya başladı! • • • • • • localStorage, sessionStorage, IndexedDB, File APIs fetch, Request, Response, URL, URL Pattern, Streams, WebSockets Intl, Crypto BroadcastChannel, MessageChannel performance, console navigator.connection, navigator.bluetooth, navigator.geolocation, Audio & Media APIs https://developer.mozilla.org/en-US/docs/Web/API
18. Her şey toz pembe değil! Bütün bu özelliklerin adaptasyonu çok önemli, ancak tüm JavaScript ekosistemi aynı yöne gitmiyor. Topluluk, Çalışma Grupları, Runtime'lar Topluluğun standartları getirdikleri yeri kuzey yıldızı alan; ECMA'nın yeni standartlarını ve Web API'ları kucaklayıp bizleri yalın bir JavaScript dünyasına götüren yenilikçi akım. Araç Geliştiricileri Facebook, Microsoft, Vercel gibi firmaların önünü çektiği, kendi elit mühendislerinin ürünlerini yapı taşı kullanan, ancak hem TC39'u 5-6 yıl geç yakalayan hem de Web API'larını dışarıda bırakıp kendi ekosistemlerine yatırımlara devam eden statükocu akım.​ t Çatışma Örnekleri 1️⃣ Server Side Rendering kapıda… Ancak Server ile Client aynı çalışmıyor! Farklı bundle'lar üzerinden çalışıyoruz. 2️⃣ Kendi bundler'ını tanıtıp kendisi ekosistem oluşturmaya çalışan Next.js'de Intl kullanamıyorum! 3️⃣ ECMA Standartlarını takip edip yazdığım kütüphaneyi Babel, Metro kullanan projelerin içine alamıyorum! 4️⃣ Şirketlerin kendi standartları! Örnek: TypeScript'in decorator implementasyonu ile TC39'unkisi çok farklı 5️⃣ ES Modules 2015'den bu yana var olmasına rağmen TypeScript halen "node module resolution"da ısrar ediyor! ❌
19. 04 5 Yıl Sonra? Çatışmalar ve olası senaryo
20. • • • • • Paketleyicilerle uğraşmamak! Build sistemlerini, build zamanını ve konfigurasyonları hayatımızdan çıkartmak Isomorphism ve determinizm: web, cloudflare workers, server side'da aynı kod ve aynı nesnelerle çalışın ​node_modules'dan kurtulup HTTP CDN üzerinden bağımlılık yönetimi Web API'lar sayesinde iyi dokümantasyon (MDN) ve binlerce sürümünü tekrar tekrar indirmediğimiz bağımlılıklar​ (her dependency'nin farklı bir axios sürümüne bağımlı olması) Deno sayesinde bütünleşik tooling​ (Test yazmak için Jest'i, Webpack'i, Babel'i ve TypeScript'i konuşturmanıza gerek yok!) Uç Tahmin: Tüm Y enilikler Sihirli Bir Biçimde Benimsenseydi
21. 4. Built-in tooling İleride Node.js, Deno, Bun v.b. ne kullandığımızın önemli olmadığı bir senaryoya gidebiliriz. 1. Runtime'lar birbirine yaklaşacak Kendini yeni özellikler katmak isteyen runtime'ların en kolay özellik devşirebildikleri yapı şu anda Web API'lar. 2. Runtime'lar Web'e yaklaşacak 3. NPM devam edecek, ancak modül sistemi genişleyecek NPM desteği devam edecek olsa da, commonjs'i yolda kaybedebiliriz. Dosyalara CDN'den erişebildiğimiz ES Modules desteği de yaygınlaşacak. Deno'nun Go ve Rust'dan benimsediği "built-in tooling" yaklaşımına diğer runtimelar da yetişecek. Ilımlı Tahminler: Runtime 'lar
22. Sınıflar maalesef JavaScript'de fonksiyonların yerini alabilir. Eskiden fonksiyonlar "birinci sınıf vatandaş" iken artık sınıflara özen gösterilmeye başlandı. TypeScript, flow gibi type-checking yapan statik analiz araçlarının "transpile" ihtiyacı ortadan kaldırılmak isteniyor. 4. Dekoratörler . 1. Dil . 2. Type Hinting 3. Sınıflar . . Ilımlı Tahminler: Dil Y apısı ECMAScript dili geliştirmeye devam edecek. Dekoratör desteğinin stabil bir hale gelmesi ile birlikte dilde daha fazla yer bulacak.
23. 4. Buildless'e bir adım daha yaklaşabiliriz . 1. Halen ana IDE'miz "Web Inspector" . 2. Server-Side Rendering ile 2 ileri 1 geri 3. Kullanılan araç sayısı azalacak ama karmaşa azalmayacak . . Ilımlı Tahminler: Developer Experience Yeni nesil runtime'larda "Language Server" geliyor olsa da halen birçok ölçüm için en net arabirim Web Inspector. Bu kısa vadede değişmeyecek. Server-Side Rendering frameworkler ile birlikte olmazsa olmaz bir özellik olarak sunuldu / sunulacak. 2010'larda transpiler'ların olmadığı bir JavaScript geliştirme deneyimine asla erişemeyeceğimizi düşünüyorum. İnsanların git gide toolları azaltmak yönünde motivasyonlarını olduğundan. CSS'in de modülerliği sağlanabilirse buildless yapıya yaklaşabiliriz.
24. 1. NPM'den kaçınıp ES Modules modül yapısına adapte olmak Node.js'in yeni sürümlerinde kullanabilirsiniz Deno'yu kullanıp kodlarınızı Node.js'e transpile edebilirsiniz (bkz: hex service) 2. Deno'yu kullanmak 3. Web API'lara ve stdlib'in yeni fonksiyonlarına yönelmek → Web API'lar çoğunlukla ihtiyacınızı çözüyor. Deno'nun stdlib'ine CDN'den erişebiliyorsunuz 4. Build sistemlerinden kaçınmak Transpile süreçleri ve bundlerlara yatırım yapmamak Adaptasyon ve Sonuç Biz ne yapabiliriz? Nasıl "geleceğe yönelik" kod yazabiliriz? CommonJS ES Modules NPM CDN Node.js Deno 3rd Party Libraries Stdlibs + Web APIs Transpilers Buildless axios fetch moment, dayjs Intl, Temporal Lodash, Ramda ES2015+
25. Teşekkürler Eser Özvataf GDG DevFest İzmir 17/12/2022