JavaScript EkosistemindeDeğişim Sancıları ve Gelecek Uyumluluğu - ES Modules

DeveloperMultiGroup Topluluğu WebFree 2022 etkinliği için yapmış olduğum sunum

Transcript

1. JavaScript Ekosisteminde Değişim Sancıları ve Gelecek Uyumluluğu - ES Modules Eser Özvataf WebFree 12/11/2022
2. Bugün Konuşacaklarımız 01 JavaScript Kısa Tarihi 02 03 ES2015'den sonra JavaScript 04 Tanışma JavaScript Standartizasyonu Benim kimim, nelerle ilgileniyorum? 1995'den günümüzde JavaScript'in yolculuğu Son büyük güncellemeden sonrasını yeniden oynatalım… JavaScript'in arkasında kim, hangi kuvvetler var? 05 Web API'lar 06 07 Yaklaşmakta olan tehlike ve Yönler 08 ES2023 ve sonrası Adaptasyon ve Sonuç Bugün fırında ısıtılan yeni özellikler… Ekosistemin tamamlayıcıları Tüm JavaScript ekosistemi aynı yöne doğru mu gidiyor? Kolları sıvama zamanı… Biz ne yapabiliriz?
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
5. JavaScript'in ismi gerçekten Java nedeniyle JavaScript oluyor. Fun Fact • • • • • • JavaScript ilk kez 1995'de Netscape Browser'ın içerisinde hayat buluyor. ES3 1999'da çıkıyor. RegExp, try/catch desteği gibi halen dilin temel özellikleri gelişmeye devam ediyor. ES4 2003'de tam bir bloatware olunca iptal ediliyor. ES5 ile 2009​ yılında JSON ile tanışıyoruz. Strict mode ve Array.prototype.map v.s. geliyor. ES6 / ES2015​ JavaScript için ikinci bir milat oluyor. ES Modules, class, promise, arrow functionlar, let/const, symbol gibi yapılar dile dahil oluyor. Babel gibi "transpilerlar" hayatımıza giriyor. ES20** JavaScript her yıl güncelleniyor!​ Ancak artık takip etmiyoruz. JavaScript Kısa Tarihi 1995'den günümüzde JavaScript'in yolculuğu Soru: Aramızda ES2015 standartları ile JavaScript yazmış kaç kişi var?
6. ES2015 ' den sonra JavaScript 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
7. 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/
8. 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
9. Web API'lar Ekosistemin tamamlayıcı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 https://developer.mozilla.org/en-US/docs/Web/API
10. 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!
11. 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:
12. 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!) import blog from "https://deno.land/x/blog@0.5.0/blog.tsx"; blog({ title: "Eser Ozvataf's Blog", author: "Eser Ozvataf", avatar: "https://avatars.githubusercontent.com/u/866558?v=4", avatarClass: "full", links: [ { title: "Email", url: "mailto:eser@ozvataf.com", }, { title: "GitHub", url: "https://github.com/eserozvataf", }, ], middlewares: [ ], });
13. Ufak bir Deno arası • • • • Demo kaynak kodları için GitHub Repository adresi: https://github.com/eserozvataf/webfree-demo deno.land/x CDN blog ES Module örneği​ hex/datetime ES Module örneği import maps! ve deps.ts, convention
14. ✗ 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… Server Components! ✗ Sürtünme yaratan, "yalınlıktan uzak", değişimin önünde engellerimiz: axios, moment, socket.io, v .s. ✗
15. Node.js'in yeni sürümlerinde kullanabilirsiniz 1. ES Modules'a adapte olmak Deno'yu kullanıp kodlarınızı Node.js'e transpile edebilirsiniz (bkz: hex service) 2. Deno'yu kullanmak 3. NPM'den kaçınıp modül ve Web API'lara 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ç Kolları sıvama zamanı… Biz ne yapabiliriz? 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+
16. Teşekkürler Eser Özvataf WebFree 12/11/2022