Home » Angular: Bugünün İş Piyasasındaki En Popüler Ön Uç Araçlarından birinin Yolculuğu

Angular: Bugünün İş Piyasasındaki En Popüler Ön Uç Araçlarından birinin Yolculuğu

Hepimizin bildiği gibi, Angular, ön uç geliştirme dünyasında en çok tartışılan kelimedir. Bu yıllarda çok popülerlik kazandı. Angular, birçok ön uç geliştiricinin tercihi haline geldi ve ben de onlardan biriyim.

Bu yazıda, açının ne zaman ortaya çıktığını ve ne kadar hızlı bir pazara dönüştüğünü vurgulayacağım. Her altı ayda bir, Angular ekibi angular’ın yeni versiyonuyla geliyor ve yeni özelliklerle onu daha güçlü hale getiriyor. Açısal ekibi harika çabaları için takdir etmeliyim.

Pekala, şimdi nasıl geliştiğini, farklı sürümlerde hangi yeni özelliklerin eklendiğini heyecanlandırabilirsiniz. Şimdi bekleyiş sona erdi. Başlayalım!

Devam etmeden önce, okuyucularıma ‘Angular 8’in yetenekli açısal ekibimizin yayınladığı en son sürüm olduğunu bildirmek isterim.

Kahramanın Doğuşu (AngularJS) – 2010

2010 yılında bugünün piyasa kahramanı doğdu. ‘AngularJS’ olarak biliniyordu.

AngularJS, Google tarafından geliştirilen bir Javascript çerçevesidir. Tek sayfalık uygulama (SPA) yapmak için kullanılır. Bekle! Umarım SPA nedir biliyorsunuzdur. Değilse, Google’a sorun ve sonra geri gelin, çünkü bu açısal kullanılan güzel yaklaşımlardan biridir, ancak işte SPA’nın kısa bir tanıtımı (bilenler, atlayabilirsiniz):

SPA veya Tek sayfalı uygulama, her şeyin tek seferde indirildiği bir uygulamadır. Gerekli tüm kod tek seferde indirilir. Birden çok sayfalı uygulamadan farklı olarak, her vuruş için sunucudan bir web sayfası istemeniz gerekmez ve sayfayı yükler. SPA’da, index.html dosyası tüm içerikle bir kez indirilir ve ardından her url değişikliği için, mevcut web sayfası dinamik olarak zorlu içeriği yükler. Bu yaklaşım, farklı sayfalar arasında geçiş yaparken daha iyi kullanıcı deneyimi sağlar ve size uygulama hakkında fikir verir.

SPA ile ilgili bu kadar. Umarım size kısa bir resmini verir. Orijinal konuya geçelim.

AngularJS, geliştiricilerin web uygulamasını daha hızlı geliştirmesine olanak tanır. İstemci tarafı işleme kullanır – içeriğin oluşturulmasına istemci (tarayıcı) tarafından bakıldığı bir teknik. Peki, bu tekniğin artıları ve eksileri hakkında ayrıntıya girmeyeceğim, ancak bu teknikteki asıl endişe SEO’dur. Açısal olarak kullanılan bu render, SEO’da zayıftır. Bekle! Açısallığın kötü olduğunu düşünmeyin. Çok popüler bir Bollywood diyaloğu var – “Resim abhi baki hai sadece dost (Film hala kaldı dostum)”. Bu diyaloğun mevcut duruma uygun olduğunu düşünüyorum. Bunu neden söylediğimi tartışacağım.

Şimdi AngularJS’nin özelliklerine odaklanmalıyız. İşte bazıları:

1) Veri bağlama  – model ve görünüm arasında otomatik senkronizasyon.

2) Bağımlılık Enjeksiyon Sistemi  - sistemin nesneyi oluşturduğunda bağımlı nesneleri sağladığı bir tasarım modeli.

3) kapsam  - denetleyici ve görünümle ilgilenir.

4) Hizmetler  - uygulamanın farklı bölümleri arasında bilgi paylaşmak için.

5) Yönergeler  - HTML’ye süper güç verir. Örneğin, ng-model, ng-app.

6) Denetleyiciler  - mantığın bulunduğu uygulamanın kalbi.

7) Şablon  - kontrolörümüzü ve modelimizi kullanarak bilgi veren görünüm.

Bu liste uzun. AngularJS hakkında ayrıntıya girmeyeceğim, ancak angularJS’de denetleyiciler uygulamanın kalbidir. Eh, angularJS, güçlü bir web uygulaması geliştirmek için birçok özellikle birlikte geldi, ancak büyük paket boyutu, performans sorunları, SEO sorunu, kod sürdürülebilirliği sorunları gibi bir noktada başarısız oldu, ancak bu tamamen başarısız olduğu anlamına gelmez. Veri bağlama, Bağımlılık Enjeksiyonu kavramları açısal başarıdır. Dolayısıyla yarı başarısızlık yarı başarı diyebiliriz.

