Modern ön uç geliştirme yol haritası: sıfırdan bir ön uç mühendisi olabilir misiniz? sonuç
Editörün notu: Birçok kişi programlamayı öğrenmek ister. Ancak belirli adımlardan ve yönlendirmeden muzdarip. Örneğin, bir ön uç geliştirme işi bulmak istiyorum, ancak önce ne öğreneceğimi, sonra ne öğreneceğimi veya hangi aracı seçeceğimi bilmiyorum. İnsanlar sıklıkla benzer sorular sorduğundan, tam yığın geliştirici Kamran Ahmed, basitçe github'da modern ön uç geliştirme için bir yol haritası oluşturdu ve ön uç geliştirmenin tüm öğrenme sürecini ayrıntılı olarak açıklamak için bir makale kullandı. İlgilenen yeni başlayanlar bunu kaçırmamalı.
Konuya girmeden önce, geçmişimi ve bu yol haritasını açıklamama izin verin. Son 5 yıldır tam yığın geliştirme yapıyorum ve şu anda tajawal'ın baş mühendisiyim (birçok unvanım olmalı). Trendleri takip etmek ve diğer geliştiricileri doğru şekilde eğitmek sadece hobim değil aynı zamanda iş sorumluluğumdur. Pek çok aceminin (bazı tecrübeli olanlar da dahil) duruma nasıl ayak uyduracağı konusunda kafasının karıştığını gördüm. 2017'de birçok arkadaşım bana yol göstermesi için e-posta attı ve bu işi yapmak için ne öğrenmeleri gerektiğini bilmek istediler. Bu yüzden bu sorundan kaçınmak ve başkalarına yardım etmek için, bu çizelgeleri bir kez ve sonsuza kadar hazırlamaya karar verdim, böylece biri bana sorduğunda, onlara bu çizelgelerin bağlantılarını göndereceğim. Yani bu grafikler böyle doğuyor.
İlk başta sadece bazı araçlar için öneriler istediler, ancak dün onlara daha yapılandırılmış bir şey vermeye, neyi seçip neyi takip etmeniz gerektiğini daha iyi anlayabilmeniz için ayrıntılar ekleyerek ve onu adımlar şeklinde tasarlamaya karar verdim. sipariş.
Aynı zamanda arka uç ve DevOps parçaları için hala bir yol haritası yapıyorum, ancak ön uç zaten hazır, aşağıdakilere bakabilirsiniz.
Bu yol haritasının farklı bölümlerine ayrıntılı olarak girmeden önce, biraz zaman ayırıp sorumluluk reddi beyanım hakkında konuşmama izin verin:
Bu yol haritasının amacı, size durum hakkında bir genel bakış sağlamak ve daha sonra ne öğreneceğiniz konusunda kafanız karıştığında size rehberlik etmektir. Ancak modaya uygun bir zihniyetle bir şeyler öğrenmeye teşvik edilmiyorsunuz. Bazı durumlarda bir aletin neden daha uygun olduğuna dair temel bir anlayışa sahip olmalısınız ve modaya uygun bir şeyin asla uğraştığınız iş için en uygun olma anlamına gelmediğini unutmayın.
Tamam, başlayalım - işte yol haritası, ancak bu makalenin amacı, yol haritasının her adımını sırayla açıklamak.
Yapmak istediğiniz ilk şey, biraz temel HTML, CSS bilgisi öğrenmek ve JavaScript'in sözdizimine aşina olmak dahil olmak üzere bazı temel bilgileri öğrenmektir.
HTML ile ilgili temel bilgileri öğrenin
HTML, web sayfanıza yapı kazandırır. Sizi ayakta tutan bir insan iskeleti gibidir. Öncelikle dilbilgisini ve sağlaması gereken her şeyi öğrenmeniz gerekir. Çalışmanız aşağıdaki şeylere odaklanmalıdır:
HTML ile ilgili temel bilgileri öğrenin ve semantik HTML yazmayı anlayın
Web sayfalarının nasıl bölümlere (paragraflara) bölüneceğini ve DOM'un (Belge Nesne Modeli) nasıl düzgün şekilde organize edileceğini öğrenin
Görev-HTML'nin temellerini öğrendikten sonra, en az 5 HTML sayfası üretilmelidir. Bir tane bulmanı öneririm
Github profil sayfasına veya Twitter oturum açma sayfasına bakma gibi web siteleri. Ardından içeriği uygun şekilde düzenlemeye odaklanın. Ortaya çıkan şey çirkin olabilir, ancak şimdilik endişelenmeyin, odağınızı doğru yapıya koyun.
CSS öğrenin
Artık web sayfası için iskeleti nasıl hazırlayacağımızı öğrendiğimize göre, sonraki adım daha iyi görünmesi için bazı dış görünümler eklemektir. CSS-Basamaklı stil sayfaları, HTML sayfalarınızı güzelleştirmek için kullanılır.
- Yapılacak ilk şey, sözdizimini öğrenmek ve yaygın CSS özelliklerine aşina olmaktır.
- Kutu modelini anlayın ve Grid ve Flexbox kullanarak mizanpajların nasıl hazırlanacağını öğrenin
- Yukarıdakileri öğrenmeyi bitirdikten sonra, web sitesini medya sorguları aracılığıyla duyarlı hale getirmek için aşağıdakileri öğrenin.
Görev - Temel konularda ustalaştıktan sonraki adım, önceki adımda oluşturulan HTML sayfasını tasarlamaktır. Örneğin, bir Github arşivi için bir HTML sayfası yazarsanız, gerçek Github profil sayfası gibi görünmesini sağlamak için CSS uygulama zamanı gelmiştir. İlk beş sayfa denemek için kullanılacaktır.
JavaScript'in temellerini öğrenin
JavaScript, HTML sayfalarınızı daha etkileşimli hale getirebilir. Örneğin, web sitesinde gördüğünüz tüm slaytlar, açılır pencereler ve yayın bildirimlerinin yanı sıra sayfayı yeniden yüklemeden sayfanın belirli bölümlerini yeniden yüklemek JavaScript ile yapılır. Bu adımda, bir sonraki yolculuğa hazırlanmak için JavaScript'in temellerini öğreneceksiniz
- Dilin grameri ve temel yapısını öğrenin.
- Sayfadan bazı öğelerin nasıl kaldırılacağı, bazı öğelerin nasıl ekleneceği, sınıfların nasıl ekleneceği ve kaldırılacağı ve JavaScript aracılığıyla CSS stillerinin nasıl uygulanacağı gibi DOM'u işlemek için JavaScript'i nasıl kullanacağınızı öğrenin.
- Tamamlandıktan sonra kapsam, kapanış, değişken tanıtım ve olay köpürmesi gibi konuları öğrenin ve anlayın.
- HTTP çağrıları oluşturmak için XHR veya Ajax'ı nasıl kullanacağınızı öğrenin. Ajax, web sayfasını yeniden yüklemeden belirli eylemleri gerçekleştirmenize olanak tanır.
- Öğrendikten sonra, bir sonraki adım ES6 + 'nın tüm yeni özelliklerini anlamaktır. ES6, sınıflar, değişkenleri tanımlamanın birden çok yolu, dizilere yeni yöntemler ekleme, dizge birleştirme vb. Gibi dilde birçok ilginç güncelleme sunan bir JavaScript sürümüdür. İnternette bulduğunuz makalelerin çoğu, ES6'yı ayrıştırmak için Babel'i kullanacaktır. Bu aslında bu yeni JavaScript'i eski JavaScript'e dönüştürebilen bir çevirmen, çünkü bazı eski tarayıcılar yeni JS'yi desteklemiyor. Ancak şimdilik Babel için endişelenmeyin, sadece ilgili kavramları anlayın ve ardından pratik yapmak için ES6'yı destekleyen tarayıcının herhangi bir en son sürümünü kullanın. ES6 hakkında daha sonra konuşmaya devam edeceğiz.
Şimdi her şeyin böyle olduğunu hissetmelisiniz. Yukarıdaki adımları takip ederseniz, cesaretlendirilmelisiniz. Bunlar yeni öğrendiğin en önemli şeylerden bazıları.
JQuery öğrenmeli miyim?
Herkesin jQuery'ye deli olduğu bir dönem vardı ve bunun iyi nedenleri vardı; bu, her şeyi tarayıcıyla uyumlu bir şekilde yürütmenize izin veren JavaScript tabanlı bir paket sağlayan güçlü bir kitaplıktır. Ama o günler geride kaldı, şimdi yeni projeler onu çok kullanmıyor ama hala kullanan insanlar var. Öğrenmek zorunda değilsin, ama gerçekten çok kolay ve görmek istiyorsan iyi.
Pratik zamanı
Bunu defalarca söyledim ama yine de tekrar söylemem gerekiyor, pratik yapmadan hiçbir şey öğrenemezsin. Her an anladığınızı hissedebilirsiniz, ancak pratik yapmazsanız, çabucak unutursunuz. Bu yol haritasına göre öğrenirken, mümkün olduğunca başladığınızdan emin olun.
Bazı duyarlı web siteleri oluşturmaya devam edin ve etkileşimi artırmak için JavaScript'i kullanın. İlgilendiğiniz mevcut sayfaları ekleyebilirsiniz, ancak şimdiye kadar öğrendiğiniz her şeyi kullanmayı unutmayın.
Bazı web siteleri yaptıktan sonra, sonraki adım gerçek şeyler yapmaya başlamaktır. Bazı açık kaynak projeleri için çekme isteklerini açmak için github'da bazı projeler bulabilirsiniz. Deneyebileceğiniz bazı çekme istekleri şunlardır:
- Kullanıcı arayüzünü geliştirin, herhangi bir demo sayfasını duyarlı hale getirin veya tasarımı iyileştirin
- Çözebileceğiniz herhangi bir açık sorun olup olmadığına bakın
- İyileştirebileceğinizi düşündüğünüz herhangi bir kodu yeniden düzenleyin
Tıpkı bu depoda olduğu gibi, onlara öğrendiğinizi söyleyin ve PR'niz ve onu nasıl geliştirebileceğiniz konusunda geri bildirim sağlamalarına izin verin.
Bu Github deposunu tavsiye etmeye istekli olmama rağmen, biraz git bilgisi gerektiriyor, bu yüzden bu isteğe bağlı. Bunu yapmak zorunda değilsin, ama yaparsan, gerçekten yararlı bulacaksın - konuştuğun sürece, bu kadar çok insanın sana yardım etmeye istekli olmasına şaşıracaksın. O zaman git hakkında birçok ücretsiz kaynak bulabilirsin, örneğin şunu dene.
Kendinizi teşvik edin
Artık gerekli temel bilgileri öğrendiniz. Her şey iyi öğrenilirse, serbest bir iş bulabilir veya belki tam zamanlı bir iş bulmaya çalışabilirsiniz. Ancak, daha iyi bir kariyere sahip olmak istiyorsanız, şimdi duramazsınız, çünkü daha önümüzde uzun bir yol var.
Paketleme yöneticisi
Bundan önce, eklentiler veya herhangi bir harici masaüstü widget'ı gibi bazı harici kütüphaneleri kullanmak istiyorsanız, JavaScript ve CSS dosyalarını manuel olarak indirmeniz ve bunları projeye koymanız ve ardından bu kütüphaneler veya eklentiler yeni sürümler yayınladığında, Güncellenen dosyaları indirip projenize koymanız gerekiyor ki bu son derece zahmetli. Paket yöneticisi bu sorundan kurtulabilir. Projenize harici kitaplıklar ve eklentiler eklemenize yardımcı olurlar, böylece kitaplıkları manuel olarak kopyalamak veya yeni sürümleri yayınladıklarında dosyaları rahatsız edici bir şekilde güncellemek konusunda endişelenmenize gerek kalmaz. Şimdi iplik ve npm var. Bu ikisi hemen hemen aynıdır. Her ikisi de sadece uygulamalardır.Bunlardan birini seçebilirsiniz. Birini kullanmayı öğrendikten sonra, diğeri doğal olarak sorun olmaz.
Şimdi öğrendiklerinizi uygulayın
Paket yöneticisi hakkında temel bir anlayışa sahip olduktan sonra, daha önce yaptığınız bazı web sayfalarına, örneğin bazı komut istemi eklentileri yüklemek, kullanıcı bir düğmeyi tıkladığında bilgi istemi mesajları görüntülemek veya bir oturum açma oluşturmak gibi bazı harici kitaplıklar yükleyebilirsiniz Form doğrulama için bazı form doğrulama kitaplıklarını kullanın veya farklı sürümlerin nasıl yükleneceğini görmek için farklı seçenekleri deneyin.
Anlamsal sürüm kontrolüne bakmayı unutmayın
CSS ön işlemcisi
Önişlemci ikincisini CSS'nin varsayılan olarak desteklemediği özelliklerle zenginleştirir. Sass, Less, Stylus vb.Dahil olmak üzere birçok seçenek var. Seçersem, Sass'ı seçeceğim. Bununla birlikte, PostCSS'nin son gelişme ivmesi de iyidir, bu, CSS'nin "Babel" e biraz benzeyen pastanın üzerine bir krema. Bağımsız olarak kullanabilir veya Sass'ın üstüne istifleyebilirsiniz. Şimdilik, önce Sass öğrenmenizi, ardından vaktiniz olduğunda PostCSS'ye bakmanızı öneririm.
CSS çerçevesi
Artık bir CSS çerçevesi öğrenmenize gerek yok, ancak öğrenmek istiyorsanız. Bootstrap, Materialize ve Bulma arasından seçim yapmanızı tavsiye ederim. Ancak pazar ihtiyaçlarını göz önünde bulundurmak isterseniz, Bootstrap'i seçerim.
CSS organizasyonu
Uygulamanız genişlemeye devam ettikçe CSS de dağınık ve bakımı zor hale geldi. OOCSS, SMACSS, SUITCSS, Atomic ve BEM gibi ölçeklenebilirlikle daha iyi başa çıkmak için CSS'nizi düzenlemenin birçok yolu vardır. Aralarındaki farkı anlamalısın ama ben BEM'i tercih ediyorum.
Oluşturma aracı
Araçlar, JavaScript uygulamaları oluşturmanıza / paketlemenize ve geliştirmenize yardımcı olabilir. Bu kategori linter (kod incelemesi), görev çalıştırıcı (otomatik yapım) ve paketleyici (paketleme aracı) içerir.
Otomatik derlemeler için bu, başlangıçta npm betikleri, gulp, grun vb. Dahil birçok seçenektir. Ancak bu sefer, web paketi gulp'un yapabildiği şeylerin çoğunu halledebileceğinden, web paketinin yapabileceği görevleri otomatikleştirmek için yalnızca otomatik derlemedeki npm betiği kullanılabilir. Gulp öğrenmenize gerek yok ama daha sonra vaktiniz varsa gidip başvurunuza yardımcı olup olmayacağını görebilirsiniz.
Linter'e gelince, yine ESLint, JSLint, JSHint ve JSCS dahil olmak üzere birçok seçenek var. Ancak şu anda ESLint çoğunlukla kullanılmaktadır.
Modül paketleme araçları için farklı seçenekler arasında Parcel, Webpack, Rollup, Browserify vb. Bulunur. Birini seçmeniz gerekiyorsa, şimdilik gözleriniz kapalı Webpack'i seçebilirsiniz. Toplama da çok yaygın olarak kullanılır, ancak ana öneri kitaplığı kullanmaktır.Uygulamaya gelince, web paketi hala temel dayanaktır. Yani şimdi önce web paketi hakkında bilgi edinmeli ve sonra isterseniz Rollup hakkında bilgi almalısınız.
Zaman alıştırması yap - bir şeyler yap
Tebrikler! Artık kendinize modern JavaScript geliştiricilerinin% 75'i diyebilirsiniz. Şimdi devam edin ve öğrendiklerinizle bir şeyler yapın. Belki ileride Sass ve JavaScript kullanmak için bir kütüphane oluşturabilirsiniz. Ardından Sass'ı CSS'ye ve babel'i ES6 koduna dönüştürmek için Webpack'i kullanın. İşiniz bittiğinde, Github ve npm'de yayınlayın.
Bir çerçeve seçin
Eski yol haritasında, bu bölüm genellikle temel bölümün yanındadır, ancak bu sefer onu Sass, araç oluşturma ve paket yöneticisinin arkasına yerleştirmek için değiştirdim, çünkü hepiniz bunları çerçevede kullanacaksınız. İlgili bilgiye sahip değilseniz, korkacaksınız.
Çerçeve ayrıca birçok seçeneğe sahiptir. Bununla birlikte, React, Vue ve Angular şu anda daha yaygın olarak kullanılmaktadır. Son zamanlarda, React.js'ye olan talep artıyor. Ancak yukarıdakilerden herhangi birini seçerseniz yanlış gidemezsiniz. Şahsen, React veya Angular'ı seçerdim. Ancak özellikle, yeni başlayan biri olarak, Angular'ın nispeten daha kolay olduğunu fark edebilirsiniz; belki de tembel yüklemeyi destekleyen güçlü yönlendiriciler, engelleyicileri destekleyen HTTP istemcileri ve bağımlılık ekleme gibi hemen kullanılabilen hemen her şeyi desteklediği için. , Harici kitaplıkları seçmeye gerek kalmadan bileşenlerin CSS kapsüllenmesi vb. Ancak React'in şüphesiz toplulukta bir avantajı var ve Facebook bunu geliştirmek için çok çalışıyor. Emin olmanız gereken şey, sırf sıcak olan şey yüzünden seçim yapmamanızdır. Google'a gidin, karşılaştırın ve hangisinin size en uygun olduğunu görün.
İkisinin ve kişisel deneyimimin karşılaştırılması bir sonraki makalede tartışılacak, ancak bu makale öğrenmeyle ilgili olduğundan, Angular ve React'in öğrenme eğrisini nasıl bulacağımdan bahsedeceğim.
Aşağıdaki şekildeki öğrenme eğrisi, zaten TypeScript bilgisine sahip olduğunuzu ve ayrıca Rx.JS'nin bazı temellerini anladığınızı dikkate alır. Bu varsayımın nedenine gelince, bunu ilerideki bir makalede açıklayacağım, ancak temelde Angular tarafından sağlanan kullanıma hazır bazı standartlar ve temel özelliklerden kaynaklanmaktadır. Ancak bu, React'in kötü olduğu anlamına gelmez, her birinin kendi statüleri vardır, bunu daha sonra detaylı olarak tartışacağım.
Kendi öğrenme eğrilerine bakabilir ve hangisinin sizin için daha uygun olduğunu görebilirsiniz.
Kendi çerçevenizi seçtikten sonra, elbette öğrenmeniz gereken başka şeyler de vardır. Örneğin, React öğrenmeye karar verirseniz, durum yönetimini anlamak için Redux veya Mobx öğrenmeniz gerekebilir.Öğrenmeyi seçtiğiniz şey, yapmak istediğiniz uygulamanın ölçeğine bağlıdır. Mobx, küçük ve orta ölçekli uygulamalar için uygundur ve Redux, büyük ölçekli uygulamalar için daha uygundur. Uygulamanız izin veriyorsa, öğrenmenize bile gerek olmayabilir, sadece React'in yerel durum yönetimine güvenin.
Angular'ı seçerseniz, TypeScript (onsuz Angular uygulamaları geliştirebilirsiniz, ancak yine de kullanmanızı öneririz) ve Angular uygulamalarının yanı sıra başka yerlerde de kullanılabilen Rx.js'yi kullanmanız gerekir. Bunlar çok güçlü kitaplıklardır ve aynı zamanda işlevsel programlama geliştirme için de uygundur.
Vue.js'yi seçerseniz, Redux'a biraz benzeyen ancak Vue için olan Vuex'i öğrenmeniz gerekebilir.
Redux, Mobx ve Rx.js'nin bu çerçevelere bağlı olmadığı unutulmamalıdır.Ayrıca bunları çeşitli JavaScript uygulamalarında da kullanabilirsiniz. Ayrıca, Angular'ı seçerseniz, Angular 1+ yerine Angular 2+ kullandığınızdan emin olun.
Pratik zamanı
Artık modern JavaScript uygulamaları geliştirmek için ihtiyacınız olan her şeyi biliyorsunuz. Şimdi seçtiğiniz çerçeveden bir şeyler yapın. Kütüphanedeki fikir dizininde bazı fikirler bulacaksınız; birini seçin ve başlayın!
İşiniz bittikten sonra, performansı nasıl ölçeceğinizi ve iyileştireceğinizi görelim. Örneğin, Etkileşim Süresi, Sayfa Hızı İndeksi ve Deniz Feneri Puanı'na bakabilirsiniz.
Aşamalı web uygulaması
Yukarıdaki tüm adımları tamamladıktan sonra, servis çalışanları ve aşamalı web uygulamalarının nasıl yapılacağı hakkında bilgi edelim.
Uygulamanızı test edin
Uygulama testi için birçok araç vardır ve kullanımları farklıdır. Ben de sık sık Jest, Mocha, Karma ve Enzyme kombinasyonunu kullanıyorum. Bununla birlikte, bir araç seçmeye başlamadan önce, en iyisi önce farklı test türlerini anlamak, tüm seçeneklere bakmak ve ardından ihtiyaçlarınıza en uygun olanı seçmek.
İşte iyi bir özet, kontrol edebilirsiniz.
Statik tip denetleyicisi
Statik tür denetleyicisi, JavaScript'e tür denetimi eklemeye yardımcı olur. Bunları öğrenmenize gerek yok, ancak bunlar size süper güçler verebilir ve öğrenmek hızlı, sadece birkaç saat. Bu alanda esas olarak TypeScript ve Flow vardır. TypeScript'i seviyorum, ancak ikisine de göz atabilir ve beğendiğiniz birini seçebilirsiniz.
Sunucu oluşturma
Şimdiye kadar, öğrendiğiniz beceriler bir "ön uç mühendislik" pozisyonu bulmanız için yeterli olmalıdır. Ama bir dakika bekle, bir sonraki seviyeye geçebilirsin.
Ayrıca, seçtiğiniz herhangi bir çerçevede sunucu tarafı oluşturma hakkında bilgi edinebilirsiniz. Hangi çerçeveyi kullandığınıza bağlı olarak seçim yapabileceğiniz farklı seçenekler vardır. Örneğin, React'i kullanmaya karar verirseniz, en dikkat çekici seçenekler Next.js ve After.js'dir. Açısal ise Evrensel'i seçebilirsiniz. Vue.js için Nuxt.js sahibiz.
Bu yol haritasında bazı eksiklikler olabilir, ancak herhangi bir "ön uç mühendislik" rolünün ihtiyaçlarını karşılamak için yeterlidir. Ayrıca, anahtarın mümkün olduğu kadar pratik yapmak olduğunu da unutmayın. İlk başta ürkütücü hissedebilir ve her zaman bunda ustalaşmadığınızı hissedebilirsiniz, ancak bu normaldir ve yavaş yavaş daha iyi ve daha iyi hissedeceksiniz. Ayrıca, başınız dertte olduğunda yardım istemeyi unutmayın Kaç kişinin size yardım etmeye istekli olduğunu öğrenince çok şaşıracaksınız veya en azından ben istekliyim.
Söylenecek son şey, yukarıdaki öğreticinin nasıl alınacağıdır!
Nasıl alınır:
Geçmişte hala aynı eski kurallar!
1. Yorum yazıları, kelime sınırı yoktur, tek kelime yeterlidir! Sonra iletin!
2. Xiaobian'ı takip edin ve Xiaobian hayranı olun!
3. Özel Mesaj Düzenleyicisi: "Ön Uç Eğitimi" iyi! (Ayrıca cdr2019 yazılım indirmesinin son sürümü de var!)
Videonun değeri, onu aldıktan sonraki eyleme bağlıdır. Toplayıcı parti olmayın. Benzer fikirlere sahip insanlarla web ön uç teknolojisinin derinlemesine tartışılması ve öğrenilmesi ve ihtiyacı olan arkadaşlara aktarılmaya hoş geldiniz!
