Yeni Web Uygulamanız için Neden React Yerine Angular veya Vue'yu Seçmelisiniz?

Kariyerim boyunca React, Angular ve Vue'nun inceliklerini bilen biri olarak, bu popüler ön uç çerçeveleri arasındaki incelikli farklılıkları takdir etmeye başladım. Bu makalede, bir sonraki web uygulaması projeniz için Angular veya Vue'yu tercih etmenin React'a kıyasla neden daha yapılandırılmış ve ölçeklenebilir bir yaklaşım sunabileceğini açıklayacağım.

1. Şablonlar

Angular ve Vue'daki şablonlar, mantık ve sunum arasında net bir ayrım sağlayarak daha temiz kod ve daha kolay bakımı teşvik eder. JavaScript mantığının işaretlemeyle iç içe geçebildiği React JSX'in aksine, Angular ve Vue şablonları katı bir ayrım uygular. Bunu örneklerle açıklayalım:

JSX'e tepki verin:

 return ( <div> {array.map(item => { if (condition) { return <p>{item}</p>; } else { return <span>{item}</span>; } })} </div> );

Açısal Şablon:

 <div *ngFor="let item of array"> <p *ngIf="condition; else other">{{ item }}</p> <ng-template #other><span>{{ item }}</span></ng-template> </div>

Vue Şablonu:

 <div v-for="item in array"> <p v-if="condition">{{ item }}</p> <span v-else>{{ item }}</span> </div>

2. Bağlayıcı Form Kontrolleri:

Angular ve Vue, form kontrollerini bağlamak için basit yollar sağlayarak form verilerinin birden fazla alanla yönetilmesini kolaylaştırır. Dört alanlı bir form nesnesi oluşturalım: metin girişi, radyo düğmesi, onay kutusu ve açılır menüyü seçin.

Açısal:

 @Component({ selector: 'app-form', template: ` <form> <input type="text" [(ngModel)]="formData.text" placeholder="Text Input"> <br> <input type="radio" [(ngModel)]="formData.radio" value="option1"> Option 1 <input type="radio" [(ngModel)]="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" [(ngModel)]="formData.checkbox"> Checkbox <br> <select [(ngModel)]="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> `, }) export class FormComponent { formData = { text: '', radio: '', checkbox: false, select: '', }; }

Görünüm:

 <template> <form> <input type="text" v-model="formData.text" placeholder="Text Input"> <br> <input type="radio" v-model="formData.radio" value="option1"> Option 1 <input type="radio" v-model="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" v-model="formData.checkbox"> Checkbox <br> <select v-model="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> </template> <script> export default { data() { return { formData: { text: '', radio: '', checkbox: false, select: '', }, }; }, }; </script>

Tepki:

 const FormComponent = () => { const [formData, setFormData] = useState({ text: '', radio: '', checkbox: false, select: '', }); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value, }); }; return ( <form> <input type="text" name="text" value={formData.text} onChange={handleChange} placeholder="Text Input" /> <br /> <input type="radio" name="radio" value="option1" checked={formData.radio === 'option1'} onChange={handleChange} /> Option 1 <input type="radio" name="radio" value="option2" checked={formData.radio === 'option2'} onChange={handleChange} /> Option 2 <br /> <input type="checkbox" name="checkbox" checked={formData.checkbox} onChange={handleChange} /> Checkbox <br /> <select name="select" value={formData.select} onChange={handleChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> ); };

React'ta, Formik veya React Hook Form gibi kütüphaneleri kullanmadan, form durumunu yönetmek, useState ile durum değişkenlerini ayarlamayı ve form alanları değiştiğinde durumu güncellemek için bir işleyici işlevi yazmayı gerektirir. Bu, özellikle birden fazla alana sahip formlar için ortak kod ekleyebilir ve karmaşıklığı artırabilir. Form kitaplıkları gelişmiş form işleme yetenekleri sunarken bunları bir projeye entegre etmek ek kurulum ve öğrenme gerektirir.

Bana göre geliştiriciler, özellikle formların işlenmesi ön uç geliştiriciler için tipik bir günlük görev olduğunda, form kitaplıkları için ek belgeleri seçip öğrenmek için zaman harcamak istemeyebilirler. Angular ve Vue'nun yerleşik form işleme yetenekleri, daha basit ve daha entegre bir yaklaşım sunarak geliştiricilerin ek bağımlılığa ihtiyaç duymadan uygulamalarını oluşturmaya odaklanmasına olanak tanır.

3. Alt Bileşenlere Erişim:

Angular'ın ViewChild , Vue'nun refs'i ve React'ın useImperativeHandle alt bileşenlerle etkileşim kurma mekanizmalarıdır. Her üçü de bunu başarmanın yollarını sunarken, Angular ve Vue, React'in dokümantasyonunda daha az tavsiye edilen React'in useImperativeHandle kıyasla daha temiz ve daha sezgisel yaklaşımlar sunar. İşte örnekler:

Açısal:

 @Component({ selector: 'app-parent', template: ` <app-child #child></app-child> <button (click)="callChildMethod()">Call Child Method</button> `, }) export class ParentComponent { @ViewChild('child') childComponent: ChildComponent; callChildMethod() { this.childComponent.someMethod(); } }

Görünüm:

 <template> <div> <child ref="child"></child> <button @click="callChildMethod">Call Child Method</button> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, methods: { callChildMethod() { this.$refs.child.someMethod(); }, }, }; </script>

Tepki:

 const ChildComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ someMethod() { // Method logic }, })); return ( <p>I am a child</p> ); }); const ParentComponent = () => { const childRef = useRef(null); // Access child component's method const callChildMethod = () => { childRef.current?.someMethod(); }; return ( <div> <ChildComponent ref={childRef} /> <button onClick={callChildMethod}>Call Child Method</button> </div> ); };

React'ta, işlevsel bileşen paradigması doğası gereği Angular sınıf bileşenleri veya "methods" özelliğine sahip Vue bileşenleri gibi "yöntemler" sağlamazken, alt yöntemlere useImperativeHandle kancası olmadan erişmek için daha basit bir yaklaşım arzu edilir. useImperativeHandle daha az anlaşılır olabilir ve alt bileşenin forwardRef işlevine sarılmasını gerektirir. Alt bileşenlerin kendisini değiştirmeden alt yöntemlere erişebildiğiniz Angular ve Vue'dan farklı olarak React, benzer işlevsellik elde etmek için bu ek kurulumu gerektirir.

Ayrıca Vue'ya da değinmek istiyorum. Composition API, Vue'da nispeten yeni bir teknolojidir ve alt bileşenlere erişim, yukarıda anlattığımdan biraz farklıdır. Ancak tüm ekiplerin henüz Composition API'yi projelerinde uygulamadığını ve anlattığım yaklaşımı kullanmadığını varsayıyorum.

Bana göre React yerine Angular veya Vue'yu seçmenizin üç nedenini anlattım.