AngularJS’deki kusur, açısal ekibin tüm çerçeveyi sıfırdan yeniden yazmasını sağladı. Herhangi bir çerçevenin / kitaplığın yeni sürümünde bu kadar büyük bir değişikliğe pazarda hiç rastlanmadı. Angular’ın yeni versiyonu AngularJS’den tamamen farklıdır. Nasıl farklı? Bir sonraki alt konuya girerek anlayalım.

Angular 2–2016

AngularJS’nin sonraki versiyonu 2016 yılında piyasaya çıktı, O zaman artık AngularJS olarak bilinmedi. ‘Açısal’ adı var. Açısal 1.x sürümü AngularJS olarak bilinir. 2.x’ten sonraki sonraki sürüm Angular olarak bilinir. Web geliştirme yolculuğumda bu iki kelimeyle karşılaştığımda. Kelimenin tam anlamıyla bunların iki farklı çerçeve olduğunu düşündüm ve bir araştırmadan sonra angular’ın angularJS’nin güncellenmiş versiyonu olduğunu öğrendim. Umarım okuyucularım bunu yanlış anlamazdı.

Angular 2, ciddi değişikliklerle piyasaya çıktı. En büyük değişiklik Typescript’in tanıtılmasıydı. TypeScript, Oops kavramlarını takip eden, güçlü bir şekilde yazılmış gibi ek özelliklere sahip javascript’in üst kümesidir. Nesne yönelimli dünyadan gelen programcılar, javascript’ten farklı olarak onu daha tanıdık buluyor.

Bileşenler, açısal 2+ dünyanın kalbidir. Angular, rotaları kolayca tanımlamak için yönlendirme paketi, sunucudan veri almak için http paketi, animasyonlar için animasyon paketi ve benzeri gibi temel ve önemli işlevlere ulaşmak için çeşitli paketler sundu.

Angular 2, AngularJS gibi yönerge konseptini de sağlar. Yönetmelikler HTML’mize * ngFor gibi süper güçler verir, * ngIf (yapısal yönerge) html’imizi dinamik hale getirirken ngModel gibi öznitelik yönergeleri (iki yönlü veri bağlama için), ngStyle, DOM’umuzun görünümü ve davranışıyla ilgilenir.

Açısal olarak değişmeyen bir diğer özelliği de DI sistemini kullanmasıdır. AngularJS gibi, DI sistemi de bileşene bağımlı nesneleri (bağımlılıkları) sağlar.

Bekle! Size açının hangi açısal olanı sağlayan harika yardım elinden bahsetmeyi unuttum. Sadece ‘ng gc bileşen-adı’ (‘g’ üretilir ve ‘c’ bileşendir) kullanarak bileşen oluşturmak için olduğu gibi uygulamamızı daha hızlı geliştirmemize yardımcı olan harika bir yardım eli. Bu, açısal olarak eklenen başka bir harika özelliktir.

Bu son değil. Angularjs’in en büyük dezavantajının SEO konusunda zayıf olması ve söylediğim o meşhur diyaloğu hatırlayın demiştim. Bunu neden kullandığımı birkaç dakika içinde anlayacaksınız.

AngularJS’nin SEO’da zayıf olması en büyük eksileridir. Sayfa kaynağını görüntülediğinizde, tarayıcıların web sitesini işe yaramaz, yani herhangi bir bilgi olmadan düşünmesine neden olan hiçbir şeyin (Html ​​yok) olmadığını görebilirsiniz. Web sitenizin Google tarayıcılarının onları indekslemesini ve google aramada zirveye ulaşmasını istemesi ancak başaramaması çok acı verici. Angular ekibi bununla ilgilendi ve açısal web sitenizin SEO’su ile ilgilenen açısal evrenselini tanıttı. SEO problemini çözen sunucu tarafı oluşturmayı kullanır.

Bunlar, angular 2’nin bir pazarda geldiği özelliklerdir.

Angular 4 – Mart, 2017

Alt konuyu okuduktan sonra, Angular 3’ün neden olmadığını merak edebilirsiniz. Bu herkesin aklına gelebilecek yaygın bir sorudur. Merak etmeyin! Size bildireceğim. Açısal 3 olmamasının nedeni yönlendirici paketiydi. Açısal yönlendirici paketi zaten v3 olarak dağıtılmıştı. Karışıklığı önlemek için, açısal ekip açısal 4 versiyonunu yayınladı. Sanırım artık okuyucularım açısal 4’ün özelliklerini anlayabilir.

Angular 4, hata düzeltmeleri ve diğer yeni özellikler ve iyileştirmelerle geldi. Yapılan en büyük gelişme, paket boyutunda oldu. Paket boyutunu% 60 azalttılar ve bu da uygulamayı daha hafif hale getirdi ve dolayısıyla uygulama yükleme süresi azaldı.

Yapılan diğer şey animasyon paketindeydi. Animasyon özelliğini ayrı bir pakette – @ angular / animations olarak çıkardılar.

Diğer bir gelişme ise yapısal yönergede oldu. * ngIf, bu sürümde başka bir bölümle birlikte geldi.

Bu, açısal 4’ün özelliklerinin kısa tanıtımıdır.

Angular 5 – Kasım 2017

