[]
Front-End'ciler
Selamlar,
Herhangi bir dijital iş yapan ajansta çalışmadığım ve çalışan yakınımda olmadığı için buradan sorayım istedim. Front end çalışan arkadaşlar bir web sitesi veya bir app için görünüm hazırlarken işe nasıl başlıyorlar?
Söz gelimi text editörü açıp hadi bakalım index.html'imizi kaydederek başlayalım deyip sıfırdan mı herşeyi yazıyorlar? Yoksa her zaman kullanılan hazır templateler var mı?
CSS/HTML bilseniz dahi zaten bazı hazır templateler üzerinden iş yapmak daha kolay ve hızlı sonuçta.
Yani eğer vaktiniz varsa ister ÖM ister buradan biraz prosesten bahseder misiniz?
Teşekkürler!
Herhangi bir dijital iş yapan ajansta çalışmadığım ve çalışan yakınımda olmadığı için buradan sorayım istedim. Front end çalışan arkadaşlar bir web sitesi veya bir app için görünüm hazırlarken işe nasıl başlıyorlar?
Söz gelimi text editörü açıp hadi bakalım index.html'imizi kaydederek başlayalım deyip sıfırdan mı herşeyi yazıyorlar? Yoksa her zaman kullanılan hazır templateler var mı?
CSS/HTML bilseniz dahi zaten bazı hazır templateler üzerinden iş yapmak daha kolay ve hızlı sonuçta.
Yani eğer vaktiniz varsa ister ÖM ister buradan biraz prosesten bahseder misiniz?
Teşekkürler!
sıfırdan tasarım geldiği için sıfırdan html le başlıyoruz.
html css javascript (angular/react) diye devam ediyoruz.
html css javascript (angular/react) diye devam ediyoruz.
- asilyis (04.01.18 19:28:57)
Yazılımda genelde var olan bir şeyi düzeltmektense sıfırdan yapmak daha kolay olabiliyor. Özellikle html/css konusunda. Back-end tarafında ise eğer dokümantasyon varsa, kod okunabilirliği varsa, testleri yazılmışsa vs. ekleme yapmak daha kolay olur.
Dolayısıyla dediğin gibi sıfırdan yapmaya başlıyorlar. Ancak artık eskisi gibi öyle sublime text'i açıp direk html/css yazılmıyor. Anahtar kelimeleri vereyim: webpack, pug, saas, es6, gulp, eslint, babel, nodejs, npm. Günümüz teknolojilerini takip eden bir front-end geliştiricisinin bunları biliyor olması gerekiyor artık.
Tabii bazıları bootstrap üzerine giydirmeyi de tercih edebiliyor.
Dolayısıyla dediğin gibi sıfırdan yapmaya başlıyorlar. Ancak artık eskisi gibi öyle sublime text'i açıp direk html/css yazılmıyor. Anahtar kelimeleri vereyim: webpack, pug, saas, es6, gulp, eslint, babel, nodejs, npm. Günümüz teknolojilerini takip eden bir front-end geliştiricisinin bunları biliyor olması gerekiyor artık.
Tabii bazıları bootstrap üzerine giydirmeyi de tercih edebiliyor.
- mr sherlock (04.01.18 19:36:05 ~ 19:38:07)
@mr.sherlock: İşte benim duymak istediğim de buydu. npm node.js aslında daha çok backend ile ilgili sanırım. Ve atyoum angular ve react sanırım front end e daha yakın frameworkler?
- Nocturne (04.01.18 20:23:53)
hayır, artık front-end geliştirirken de bir server ayağa kaldırman gerekiyor araçları kullanabilmek için. bu yüzden nodejs kurman ve npm (ya da yarn) ile bu araçları indirmen lazım.
- mr sherlock (04.01.18 20:30:35)
genelde ya kendilerinin bir klasörü/template vardır. işlerine göre html css eklidir ordan devam edilir.
ya da hazır bazı frameworklerin çatısı altında geliştirmeler başlanır. bootstrap,material design vs.
ya da js frameworklerinden angular/vue/react cli aracılığıyla kendi templatelerinin üzerine gene npm'den bootstrap gibi frameworkler eklenebilir.
kimin nasıl yol izlediğini söylemeden bilemezsin.
bugün frontendcilerden beklenilen değişti.
ya da hazır bazı frameworklerin çatısı altında geliştirmeler başlanır. bootstrap,material design vs.
ya da js frameworklerinden angular/vue/react cli aracılığıyla kendi templatelerinin üzerine gene npm'den bootstrap gibi frameworkler eklenebilir.
kimin nasıl yol izlediğini söylemeden bilemezsin.
bugün frontendcilerden beklenilen değişti.
- qobel (04.01.18 20:35:43)
@mr.sherlock : O zaman back-end'çi ne iş yapıyor tam olarak?
- Nocturne (04.01.18 20:35:51 ~ 20:36:08)
back-end'ci aslında uygulamanın kendisini yazıyor. Server ayağa kaldırıyor dedim ama bu sadece geliştirme aşamasında. İş bitince teslim edilen şey html, css ve javascript dosyaları oluyor. Front-endci uygulamanın görünen kısmını yazıyor.
Örnekle anlatayım; web sayfasını ziyarete ettin, bu sayfada gördüğün her şey front-endci tarafından yapıldı. Sen giriş formunu doldurdun gönder dedikten sonra artık iş back-end'e geçiyor. Sen hangi endpoint'e istek attıysan back-end tarafında o endpoint'i handle eden controller senin gönderdiğin parametreleri (örnekte kullanıcı adı ve şifre diyelim) alır daha sonra bu bilgiler aracılığıyla veritabanında bu isime sahip bir kullanıcı var mı varsa şifresi bu girilenle eşleşiyor mu diye model aracılığıyla kontrol eder. Eşleşme varsa tarayıcıya cookie aracılığıyla bir bilgi kaydeder böylece senin o sitede oturumun (session) başlamış olur.
Örnekle anlatayım; web sayfasını ziyarete ettin, bu sayfada gördüğün her şey front-endci tarafından yapıldı. Sen giriş formunu doldurdun gönder dedikten sonra artık iş back-end'e geçiyor. Sen hangi endpoint'e istek attıysan back-end tarafında o endpoint'i handle eden controller senin gönderdiğin parametreleri (örnekte kullanıcı adı ve şifre diyelim) alır daha sonra bu bilgiler aracılığıyla veritabanında bu isime sahip bir kullanıcı var mı varsa şifresi bu girilenle eşleşiyor mu diye model aracılığıyla kontrol eder. Eşleşme varsa tarayıcıya cookie aracılığıyla bir bilgi kaydeder böylece senin o sitede oturumun (session) başlamış olur.
- mr sherlock (04.01.18 20:50:37)
ornegin facebook sitesine girdiginde giris yap butonuna tikladiginda senin bilgisayarin kullanici adi ve sifre girilmismi diye bakar, girildiyse bu kullanici adi ve sifreyi http uzerinden facebook severina gonderir. facebook serveri da bu kullanici adi ve sifreyi database uzerinden kontrol edip dogru ise bir oturum olusturur ve yine http uzerinden bu oturumu senin bilgisayarina gonderir. senin bilgisayarinda oturumu aldiginda senin facebook hesabini acar. Iste tu bu basit duzende senin bilgisayarinda olan tum hersey, butonlar, kutular, bu butonun tiklanmasi, kutulardaki verinin kontrol edilmesi ve servera http uzerinden gonderilmesi Front-End. Serverda yurutulen bu kullanici adi bilgisinin alinmasi, databasede kontrol edilip bir oturum acilmasi, bu oturumun yine http ile senin bigisayarina gonderilmesi ise Back-End. Ozetle senin bilgisayarinda calisan her kod parcasi (html, css, javascript) Front-End, serverda calisan her kod parcasi (php, java, c#, C++ node.js uzerinde javascript) Back-End. Front-End ile Back-End icin en onemli ayrim kullanicinin bilgisayarinda mi, yoksa serverda mi calistigidir.
Hazir sablonlar uzerinde calisanlar da var, kendi sablonlarini olusturan da, ya da herseyi sifirdan yapan da. Ama son zamanlarda populer olan calisma yontemi "command line" uzerinden angular, react, vue gibi buyuk front-end frameworklerinin CLI (Command line interface) yazilimlarini kullanarak, yani komut satirindan, "Typescript kullanacam", "less css precompiler kullanacam", "soyle login olacak" vs anlamina gelen komutlari girerek tum template sayflarin olusturulmasi, o sayfalari iceren ayarlarin, "property" dosyalarinin olusturulmasini CLI yazilimlarina birakmaktir. Cok buyuk zaman kazandirdigi gibi, bazi adimlarin unutulup hata alinmasini da engeller.
Hazir sablonlar uzerinde calisanlar da var, kendi sablonlarini olusturan da, ya da herseyi sifirdan yapan da. Ama son zamanlarda populer olan calisma yontemi "command line" uzerinden angular, react, vue gibi buyuk front-end frameworklerinin CLI (Command line interface) yazilimlarini kullanarak, yani komut satirindan, "Typescript kullanacam", "less css precompiler kullanacam", "soyle login olacak" vs anlamina gelen komutlari girerek tum template sayflarin olusturulmasi, o sayfalari iceren ayarlarin, "property" dosyalarinin olusturulmasini CLI yazilimlarina birakmaktir. Cok buyuk zaman kazandirdigi gibi, bazi adimlarin unutulup hata alinmasini da engeller.
- emrahday (05.01.18 10:55:35 ~ 10:55:52)
1