barisprlk0
Kayıtlı Kullanıcı
Merhaba ben back-end için django kullanıyorum ancak front-end için ne kullansam karar veremiyorum.
Hangi front-end frameworkü önerirsiniz , neden?
Hangi front-end frameworkü önerirsiniz , neden?
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
}
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Çok teşekkür ederim aşırı yardımcı oldunuzİster backend ister frontend olsun framework seçiminde ilk bakılması gereken şey ihtiyaçları karşılayıp - karşılayamadığı veya ne derece karşıladığı. Bunu netleştirdikten sonra karar verilmesi gereken bir kaç parametre var.
En önemlileri şunlardır;
1- Self Proven (FW'nin kendini production ortamında kanıtlamış olması)
2- Common Usage (Yaygın kullanım)
3- Ease of Learning (Öğrenme kolaylığı)
4- Issues & Fixes (Buglar ve bunların çözümü)
5- Community Support (Topluluk Desteği)
6- Performance (Performans)
7- Security (Güvenlik)
8- Package Management & Dependency Injection (Paket yönetimi ve bağımlılık)
9- Team Member Integration (Ekip halinde kullanılıyorsa sonradan gelenleri sisteme entegre kolaylığı Madde 2 ve 4)
10- Scalability & Modularity (İhtiyaçlara göre genişleyebilme ve modüler olma)
Bunlar karar aşamasındaki en önemli kriterler. Bir de bunlara bağlı olmayan başka kriterler var.
Mesela;
- Deneyimlere bağlı kişisel tercih
- Yeni bir FW öğrenmek için yeterli zaman olup olmaması
- Kendi fwni geliştirmek yada open source fwlere alternatif çıkarmak gibi.
Parametrelerimiz belli, sonraki adımımız ne ?
Sonraki adımımız seçtiğimiz frameworku test aşamasında kullanmak, basit bir Hello World veya Todo List app yaparak bize uygunluğunu test etmek. Böylece hem yukarıdaki maddeleri test etmiş oluyoruz hem de bireysel olarak bu frameworku kullanmaya ne kadar yatkın olduğumuzu görüyoruz.
Frontend fwleri yapıları itibariyle backend fwlerinden farklıdır. Sadece UI yani tasarım amaçlı kullanılan fwler olabildiği gibi (Bootstrap, Tailwind, Bulma) gibi, işin engineering yani mühendislik (yapısal tasarım da diyebiliriz) tarafına odaklanan fwler de var. (Angular, Vue, Svelte) gibi.
Peki Hangisi ?
Buna cevap verebilmek için önce library ve framework arasındaki farkı bilmemiz lazım. Library: İşe yarar, kullanıma hazır fonksiyonların yer aldığı bir kütüphanedir. Bunu gerçek hayattaki kütüphaneye benzetebiliriz. Tarihle ilgili metodlara/bilgilere ihtiyacımız varsa tarih rafındaki kitapları okuruz. Psikoloji alanında bilgiye ihtiyacımız varsa bu alandaki kitaplığa gideriz. Genel olarak library tanımını bu şekilde yapabiliriz. Libraryler çok karışık olmayan, basit işlerde kullanılır. Örnek verecek olursak jQuery ve React en yaygın kullanılan kütüphanelerdendir.
Framework ise; içinde birden fazla kütüphane olan ve bu kütüphaneleri birbirleriyle entegre/uyumlu çalıştırabilen, yapıları itibariyle complex yapılardır. Fwler daha karışık ve yoğun projelerde kullanılır. Vue, Angular, Svelte'yi bu kategoride örnek gösterebiliriz.
Bütün bu bilgileri aldıktan sonra sıra geldi en önemli kısma;
Projenin Gereksinimleri
Gerekli tanımlamaları yaptık, test uygulamamızı da yazarak bütün adımları tamamladık. Şimdi projemizin ihtiyaçlarına bakmamız lazım. İhtiyaçları netleştirmek adına kendimize şunları sorabiliriz;
- Projede API entegrasyonu (web servis) var mı ?
- Sayfa yapısı (routing) gerekiyor mu ?
- Sayfa içerisinde dinamik güncellemeler (live stream) olacak mı ?
- Proje gereksiniminde ekstra plugin kullanmak gerekiyor mu? Gerekiyorsa hangi yapı bunları daha kolay ve uyumlu sağlıyor ?
gibi gibi.
Misal; 5-10 sayfadan oluşan kurumsal web sitesi için (eğer cms altyapısı yoksa) öyle aman aman fw kullanmaya gerek olmayabilir. Fwler böyle bir iş için kaynak israfı olabilir ve bu bize performans + güvenlik olarak geri dönebilir. Fw'nin yapacağı işi herhangi bir kütüphane rahatlıkla yapabilir.
Ama daha karışık projelerimiz varsa, birden fazla sayfayı dinamik olarak yönetmek istiyorsak, yoğun web servis akışı ve sayfa içi dinamik güncellemeler çok fazla ve sıksa bir framework kullanmamız gerekebilir. İşte bu durumda yukarıda bahsettiğimiz parametreleri göz önüne alarak bir karar vermek gerekecek. Bu aşamada frameworkleri test ederek işe uygunluğuna karar verip kullanıma karar verebiliriz. Eğer hala kararsız kaldıysak, kıdemli birisine danışarak destek istebiliriz.
Bunları özet geç, hangisi ?
Bu sorunun NET BİR CEVABI yoktur, ihtiyaca binaen alet seçilmelidir. Çekicin yeterli olduğu noktada balyoz kullanırsak kaynak israfı yapmış oluruz. Balyoz gereken yerde çekiç kullanırsak ihtiyacı karşılayamayız.
Güncel teknolojileri (Angular, React, Vue) bi özetlesek peki ?
Tabi hemen özetleyelim.
React
2013 yılında Facebook tarafından icat edildi. İcat edilmesindeki motivasyon UI (tasarım) üzerindeki güncellemeleri dinamik olarak gerçekleştirmekti. Lightweight (hafif) bir kütüphane yazarak bu amaçlarını gerçekleştirdiler. React; JSX denen bir syntaxa(söz dizimine)
sahiptir. JSX ise kısaca HTML kodlarının JavaScript içine yazılabilmesine imkan sağlayan dildir. Öğrenmesi görece kolaydır,düz HTML yazmaya benzer.
Örnek bir React kodu;
JavaScript:class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById('hello-example') );
---------------------------------------------------------------------------------------
Angular
Google'nin desteği ile daha sonradan büyükçe bir topluluk desteğine kavuştu. Frontend ekosisteminin en eski frameworklerinden olan Angular, yukarıda bahsi geçen 3 teknoloji arasında öğrenmesi en zor olan teknolojidir. Standart Javascript bilgisinin yanında ek olarak TypeScript bilmek gerekir. Ayrıca modül yapısı React ve Vue'den farklıdır.
Örnek Angular Kodu;
JavaScript:import { Component, Input } from '@angular/core'; @Component({ selector: 'hello', template: `<h1>Hello {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class HelloComponent { @Input() name: string; }
---------------------------------------------------------------------------------------
Vue
Listeye React ve Angular'dan sonra katıldı. Vue, eski bir Google çalışanı olan Evan You tarafından geliştirildi. Syntaxi en kolay, en hızlı ve zevkli teknolojik alt yapıya sahiptir. Vue'nin UI kısmı neredeyse HTML yazmaktan farksızdır. Yaygın kullanıcı desteği ve topluluk sayesinde tabiri caizse 3 büyükler arasında yerini almıştır. En son çıkan 3. versiyonu ile kullanıcılarında yeni özellikler sunmakta.
Örnek Vue Codu;
JavaScript:<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
İster backend ister frontend olsun framework seçiminde ilk bakılması gereken şey ihtiyaçları karşılayıp - karşılayamadığı veya ne derece karşıladığı. Bunu netleştirdikten sonra karar verilmesi gereken bir kaç parametre var.
En önemlileri şunlardır;
1- Self Proven (FW'nin kendini production ortamında kanıtlamış olması)
2- Common Usage (Yaygın kullanım)
3- Ease of Learning (Öğrenme kolaylığı)
4- Issues & Fixes (Buglar ve bunların çözümü)
5- Community Support (Topluluk Desteği)
6- Performance (Performans)
7- Security (Güvenlik)
8- Package Management & Dependency Injection (Paket yönetimi ve bağımlılık)
9- Team Member Integration (Ekip halinde kullanılıyorsa sonradan gelenleri sisteme entegre kolaylığı Madde 2 ve 4)
10- Scalability & Modularity (İhtiyaçlara göre genişleyebilme ve modüler olma)
Bunlar karar aşamasındaki en önemli kriterler. Bir de bunlara bağlı olmayan başka kriterler var.
Mesela;
- Deneyimlere bağlı kişisel tercih
- Yeni bir FW öğrenmek için yeterli zaman olup olmaması
- Kendi fwni geliştirmek yada open source fwlere alternatif çıkarmak gibi.
Parametrelerimiz belli, sonraki adımımız ne ?
Sonraki adımımız seçtiğimiz frameworku test aşamasında kullanmak, basit bir Hello World veya Todo List app yaparak bize uygunluğunu test etmek. Böylece hem yukarıdaki maddeleri test etmiş oluyoruz hem de bireysel olarak bu frameworku kullanmaya ne kadar yatkın olduğumuzu görüyoruz.
Frontend fwleri yapıları itibariyle backend fwlerinden farklıdır. Sadece UI yani tasarım amaçlı kullanılan fwler olabildiği gibi (Bootstrap, Tailwind, Bulma) gibi, işin engineering yani mühendislik (yapısal tasarım da diyebiliriz) tarafına odaklanan fwler de var. (Angular, Vue, Svelte) gibi.
Peki Hangisi ?
Buna cevap verebilmek için önce library ve framework arasındaki farkı bilmemiz lazım. Library: İşe yarar, kullanıma hazır fonksiyonların yer aldığı bir kütüphanedir. Bunu gerçek hayattaki kütüphaneye benzetebiliriz. Tarihle ilgili metodlara/bilgilere ihtiyacımız varsa tarih rafındaki kitapları okuruz. Psikoloji alanında bilgiye ihtiyacımız varsa bu alandaki kitaplığa gideriz. Genel olarak library tanımını bu şekilde yapabiliriz. Libraryler çok karışık olmayan, basit işlerde kullanılır. Örnek verecek olursak jQuery ve React en yaygın kullanılan kütüphanelerdendir.
Framework ise; içinde birden fazla kütüphane olan ve bu kütüphaneleri birbirleriyle entegre/uyumlu çalıştırabilen, yapıları itibariyle complex yapılardır. Fwler daha karışık ve yoğun projelerde kullanılır. Vue, Angular, Svelte'yi bu kategoride örnek gösterebiliriz.
Bütün bu bilgileri aldıktan sonra sıra geldi en önemli kısma;
Projenin Gereksinimleri
Gerekli tanımlamaları yaptık, test uygulamamızı da yazarak bütün adımları tamamladık. Şimdi projemizin ihtiyaçlarına bakmamız lazım. İhtiyaçları netleştirmek adına kendimize şunları sorabiliriz;
- Projede API entegrasyonu (web servis) var mı ?
- Sayfa yapısı (routing) gerekiyor mu ?
- Sayfa içerisinde dinamik güncellemeler (live stream) olacak mı ?
- Proje gereksiniminde ekstra plugin kullanmak gerekiyor mu? Gerekiyorsa hangi yapı bunları daha kolay ve uyumlu sağlıyor ?
gibi gibi.
Misal; 5-10 sayfadan oluşan kurumsal web sitesi için (eğer cms altyapısı yoksa) öyle aman aman fw kullanmaya gerek olmayabilir. Fwler böyle bir iş için kaynak israfı olabilir ve bu bize performans + güvenlik olarak geri dönebilir. Fw'nin yapacağı işi herhangi bir kütüphane rahatlıkla yapabilir.
Ama daha karışık projelerimiz varsa, birden fazla sayfayı dinamik olarak yönetmek istiyorsak, yoğun web servis akışı ve sayfa içi dinamik güncellemeler çok fazla ve sıksa bir framework kullanmamız gerekebilir. İşte bu durumda yukarıda bahsettiğimiz parametreleri göz önüne alarak bir karar vermek gerekecek. Bu aşamada frameworkleri test ederek işe uygunluğuna karar verip kullanıma karar verebiliriz. Eğer hala kararsız kaldıysak, kıdemli birisine danışarak destek istebiliriz.
Bunları özet geç, hangisi ?
Bu sorunun NET BİR CEVABI yoktur, ihtiyaca binaen alet seçilmelidir. Çekicin yeterli olduğu noktada balyoz kullanırsak kaynak israfı yapmış oluruz. Balyoz gereken yerde çekiç kullanırsak ihtiyacı karşılayamayız.
Güncel teknolojileri (Angular, React, Vue) bi özetlesek peki ?
Tabi hemen özetleyelim.
React
2013 yılında Facebook tarafından icat edildi. İcat edilmesindeki motivasyon UI (tasarım) üzerindeki güncellemeleri dinamik olarak gerçekleştirmekti. Lightweight (hafif) bir kütüphane yazarak bu amaçlarını gerçekleştirdiler. React; JSX denen bir syntaxa(söz dizimine)
sahiptir. JSX ise kısaca HTML kodlarının JavaScript içine yazılabilmesine imkan sağlayan dildir. Öğrenmesi görece kolaydır,düz HTML yazmaya benzer.
Örnek bir React kodu;
JavaScript:class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById('hello-example') );
---------------------------------------------------------------------------------------
Angular
Google'nin desteği ile daha sonradan büyükçe bir topluluk desteğine kavuştu. Frontend ekosisteminin en eski frameworklerinden olan Angular, yukarıda bahsi geçen 3 teknoloji arasında öğrenmesi en zor olan teknolojidir. Standart Javascript bilgisinin yanında ek olarak TypeScript bilmek gerekir. Ayrıca modül yapısı React ve Vue'den farklıdır.
Örnek Angular Kodu;
JavaScript:import { Component, Input } from '@angular/core'; @Component({ selector: 'hello', template: `<h1>Hello {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class HelloComponent { @Input() name: string; }
---------------------------------------------------------------------------------------
Vue
Listeye React ve Angular'dan sonra katıldı. Vue, eski bir Google çalışanı olan Evan You tarafından geliştirildi. Syntaxi en kolay, en hızlı ve zevkli teknolojik alt yapıya sahiptir. Vue'nin UI kısmı neredeyse HTML yazmaktan farksızdır. Yaygın kullanıcı desteği ve topluluk sayesinde tabiri caizse 3 büyükler arasında yerini almıştır. En son çıkan 3. versiyonu ile kullanıcılarında yeni özellikler sunmakta.
Örnek Vue Codu;
JavaScript:<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
Çok teşekkür ederim aşırı yardımcı oldunuz
vue ile bootstrap birleşimi her işini kolaylaştırır en popüleri de zaten şuan da vue birde link bırakayım.
Ziyaretçiler için gizlenmiş link,görmek için Giriş yap veya üye ol.
Yeni şeyleri seviyor olsam da ben hala javascript tarafında kütüphane olarak jquery kullanıyorum bunun sebebi pazarım türkiye olması insanlar ucuz *** peşinde olduğu için yeni nesil şeylere daha çok ödeme yapmak istemiyor şirketlerde buna o kadar alışmış ki paylaşımlı hostinglerin çoğu geçtim vue'yu angular, react bile desteklemiyor yani pazarın yurt dışı ise direkt vue öneririm.
Ama pazarın türkiye ise jquery ile bootstrap kullan geç boş yere kendini yormuş oluyorsun onlar için dış görünümü önemli dışardan görünen şey istediği şey olsun alt planda istersen hiç bişi kullanma.