Modern Frontend Uygulamaları

Modern Frontend Uygulamaları isimli sunum.

Transcript

1. MODERN FRONTEND UYGULAMALARI Oğuzhan Aslan
2. Oğuzhan Aslan aslan@oguzhan.in @oguzhanaslan https://github.com/oguzhanaslan
3. Nelere Değineceğiz? • Npm, Yarn • Webpack, Grunt, Gulp • Babel, EcmaScript • Single Page Application • State Management(Redux,Flux…) • React, Vue, Angular • Css Frameworks
4. NPM Node.Js için bir paket yöneticisidir. Kullanacağımız paketlerin otomatik indirilmesini, güncellenmesini, silinmesini sağlar. CLI uygulaması olarak çalışır. npm init npm install —save <name> npm install -g <name> npm uninstall —save <name> npm update npm outdated
5. package.Json Proje bağımlılıklarını yönettiğimiz dosyadır. Dizinimizde bulunan ‘node_modules’ klasöre, ilgili bağımlıkları kurar. { "name": "my_package", "version": "1.0.0", "dependencies": { "my_dep": "^1.0.0" }, "devDependencies" : { "my_test_framework": "^3.1.0" } }
6. yarn Facebook mühendisleri tarafından geliştirilmiş paket yöneticisidir. 
 
 npm install yarn --global yarn init yarn add yarn install yarn publish yarn upgrade yarn remove
7. Webpack Module bundler uygulamasıdır. Belirlediğimiz dosyaları birleştirip, bir çıktı yaratır.
8. Webpack • Bundle Code Splitting (Kodu Parçalara Ayırma) • Hot page reloading • Statik Dosya Paketleme • Testing • Stil Derleme
10. grunt / gulp Yazdığımız görevleri çalıştıran basit bir araçlardır. Her iki paket aynı işlevi görmektedir. • Less, Sass, Stylus için derleme • İmaj Optimizasyonu • Birden fazla JS ve Css dosyasını birleştirme • Css veya JavaScript dosyalarını sıkıştırma • Otomatik task çalıştırma • Dosya veya dizinleri temizleme • Unit Test Çalıştırma
11. grunt task
12. gulp task
13. ES2015 veya ES6 Şu an kullandığımız tarayıcılar, genel anlamda spesifikasyon olarak EcmaScript 5.1 (2009) desteklemektedir. EcmaScript 2015 veya diğer adıyla ES6 kullanabilmek için Babel ile kodlarımızı tarayıcının anlayacağı standart olan ES5’e çevririz. https://github.com/lukehoban/es6features
14. ES2015 ile gelen özellikler https://github.com/lukehoban/es6features • let , const variable • Classes • Arrow Functions • Promises • Object Literals • Template Strings • Generators
15. ‘var’
16. ‘let’
17. ‘const’
18. ‘class’
19. ‘arrow function’
20. ‘arrow function’
21. ‘template strings’
22. Babel • Bundle Code Splitting (Kodu Parçalara Ayırma) • Hot page reloading • Statik Dosya Paketleme
23. Babel
24. State Management SPA yazdığımız durumlarda, state’leri yönetmek yer yer zorluk yaşatabiliyor. SPA kütüphaneleri geliştiren firmalar/kişiler bunun için Flux, Redux, Vuex, Mobx gibi kütüphaneler geliştirmiştir.
25. Store Nedir ? Veritabanımız olarak düşünebilirsiniz. Tüm state verilerimiz bu store’un altında tutulur. Flux’ta birden fazla store bulunabiliyorken, Redux ve Vuex’de bir tane store bulunuyor.
26. React Facebook tarafından geliştirilen kullanıcı arayüzleri oluşturmayı kolaylaştıran bir JavaScript kütüphanesidir.
27. Vue.JS Kullanıcı arayüzü oluşturmak için kullanılan başka bir kütüphanedir.
28. Next.JS Sunucu tarafında çalışan React uygulamaları geliştirmek için kullanılan minimalist bir frameworktür. • Code Splitting • Css-in JS • Routing • Prefetch
29. Dinlediğiniz için Teşekkürler! Oğuzhan Aslan
 @oguzhanaslan https://www.meetup.com/Frontend-Istanbul/ https://twitter.com/feistanbul