React, Angular ve Vue ile Todo App: Hangi Framework Sizin İçin Uygun?
Frontend geliştirme, web ve mobil uygulamaların kullanıcılarla etkileşime geçtiği çok önemli bir katmandır. Bu alanda teknoloji hızla değişiyor ve kullanıcı beklentileri de sürekli gelişiyor. Bu durum, frontend geliştiricilerinin yeni araçlar ve framework’ler öğrenmesini zorunlu hale getiriyor. React, Angular ve Vue.js gibi modern JavaScript framework’leri ise bugün frontend geliştirme dünyasında oldukça popüler. Her biri, farklı ihtiyaçlara hitap eden özellikler ve çalışma prensipleri sunarak, geliştiricilere çeşitli çözümler sağlıyor.
Bu yazıda, React, Angular ve Vue.js framework’lerini daha yakından inceleyeceğim. Her birinin temellerine, sundukları avantajlara ve uygulama geliştirme sürecine nasıl katkı sağladıklarına dair detaylar vereceğim. Ayrıca, her bir framework ile basit bir “todo uygulaması” üzerinden örnekler yaparak, hangi özelliklerin öne çıktığını ve hangi kullanım senaryolarında daha uygun olduklarını keşfedeceğiz. Bu sayede, her bir framework’ün özelliklerini daha iyi anlayabilir ve hangi durumlarda hangisini tercih etmeniz gerektiğini öğrenebilirsiniz.
React.js Nedir?
React.js, Facebook tarafından 2013 yılında geliştirilmiş ve kullanıcı arayüzleri (UI) oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. React, bileşen tabanlı bir mimariye dayanır ve dinamik, hızlı ve etkileşimli web uygulamaları geliştirmek için tercih edilir. Sanal DOM (Virtual DOM) kullanarak performansı optimize eder ve geliştiricilere esnek bir yapı sunar.
React, yalnızca kullanıcı arayüzü katmanına odaklanır; yani, tam bir framework değildir. Bu da demek oluyor ki, React diğer kütüphanelerle ya da araçlarla birleştirilerek kullanılabilir. Geniş topluluk desteği ve büyük ekosistemiyle, özellikle modern web geliştirmede sıkça tercih edilen bir araçtır.
React’in Temel Özellikleri ve Yetenekleri
- Bileşen Bazlı Mimari
React, kullanıcı arayüzünü küçük, tekrar kullanılabilir bileşenlere böler. Bu bileşenler birbirinden bağımsız çalışır ve birleşerek daha karmaşık arayüzler oluşturulabilir. Yani, büyük bir uygulama yapmak yerine, küçük parçalarla işe başlarsınız. - JSX (JavaScript XML)
React, bileşenlerin şablonlarını yazarken, JavaScript içine HTML benzeri bir sözdizimi olan JSX’i kullanır. JSX, hem JavaScript’in gücünü hem de HTML’in basitliğini birleştirerek daha okunabilir ve yazımı kolay kodlar oluşturmanıza olanak tanır. - Sanal DOM (Virtual DOM)
React, gerçek DOM yerine sanal bir DOM kullanır ve bu sayede DOM manipülasyonlarını optimize eder. Yani, değişen sadece ilgili kısmı günceller, bu da uygulamanın daha hızlı çalışmasını sağlar. - Tek Yönlü Veri Akışı
React, “tek yönlü veri akışı” kullanır. Bu, verilerin ebeveyn bileşenden çocuk bileşenlere doğru akması anlamına gelir. Böylece veri akışını yönetmek çok daha düzenli ve tahmin edilebilir hale gelir. - Büyük ve Aktif Topluluk
React’in çok geniş bir topluluğu var. Sürekli yeni kütüphaneler, araçlar ve çözümler geliştiriliyor. Ayrıca, kapsamlı dokümantasyon ve çevrimiçi kaynaklar sayesinde bir şey öğrenmek ya da çözüm bulmak oldukça kolay. - Ekosistem ve Araçlar
React, kendisiyle entegre olabilecek bir sürü araç ve kütüphaneyi destekler. State Yönetimi için Redux, Recoil, Context API. Yönlendirme için React Router. Test Araçları için Jest, Testing Library kullanabilirsiniz. - React Native
React sadece web uygulamaları için değil, mobil uygulamalar geliştirmek için de kullanılabilir. React Native, React’i kullanarak mobil uygulamalar geliştirmenizi sağlar, böylece aynı dilde her iki platformda da kod yazabilirsiniz.
React Todo Uygulaması
React, kullanıcı etkileşimlerini ve uygulama durumlarını basit ama güçlü bir şekilde yönetmek için harika bir araçtır. Örneğin, bir Todo uygulaması geliştirmek, React’in Context API’si kullanarak görevlerin yönetilmesini kolaylaştırır. React’in bileşen bazlı yapısı sayesinde, her bir görev kendi bileşeni olarak ele alınabilir ve böylece her görev için ayrı ayrı işlem yapabiliriz. Bu sayede uygulamanın yapısı daha düzenli ve sürdürülebilir olur.
Klasör Yapısı
React ile geliştirdiğimiz Todo App’in dosya yapısı şu şekilde:
src/
├── components/
│ ├── AddTodoForm.tsx # Yeni Todo ekleme formu
│ ├── TodoItem.tsx # Her bir Todo öğesi
│ ├── TodoList.tsx # Todo listesini görüntüleme
├── context/
│ └── TodoContext.tsx # State yönetimi için context
├── styles/
│ └── styles.css # Genel stiller
├── App.tsx # Ana uygulama bileşeni
└── index.tsx # Projenin giriş noktasıcontext/TodoContext.tsx
React Context API kullanarak global görev listemizi yönetiyoruz. Reducer sayesinde görev ekleme, silme ve tamamlama işlemlerini rahatça kontrol edebiliyoruz. useContext ile bu fonksiyonlara ve mevcut duruma kolayca erişim sağlıyoruz. TodoProvider bileşeni ise alt bileşenlere gerekli state'i sunarak uygulamanın her yerinden bu verilere ulaşmamızı sağlıyor.
import React, { createContext, useReducer, ReactNode, useContext } from "react";
type Todo = { id: number; text: string; completed: boolean };
type TodoState = Todo[];
type Action =
| { type: "ADD_TODO"; payload: string }
| { type: "TOGGLE_TODO"; payload: number }
| { type: "DELETE_TODO"; payload: number };
const TodoContext = createContext<{
state: TodoState;
dispatch: React.Dispatch<Action>;
} | null>(null);
function todoReducer(state: TodoState, action: Action): TodoState {
switch (action.type) {
case "ADD_TODO":
return [...state, { id: Date.now(), text: action.payload, completed: false }];
case "TOGGLE_TODO":
return state.map((todo) =>
todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
);
case "DELETE_TODO":
return state.filter((todo) => todo.id !== action.payload);
default:
throw new Error("Unknown action");
}
}
export const TodoProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [state, dispatch] = useReducer(todoReducer, []);
return (
<TodoContext.Provider value={{ state, dispatch }}>
{children}
</TodoContext.Provider>
);
};
export const useTodo = () => {
const context = useContext(TodoContext);
if (!context) throw new Error("useTodo must be used within TodoProvider");
return context;
};components/AddTodoForm.tsx
Kullanıcıdan alınan girdiyi React Context’e göndererek yeni bir görev ekliyoruz. Girdi kutusundaki veriyi kontrol etmek için useState kullanıyoruz ve form alanına yazılan metni bir state olarak saklıyoruz. Formu gönderdiğimizde, TodoContext sayesinde yeni görev, global görev listesine ekleniyor.
import React, { useState } from "react";
import { useTodo } from "../context/TodoContext";
const AddTodoForm: React.FC = () => {
const [text, setText] = useState("");
const { dispatch } = useTodo();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!text.trim()) return;
dispatch({ type: "ADD_TODO", payload: text });
setText("");
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Yeni bir görev ekleyin"
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button type="submit">Ekle</button>
</form>
);
};
export default AddTodoForm;components/TodoItem.tsx
Bu bileşen, tek bir görevi listelememizi ve görev tamamlandığında ya da silindiğinde işlemleri gerçekleştirmemizi sağlar. props olarak bir görev (todo) alır ve tamamlanma durumu ile silme işlemleri TodoContext üzerinden tetiklenir.
import React from "react";
import { useTodo } from "../context/TodoContext";
type TodoItemProps = {
todo: { id: number; text: string; completed: boolean };
};
const TodoItem: React.FC<TodoItemProps> = ({ todo }) => {
const { dispatch } = useTodo();
return (
<li>
<input
type="checkbox"
checked={todo.completed}
onChange={() => dispatch({ type: "TOGGLE_TODO", payload: todo.id })}
/>
<span style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
{todo.text}
</span>
<button onClick={() => dispatch({ type: "DELETE_TODO", payload: todo.id })}>
Sil
</button>
</li>
);
};
export default TodoItem;components/TodoList.tsx
Bu bileşen, tüm görevleri bir liste halinde görüntülememizi sağlar. Context üzerinden alınan görevler, bir döngüyle TodoItem bileşeni olarak render edilir ve her görev tek tek ekranda gösterilir.
import React from "react";
import { useTodo } from "../context/TodoContext";
import TodoItem from "./TodoItem";
const TodoList: React.FC = () => {
const { state } = useTodo();
return (
<ul>
{state.map((todo) => (
<TodoItem key={todo.id} todo={todo} />
))}
</ul>
);
};
export default TodoList;App.tsx
Bu dosya, uygulamanın ana yapısını oluşturur ve alt bileşenleri barındırır. TodoProvider ile global state'i uygulama genelinde kullanılabilir hale getirir, böylece tüm bileşenler görev listesine ve ilgili verilere erişebilir.
import React from "react";
import { TodoProvider } from "./context/TodoContext";
import TodoList from "./components/TodoList";
import AddTodoForm from "./components/AddTodoForm";
const App: React.FC = () => {
return (
<TodoProvider>
<div>
<h1>Todo List</h1>
<AddTodoForm />
<TodoList />
</div>
</TodoProvider>
);
};
export default App;index.tsx
Bu dosya, projenin giriş noktasıdır. React uygulamasını DOM’a render ederek, tüm uygulamanın çalışmasını başlatır.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./styles/styles.css";
ReactDOM.render(<App />, document.getElementById("root"));styles/styles.css
Bu dosya, uygulamanın genel görünümünü belirler ve tüm stil düzenlemelerini içerir.
body {
font-family: Arial, sans-serif;
padding: 20px;
}
form {
margin-bottom: 20px;
}
button {
margin-left: 10px;
cursor: pointer;
}
li {
list-style: none;
margin: 10px 0;
}Angular Nedir?
Angular, Google tarafından geliştirilmiş, TypeScript tabanlı tam özellikli bir framework’tür ve modern web uygulamaları oluşturmak için kullanılır. İlk kez 2010 yılında AngularJS adıyla tanıtılan bu framework, 2016 yılında baştan yazılarak Angular adıyla yeniden piyasaya sürülmüştür. Angular, özellikle tek sayfa uygulamaları (SPA) ve büyük ölçekli kurumsal uygulamalar geliştirmek için oldukça popüler bir tercihtir.
Angular, MVC (Model-View-Controller) mimarisini benimseyerek, uygulama mantığını, görünümü ve veri katmanını düzenli bir şekilde ayırır. Dahili olarak sunduğu araçlar sayesinde, yönlendirme, form yönetimi, HTTP istekleri ve daha pek çok özellik hazır bir şekilde sağlanır, böylece geliştiricilere büyük kolaylık sunar.
Angular’ın Temel Özellikleri ve Yetenekleri
- TypeScript Tabanlı Geliştirme
Angular, JavaScript’in güçlü bir süper kümesi olan TypeScript’i kullanır. Bu sayede kod statik olarak kontrol edilir ve olası hatalar erken aşamalarda tespit edilir. - Modül Sistemi
Angular, uygulamaları mantıksal modüllere ayırarak daha düzenli ve ölçeklenebilir hale getirir. Bu modüler yapı, kodun düzenli olmasını sağlar ve büyük projelerde yönetimi kolaylaştırır. - İki Yönlü Veri Bağlama (Two-Way Data Binding)
Angular, model ve görünüm arasındaki veriyi otomatik olarak senkronize eder. Bir veri değiştiğinde, bu değişiklik otomatik olarak DOM’a yansır ve bunun tersi de geçerlidir, yani kullanıcı arayüzündeki değişiklikler modele yansır. - Dahili Çözümler
Angular, birçok temel işlevi yerleşik olarak sunar. Örneğin, yönlendirme (Angular Router), form işleme, doğrulama ve HTTP istekleri gibi özellikler, dış kütüphaneler kullanmaya gerek kalmadan hazır olarak gelir. - İleri Seviye Performans
Angular, değişim algılama mekanizması ve AOT (Ahead-of-Time) derleme gibi özellikleriyle uygulamanın performansını optimize eder, böylece daha hızlı ve verimli çalışan uygulamalar geliştirilebilir. - Dependency Injection (Bağımlılık Enjeksiyonu)
Angular, bağımlılık enjeksiyonu (DI) kullanarak bileşenler arasındaki bağımlılıkları yönetir. Bu özellik, kodun daha temiz ve test edilebilir olmasını sağlar.
Angular Todo Uygulaması
Angular, genellikle büyük ve karmaşık projeler için tercih edilen bir framework’tür. Todo uygulamasında, görevler servisler aracılığıyla yönetilebilir. Angular’ın modüler yapısı sayesinde, projeler daha düzenli ve yönetilebilir hale gelir. Bu yapı, özellikle büyük uygulamalarda kodun sürdürülebilirliğini artırır.
Klasör Yapısı
Angular ile geliştirdiğimiz Todo App’in dosya yapısı şu şekilde:
src/
├── app/
│ ├── components/
│ │ ├── add-todo-form/
│ │ │ ├── add-todo-form.component.ts # Yeni Todo ekleme formu
│ │ │ ├── add-todo-form.component.html # Formun HTML yapısı
│ │ │ └── add-todo-form.component.css # Formun stilleri
│ │ ├── todo-item/
│ │ │ ├── todo-item.component.ts # Her bir Todo öğesi
│ │ │ ├── todo-item.component.html # HTML yapısı
│ │ │ └── todo-item.component.css # Stiller
│ │ └── todo-list/
│ │ ├── todo-list.component.ts # Todo listesini görüntüleme
│ │ ├── todo-list.component.html # HTML yapısı
│ │ └── todo-list.component.css # Stiller
│ ├── services/
│ │ └── todo.service.ts # Global state için service
│ ├── app.component.ts # Ana uygulama bileşeni
│ ├── app.component.html # Uygulamanın HTML yapısı
│ ├── app.component.css # Uygulamanın stilleri
│ └── app.module.ts # Angular modül tanımıservices/todo.service.ts
Angular servisleri ile global görev yönetimi yapılır. Görevler, bir BehaviorSubject içinde saklanır ve bu sayede bileşenler, görevlerin durumundaki değişiklikleri anlık olarak takip edebilir. CRUD işlemleri (yeni görev ekleme, silme, tamamlama) için metodlar (addTodo, deleteTodo, toggleTodo) tanımlanmıştır. Tüm görevler, Observable olarak bileşenlere aktarılır, böylece görevlerdeki değişiklikler anında yansıtılır.
import { Injectable } from '@angular/core';
interface Todo {
id: number;
text: string;
completed: boolean;
}
@Injectable({
providedIn: 'root',
})
export class TodoService {
private todos: Todo[] = [];
getTodos(): Todo[] {
return this.todos;
}
addTodo(text: string): void {
this.todos.push({ id: Date.now(), text, completed: false });
}
toggleTodo(id: number): void {
const todo = this.todos.find((t) => t.id === id);
if (todo) {
todo.completed = !todo.completed;
}
}
deleteTodo(id: number): void {
this.todos = this.todos.filter((t) => t.id !== id);
}
}components/add-todo-form/add-todo-form.component.ts
Bu bileşen, kullanıcıdan yeni bir görev eklemek için bir form sağlar. Kullanıcıdan alınan metin, Angular’ın FormsModule özelliği ile bağlanır. Form gönderildiğinde, servis aracılığıyla yeni görev, global görev listesine eklenir.
import { Component } from '@angular/core';
import { TodoService } from '../../services/todo.service';
@Component({
selector: 'app-add-todo-form',
templateUrl: './add-todo-form.component.html',
styleUrls: ['./add-todo-form.component.css'],
})
export class AddTodoFormComponent {
text: string = '';
constructor(private todoService: TodoService) {}
onSubmit(): void {
if (this.text.trim()) {
this.todoService.addTodo(this.text);
this.text = '';
}
}
}components/add-todo-form/add-todo-form.component.html
Bu dosya, kullanıcıdan yeni bir görev eklemek için bir form girdisi sağlar. [(ngModel)] kullanılarak iki yönlü veri bağlama ile input alanındaki değer, text değişkenine bağlanır. Bu sayede formu her doldurduğunda, kullanıcı tarafından girilen metin anında güncellenir.
<form (submit)="onSubmit()">
<input
type="text"
[(ngModel)]="text"
placeholder="Yeni bir görev ekleyin"
name="todoText"
/>
<button type="submit">Ekle</button>
</form>components/add-todo-form/add-todo-form.component.css
form {
margin-bottom: 20px;
}components/todo-item/todo-item.component.ts
Bu bileşen, tek bir görevi temsil eder. Görev tamamlama ve silme işlemleri içerir. Bir görev, bileşenin input olarak aldığı bir veri olarak gelir. Görevin tamamlanma durumu ve silme işlemi, servis aracılığıyla tetiklenir.
import { Component, Input } from '@angular/core';
import { TodoService } from '../../services/todo.service';
@Component({
selector: 'app-todo-item',
templateUrl: './todo-item.component.html',
styleUrls: ['./todo-item.component.css'],
})
export class TodoItemComponent {
@Input() todo: { id: number; text: string; completed: boolean };
constructor(private todoService: TodoService) {}
toggleComplete(): void {
this.todoService.toggleTodo(this.todo.id);
}
deleteTodo(): void {
this.todoService.deleteTodo(this.todo.id);
}
}components/todo-item/todo-item.component.html
Bu dosya, bir görevin tamamlanma durumunu değiştirmek ve gerekiyorsa görevi silmek için gerekli işlevselliği sağlar.
<li>
<input
type="checkbox"
[checked]="todo.completed"
(change)="toggleComplete()"
/>
<span [style.text-decoration]="todo.completed ? 'line-through' : 'none'">
{{ todo.text }}
</span>
<button (click)="deleteTodo()">Sil</button>
</li>components/todo-item/todo-item.component.css
li {
list-style: none;
margin: 10px 0;
}components/todo-list/todo-list.component.ts
Bu bileşen, tüm görevleri bir liste halinde gösterir. Servisten alınan görevler, *ngFor direktifi ile döngüye sokulur ve her bir görev, todo-item bileşeni olarak işlenir.
import { Component } from '@angular/core';
import { TodoService } from '../../services/todo.service';
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.css'],
})
export class TodoListComponent {
constructor(private todoService: TodoService) {}
get todos() {
return this.todoService.getTodos();
}
}components/todo-list/todo-list.component.html
Bu dosya, görev listesini görüntüler ve her bir görevi app-todo-item bileşenine ileterek her bir görevi ayrı ayrı render eder.
<ul>
<app-todo-item
*ngFor="let todo of todos"
[todo]="todo"
></app-todo-item>
</ul>components/todo-list/todo-list.component.css
ul {
padding: 0;
}app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {}app.component.html
<div>
<h1>Todo List</h1>
<app-add-todo-form></app-add-todo-form>
<app-todo-list></app-todo-list>
</div>app.component.css
div {
font-family: Arial, sans-serif;
padding: 20px;
}app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AddTodoFormComponent } from './components/add-todo-form/add-todo-form.component';
import { TodoItemComponent } from './components/todo-item/todo-item.component';
import { TodoListComponent } from './components/todo-list/todo-list.component';
@NgModule({
declarations: [
AppComponent,
AddTodoFormComponent,
TodoItemComponent,
TodoListComponent,
],
imports: [BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}Vue.js Nedir?
Vue.js, 2014 yılında Evan You tarafından geliştirilen açık kaynaklı bir JavaScript framework’üdür. Modern web arayüzleri oluşturmak için kullanılır ve progresif bir yapıya sahiptir. Vue.js, kolay öğrenilebilirliği ve esnekliği ile dikkat çeker.
Vue.js, küçük projelerden büyük ölçekli uygulamalara kadar geniş bir yelpazede kullanılabilir. React’in bileşen bazlı yapısını ve Angular’ın kapsamlı çözüm özelliklerini birleştiren dengeli bir framework olarak öne çıkar.
Vue.js’in Temel Özellikleri ve Yetenekleri
- İki Yönlü Veri Bağlama
Vue.js, model ve DOM arasındaki değişiklikleri otomatik olarak senkronize eder. Bu, kullanıcı etkileşimleri ile veri arasındaki ilişkiyi daha da kolaylaştırır. - Bileşen Bazlı Mimari
Vue.js, uygulamaları küçük ve tekrar kullanılabilir bileşenlere ayırarak, her bir kısmı bağımsız olarak yönetmenizi sağlar. Bu, projelerin daha modüler ve ölçeklenebilir olmasına yardımcı olur. - Sanal DOM
Vue.js, React gibi sanal DOM kullanarak, DOM manipülasyonlarını daha hızlı ve verimli hale getirir. Bu, performansı artırırken, sadece gerekli değişiklikleri yapmanıza olanak tanır. - Kolay Entegrasyon
Vue.js, mevcut projelere rahatça entegre edilebilir. Büyük uygulamalara küçük adımlarla dahil edilebilir, böylece karmaşıklığı arttırmadan kolayca adapte olabilirsiniz. - Reaktif Sistem
Vue.js’in reaktif veri modeli sayesinde, verilerdeki değişiklikler otomatik olarak izlenir ve bu değişiklikler hemen kullanıcıya yansır. Bu, uygulamanın daha dinamik ve etkileşimli olmasını sağlar. - Kolay Öğrenilebilirlik
Vue.js, temiz ve basit API’siyle özellikle yeni başlayanlar için oldukça erişilebilir. Yapısının anlaşılması kolay ve öğrenmeye başlamak hızlıdır.
Vue Todo Uygulaması
Vue.js ile yapılan Todo uygulamaları, genellikle hızlı, reaktif ve kullanıcı dostu olur. Vue’nun bileşen tabanlı yapısı sayesinde her görev, bir bileşen olarak yönetilebilir ve bu, uygulamanın esnekliğini artırır. Vuex gibi bir state yönetim aracı ile uygulamanın durumu merkezi bir şekilde yönetilir, bu da büyük projelerde bile bileşenler arasındaki veri akışını daha kolay hale getirir.
Klasör Yapısı
Vue ile geliştirdiğimiz Todo App’in dosya yapısı şu şekilde:
src/
├── components/
│ ├── AddTodoForm.vue # Yeni Todo eklemek için form
│ ├── TodoItem.vue # Her bir Todo öğesi
│ └── TodoList.vue # Todo listesini görüntüleme
├── App.vue # Ana uygulama bileşeni
├── main.js # Vue giriş dosyası
└── store.js # Vuex ile global state yönetimistore.js
Vuex kullanılarak uygulamanın global görev listesi yönetilir. Tüm görevlerle ilgili işlemler burada yapılır. state, görevlerin tutulduğu dizi. Başlangıçta boş bir dizi tanımlanır. mutations, görev ekleme, silme ve tamamlama durumunu değiştirme gibi işlemleri içerir. actions mutations'ı çağıran ve bileşenlerden tetiklenen işlevler. getters, görev listesini veya belirli filtrelenmiş verileri almak için kullanılır.
import { createStore } from 'vuex';
export default createStore({
state: {
todos: [],
},
mutations: {
ADD_TODO(state, text) {
state.todos.push({ id: Date.now(), text, completed: false });
},
TOGGLE_TODO(state, id) {
const todo = state.todos.find((t) => t.id === id);
if (todo) {
todo.completed = !todo.completed;
}
},
DELETE_TODO(state, id) {
state.todos = state.todos.filter((t) => t.id !== id);
},
},
actions: {
addTodo({ commit }, text) {
commit('ADD_TODO', text);
},
toggleTodo({ commit }, id) {
commit('TOGGLE_TODO', id);
},
deleteTodo({ commit }, id) {
commit('DELETE_TODO', id);
},
},
getters: {
todos: (state) => state.todos,
},
});components/AddTodoForm.vue
Kullanıcıdan yeni görev girişi almak için bir form bileşenidir. Input alanına girilen metni saklar (text). onSubmit: Kullanıcı formu gönderdiğinde girilen metni Vuex'e iletir. Basit bir kullanıcı dostu form tasarımı içerir.
<template>
<form @submit.prevent="onSubmit">
<input
v-model="text"
type="text"
placeholder="Yeni bir görev ekleyin"
/>
<button type="submit">Ekle</button>
</form>
</template>
<script>
export default {
data() {
return {
text: '',
};
},
methods: {
onSubmit() {
if (this.text.trim()) {
this.$store.dispatch('addTodo', this.text);
this.text = '';
}
},
},
};
</script>
<style>
form {
margin-bottom: 20px;
}
</style>components/TodoItem.vue
Her bir görevi listelemek ve tamamlanma ya da silme işlemlerini sağlamak için kullanılır. Üst bileşenden gelen görev (todo) burada işlenir. toggleComplete, görevin tamamlama durumunu değiştirir.deleteTodo, görevi siler. Görev tamamlanmışsa CSS ile üzeri çizili görünür.
<template>
<li>
<input
type="checkbox"
:checked="todo.completed"
@change="toggleComplete"
/>
<span :style="{ textDecoration: todo.completed ? 'line-through' : 'none' }">
{{ todo.text }}
</span>
<button @click="deleteTodo">Sil</button>
</li>
</template>
<script>
export default {
props: {
todo: {
type: Object,
required: true,
},
},
methods: {
toggleComplete() {
this.$store.dispatch('toggleTodo', this.todo.id);
},
deleteTodo() {
this.$store.dispatch('deleteTodo', this.todo.id);
},
},
};
</script>
<style>
li {
list-style: none;
margin: 10px 0;
}
</style>components/TodoList.vue
Tüm görevlerin bir döngü ile listelenmesi için kullanılır. Computed,Vuex getters'tan alınan görev listesini dinamik olarak döndürür. Template, Döngüyle (v-for) görev bileşenlerini oluşturur.
<template>
<ul>
<TodoItem
v-for="todo in todos"
:key="todo.id"
:todo="todo"
/>
</ul>
</template>
<script>
import TodoItem from './TodoItem.vue';
export default {
components: { TodoItem },
computed: {
todos() {
return this.$store.getters.todos;
},
},
};
</script>
<style>
ul {
padding: 0;
}
</style>App.vue
Görev ekleme ve listeleme bileşenlerini birleştirir. İçinde AddTodoForm ve TodoList bileşenlerini çağırır.
<template>
<div>
<h1>Todo List</h1>
<AddTodoForm />
<TodoList />
</div>
</template>
<script>
import AddTodoForm from './components/AddTodoForm.vue';
import TodoList from './components/TodoList.vue';
export default {
components: {
AddTodoForm,
TodoList,
},
};
</script>
<style>
div {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>main.js
Vue uygulamasını oluşturur ve Vuex mağazasını entegre eder. Vue uygulamasını başlatır ve kök bileşen (App.vue) ile bağlar.
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');Hangi Framework’ü Seçmeli?
React, Angular ve Vue.js, şu an frontend geliştirme dünyasında en popüler ve yaygın kullanılan üç büyük framework’tür. Her biri farklı projelere uygun avantajlar sunuyor ve projenizin gereksinimlerine göre en doğru framework’ü seçmek, başarılı bir sonuç almanızı sağlayabilir. Gelin, her birinin artılarına bir göz atalım.
React: Esneklik ve Geniş Ekosistem
React, öğrenmesi ve kullanması hızlı bir framework olup, özellikle kullanıcı arayüzleri geliştirmek için çok güçlü bir araçtır. Bileşen bazlı yapısı sayesinde uygulamaları modüler bir şekilde geliştirebilirsiniz. React’in en büyük avantajlarından biri, sanal DOM kullanarak yüksek performans sunmasıdır. Bu sayede etkileşimli web uygulamaları daha verimli çalışır.
React, devasa bir topluluğa sahip olduğu için sürekli olarak yenilikçi çözümlerle destekleniyor. Ancak, uygulama yönetimi ve state yönetimi gibi konularda bazen ek kütüphanelere (Redux, Context API, Recoil gibi) ihtiyaç duyabilirsiniz.
Esneklik sağladığı için React, küçük ve orta ölçekli projelerde hızlıca geliştirme yapmanıza olanak tanır. Fakat büyük projelere gelince, yapının daha karmaşık hale gelmesi gerekebilir. Bu tür projelerde ise ek kütüphaneler ve yönlendirmeler gibi özellikleri entegre etmeniz gerekebilir.
Angular: Büyük ve Karmaşık Uygulamalar İçin Güçlü Bir Framework
Angular, büyük ölçekli ve kurumsal seviyedeki uygulamalar için oldukça uygun bir framework’tür. Google tarafından desteklenen Angular, TypeScript ile yazılmış ve güçlü bir yapı sunuyor. Pek çok yerleşik araç içerdiği için uygulama geliştirme sürecini kolaylaştırır: form işleme, HTTP istekleri, yönlendirme, state yönetimi ve çok daha fazlası.
Angular’ın en büyük avantajı, büyük projeler için sağlam bir yapı sunması ve her şeyin içinde barındırılmasıdır. Ancak, bu güçlü yapı aynı zamanda öğrenilmesini de zorlaştırabiliyor. Angular’ı efektif kullanabilmek için biraz zaman harcamanız gerekebilir.
Genel olarak, Angular daha büyük projelerde harika bir seçimdir. Ancak, küçük projelerde biraz fazla karmaşık olabilir. Yine de, geniş çaplı servisler ve modüllerle çalışmak istiyorsanız, Angular’ın sağladığı test araçları ve entegre özelliklerle sürdürülebilir projeler oluşturabilirsiniz.
Vue.js: Hafif, Esnek ve Kolay Öğrenilebilir
Vue.js, React ve Angular’ın iyi özelliklerini birleştirerek kendini tanıtan bir framework’tür. Vue’nun öğrenmesi oldukça kolaydır ve hızlıca uygulanabilir. React gibi bileşen bazlı bir yapıya sahipken, Angular’a kıyasla çok daha esnektir. Vue, reaktif veri bağlama sistemiyle kullanıcı etkileşimlerine hızlıca tepki verir ve modern web uygulamalarının gereksinimlerini karşılar.
Vue’nun popülerliği son yıllarda oldukça arttı. Küçük ve orta ölçekli projeler için harika bir seçenek çünkü hızlı geliştirme sağlar. Fakat büyük ölçekli projeler için Angular kadar sağlam olmayabilir. Vuex gibi state yönetim araçları olsa da, Angular’ın sunduğu kapsamlı ekosistemi sağlamaz. Ancak Vue’nun sağladığı hız ve esneklik, birçok geliştirici tarafından tercih edilmesine neden olmaktadır.
Sonuç
React, Angular ve Vue.js, her biri farklı gereksinimlere hitap eden güçlü frontend framework’leridir. React, esnek yapısı ve geniş ekosistemiyle küçük ve orta ölçekli projeler için idealken, Angular büyük ve kurumsal projeler için mükemmel bir tercih. Vue.js ise kolay öğrenilebilirliği ve hızlı geliştirme süresiyle küçük ve orta ölçekli projeler için harika bir seçenek.
Proje türünüze, geliştirme hızına, ekibinizin yetkinliklerine ve ölçeklenebilirlik ihtiyaçlarınıza göre doğru framework’ü seçmek çok önemli. Eğer büyük bir kurumsal uygulama geliştiriyorsanız, Angular’ı tercih edebilirsiniz. Küçük projelerde hızlı geliştirme istiyorsanız, React ve Vue.js mükemmel tercihlerdir. Üçü de büyük topluluklara ve bolca kaynağa sahip, bu yüzden her biriyle ilgili destek bulmakta zorlanmazsınız.
🚀 Bonus: Faydalı Linkler
React
React Resmi Dokümantasyonu
React, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Resmi dokümantasyon, React’in temellerinden ileri düzey konseptlerine kadar kapsamlı bir rehber sunar. React bileşenlerini, hooks kullanımını, durum yönetimini ve performans optimizasyonlarını öğrenmek isteyen herkes için mükemmel bir kaynaktır.
Link: https://react.dev/
React Router
SPA (Single Page Application) projelerinde gezinme işlevlerini kolaylaştırır. React Router ile dinamik rotalar, nested route yapıları ve özel yönlendirmeler oluşturabilirsiniz. Özellikle büyük projelerde, kullanıcı deneyimini artırmak için routing işlemleri vazgeçilmezdir.
Link: https://reactrouter.com/
React Hook Form
Form yönetimini basitleştiren hafif bir kütüphanedir. Performansı artırır ve validasyon işlemlerini kolaylaştırır. Özellikle çok sayfalı formlarda veya dinamik form yapılarında kullanışlıdır.
Link: https://react-hook-form.com/
Material-UI (MUI)
Google’ın Material Design yönergelerine uygun, şık ve kullanımı kolay bileşenler sunar. MUI, büyük ölçekli projelerde tasarım tutarlılığını sağlamak için en popüler kütüphanelerden biridir. Özelleştirilebilir tema desteğiyle hem estetik hem de işlevsel bir deneyim sağlar.
Link: https://mui.com/
Redux Toolkit
Redux, React projelerinde durum yönetimi için en yaygın kullanılan kütüphanelerden biridir. Redux Toolkit, Redux’u daha kolay ve verimli bir şekilde kullanmayı sağlar. İçinde hazır gelen araçlar, boilerplate kod miktarını azaltır.
Link: https://redux-toolkit.js.org/
React Query
React Query, React projelerinde veri alma (fetching), önbellekleme (caching), senkronizasyon ve güncellemeleri kolaylaştıran bir kütüphanedir. Geleneksel useState ve useEffect kullanımına kıyasla, veri yönetimini daha etkin bir şekilde gerçekleştirir.
Link: https://tanstack.com/query
Next.js
React ile server-side rendering (SSR) ve statik site oluşturmayı destekleyen popüler bir framework’tür. SEO optimizasyonu, hızlı performansı ve dinamik sayfa desteği ile modern web projelerinde sıkça tercih edilir.
Link: https://nextjs.org/
Angular
Angular Resmi Dokümantasyonu
Angular, Google tarafından geliştirilen, TypeScript tabanlı bir framework’tür. Resmi dokümantasyon, Angular’ın yapısını, bileşen tabanlı mimarisini ve modül sistemini anlamak için idealdir. Yeni başlayanlardan profesyonellere kadar herkes için detaylı bir rehber sunar.
Link: https://angular.dev/
RxJS
Reaktif programlama paradigmasını kullanarak olayları ve veri akışlarını yönetmek için güçlü bir araçtır. Angular ile sıkça entegre edilen RxJS, özellikle async işlemler ve observable kullanımı için idealdir.
Link: https://rxjs.dev/
NGXS
Angular projelerinde durum yönetimi için alternatif bir yaklaşımdır. Kullanımı kolay, performans odaklı bir çözüm sunar. Redux’a benzer yapısıyla Angular geliştiricileri tarafından sıklıkla tercih edilir.
Link: https://www.ngxs.io/
Angular Material
Angular projelerinde kullanıcı dostu ve modern bir arayüz tasarlamak için kullanılan bir kütüphanedir. Angular Material, zengin bileşen seti, tema desteği ve yerleşik erişilebilirlik özellikleriyle öne çıkar.
Link: https://material.angular.io/
PrimeNG
PrimeNG, Angular için kapsamlı ve zengin bileşen kütüphanelerinden biridir. Google’ın Material Design yönergelerine uygun, tamamen responsive ve modern bir tasarım sağlar.
Link: https://primeng.org/
Projenin CLI Araçları
Angular CLI, projeyi hızlı bir şekilde başlatmak, bileşen oluşturmak ve yapılandırmayı otomatikleştirmek için mükemmel bir araçtır. Üretim için optimize edilmiş build işlemleriyle, geliştirme sürecini büyük ölçüde kolaylaştırır.
Link: https://angular.dev/cli
Vue.js
Vue.js Resmi Dokümantasyonu
Vue.js, reaktif ve bileşen tabanlı bir JavaScript framework’üdür. Resmi dokümantasyon, framework’ün temel özelliklerini ve en iyi uygulamalarını öğrenmek isteyenler için başlıca kaynaktır. Temiz bir öğrenme eğrisi sunar ve interaktif örneklerle desteklenir.
Link: https://vuejs.org/
Vue Router
Vue.js ile SPA projelerinde gezinmeyi kolaylaştırır. Dinamik route yapıları ve geçiş animasyonları gibi gelişmiş özellikler sunar. Vue Router, Vue uygulamalarında kullanıcı deneyimini geliştirmek için vazgeçilmezdir.
Link: https://router.vuejs.org/
Vuex
Vue uygulamalarında merkezi durum yönetimi sağlar. Büyük projelerde, veri akışını düzenlemek ve bileşenler arasında veri paylaşımını kolaylaştırmak için kullanılır.
Link: https://vuex.vuejs.org/
Vuetify
Vue.js için Material Design tabanlı bir UI framework’tür. Zengin bileşen kütüphanesi sayesinde kullanıcı arayüzünü hızlıca tasarlamanızı sağlar. Esnek tema desteğiyle kişiselleştirilmiş tasarımlar oluşturabilirsiniz.
Link: https://vuetifyjs.com/
Nuxt.js
Vue.js için geliştirilmiş bir framework olan Nuxt.js, server-side rendering, statik site oluşturma ve SEO optimizasyonu için güçlü bir altyapı sunar. Vue projelerini hızlı ve etkili bir şekilde geliştirmek isteyenler için idealdir.
Link: https://nuxt.com/
