Frontend Kapsam
İnternet Uygulamaları için Altyapıların 2010–2020 Değişimi
5 yıl arayla yazdığım 3 blog yazısı ile Web App/Site geliştirmek için altyapıların, kütüphanelerin nasıl değiştiğini anlatmaya çalışıyorum.
Özetle bu hikayede 3 farkı tarihdeki duruma bakıyor olacağız
- 9 Nisan 2010 Tarihli Blog Yazısı
- 7 Eylül 2015 Tarihli Blog Yazısı
- 5 Kasım 2020 Tarihli Blog Yazısı
A. 9 Nisan 2010 Tarihindeki Blog Yazısından Alıntı
2010 yılında Savunma Sanayi projelerinde 8 yıldır Java Swing ile UI geliştiriyordum. Geliştirdiğimiz yazılımlar hep kapalı sistem olduğu için bu sıralarda arkaplanda HTML, Internet ve Mobil teknolojileri nasıl geliştirildiğini merak ediyor ve bu konularda da araştırmalar yapıyordum.
Bu araştırmalarım sonucu yazdığım ilk yazı aşağıdadır.
2010 Yılında Web Uygulama Altyapıları (Tarayıcı Plugin)
- Adobe Air
- Google GWT
- JavaFX
- Microsoft Silverlight
- HTML5
Gelişen teknoloji ile birlikte insanların yazılım arayüz kullanım alışkanlıkları değişmeye başladı. Yazılımdan beklediği yetenekler farklılaşmaya başladı. Web’de Flash’ın etkisi, Cep Telefonunda iPhone arayüzü ve çoklu dokunmatik ekranı, Oyun konsolunda Wii Controller , Desktop’ta Steam ve iTunes benzeri internet bağlantılı uygulamalar, TV’de ipTV, Tivibu vb.. teknolojiler insanların beklentilerini aşağıda belirtilen şekilde değiştirmeye başladı;
- Arayüz bileşenlerin daha renkli hale getirilmesi (CSS desteği)
- Arayüzler arası geçişlerin yumuşak/temiz bir şekilde gerçekleşmesi (Animasyon desteği)
- Bileşenler üzerine efekt uygulayarak (Örneğin: yansıma) Bileşenlerin daha etkili gösterilmesi
- Bileşenlerin dikdörtgen 2 boyutlu kalıplarından çıkarılarak 3 boyutu kullanan daha estetik görünüşe sahip bileşenler olması.
- Video, Müzik ve Resim formatlarını desteklemesi
- Dokunmatik Ekran ve Sensor sağladığı yetenekler (Örneğin iPhone resim uygulaması)
- Uygulamalara internet olan her ortamdan erişebilme (PC, Laptop, Cep Telefonu, TV)
- Oluşturduğun içeriği internette saklama ve istediğin zaman, herhangi bir yerden, oluşturduğun verilere ulaşabilme ve kullanma (Örneğin Google Uygulamaları)
- Uygulamalara güncellemelerinin sorunsuz bir biçimde gerçekleşmesi
- Uygulamaların virüs taşımadığından ve sisteminize zarar vermeyeceğinizden emin olmak
- Uygulamaların üzerinde çalıştığı donanımı en iyi performans alacak şekilde çalıştırması.
Kullanıcıların bu ihtiyaçlarını karşılamak için firmalar Client-Side uygulama geliştiricileri için teknolojiler üretmeye başladı.
Google GWT ile Java dilini JavaScript ve HTML dönüştüren bir platform sundu.
Microsoft Silverlight ile hem browser, hemde windows mobile üzerinde çalışabilecek bir dil olarak geliştirdi.
Adobe browser dışına çıkarak desktop’a sıçradı. AIR teknolojisini geliştirerek
Java ve .NET’in masaüstündeki pazarından pay almaya çalışıyor. Bir yandan da Adobe’un web deki gücünü sağlayan Flash’ın tahtını sallayan, HTML5 teknolojisi ile uğraşıyor.
Tüm bu savaşlar olurken SUN’da client side pazarını kaybetmemek için kendi RIA (Rich Internet App) dilini geliştirmeye başladı. JavaFX
B. 7 Eylül 2015 Tarihindeki Blog Yazısından Alıntı
KAZANAN → HTML5,JS,CSS3
HTML5 → Özetle zengin içerikli web uygulamalarında HTML5 bütün rakiplerini yenerek tek başına ayakta kaldı. Artık tarayıcılar üzerinde UI ve App kütüphaneleri Angular, React ve Ember.js gibi direk JS ortamında yazılan kütüphaneler.
Steve Jobs Mobil tarayıcılarında HTML5 dışında içerik desteklememesi, sonradan buna Chrome, Firefox ve IE gibi tarayıcılarında katılması ve en son olarak Flash tüm tarayıcılardan çıkarılma çabası artık Browser hakimiyetin sadece HTML5 tarafında olacağını gösteriyor.
KAYBEDEN → DİĞERLERİ
Sun → Oracle satıldı. İsmi bile unutuluyor. Yeni nesil java dilini, bir çok işletim sistemi ve donanımı geliştiren SUN tanınmayacak bile..
JavaFX → Oracle SUN satın aldıktan sonra ilk iş JavaFX kendine özgü dilini yoketmek oldu. Bunun yerine Swing üzerine Effect/Animasyon sağlayan bir kütüphaneye dönüştü
Java Applet → Chrome/Firefox vb.. tarayıcılar artık Applet desteklerini sistemlerinden kaldırıyorlar.
Web’de Flash’ın etkisi. → OccupyFlash (http://occupyflash.org/) Flash ölüyor. Tüm video altyapısı HTML5 döndü ve artık tarayıcılar Flash desteklemiyor.
Google GWT → Google kendi iç projelerinde kullandı. Çok yaygınlaşmadı. Şu anda altyapı olarak Angular.js ve React.js destekli kütüphaneler daha popüler. GWT’de zaman içinde yok oluyor diyebiliriz.
Silverlight → Etkin olarak kullanılmıyor. Microsoft’ta HTML5 destekli KendoUI, AngularJS vb altyapıları destekliyor.
Blackberry → Mobil cihazlarının, cep telefonlarının artık adını bile duymuyoruz.
C. 5 Kasım 2020 Tarihindeki Blog Yazısından Alıntı
Bu yazının başlığı ne oluyor diye düşünsem “JS TARAYICIDAN DIŞARIYA TAŞTI ve JS STACK HTML YUTUYOR” olurdu. Neden olduğuna gelirsek;
C.1 JS Tarayıcıdan Nasıl Dışarıya Taşıyor ?
JS önceden sadece Tarayıcılar üzerinde çalıştırılırken günümüzde , ilk önce NodeJS ile birlikte sunuculara, ordan , React Native ile mobil cihazlarda, Electron ile Masaüstünde ve iOT cihazları üzerinde çalıştırılmaya başlandı. Tabi JS tarayıcıların dışında da kullanılıyor olması inanılmaz büyük bir ekosistemin oluşmasını tetikledi. JS günümüzdeki en önemli dillerden birisi diğerde (Yapay zeka ve Makine Öğrenmesi alanındaki Python)
Bu arada eskiden C++ olduğu JVM olduğu gibi JS çalıştıran farklı farklı şirket ve grupların geliştirdiği JS Engine bulunuyor;
- Tarayıcılarda → Chakra, JavascriptCore, SpiderMonkey ve V8
- NodeJS → Chakra, SpiderNode, V8
- Elektron → V8
- IoT → Duktape, Jerryscript
Backend Sunucuları
Örneğin Backend genellikle PHP, AspNet, J2EE gibi yapılar yaygın ve hakimken Node.JS ile birlikte bu kısımda Express, Koa, Meteor, Feathers gibi Backend Framework ortaya çıktı.
JS Kullanımının Tersine Gelişme
Bunun yanında Typescript vb… ara Compiler gelişmesi sadece JS derleme olarak değil WASM(Web Assembly) gibi binary derleyip bunları Tarayıcılarda direk kullanabilme imkanı sağlamıştır.
C.2 JS HTML Nasıl Yutabilir ?
Önceden Popüler olan LAMP Stack: Zengin İçerikli uygulamalar dışında statik web sayfaları üzerinden geliştirilen bir çok web sayfası bulunuyordu , bu CMS sayfalarını ve Forumları oluşturmak için Drupal, Joomla, Wordpress, PhpBB, Moodle vb, hazır sistemler alt yapılarında genellikle LAMP Stack kullanıyordu.
LAMP Stack
L=LINUX (OS)
A=APACHE (Web Server)
M=MySQL (DataBase)
P=PHP (Language)
Sonuçta bu teknoloji yığıtının yaptığı istemciden gelen sayfa isteğine göre bilgileri o anda veritabanından çekerek sayfaları Server Side oluşturup HTML ve CSS halinde kullanıcıya dönen bir mekanizma vardı.
Günümüzde Popüler olan JAM Stack: Çünkü Serverless yöntemler ile sunucu maliyetini ortadan kaldırarak , GitHub vb.. kaynak yönetim ortamlarında Markup dosyaları saklayarak, bunlar ServerSide veya sizin Local ortamınızda Render ederek, Render Edilmiş dosyaları CDN saklayarak hem ucuz, hem güvenilir, hemde hızlı Web ortamları sağlaması bu teknolojinin bir anda çok popüler hale gelmesini sağladı.
Peki JAMstack oluşmasını hangi teknolojilerin gelişmesi sağladı ?
- JS tarayıcılar dışarısında da kullanılması
- CI/CD sistemlerinin gelişmesi
- Bulut Teknolojilerinin CDN artması, Serverless
- JS bileşen kütüphanelerinin(React, Vue, Svelte) belli bir olgunluğa erişmesi,
- Inline CSS kullanımının yaygınlaşması,
- API, Webhook ve GraphQL gibi teknolojilerin yaygınlaşması
JAMStack nerden geliyor ?
JAM Stack
J=JS
A=API
M=Markup
JS: Dinamik fonksiyonlar JS tarafından ele alınır, burda istenilen herhangi bir UI kütüphanesi kullanılabilir (Angular, React, Vue, Svelte vb..)
API: Sunucu tarafındaki operasyonlar soyutlanarak tekrar kullanılabilir API üzerinden HTTPS ve JS ile ele alındığını düşünebilirsiniz. (GraphQL, Auth0, Logging, DB, Storage vb..)
Markup: Web sayfaları statik HTML dosyalarından oluşur. Markdown kaynak dosyalarından Static Site Generator tarafından Server Side Rendering ile statik HTML dosyaları oluşturulur. (Backend Framework/SSG Next, Nuxt, Nest Gatsby, Jkelly vb..)
Github CI/CD işleri ve otomatik web siteleri için Begin, Vercel ve Netlify
C.3 JS CSS Nasıl Yutabilir ?
Aynı JS yetinmeyenlerin Typescript, Reason, Elm gibi JS üst türev dillerini çıkardığı gibi CSS ile yetinmeyenler SCSS, PostCSS ve LESS gibi türevlerini çıkardılar . Bunu çıkarmakta tabiki haklılardı , artık geliştirme sırasında JS , CSS tek bir dosyada tutulmuyor modüler olarak geliştirilip Webpack bundle haline dönüştürülüyordu. Bunun yanında bir seviye daha ileri gidip madem bizim modül JS dosyalarımız var neden ayrıca CSS dosyalarını biz oluşturalım ki bir katman daha koyalım JS içerisinden Style tanımlayalım dediler ve ortaya aşağıdaki şekilde Inline CSS kütüphaneleri ortaya çıktı;
- Emotion
- Style Components
- CSS Modules
- vb…
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.