Photo by Jonathan Fox on Unsplash

Frontend Kapsam

Nasıl Frontend Uzmanı Olabilirim ?

Web Frontend Development konusunda kendimi nasıl geliştirebilirim ? Nasıl bir rota izlemem gerekiyor ? Bu yazıda bu soruların cevaplarını arıyor olacağım.

1. Giriş

Web Frontend(Önyüz) Geliştirme konusunda kapsamı yani büyük resmi bulmaya çalışmak çok önemli. Neden mi ?

• Bu serüvende kaybolmamak
• Hangi rotada/kapsamda ne kadar ilerlemeniz gerektiğini bilmek.
• Tüm kapsamı görebilmek ve kavramları ve araçları doğru adlandırabilmek.

Çevremden duyuyorum hangi teknolojiyi öğreneyim, daha birisini öğrenmeden diğeri çıkıyor. Gerçekten günümüzde zaman oldukça kıymetli çok gibi gözüksede üretilen içeriği (makale, video, webinar, eğitim vs..) takip etmeye ve analiz etmeye yetmiyor. O zaman ne yapacağız ? Öncelikle kavramları, standartları, temel bilgileri ve teknolojileri, geliştirme araçlarını birbirinden ayırıp ne anlama geldiğini iyi kavramak gerekiyor.

Örneğin aşağıdaki resim. Javascript Tarihçesinde EcmaScript(ES6 → ESNext) ile dile gelen değişimleri yenilikleri anlatmaya çalıştım. Sol kısımda yazılar sağ kısımda ise bu yazılar içerisinde geçen Kişiler, Kavramlar ve Kütüphaneler bulunuyor. Okuyucu bir yazı grubuna, bunun içerisindeki yazılara ve bunun içerisindeki micro seviyede kavramlara dahi erişebiliyor.

Hatırlatma: Renkli etiketler üzerine geldiğinizde bu etiketlerin tıklanabilir olduğunu göreceksiniz. Bu sayede direk ilgili kavram ve kişi hakkında bilgi sahibi olabilirsiniz. 😛

JS Tarihçesi

Peki büyük resim, ana kapsam onu oluşturabildim mi ? Henüz hayır. Aşağıda Frontend Geliştirme konusunda yazı gruplarının büyük resmi / kapsamı tanımlamaktan çok uzak olduğunu görebilirsiniz. Bu yazıdan sonra bu kapsamı daha iyi belirleyebilmeyi umuyorum.

Frontend Dev Konusudaki Yazı Grupları

2. Eleştiri

Diğer önemli bir noktada bu kapsamları ayrı ayrı yazıyor olmak aslında sadece farkındalık oluşturabilir. Ama bir bileşen veya web sayfası oluştururken tüm bunları harmoni içerisinde kullanmanız gerekiyor. Bu oluşturma safhasında trickler veya bir çok detay gizli. Bu detayları bilmek aşağıda anlatacağım kapsamları nasıl harmanlayacağınızı bilmeyi gerektiriyor. Yani bu yazıdaki kapsam pişireceğiniz yemeğin malzemeleri, araçları ve hangisinin ne işe yaradığını verse de bunlardan üretebileceğiniz yemeklerin (bileşenlerin) tarifini verMiyor olacak.

Gerçek bir örnek ile açıklasam daha anlaşılır olacak. Benden bir tasarım ile bir bileşen yazmamı istiyorlar.

Bileşen İsteği: Veriler bir tablo gibi hizalı gözüksün ama kendi CSS tasarımını giydirebilelim. Pagination olsun, Scroll olsun, Bir satır içerisindeki hücre metin sığmıyorsa bu hücrenin genişliği boyutu büyümesin … yazsın ve tooltip çıksın, ama diğer bir kısımda olan mesaj uzunluğu çoklu satır veya belli bir karakterin üzerinde ise bunu detayda göstersin. Bu hemen satırın altında açılsın bunun içerisinde bu bilgileri terminal içerisinde gibi gösterelim. Verileri sunucudan çeksin ve ekranda bu verileri sayfa sayfa render edebilelim.

