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

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

Transcript

1. 5 yıl sonraki JavaScript'e bugünden bakış Eser Özvataf GDG DevFest İstanbul 11/12/2022
2. Bugün Konuşacaklarımız 01 JavaScript Standartizasyonu 02 03 Geleceğin JavaScript Standartları 04 ES2015'den sonra JavaScript 5 yıl sonra? Son büyük güncellemeden sonrasını yeniden oynatalım… 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. 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?
7. ES2015 ' den sonra JavaScript 1995'den bu güne hayatımızda olan JavaScript'e gelen son* büyük güncellemeden sonrasını yeniden oynatalım… • • 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
9. JavaScript Standartizasyonu JavaScript'in arkasında kim, hangi kuvvetler var? 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/
10. ES2023 ve sonrası 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
11. 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
14. Y aklaşmakta olan tehlike Tüm JavaScript ekosistemi aynı yöne doğru mu gidiyor? Y ön 1: Y enilikçiler 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. Y ön 2: Statükocular Biraz daha Facebook, Vercel, Microsoft 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 • • • • • Tehlikeler: Server Side Rendering kapıda… Ancak Server ile Client aynı çalışmıyor! Farklı bundle'lar üzerinden çalışıyoruz. Örnek: Kendi bundler'ını tanıtıp kendisi ekosistem oluşturmaya çalışan Next.js'de Intl kullanamıyorum! ECMA Standartlarını takip edip yazdığım kütüphaneyi Babel, Metro kullanan projelerin içine alamıyorum! Şirketlerin kendi standartları! Örnek: TypeScript'in decorator implementasyonu ile TC39'unkisi çok farklı ES Modules 2015'den bu yana var olmasına rağmen TypeScript halen "node module resolution"da ısrar ediyor!
15. Y ön 1: ES Modules, Web APIlar ve Deno Dil spesifikasyonu dışındaki yenilikçi bileşenler Ryan Dahl'ın manifestosu • • • • • • Web API'lar 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 Web Browser'ların Y etenekleri Node.JS, Deno ve Bun rekabeti ✓ ✓ ✓ Web API'lar ✓ https://developer.mozilla.org/en-US/docs/Web/API Yenilikçi olmaya çalışan, daha taşınabilir kodlar yazmamızın önüne açan cephe:
16. Y ön 1 'in Vaadleri Yenilikçilik pratikte bize ne vaad ediyor? • • • • • 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!)
17. ✗ Y ön 2: Mevcut araçlar ve statüko Elimizdeki araçlar yeni yaklaşımlara erişmemize engel! Node.JS stdlib'e muhtaç kodlar commonjs, NPM ve node_modules Babel, PostCSS ve Transpilerlar Webpack, Metro ve Diğer Paketleyiciler ✗ ✗ ✗ React… React Native… React Server Components! ✗ Sürtünme yaratan, "yalınlıktan uzak", değişimin önünde engellerimiz: axios, moment, socket.io, v .s. ✗
18. İyimser olmak gerekirse, JavaScript ekosistemi yıllarca rekabet nedeniyle her zaman kendini geliştirerek ikiliklerin içerisinden sıyrılabildi… Ancak…
19. 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. 5 yıl sonra: Runtimelar Çatışmalar ve olası senaryo
20. 4. Dekoratörler . 1. Dil . 2. Type Hinting 3. Sınıflar . . 5 yıl sonra: JavaScript Çatışmalar ve olası senaryo ECMAScript dili geliştirmeye devam edecek. TypeScript, flow gibi type-checking yapan statik analiz araçlarının "transpile" ihtiyacı ortadan kaldırılmak isteniyor. 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ı. Dekoratör desteğinin stabil bir hale gelmesi ile birlikte dilde daha fazla yer bulacak.
21. 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 . . 5 yıl sonra: D X Çatışmalar ve olası senaryo 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.
22. Node.js'in yeni sürümlerinde kullanabilirsiniz 1. NPM'den kaçınıp ES Modules modül yapısına adapte olmak 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+
23. Teşekkürler Eser Özvataf GDG DevFest İstanbul 11/12/2022