Photo by Bill Jelen on Unsplash

FRONTEND KAPSAM

2021'de Frontend Alanında Öne Çıkan Kavramlar

Bazı kavramlar oldukça önemli örneğin Yapay Zeka, BlockChain, 3D Printer, Kuantum Bilgisayarlar, Otonom Araçlar, Mars Uzay Programları vb… şeklinde 2021 de bence Frontend Kapsamında önemli olduğunu düşündüğüm kavramlar bulunuyor.

--

Frontend açısından önemli olduğunu düşündüğüm bazı kavramlar bulunuyor. Tabi burda eksikler veye başkalarının daha çok önemli gördüğü kavramlarda olabilir.

2021'de Öne Çıkan Kavramlar

Hooks, WASM(Web Assembly), WebRTC, MicroFrontends, GraphQL, Typescript, Serverless, Functional Programming, LowCode/NoCode ReactiveProgramming vb.. kavramların Frontend açısından önemli olduğunu düşünüyorum.

Bu konular ile ilgili yazılar veya yazı serileri yazmaya çalışıyorum.

React Hooks

Aspect Oriented Programming veya Cross-Cut konuları bilirsiniz. Bazı yetenekler vardır ki bu yetenekleri bileşenler ortak şekilde kullanmak ister. Aynı logic/mantık işletilecektir. Peki biz bunu Fonksiyonlara(Yetenekleri) yazsak , bileşenler bunlara kanca atsa nasıl olur. İşte buna Hook denir.

React Hooks Nedir?
React Hooks Neden Çıktı ?
React Hooks — useState Nedir ?
React Hooks — useEffect Nedir ?
React Hooks — useEffect Örnek Analiz
React Hooks — useContext Nedir ?
React Hooks — useReducer Nedir ?
React Hooks — useCallback ve useMemo ?
React Hooks — useRef ve useImperativeHandle
React Hooks — useLayoutEffect
React Hooks — useDebugValue
React Hooks Hesap Makinesi Geliştirelim

WASM(Web Assembly)

Web Assembly tarayıcıların sadece JS derleyerek Web sayfalarının oluşturulması değil aynı zamanda C/C++ veya Rust gibi compile edilmiş programlarında işletilebilmesine imkan sunarak performans gerektiren işlerde geliştiricilere opsiyon sağlıyor.

Not: Bu konuda henüz yazı yazmadım ama ileriki planlarımda WASM bir şeyler denemek ve bunları yazıya dönüştürmeyi düşünüyorum

WebRTC

WebRTC altyapısı özellikle karşılıklı sesli ve görüntülü iletişim için WebAPI’nin sağlamış olduğu geliştirici arayüzleri ile Zoom, Sykpe vb.. uygulamalar geliştirebilirsiniz. Bu konuda Ankara Cloud Meetup aşağıdaki videoyu izleyerek daha detaylı bilgi alabilirsiniz.

WebRTC ve Birlikte Çalışma Platformu Nedir ? — (ICterra, Ersin Seza)

Giriş, Gündem
WebRTC Nedir ?
Real Time Communication Protokolleri ( PSTN, VoIP, P2P VoIP, WebRTC)
WebRTC Ne Sunuyor ?
WebRTC İstatistikleri
WebRTC Kullanım Alanları
WebRTC Nasıl Çalışır ?
WebRTC Engines (Voice Engine, Video Engine)
WebRTC Sunucuları Neye İhtiyaç Duyuyor ?
WebRTC Nasıl Çalışır ?
P2P Bağlantı Nasıl Kurulur ?
WebRTC API ile Media İletimi
WebRTC Setup a Call

WebRTC ve Konferans
WebRTC Data İletimi
Bulut Tabanlı WebRTC Platformu (POINT)
POINT üzerinde geliştirilen bir uygulama Workit
Demo

MicroFrontends

Bu konuyu microservice kavramı gibi düşünmek sadece teknik ve yazılımsal değil daha kültürel olarak düşünmek gerekiyor. Bu konuda internette bulabildiğim Türkçe kaynakları derleyip topladığım yazı;

Micro Frontends Hakkında Konuşulanlar

GraphQL

GraphQL kavramından Internet Ağ Kavramları içerisinde ufacık bahsetmiştim. Özetle REST ile yaptığımız çağrılar yerine şemalar kullanarak daha dinamik sorgu(Query) ve güncelleme(Mutation) ile Backend ve Frontendin iletişim kurmasını sağlar.