Bu bileşeni gerçekleştirebilmek için bilmeniz gereken konseptlerden bazıları;

• Bileşenin görselliğindeki hizalar nedeniyle hangi Layout kullanmam gerektiğini bilmem gerekiyor. Table, (DOM Bilgisi)
• Bu tablonun her row ait detayı olsun, tüm cell bir bütün olarak gözüksün. Collapsable açılsın. A bunu nasıl yapacağız. HTML Table colspan kavramını bilmen gerekiyor. (DOM Bilgisi)
• Collapsable alanın animasyonlu ivmeli bir yay hareketi ile açılmasını sağlamak için biraz (Matematik ve WebAnimations API) bilmen gerekiyor.
• Font ve Iconlarla veya kendi CSS Animated Elemanlarını oluşturmak için (CSS Bilgisi)
• Veriyi sunucudan alabilmek için (Fetch, HTTPRequest, AJAX, ve JSON Bilgisi)
• Bu bilgiyi bellekte veya tarayıcı Storage saklamak için (JS, Structures, LocalStorage)
• Bu veriyi kontrollü bir şekilde yönetebilmek için (Veri katmanı Kütühaneleri Redux,…)
• Bunları ekrana render edebilmek için JSX, React vb (Vue,Svelte,Angular)

Ve bir çok konuyu kafanızda oluşturup bunları düzgün bir şekilde harmanlamanız/birleştirmeniz çok önemli.

• Bunu yaparken zaman planlamanızı nasıl yapıyorsunuz?
• Hangi geliştirme ve otomasyon araçlarından faydalanıyorsunuz?
• Kodun kalitesi için ESlint, Test Kütüphaneleri vb. neleri kullanıyorsunuz?

Tüm bunları hangi sıra ve ne kadar süre kullanıyorsunuz. Hangi işlemleri birbirine bağlıyorsunuz. Bu ara bağlar ve detaylar çok çok önemli ama bugünkü yazımda daha geniş kapsamdan bakarak büyük resmi anlatmaya çalışacağım.

3. Nasıl Bir Yol İzleyeceğim ?

Aslında benim sorduğum bu soruların benzerleri başka kişilerde sormuş ve bunlara cevap üretmişler. Önce bu kaynaklara inceleyeceğim ve bu kaynaklar ile kafamdakileri birleştirip kendi şablonumu çizmeye çalışacağım. Faydalandığım kaynaklar;

• https://roadmap.sh/frontend : Modern Frontend Geliştiricisi olmak için izleyebileceğiniz rota.
• https://frontendmasters.com/guides/learning-roadmap/ Frontend Masters RoadMap
• https://frontendmasters.com/books/front-end-handbook/2019/#1.2 : 2019 Frontend El kitabı
• https://stateofjs.com/ : JS anketi
• https://stateofcss.com/ CSS anketi

3. Kafamda Oluşan Kapsam

Frontend Kapsamı

Yukarıdaki bölümlemeyi bu şekilde parçalara bölmek istedim çünkü

• Frontend öncelikle geliştiriciler tarafından kendi ortamlarında geliştirirken kullandığı araçlar ve kütüphaneler mevcut
• Sonrasında bunların çıktılarını belli sunuculara deploy ediyorlar ve bu sunuculardan kullanıcılara servis verilirken kullanılan hizmetler, araçlar mevcut
• Sonrasında kullanıcı bu bilgileri tarayıcılar aracılığı ile sunucudan çektiği verileri HTML, CSS, JS ve diğer verileri(JSON, Audio, Video, Image, Base64) tarayıcı üzerinde görüntülediği ve kullanıcı etkileşimlerini yönettiği bir kısım var.

Yani özetle 3 ortamdan bahsedilebilir.

• Tarayıcı Ortamı
• Geliştirici Ortamı
• Sunucu Ortamı

4. Tarayıcı(Browser) Ortamı

Bu ortam kullanıcının bilgisayarında , cep telefonunda veya iPad olsun kullanıcılar bir tarayıcı üzerinden bu web sayfalarına, web uygulamalarına erişebilir.