Altı ay sonra, açısal ekip başka bir yeni sürümle, yani açısal 5 ile geldi. Bu açısal 5 sürümü yine birçok yeni özellik, iyileştirme ve hata düzeltmesiyle geldi.

Her web sitesi için ana endişe, daha hızlı yükleme süresidir. Angular, bu sürümde de buna özen gösterdi. Uygulama performansını daha fazla artırmak için, build optimizer’ı tanıttılar – Küçük paket boyutu yapmak için tanıtılan bir araçtır. Ölü kodu uygulamadan kaldırmak için ağaç sallama tekniğini kullanır.

Uygulamanın daha hızlı yeniden oluşturulmasını sağlayan derleyici geliştirmeleri de yapıldı.

Tanıtılan bir başka özellik de durum Transfer anahtarıydı (platform / tarayıcı paketinin bir parçası olan TransferStateKey). İyi! Ne olduğunu düşünebilir misin? Ne zaman kullanılmalı? SSR kullanıyorsanız, uygulamanızda bu özelliğin güzelliğinden yararlanabilirsiniz. Evet, SSR’yi uyguladıysanız, durum aktarım anahtarı özelliğini kullanmanız gerekir. Bunu söylememin nedeni, SSR kullandığınızda ve uygulamanız herhangi bir HTTP isteğinde bulunduğunda (ki bu oldukça yaygındır), bu istek iki kez, yani biri sunucuda diğeri tarayıcıda olmak üzere çağrılacak. Bu titreme sorununa neden oluyor (HTTP isteği iki kez çağrıldığı için uygulamamda bu titreyen sorunu yaşadım). Durum transfer anahtarı özelliği sayesinde. Bu özellik, tarayıcının sunucuda isabet alan HTTP isteğinin yanıtını kullanmasını sağlar. Sunucunun HTTP isteğinden aldığı yanıtı kullanır. Adından da anlaşılacağı gibi, sunucu yanıt durumunu html ile tarayıcıya aktarır. Bu nedenle, HTTP isteğinin iki kez vurulması önlenebilir.

Yapılan bir diğer iyileştirme de http istemci paketindeydi. Bu sürümde, HTTPClientModule, bu modülü kullanma gibi iyileştirmelerle geldi, geliştiricilerin bir harita kullanarak yanıtı ayrıştırması gerekmiyor. Ayrıştırma adımına artık gerek yoktur. JSON türü olmayan bir yanıt olduğunu varsayalım, bu yanıtı HTTP isteğinizde responseType kullanarak belirtebilirsiniz.

Bu tamamen açısal 5 özelliğiyle ilgili. Şimdi açısal 6 versiyonuna geçme zamanı geldi. Altı ay sonra, köşeli 6 daha güçlü olarak piyasaya çıktı.

Angular 6 – Mayıs 2018

Mayıs 2018’de – altı ay sonra, angular team açısal – açısal 6’nın başka bir versiyonunu yayınladı. Bu versiyon ayrıca birçok yeni özellik ile geldi. Bazılarını listeleyeceğim.

Bu versiyonda, açısal CLI güncellendi. NG güncellemesi gibi yeni komutlar tanıtıldı. Açısal proje bağımlılıklarınızı en son güncellemek için kullanabilirsiniz. Örneğin:

ng güncelleme @ açısal / çekirdek
Yapılan diğer iyileştirme, RxJS6 olarak adlandırılan RxJS kitaplığındaydı. İki önemli değişiklik şunlardı:

RxJS6, yeni dahili paket yapısını tanıttı.
Operatörlerin kullanımı.
Yeni dahili paket yapısı, paketlerin içe aktarılma şeklindeki değişiklikleri içerir. Bunda ilgili içe aktarma yerine tekli içe aktarma kullanabiliriz. Örneğin :

{Observable} öğesini ‘rxjs / Observable’dan içe aktar;
{Subject} ‘ı’ rxjs / Subject’den içe aktarın;
import ‘rxjs / add / operator / map’;
Şimdi, rxjs6 ile:

{Observable, Subject} ‘rxjs’den içe aktarın;
{map} dosyasını ‘rxjs / operators’dan içe aktarın;
Operatörlerin kullanımı da açısal 6’da değiştirilmiştir. Örneğin:

Eski versiyon:

import ‘rxjs / add / operator / map’;
this.http.get (url) .map ((response) => response.json)
Yeni sürüm:

{map} dosyasını ‘rxjs / operators’dan içe aktarın;
this.http.get (url) .pipe (harita ((veri) => veri * 2)
Umarım RxJS kitaplığında yapılan değişiklikleri almışsınızdır.

Diğer bir değişiklik – angular-cli.json’un yerini angular.json almıştır. Bu dosya, stiller, betikler, testler, inşa süreci vb. Gibi projenin konfigürasyonunu tanımlar. Angular.json’da, birden çok proje yapılandırmasının yapılabilmesi gibi daha fazla yapılandırma seçeneği eklenmiştir.

Diğer iyileştirmeler – artık

Have your say!

0 0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Lost Password

Please enter your username or email address. You will receive a link to create a new password via email.

Kıbrıs Web Yazılım