Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, yaklaşık on yıldır dijital sektörde çalışan bir konuşmacının ve arkadaşı Burak'ın sunduğu 20 dakikalık bir eğitim sunumudur. Konuşmacı, saat 12'de C salonunda bir sohbet etkinliği düzenleyeceğini de belirtmektedir.
- Sunum, web uygulamaları ve tek sayfa uygulamaları (SPA) arasındaki farkları açıklayarak başlıyor, ardından AJAX, JSON ve DOM gibi temel kavramları detaylandırıyor. Daha sonra MVC framework'leri, view-model-view modeli ilişkisi ve iki yönlü veri bağlama kavramları anlatılıyor. Son bölümde ise Angular, React, jQuery gibi popüler web teknolojileri ve bunların kullanım alanları ele alınıyor.
- Sunumda Gmail, Trello, Basecamp gibi günlük hayatta kullandığımız web uygulamaları örneklerle anlatılmakta ve modern web uygulamalarının ön tarafa taşınan uygulama mantığı ile front-end-backend arasındaki ilişki açıklanmaktadır. Konuşmacı, izleyicilere JavaScript, JSON ve jQuery gibi temel teknolojileri öğrenmelerini tavsiye etmektedir.
- 00:16Web Uygulamaları Hakkında Giriş
- Konuşmacı yaklaşık on senedir dijital sektörde çalışmakta ve web uygulamaları hakkında 20 dakikalık bir sunum yapacak.
- Web uygulamaları, Angular, React gibi JavaScript frameworkleri hakkında bilgi verilecek.
- Web uygulamalarının mantığı, tek sayfa içinde çalışan uygulamalar (SPA), çift yönlü veri ve JavaScript'in geliştirmedeki payı konuları ele alınacak.
- 02:27Web Siteleri ve Web Uygulamaları Arasındaki Fark
- Web siteleri genellikle bilgi veren sayfalardan oluşurken, web uygulamaları uzak sunucularda çalışan programlardır.
- Web uygulamaları her yerden erişilebilir olup, tarayıcı üzerinden çalışır ve bulut teknolojisi sayesinde bilgisayar kaynakları gerektirmez.
- Eskiden bilgisayara kurulan programlar yerine, web uygulamaları sayesinde ofis bağlılığı olmadan çalışılabilir.
- 04:14Web Uygulamaları Örnekleri
- Gmail, Basecamp, Trello, Paraşüt gibi muhasebe programları ve gayrimenkul danışmanlık sistemleri web uygulamalarıdır.
- Figma ve Sketch gibi tasarım uygulamaları da web tabanlı olarak çalışır ve birden fazla kişi aynı anda aynı tasarım üzerinde çalışabilir.
- Web uygulamaları masaüstü programlarına yakın bir deneyim sağlamayı amaçlar.
- 06:36Tek Sayfa Uygulamaları
- Tek sayfa uygulamaları (SPA) sayfayı açtığınızda bir kere yüklenir ve tüm işlemler mevcut sayfanın arayüzünden yapılır.
- SPA'lar arka tarafta istemci tarafında işlenir ve sonuçlar aynı sayfanın üzerinde değişiklikler yapılarak gösterilir.
- Bazı uygulamalar tüm parçaları önceden yüklerken, bazıları gelen talebe göre parçaları sonradan yükler.
- 08:15Single Page Applications ve Geleneksel Uygulamalar Arasındaki Fark
- Geleneksel uygulamalarda form butonuna tıklandığında form web sunucusuna gönderilir ve yeni bir web sayfası yüklenir.
- Single Page Applications'da tüm işlemler JavaScript katmanında tanımlanır ve arayüzde JavaScript kodları çalıştırılır.
- Geleneksel uygulamalarda sayfa yenilemesi yapılırken, Single Page Applications'da sadece arayüz tarafında işlemler yapılır.
- 10:05AJAX ve JSON Kullanımı
- AJAX, JavaScript tarafında HTTP talepleri yapmamızı sağlar ve başarılı veya başarısız olduğunda yapılacak işlemleri programlamamızı sağlar.
- JSON (JavaScript Object Notation), modern web uygulamalarının temelidir ve her yerde karşımıza çıkar.
- Binary JSON (BSON), JSON tipinde kullanır ancak binary şeklinde saklar ve özellikle NoSQL veritabanlarında kullanılır.
- 12:07HTML DOM ve Veri İşlemleri
- JavaScript'te HTML DOM, HTML elementlerinin içindeki her şeyi yakalayabilmemizi sağlar.
- HTML elementlerine "data" özelliği ile kendi istediğimiz özellikler tanımlayabiliriz ve bu özelliklere bilgi yazabiliriz.
- DOM'dan elementleri okuyup işlem yaptıktan sonra gelen sonuca göre DOM'u güncelleyebiliriz.
- 14:15MVC ve Model Katmanı
- MVC framework'de kullanıcıya bir şey gönderilir, tıklandığında controller'a gelir ve güncellenmiş haliyle geri gönderilir.
- JavaScript tarafında sürekli DOM'dan elementi yakalama ve güncelleme işlemi yapmak zorluğundan dolayı araya bir katman eklendi.
- Model katmanı, business verilerini tutan ve güncellenen bir katman olarak geliştirildi.
- 15:26View Modeli Kavramı
- JavaScript tarafında tanımlanan view, lot ile konuşan JSON olarak verileri tutar ve genel kontrolleri yaparak ihtiyaç duyulduğunda DOM'a işler.
- View ve HTML arasındaki işlemleri yapabilmek için gereksiz JavaScript kodu yazılmasını önlemek için araya view modeli katmanı eklendi.
- View modeli, view ile model arasında iletişim kurarak, modeldeki değişiklikleri takip edip view'i günceller.
- 16:30Two Way Data Binding
- Two way data binding, view template dosyasından aldığı taslağı gösterir ancak kendi içinde hiçbir zaman HTML barındırmaz, sürekli modelden kendini besler.
- View tarafında bir değişiklik yapıldığında doğrudan model işlenir, model tarafında bir değişiklik olduğunda doğrudan view'a etki eder.
- Eskiden manuel olarak yapılan işlemler (örneğin tuş basma olayları) artık otomatik olarak gerçekleşir.
- 18:31Web Uygulamalarının Çalışma Mantığı
- Web uygulamalarında kullanıcıya gösterilen bilgiler, view ile konuşturulur, veritabanı ile iletişim kurulur ve edinilen bilgi tema ile birleştirilerek render edilir.
- Her bir katman farklı olarak planlanıp yönetilebilir hale gelir.
- View modeli, aradaki işlemleri yürütecek, talepleri karşılayıp değişiklikleri uygulayacak bir katmandır.
- 20:11Front-End ve Back-End İlişkisi
- Eskiden nereye tıklandığı zaman ne işlem yapılacağını backend tarafında yaparken, şimdi tüm işlemleri ve karar mekanizmalarının temelini ön tarafa taşıyoruz.
- Front-end ve backend muhabbeti birbirine giriyor, uygulamaların bir bütün olarak çalışması için kimin ne iş yaptığını ve birbirlerine müdahale edebilme ihtiyacının farkına varıyoruz.
- Modern web uygulamaları ve arayüz geliştirme, bu ilişkiyi tekrar vurgulamıştır.
- 21:54Web Geliştirme İçin Öneriler
- Web geliştirme için birçok farklı yaklaşım bulunan çatılar (Angular, React JS, Amber, Backbone, Cycle JS, Aurelio, Mercury) bulunmaktadır.
- Öncelikle JavaScript'i öğrenmek, JSON'ı anlamak ve jQuery'nin kaynak kodunu incelemek önemlidir.
- npm (Node Package Manager) bağımlılık yönetimi için kullanılır ve web uygulamalarında her iki tarafta da geçerlidir.