4.1 Tarayıcılar

• Chrome, Safari, IE, Firefox, Edge, Opera

Peki bu tarayıcılar sunucudan aldıkları verileri işleyip bunların sonucunda web sayfaları ve etkileşimli uygulamalar geliştiriyorlar. Bu tarayıcılar nasıl çalışıyor ? teknik detayı bu linkte mevcut. Kısaca HTML, CSS, JS işleyerek web sayfalarını oluşturuyor Burda 2 tip engine kullanılıyor.

4.2 Javascript Engine

• V8(Chrome) , SpiderMonker(Firefox), Chakra(IE), SquirrelFish(Safari), V8(Opera)

Javascript Engine JS dosyalarını işleyen engine. Bu sizin UI business kodlarınızı işliyor veya WebAPI ile işletim sistemi ve diğer seviyelerdeki API çağırarak Network, DOM, Animation , Bluetooth vb.. sistemleri yönetiyor.

4.3 Javascript (EcmaScript)

• JS Tarihçesi yazımda let/const, Arrow Functions, Inheritance, Default Parameters, Rest/Spread, Destruction Assignments, Template Literals, Loops, Async, Promise, EventLoop, Modules, Map, Set, Generators …gelen bahsederek ES6 EcmaScript dil olarak nasıl geliştiğinden
• JS ile Fonksiyonel Programlama yazımda daha kaliteli, hataya ve kırılganlığa dayalı yazılımları nasıl geliştirebileceğimizi anlatmaya çalışıyorum.

4.4 Browser Engine

• Blink(Chrome), Gecko(Firefox), Trident(IE), Webkit(Safari), Blink(Opera)

DOM, CSS birleştirerek Layout oluşturup bunun için HTML elemanlarını Render eden Engine. Not: DOM ve CSS günümüzde JS tarafından oluşturularakta kullanılabilmektedir. React, Vue, Angular, StyleCSS, vb..)

4.5 CSS

Cascading Stylesheets: DOM Elemanlarına stil vermeyi sağlayan mekanizmadır. Bu sayede sayfalarımız daha güzel , belli bir hizalamaya CSS standartlarına baktığımızda

• CSS Building Blocks: Cascade and inheritance, CSS selectors (Type, class, and ID selectors, Attribute selectors, Pseudo-classes/elements, Combinators), BoxModel(Margin, Border, Padding, Content), Outline, Background, Borders, Wring Modes, Overflow, Values & Units, Image/Media/Form Elements,
• CSS Text Styling: Typography, Text, Font, Icon, Link, List
• CSS Layout (display): Floats, Positioning, Flexbox, Grid, Responsive design
• CSS Advanced: 2D transform , 3D transform, Transition, Animation, Shadow, Gradient, Tooltip, Rounded Corners, Boundary, Color, Backgrounds, Web Fonts,

Aslında bu CSS tanımlamalarında Preprocessor kullanılarak Geliştiricilerin bu CSS data structured ve tekrar kullanabilir yazma imkanı sunuluyor (SASS, LESS vb ) ama bu konuyu Geliştirici Ortamında çalıştığı Runtime ortamında bulunmadığı için bu konu başlığını o konuda açtım.

Birde JS ile CSS oluşturma günümüzde çok popüler bunun CSS-in-JS deniyor. Bu yapıları kullanmanızı sağlayan bazı kütüphaneler mevcut

• CSS-in-JS Kütüphaneleri: Styled Components, CSS Modules, Styled JSX, Emotion, vb

Peki bu CSS için hazırlanmış hazır Framework (Alt çerçeve) ve Tema giydirilmiş UI bileşen kütüphaneleri mevcut mu ? Evet.

• CSS Frameworks: Bootstrap, Materialize CSS, Foundation, Semantic UI, Bulma, UIkit vb…

4.6 Uygulama/Web Sayfası Türleri:

• SPA(Single Page Application), SSG(Static Site Generation),SSR(ServerSideRendering) ve PWA(Progress Web App)

