Vue.js İlerici JavaScript Framework'ü

Vue.js ulaşılabilir, çok yönlü ve performanslı bir JavaScript Framework'üdür. Sürdürülebilir ve test edilebilir bir kod tabanı için iyi bir altyapı sağlar.

JavaScript
HTML
Çıktı
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.component('custom-element', {
  data() {
    return {
      users: [{ username: 'Jhon' }, { username: 'Nancy' }, { username: 'Jack' }],
    };
  },
  template:
    '<div><div class="user" v-for="user in users"><p>Username: {{ user.username }}</p></div></div>',
});

window.addEventListener('load', () => {
  window.vue = new Vue({
    el: '#app',
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
    <script src="app.js"></script>
</head>
<body>
  <div id="app">
      <custom-element></custom-element>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
    <script src="app.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <div class="user"><p>Username: Jhon</p></div>
      <div class="user"><p>Username: Nancy</p></div>
      <div class="user"><p>Username: Jack</p></div>
    </div>
  </div>
</body>
</html>

Radity'de neden Vue.js'i tercih ediyoruz? 

Esnek

Önyüz mühendisliğinde karşılaşılan zorluklardan biri de URL ve kaynak tabanlı navigasyona dayanan HTTP ve tarayıcı teknolojileri bazlı kompleks tek sayfa uygulamalar geliştiemektir.

Vuex (depo) ve Vue Router (navigasyon) gibi Vue'nun çekirdek modülleri bu programlama kompleksliğini azaltarak, geliştiricilere tek sayfa (SPA) veya tek sayfa benzeri uygulamaları efektif bir şekilde geliştirmelerine yardımcı oluyor.

Küçük Boyutlu 

Vue.js (20KB gzipped) boyutuyla çoğu performans gerektiren uygulamalarda bile rahatlıkla kullanılabilir.
 

Öğrenimi Kolay

Vue.js, geliştirme ekiplerinin kısa zamanda aynı seviyeye gelmelerini sağlayan kolay bir öğrenme eğrisine sahiptir.

Açık Kaynak Ekosistemi Geniş

Radity'de, çoğu teknolojide olduğu gibi güçlü toplulukları olan açık kaynak ürünlerini seviyoruz. Vue.js aktif ekosistemi ile bu kategoriye mükemmel bir uyum sağlıyor.

Bonus - Vue CLI 3

Vue.js, geliştiricilerin prototip oluşturma, hata ayıklama ve kodlarını hızlı bir şekilde optimize etmelerine yardımcı olan CLI ve bir dizi geliştirme aracıyla birlikte gelmektedir.

Performans

Vue.js'in kendisi sanal DOM ile minimum optimizasyon çabalarına sahiptir. Vue'nun bu dahili performans optimizasyonunun yanı sıra Radity'de, kullanıcılara gidecek tüm gereksiz kodları bölmek için “Code Splitting” ve “Lazy Loading”, modern tarayıcı kodunu eski tarayıcı destek kodundan ayırmak için de “Modern tarayıcı paketi” kullanıyoruz. Bunlar performansta önemli bir artış sağlıyor.

Vue.js performans optimizasyonları ile ilgili yazdığımız makaleyi buradan okuyabilirsiniz.

Vue.js'in Gücüne Harika Bir Örnek

Müşterilerimizden biri için, benzer bir ürün verilerine bakılarak bir ürünün yıllık gelirlerini veya olası kayıplarını hesaplayan bir fiyatlandırma simülasyonu geliştirdik.

Bu simülasyon büyük ölçüde benzer ürünün verilerine dayanmaktadır. İlk önce tüm verileri benzer üründen kopyalarak faktörlerini hesapladık.

Yeni ürünün faktörleri değiştiğinde, bu faktörlere bakarak verileri tekrardan hesaplayarak ara ve genel toplamları bulmamız gerekiyordu.

Yaşam Döngüsü

Vue.js, veri değişikliklerini dinleyen ve güncellenmesi gerektiğinde bu verilerle ilgili DOM öğelerini güncelleyen bir yaşam döngüsüne sahiptir.

Böylece tek yapmamız gereken computed properties yazmak oldu. Vue.js geri kalanını bizim için halletti, çünkü hangi verilerin değiştiğini ve o verilerin neyle ilişkili olduğunu biliyor. Tüm ilişkili veriler de zincirleme reaksiyon halinde güncelleniyor.

Herhangi bir olayı (event) dinlemeye gerek yok, herhangi bir DOM öğesini yeniden oluşturmaya gerek yok. Hepsi Vue.js tarafından hallediliyor. Önyüz mühendisliği için ne harika ve başarılı bir araç!
 

Technology Stack

Vuex

 

Vuex, Vue.js uygulamaları için bir depo yönetim kalıbı ve kütüphanedir.

Vue Router

Vue Router, Vue.js.'in resmi navigasyon modülüdür.

Webpack

Webpack bir modül paketleyicidir. Temel amacı, bir tarayıcıda kullanılmak üzere JavaScript dosyalarını bir araya getirmektir.

Babel

Babel, JavaScript'in en son sürümünde kod yazmanıza yardımcı olan bir araçtır.

ES6

ES6, ECMA Script programlama dilinin 6. versiyonunu ifade eder. ECMA Script, JavaScript'in standartlaştırılmış ismidir.

SASS/SCSS

SASS, CSS formatında derlenebilen dinamik bir stil dilidir.

ESLint

JavaScript ve JSX için entegre edilebilir hata ayıklama programı.

Prettier

Prettier, bir kod düzenleyicisidir. Kodunuzu ayrıştırarak tutarlı bir stil uygular.

Storybook

 

Storybook, UI bileşenleri için bir geliştirme ortamıdır. Bir bileşen kitaplığına göz atmanıza, her bileşenin farklı durumlarını görüntülemenize ve etkileşimli olarak bileşenleri geliştirmenize ve test etmenize olanak sağlar.

Jest

Jest, basitliğe odaklanmış bir JavaScript Test Framework'üdür.

Docker

Docker, kapsayıcılar kullanarak uygulama oluşturmayı, dağıtmayı ve çalıştırmayı kolaylaştırmak için tasarlanmış bir araçtır. 

Gulp

Gulp, görevleri otomatikleştirmenizi sağlayan bir JavaScript görev çalıştırıcısıdır. 

Vue.js'i onaylayıp tercih eden lider isimler 

Netflix, Adobe, Alibaba, Xiaomi, Gitlab, IBM, Behance ve daha fazlası..

SONRAKİ HİZMET

.NET Core

Radity, teknolojilerinin merkezinde barındırdığı ASP.Net Core ile üstün kalite yazılım üreten bir yazılım şirketidir. Alanlarında deneyimli, uzman .NET ekibimiz hızlı ve responsive web uygulamaları geliştirmektedir.

Hizmet Hakkında

HİZMETLER

Tüm hizmetler

Bir bulut çözümüne e-bankacılık seviyesinde güvenlik sağlarken ödüllü kullanıcı arayüzleri geliştiren bir çözüm ortağı ile kaç kere çalıştınız?

Hizmetlerimiz

Sorularınız mı var? Bize hemen ulaşın!

Fikirlerinize birlikte hayat verelim, başarı hikayelerine dönüştürelim. Bizimle iletişime geçin.