29 Ocak 2017

Kendo UI HTML Framework Nedir ? ve JavaScript Teknolojisi

Kendo UI HTML Framework Nedir ? ve JavaScript Teknolojisi

Kendo UI HTML Framework; HTML5 ve JavaScript teknolojilerini temel alan Microsoft .NET Framework, JavaServer Pages, PHP yapılarını server-side kısmında destekleyen bir UI Framework'tür. JavaScript kütüphanesi olan jQuery, AngularJS, ReactJS, KnockoutJS gibi alt yapıların kullanımını desteklemektedir.

En önemli özelliği birçok arayüz olarak kullanılan Grid, Autocomplete input, ListView, TreeList, DatePicker/DateTimePicker gibi (70+ UI Components) bileşenleri içinde barındıran bir Framework olup yazılımcının bir daha yazması yerine bunları kullanıp üzerinde Customize etmesini sağlamıştır. Mimari bir yapı oluşturulurken ön yüz tarafında Kendo UI en çok tercih edilen ürünlerden biridir.

Telerik firması tarafından ücretli olarak satılan Kendo UI'nin deneme versiyonunu bilgisayarınıza indirerek inceleyebilirsiniz. MVVM (Model–View–Viewmodel) yapısına en iyi örneklerden biri diyebiliriz. MVVM'den kısaca bahsedecek olursak;

MVVM (Model–View–Viewmodel)

Model: Model, uygulama içerisinde kullanacağımız olan datadır. Bu datalar WCF RIA Services ile döndürülen Entity'ler olabileceği gibi doğrudan tanımlanmış POCO nesneleri de olabilir.

View: View, datanın sunulduğu katmandır. Tüm görsellikler View'da yer alır. Kısaca verinin sunulduğu yerdir(Ekran).

ViewModel: ViewModel ise Model ile View'ı bağlayan yapıdır.  View ile Model arasında bir yapıştırıcı görevi görür. View doğrudan ViewModel yardımıyla Model'e erişir ve bazı işlemleri gerçekleştirir. Teknolojik olarak WPF veya Silverlight teknolojilerinden konuşursak ViewModel aslında View'ın DataContext'idir.

Kendo UI'yi www.telerik.com/kendo-ui sitesinden deneme versiyonunu bilgisayarınıza indirebilirsiniz. Kaliteli bir UI HTML Framework olduğu için birçok UX(Kullanıcı Deneyimi) standartlarından geçmektedir. Bu yüzden Kendo kendi bileşenleri üzerinde fazla Customize etmenizi istemez ve kendisinin sunduğu gibi kullanılmasını söyler. Siz Kendo bileşenlerinde bir hataya rastlarsanız veya Customize sırasında destek ihtiyacı isterseniz Kendo'ya destek Ticket açabilirsiniz.

Kendo UI Components Bileşenleri

Grid: Datayı arayüzde göstermeyi sağlayan pencereler diyebiliriz. Grid yapısı içerisinde birçok bileşen ve özellik kullanılabilir. Pagination(Sayfalama), Scroll, Filter, Columns(Kolon Yapısı), Exporting(Dosya Data Dönüştürme)

Widget: UserControl'lerin hepsine diyebiliriz. UserControl'leri ön yüzde kullandığınız Component çeşitleri diyebiliriz. Kendo'da her bir bileşen aslında bir Widget'dır ama daha çok terimsel anlamı UserControl olarak kullanılır.

Grid/Inline Editing: demos.telerik.com/kendo-ui/grid/editing-inline
Grid/Batch Editing: demos.telerik.com/kendo-ui/grid/editing
Grid/Popup Editing: demos.telerik.com/kendo-ui/grid/editing-popup
Grid/Filter Row(Satır Filtreleme): demos.telerik.com/kendo-ui/grid/filter-row
Grid/Sorting(Sıralama ORDER BY): demos.telerik.com/kendo-ui/grid/sorting

TimePicker(Saat): demos.telerik.com/kendo-ui/timepicker/index
DateTimePicker(Tarih ve Saat): demos.telerik.com/kendo-ui/datetimepicker/index
Validator(Karakter Doğrulama): demos.telerik.com/kendo-ui/validator/index

Tooltip(Üzerine Gelince Data içeriğini gösteren Title Tagı yerine kullanılır) Tooltip aktif olan bileşenlerde Title Tag Disable olmalıdır: demos.telerik.com/kendo-ui/tooltip/index

Calendar(Takvim) Bileşeni: demos.telerik.com/kendo-ui/calendar/index
MultiSelect: demos.telerik.com/kendo-ui/multiselect/index
TreeList: demos.telerik.com/kendo-ui/treelist/index
ScrollView: demos.telerik.com/kendo-ui/scrollview/index
ListView: demos.telerik.com/kendo-ui/listview/index

