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
   

   View Slide

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?
   

   View Slide

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
   

   View Slide

4. youtube.com/EserOzvataf
   

   View Slide

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?
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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!
    

    View Slide

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:
    

    View Slide

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: [
    ],
    });
    

    View Slide

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
    

    View Slide

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.
    ✗
    

    View Slide

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+
    

    View Slide

16. Teşekkürler
    Eser Özvataf WebFree 12/11/2022
    

    View Slide