Uygulamalar şu açıdan bölmek lazım.

SPA: Kullanıcı Cihazındaki Tarayıcının gücünü kullanarak çalışan Web Uygulama Hizmetleri yani olabildiğince tek sayfa içerisinde(SPA) uygulamanın tüm ekranlarını ve bileşenlerinin olduğu. Olabildiğince işlemler tarayıcının JS dosyalarını On The Fly yani o anda işlettiği ve bunun ile birlikte AJAX/HTTPRequest yapılarak RESTfull servislerden JSON vb içeriklerin siteye yüklendiği ve sayfaların sonrasında render edildiği, etkileşimi yüksek uygulamalardır.

SSR ve SSG: İkinci tip uygulamalar bilgi paylaştığımız, CMS, Blog, Portal vb her bir URL ayrı bir unique bilgi verdiği, Search Engine Crawler tarafıdan sayfaların içindeki verinin indekslenebildiği teknik açıdan HTML ve CSS sunucu tarafında son haddine kadar oluşturulduğu JS işleme açısından tarayıcılara çok az yoran kullanıcı etkileşiminin çok olmadığı sayfalardır. Bunlar günümüzde popüler olan SSR JAMStack (JavaScript, APIs, and Markup) yapılmaya başlandı, bu zamana kadarda CMS araçları genelde WordPress, Joomla, Drupal, phpBB, ile sayfaları Sunucuda LAMP Stack (Linux, Apache, MySQL, PHP/Perl/Python) üzerinden ilerliyordu.

PWA: Progressive Web App kavramı Google tarafından ortaya atılmış, Standart Web Sayfaları ve Native Mobil Uygulamalar arasında hibrit bir uygulama modeli çıkaralım bu model Web sayfası gibi çalışsada İnternet Olmadığı zamanlarda da ServiceWorker, LocalStorage ve diğer WebAPI sayesinde Native uygulama özelliklerinide gösterse. (Not: Bu konuda daha detaylı bilgi için PWA Nedir? ) yazımı okuyabilirsiniz.

Not: Rendering Tekniklerinin ve kavramların ne olduğu konusunda detaylı bilgi için Web Rendering yazımı, Uygulama geliştirirken ServerSide, ClientSide veya Hibrit yöntemi seçip seçmeme konusunda HTML Rendering Nerede Yapılmalı ? yazımı okuyabilirsiniz.

4.7 WebAPI/BrowserAPI

• Browser API Kullanımı: DOM API, LocalStorage, Fetch, WebSocket, i18n, ServiceWorker, WebComponent, WebAnimation, WebVR, WebGL, WebRTC

Günümüzde Mobil cihazların artması, Desktop uygulamalarının Web ortamına kayması sebebiyle Web sayfalarından beklentimiz artmış durumda buda bunu karşılayacak Browser API’ler ortaya çıkmasına sebep oldu.

• HTML DOM API Kullanımı: (Javascript, JQuery, Mustache.js, Handlebars.js, Backbone.js, Ember.js, Angular.js, React.js, Vue.js, Polymer-Project, Svelte.js)

Mevcut döküman üzerinde HTML Elemanları ve Node değiştirerek UI bileşenleri (Tablolar, Düğmeler, Seçim Kutuları, Form, Navigasyon Menuleri), yazılar, paragraflar, etc bir

• SVG DOM API Kullanımı :(JS, D3, Raphaël, amCharts, Chart.js, Rechart, GoogleChart, GoogleMaps, HighCharts vb..)

Scalable Vector Graphics, yani şekilleri vektörel olarak oluşturmak demek ekran çözünürlüğünden , zoom in/out kavramlarından etkilenmeden Çizim Kütüphaneleri, Chart kütüphaneleri, oluşturabilmeyi sağlar.

• Canvas API Kullanımı :(JS, Fabric.js, Processing.js, Two.js, Cytoscape.js, Paper.js )

