Vue.js ile Modern Web Uygulamaları Geliştirme
Vue.js, son yıllarda frontend geliştirme dünyasında popülerliğini artıran, güçlü ve esnek bir JavaScript framework'üdür. Bu makalede, Vue.js'in modern web uygulamaları geliştirmedeki rolünü, temel prensiplerini ve best practice'lerini inceleyeceğiz.
Vue 3 ve Modern Vue.js Geliştirme
Vue 3, performans iyileştirmeleri, Composition API ve TypeScript desteği gibi önemli yeniliklerle geldi. İşte Vue 3'ün öne çıkan özellikleri:
Composition API
Composition API, Vue uygulamalarında logic organizasyonunu ve kod tekrar kullanılabilirliğini iyileştiren yeni bir yaklaşımdır:
import { ref, computed, onMounted } from 'vue'
export default {
setup() {
// Reactive state
const count = ref(0)
// Computed property
const doubleCount = computed(() => count.value * 2)
// Methods
const increment = () => count.value++
// Lifecycle hooks
onMounted(() => {
console.log('Component mounted')
})
// Expose to template
return {
count,
doubleCount,
increment
}
}
}
TypeScript Entegrasyonu
Vue 3, TypeScript ile birlikte kullanıldığında güçlü tip güvenliği sağlar:
interface User {
id: number
name: string
email: string
}
const useUsers = () => {
const users = ref<User[]>([])
const loading = ref(false)
const fetchUsers = async () => {
loading.value = true
try {
const response = await fetch('/api/users')
users.value = await response.json()
} catch (error) {
console.error('Error fetching users:', error)
} finally {
loading.value = false
}
}
return {
users,
loading,
fetchUsers
}
}
State Management ve Pinia
Pinia, Vue 3 için önerilen modern state management çözümüdür:
// store/counter.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
lastUpdated: null as Date | null
}),
getters: {
doubleCount: (state) => state.count * 2,
isPositive: (state) => state.count > 0
},
actions: {
increment() {
this.count++
this.lastUpdated = new Date()
},
async fetchInitialCount() {
const response = await fetch('/api/count')
this.count = await response.json()
}
}
})
Vue Router ve Modern Routing
Modern Vue uygulamalarında routing yönetimi:
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: () => import('./views/Home.vue'),
meta: { requiresAuth: false }
},
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue'),
meta: { requiresAuth: true },
children: [
{
path: 'profile',
component: () => import('./views/Profile.vue')
}
]
}
]
})
// Navigation Guards
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})
Composables ve Code Reusability
Vue 3'te kod tekrar kullanılabilirliği için composables:
// composables/useTheme.ts
import { ref, watch } from 'vue'
export function useTheme() {
const theme = ref(localStorage.getItem('theme') || 'light')
const toggleTheme = () => {
theme.value = theme.value === 'light' ? 'dark' : 'light'
}
watch(theme, (newTheme) => {
localStorage.setItem('theme', newTheme)
document.documentElement.classList.toggle('dark', newTheme === 'dark')
})
return {
theme,
toggleTheme
}
}
Performance Optimizasyonu
Vue 3 uygulamalarında performans optimizasyonu için best practice'ler:
Dynamic Imports ve Code Splitting
// Lazy loading components
const AsyncComponent = defineAsyncComponent(() =>
import('./components/HeavyComponent.vue')
)
// Route level code splitting
const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
}
]
Suspense ve Async Components
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>
Nuxt.js ile Full-Stack Vue Geliştirme
Nuxt.js, Vue.js uygulamaları için güçlü bir meta-framework'tür:
Auto Imports ve Directory Structure
// composables/useCounter.ts
export const useCounter = () => {
const count = useState('count', () => 0)
const increment = () => count.value++
const decrement = () => count.value--
return {
count,
increment,
decrement
}
}
// pages/index.vue
<script setup>
const { count, increment } = useCounter() // Auto-imported
</script>
API Routes ve Server-Side Logic
// server/api/users.ts
export default defineEventHandler(async (event) => {
const users = await prisma.user.findMany()
return users
})
Testing ve Quality Assurance
Vue uygulamalarında test yazma pratikleri:
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
describe('Counter.vue', () => {
it('increments count when button is clicked', async () => {
const wrapper = mount(Counter)
await wrapper.find('button').trigger('click')
expect(wrapper.find('.count').text()).toBe('1')
})
})
Sonuç
Vue.js, modern web uygulamaları geliştirmek için güçlü, esnek ve verimli bir framework sunar. Composition API, TypeScript desteği, Pinia ile state management ve Nuxt.js gibi araçlarla birlikte kullanıldığında, geliştiricilere kapsamlı bir ekosistem sağlar.
Vue.js'in reaktif programlama modeli, component-based mimarisi ve güçlü tooling desteği, onu frontend geliştirme dünyasında önemli bir oyuncu haline getiriyor. Modern web uygulamaları geliştirirken Vue.js'i tercih etmek, projenizin başarısı için güçlü bir temel oluşturabilir.
İlgili Etiketler: #Vuejs #Frontend #JavaScript #CompositionAPI #TypeScript #Pinia #Nuxtjs #WebDevelopment