Photo by Gunnar Ridderström on Unsplash

FRONTEND

Nasıl Frontend Uzmanı Olurum -5 (Kütüphane ve Frameworkler)

Bir önceki yazımızda mantıksal model ve konseptleri çıkartmıştık. Bu yazıda bu mantıksal modelleri destekleyen kütüphane ve framework lerden bahsedeceğim.

Bundan önceki yazıda seviye seviye Frontend kavramını anlatmıştım. Bu kısımda üzerinde durmak istediğim konu Konsept yapısı. Bu yapıyı kendi projenizde sıfırdan yapmanız gerekmiyor. Bunlar için yazılmışmış bir çok hazır ve kütüphane bulunuyor. Bu kütüphaneleri kullanmayı bilmeniz yeterli.

Bugün bu kısımlarda kullanabileceğimiz kütüphane ve framework’ lerden bahsedeceğim.

Bunları yaparken alt yazı linkleri oluşturarak

Boilerplate

Framework

• Next.JS
• Remix
• Gatsby
• Vite — ( use Rollup)
• Parcel
• Create React App

Routing

• React Router (Remix)
• Next.js Router
• Tanstack Router

State Management

Server State Management

• React Query
• SWR
• Apollo GraphQL Client
• RTK Query
• URLQ

Client State Management

• Props Drilling and useState
• React Context
• Redux Toolkit
• Zustand
• Jotai
• Signals

Pages

Bir kütüphaneye ihtiyaç duymaz, routing üzerinden oluşturulan kavramsal bir bileşen türüdür, diğer bileşenlere benzerlik gösterir.

Authentication

• Auth0
• Cognito
• Octa
• Keykloak
• Amplify
• Firebase
• Supabase
• ForgeRock
• Azure AD

Authorization

• CASL

Asset Management

• Google Fonts
• Icomoon

Styling

• CSS
• Inline Style
• SaSS
• TailwindCSS
• Styled Components
• Emotion

Networking

Http

• Fetch
• Axios
• GraphQL-Request
• ApolloClient

WebSocket

• Socket.io Client
• useWebSocket
• Websocket Link
• Redux WebSocket

SSE

• React Hooks SSE

Layouts

• React Grid Layout
• Golden Layout
• React Masonry
• FlexLayout React

Components

Component UI Libs

• Material-UI
• Ant Design
• Fluent UI
• Chakra UI
• Radix UI
• Blueprint
• Semantic UI React
• Evergreen
• Grommet
• Rebass
• Mantine
• Next UI
• ThemeUI
• PrimeReact

Visualization

• VisX (low-level visualization components)
• D3.js
• Rechart
• Flow.js
• Cytoscape
• Processing.js
• Three.js
• Nivo.js
• Vis.js

Map UI Lib

• Leaflet
• Google Map
• React Map GL
• Pigeon Maps
• React Simple Map

Code Editor

• Monoca Editor
• Code Mirror
• Ace Editor

Higlighter & Formatter

• React Syntax Highlighter
• JSON Viewer
• Log Viewer

Table / Data Grid

• Tanstack Table
• Metarial UI Table
• Antd Table
• React Table
• React Data Grid
• React Pivot Table

Code Quality

Tools

• Prettier
• Eslinter

TypeSafe

• PropTypes
• Flow
• TypeScript

Unit, DOM, Snapshot Tests

• Vitest
• Jest
• React Test Renderer
• React Testing Library

Process Quality

• Husky

CI/CD

Platforms

• GitHub Actions
• Jenkins
• GitLab CI/CD
• Bamboo
• Travis CI
• Circle CI
• BitBucket
• Teamcity
• Azure Devops

Node Package Manager

• npm
• yarn
• pnpm

Bundler

• webpack
• rollup
• parcel
• Turbopack

E2E Test

• Cypress
• Puppeteer
• Playwright

Okumaya Devam Et 😃

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