Canvas altlık üzerine pixel pixel boyamaya imkan sağlar. Bu sayede daha performanslı boyama işlemlerini bu API sayesinde gerçekleştirebilir. Google Maps gibi API sayesinde Harita katmanlarını çok performanslı bir şekilde çizdirebilmekte , her türlü mobil cihazdan haritalara erişim sağlar.

• History API

Browser Session History tutarak ileri ve geriye ilerleyebilmenizi sağlar.

• URL API

Uniform Resource Locator şeklinde tanımlanmış adresi domains, hosts, and IP erişmeyi ve güncellemeye sağlayan API’dir. (Not: Detay için URL API yazımı okuyabilirsiniz.)

• Console API

Chrome, Safari, Firefox Geliştirici araçlarındaki console erişim sağlayan API’dir. console.log, console.debug etc… (Not: Detay için Console API yazımı okuyabilirsiniz.)

• Drag-Drop API

Web elemanlarının mouse ile sürükle bırakmayı sağlayacak API sağlar. (Not: Detay için Drag-Drop API yazımı okuyabilirsiniz.)

• WebGL / Web Audio / Web Speech API Kullanımı: (JS, Pixi.js, Three.js)

Grafik kartı, Ses Kartı ve Mikrofon donanımlarını daha iyi kullanmayı sağlayan API’ler sağlar. Canvas Context üzerine GL sayesinde 3 boyutlu Rendering, Audio API sayesinde ses kanallarına erişim stream veri gönderme bunlar üzerinde efekt uygulama ve görselleştirme, Speech API ise mikrofon üzerinden ses tanıma ve bu sesleri metine dönüştürmeyi sağlayan API’dir.

• Device API: Ambient Light Sensor API, Geolocation API, Pointer Lock API, Proximity API, Device Orientation API, Screen Orientation API, Vibration API,

Web uygulamların donanım, sensör bilgilerine ulaşarak cihaz donanımından daha fazla şekilde faydalanmaya imkan sağlar.

• Communication APIs: WebRTC, NotificationAPI, Fetch, WebSocket, Network Information API, Web Notification API , Simple Push API, Bluetooth API, Beacon API

Web sayfaları arasında Real Time Communication sağlayarak Video/Audio stream arasında peer to peer iletişim ve veri paylaşımı yapmayı sağlar WebRTC, HTTP Request/Response mekanizma altyapısı için Fetch API, İki yönlü iletişim sağlayan client ile sunucu arasında aktif socket üzerinden haberleşme sunan WebSocket API, Local bildirimler için ServiceWorker ile birlikte Web Notifications API, sunucudan alınacak bildirimler için Push API

• Data management APIs: FileHandle API, IndexedDB, Storage API (Local Storage, Service Worker Registration, History States)

Browser’ da key-value olarak tutulan veriler, Veritabanına tutulan veriler erişim sağlayan veya Dosya sistemine erişebilecek API’ler sağlar.

• Workers API: Web Workers API, Service Workers API, Background Tasks

Browser UI Look haricinde yan işleri yapabilecek Worker çalıştırmaya ve yönetmeyi sağlayan API’lerdir.

• Performance API: Performance API, Performance Timeline API, High Resolution Time, Frame Timing API

4.8 Web Components

• Custom Elements, Shadow DOM, HTML Templates, ES Modules

Vue, React, Svelte Ember vb yapılarda nasıl tekrar kullanılabilir bileşenler oluşturulup bu bileşenlerinde birbirini kullanmasını sağlayarak daha büyük bileşen kütüphanelerinin oluşmasına olanak sağlamışlardır. Sonuçta Web Components geliştirenlerin amacı bunun bileşen kütüphaneleri olmadan HTML defacto standartlarında bunu desteklemesi. Ve geliştiriciler tarafından bu yapıların benimsenmesi sonucunda popülerlik kazanabilme imkanı belki bulabilir. Şu anda rüzgar React , Vue ve Svelte kütüphanelerden tarafında.

4.9 WASM