Not: Bu konuda henüz örnek proje ve yazılar oluşturmadım. İleriki yazılarımda bu konuya daha detaylı değiniyor olacağım.

TypeScript

TypeScript JS koduna type desteği sağlıyor, bunu compile time denetleyerek geliştiricilerin hata yapma eksikliklerini kapatıyor. Tabi bununla bitmiyor JS dilini bazen daha Object Oriented (Java ve .Net) yakın, bazende Fonksiyonel Programlama yaklaşımlarına daha yakın bir syntax dönüştürüyor. Detayları aşağıda;

TypeScript Nedir?
TypeScript Basic Types
TypeScript Special Types
Java/C# Geliştiricilerine TypeScript-1
Java/C# Geliştiricilerine TypeScript-2

Serverless

Geleceğin en önemli teknolojilerinden birisi olabilir. Özellikle sunucu yönetimini geliştiriciden veya DevOps ekibinden tamamen soyutlaracak servisler haline getiriyor, bu sayede arkaplanda sunucu bakımı, ölçeklendirilmesi, sürekli ayakta kalması vb.. sorunlar ile uğraşmanız gerekmiyor. Çalışmakta olduğum Thundra şirketinin özellikle bu konularda geliştirmiş olduğu başarılı SaaS APM (Application Performance Monitoring) ve Lambda Debugger ürünleri bulunuyor.

Bu konuda aşağıdaki yazılardan faydalanabilirsiniz;

Serverless Mimari (FaaS)
AWS Serverless Servisleri ile Uygulama Geliştirmenin Avantajları

Bu konuda Ankara Cloud Meetup içerisinde aşağıdaki konuşmadanda bu konudaki Türkçe içerikli videoya erişebilirsiniz.

Serverless Computing with AWS Lambda — (Arçelik Ersin Er)

Gündem(Current Cloud Computing Models And Motivation, AWS Lambda, AWS Lambda Integrations, Lambda+APIGateway, Serverless Sample Applications, Community And Resources )
Serverless-Computing Models
AWS Lambda
AWS Lambda Pricing
AWS Lambda Integrations / Event Sources
APIGateway
AWS Serverless Multi-tier Architectures — White Paper (Mobile Backend, Amazon S3 Hosted Site, Microservices Environment)
Community And Resources
Demo
Sorular

Fonksiyonel Programlama (Functional Programming)

Fonksiyonel Programlama, Object-Oriented sonra gelen en büyük ve belkide en eski yazılım geliştirme yöntemi bu konuda aşağıdaki yazılardan faydalanabilirsiniz.

JS ile Fonksiyonel Programlama
Imperative/Declarative Programlama
Fonksiyonel Programlama Nedir?
Fonksiyonel Programlamanın Başlangıcı
Fonksiyonel Programlamanın Gelişimi
Saf (Pure) Fonksiyon Nedir?
High Order Functions
Currying
Function Accepting Functions
Partial Applications
Point Free Style
Soyutlama ve Kapsama
Soyut Veri Tipleri
Functor & Categories
Monads
Object Composition
Factory Functions
Functional Mixins
Sınıflar ile Kapsama(Composition) Neden Zordur?
Composable Custom Datatypes
Lenses
Transducers
Elements of JavaScript Style

Low Code / Node Code

Yazılım yazmadan veya çok az yazılım yazarak uygulamalar geliştirmenizi sağlayan araçlar. Bu konuya aslında Code2 ürünüyle araştırmaya başladım. Webflow, Retool ve en eskisi Excel gibi araçlar sizin bir yazılımcı ihtiyacı duymayadan uygulama geliştirmenizi sağlayan araçlardan bazıları.

Gelecekte bu tip araçlar ve Zapier benzeri bu araçları birbirine bağlayan yapılar sayesinde Geliştirici ihtiyacı olmadan birçok kişi işlerini yüretebilecek.

Reactive Programming

Svelte incelerken karşıma çıkan bu yaklaşım React’ın aslında gerçek Reactive olmadığını, gerçek reactive yapıların nasıl olması gerektiğini aşağıdaki yazılardan erişebilirsiniz.

Svelte Nedir ? React, Vue vb UI Kütüphanelerinden Farklı Ne Yenilikler Vaadediyor ?

Not:

Aklıma şu an gelmeyen Frontend açısından çok önemli kavram ve yaklaşımlar olabilir bu konuda yorumlarınız veya fikirleriniz varsa bekliyorum. İyi okumalar 😃

Okumaya Devam Et 😃

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

--

--