Diğer Mimari(Architect) Kavramlar

Birazda Isomorphic Software kavramı ve JavaScript teknolojisinden bahsedecek olursak. Hem JavaScript dili başlarda Client tarafta çalışan bir dil olarak piyasaya çıksa da bugün kendini çokça geliştirip Hem Client hemde Backend tarafında çalışabilecek bir programlama dili olmuştur. Bu ilerleme tek bir programlama dili ile bir mimari yapı kurulabilir mi sorusunu akıllara getirmiştir. JavaScript dili ve ReactJS buna en yakın dil olarak şuan gösteriliyor.

Kendo UI HTML Framework Nedir ? ve JavaScript Teknolojisi

KnockoutJS (Javascript Framework): Javascript kütüphanesi olup, MVVM Frameworkleri arasında popüler olan KnockoutJS, MVVM Presentation Model mimarisi kullanılmaktadır. WPF ve Silverlight teknolojileri için de ayni mimari kullanılmaktadır. Bu teknoloji View’ın, modeli bilmesinin gerekliliğini  ortadan kaldırdığı gibi, arayüzü yapan kişinin de arka tarafta nasıl bir iş geliştirildiğini bilmeden bağımsız olarak çalışmasını sağlar. Bunların yanında arka taraftaki geliştirici için de genişletilebilir,bakım yapılabilir ve test edilebilir bir yapıya izin vermektedir. HTML nesnelerinin Data Binding işlemini kolayca yapabilmektedir. View kısımda ASP.NET MVC veya JAVA ile kullanılmaktadır.

Front End Developer: Kullanıcının etkileşime girdiği ön yüzün (Client-Side), HTML, CSS, LESS ve JS teknolojilerini kullanarak geliştiren kişiye Front-End Developer (ön yüz geliştiricisi) denir.

Back End Developer: Kullanıcının görmediği arka kısmı (Server-Side), geliştiren kişidir. Back-end teknolojilerinde Python, PHP, Ruby, Java, C#, ASP.NET, MySQL, MS SQL, MongoDB, NodeJS diye özetleyebiliriz. Hem OOP hemde Database dili (PL/SQL, DB2) bilmesi bir mimardan istenmektedir.

Full Stack Developer: Web uygulamaları veya yazılım geliştirirken bu yazılımın hem Front-End hem de Back-End kısmını geliştirebilecek donanıma sahip olan geliştirici profilidir. Arayüz kısmında kullanıcılar yazılımların tasarım ve grafik yönlerini görürler.

JavaScript
JavaScript Nedir? Nerelerde Kullanılır
Microsoft TypeScript
tr.wikipedia.org/wiki/ReactJS (ReactJS)
github.com/reactjs (React Community)
en.wikipedia.org/wiki/React_(JavaScript_library) (React JavaScript Library)
www.w3schools.com/angular (AngularJS Tutorial)
tr.wikipedia.org/wiki/AngularJS (AngularJS)
en.wikipedia.org/wiki/AngularJS (AngularJS)
www.angularjs.org (AngularJS)
www.jquery.com (jQuery)
tr.wikipedia.org/wiki/JQuery (jQuery)
www.w3schools.com/jquery (jQuery Tutorial)
en.wikipedia.org/wiki/JQuery (jQuery)
tr.wikipedia.org/wiki/JQuery_UI (jQuery UI)
en.wikipedia.org/wiki/Ajax_(programming) (Ajax Programming)
tr.wikipedia.org/wiki/JavaScript (JavaScript)
en.wikipedia.org/wiki/JavaScript (JavaScript)
Systems Theory/Isomorphic Systems
en.wikipedia.org/wiki/Knockout_(web_framework) (KnockoutJS)
www.knockoutjs.com (KnockoutJS)
tr.wikipedia.org/wiki/Windows_Presentation_Foundation Windows Presentation Foundation (WPF)
en.wikipedia.org/wiki/Windows_Presentation_Foundation Windows Presentation Foundation (WPF)

Telerik & Kendo UI
en.wikipedia.org/wiki/Telerik (Telerik Sofya, Bulgaristan)
www.telerik.com (Telerik Resmi Sitesi)
www.telerik.com/download (Telerik Free Trials)
demos.telerik.com/kendo-ui (Kendo UI Components Demo)
github.com/telerik (Telerik GitHub)
Model–View–View-Model (MVVM)
Model-View-Controller (MVC)
tr.wikipedia.org/wiki/Widget (Widget)
www.telerik.com/purchase/kendo-ui (Buy Kendo UI DevCraft Ultimate)
tr.wikipedia.org/wiki/LESS (LESS CSS)
tr.wikipedia.org/wiki/Cascading_Style_Sheets (Cascading Style Sheets CSS)