Tarayıcılar normalde JS Interpreter çalıştırılması üzerine kurulmuş bir yapıdır. EventLoop ile WebAPI üzerinden C Binding erişerek uygulamayı işletir. Peki Compile edilmiş C/C++ veye Rust gibi low-level assembly benzeri dilleri çalıştırmak istersek Oyunlar , Performans gerektiren Uygulamalar için önümüzdeki bir çok engeli aşmamıydı. Tarayıcıların compile edilmiş WASM dosyalarını çalıştırabilme teknolojine WebAssembly denmektedir. Bu sayede JS ve wasm dosyaları bir arada çalılabilecektir.

4.10. Store

• Redux , MobX, RxJS, NgRx, VueRx

Modern Web App, uygulamanın state tutmaktan ve sunucu ile etkileşimi sonucunda bunu yönetmek için Flux Örüntüsünün gerçekleştirimi olan bir sürü Store örneği bulunmaktadır.

4.10 Tarayıcı Dışında Bu Teknolojileri Kullanılma

Biz yukarıda son kullanıcı açısından hep tarayıcılardan bahsettik ama tarayıcıyı dışında Native ortamlarda da yukarıda bahsettiğim teknolojileri kullanabilecek teknolojik altyapılar geliştirilmiştir. Bu sayede cross platform native uygulamalar geliştirmek mümkün olmuştur.

WebView bileşenini kullanarak altyapı sağlayan ortamlar

• PhoneGap Cordova(Geliştirmeye Kapatıldı) , NW.js, Electron

WebView bileşeni olmadan JS, CSS standartlarını kullanalım ama arkaplanda Native kodlar çalışsın diyen bir teknoloji yaklaşımları

• Flutter, React Native, NativeScript

Headless Browsers: Tarayıcı arayüzü olmadan Console/Ağ üzerinden Web sayfalarını test otomasyonları yapabilmek için sağlanan tarayıcılardır.

5. Geliştirici Ortamı

Geliştirici ortamına kullandığımız kütüphane veya bulut servislerinin arttığını görebilirsiniz. Her birisini ayrı ayrı açıklamayacağım zaten başlıklarından ne yaptıkları anlaşılabiliyor. Bu araçların ne yaptığına nasıl kullanmanız gerektiğine hakim olmanız gerekiyor.

5.1 Versiyon Control

• Git, GitHub, GitLab

5.2 Package Managers

• npm, yarn

5.3 Task Runners

• npm scripts, gulp

5.4 CSS Preprocessor

• SASS, PostCSS, LESS, Stylus

5.5 Module Bundlers

• Webpack, Parcel

5.6 Linter and Formatters

• Prettier, EsLint

5.7 Type Checker, Annotations vb Dil Desteği

• TypeScript, Flow, Reason, Elm, ClojureScript, Flow, PureScript

5.8 Testing Tools

• Jest, Mocha, Storybook, Cypress, Enzyme, AVA, Jasmine, Puppeteer

5.9 Code Editor Tools

• VSCode, SublimeText, IntelliJ, Atom

6. Sunucu Ortamı ve Hosting

Sunucu ortamı dediğimiz HTML, CSS, JS ve diğer binary/base64 dosyalarının sunulduğu CDN, bunun yanında REST API üzerinden JSON sağlayan sunuculardır. Bu sunucular farklı bulut sağlayıcı hizmetlerinden faydalanarak bu hizmetleri size sağlar. Frontend sunucuya erişmesinide DNS sağlar. DNS Kayıtları nasıl verilir bunları nasıl sağlar konusundaki yazılarımı

Networking / DNS Ayarları

• DNS Ayarları,
• HTTP I/O RPC,REST,GraphQL,Webhook
• REST’i nasıl kullanmalıyız ? (Richardson Maturity Model),

6.1 Backend API

• Standards: REST, GraphQL, DNS, Domains, Ports
• Tools: Apollo, Relay, Swagger

6.2 Backend Frameworks

• Express, Next.js, Koa, Meteor, Sails, Feathers, Nuxt, Gatsby, VuePress, Jekklly, Hugo

6.3 Bulut / Hosting Servisleri

• AWS (Amplify, AppSync, S3, CDN), Netlify, Vercel, Google (Firebase)

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.