"Bit" İle Bulut Tabanlı React Componentleri

Transcript

1. We mold great ideas into awesome software products.
2. "Bit" ile Bulut Tabanlı React Komponentleri Ömer Faruk Aplak / Pankod
3. Douglas Crockford Yazılan kodun yeniden kullanılabilmesi, yazılım mühendisliğinin zirve noktasıdır.
4. Kod Tekrarı, Kopyala/Yapıştır Kod Paylaşımı, Kodun Yeniden Kullanımı
5. Hayaller, gerçekler... Ortalama bir yazılım projesindeki duplike kod oranı %30
6. Projelerde kod tekrarı neden oluyor? 1) Projedeki zaman baskısı 2) Takım içi iletişim eksikliği 3) Hatalı kurgulanmış proje yapısı
7. Çözüm alternatifleri I
8. Npm + Git Workflow 01 Yeni bir git reposu yaratılır. 02 Paylaşılacak komponent, bir modül olarak refactor edilir. Modülün çalışacağı ortam, dependency’ler hazırlanır ve hazırlanan modül bu repoya taşınır. 03 Yeni bir paket oluşturularak, komponent npm üzerinden yayınlanır.
9. Npm + Git Dezavantajları ❏ Refactoring ve boilerplate ihtiyacı. ❏ Yönetilmesi gereken çok sayıda repo. ❏ Modülde ve ana projede yapılan kod değişimlerini yönetme zorluğu. ❏ Yayınlanan modülleri ihtiyaç halinde bulma/keşfetme zorluğu.
10. Çözüm alternatifleri II 1) Büyük codebase’leri bağımsız küçük parçalara böler, 2) Dağıtık projeleri birleştirerek kod paylaşımını hedefler, 3) Npm + Git workflow’una göre çok daha kolay.
11. Lerna Dezavantajları ❏ Monorepo yapısı ile sadece tek repo içerisinde kullanım. ❏ Yoğun refactoring ihtiyacı.
12. Yeni Bir Yaklaşım : Bit ➔ Kolay komponent izolasyonu. ➔ Sıfır Refactoring ve konfigürasyon ile kod paylaşımı. ➔ Kod değişimlerinde çift yönlü senkronizasyon. ➔ Hazır keşif ve cloud araçları. ➔ Farklı repo ve projeler arası kod paylaşımı.
13. Bit Özellikleri ➔ Açık kaynak ➔ Platform bağımsız ➔ Ücretsiz cloud hizmeti ➔ Versiyonlama desteği ➔ CI / Test desteği
14. Bit Workflow 01 Projede paylaşılacak komponentler tespit edilir ve bit aracı ile track edilmeye başlanır. Paylaşımlı komponentler, çoğu zaman proje yapısı içindeki dizinlerdir. 02 Paylaşımlı komponent, bir tag ile versiyonlanır. Bu şekilde tüm dependency’ler kilitlenir ve komponent için izole bir ortam yaratılır. 03 Versiyonlanan paylaşımlı komponent, cloud ortamına gönderilir. Burada isteğe bağlı olarak otomatik derlenir ve testleri çalıştırılır. Takım içi paylaşım için, komponentler galeri modunda listelenir. Buradan Bit Cli, NPM ya da Yarn ile projeye eklenir.
15. $ bit add src/ui/button.js --id ui/button tracking component ui/button: added src/ui/button.js $ bit tag ui/button 1 components tagged | 1 added, 0 changed, 0 auto-tagged added components: ui/button@0.0.1 $ bit export pankod.project exported 1 components to scope pankod.project Add Bit Cheatsheet Tag Export
16. import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Button from '@bit/pankod.project.ui.button'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> <Button /> </div> ); } } export default App; Bit Import
17. Örnek Uygulama
18. Galeri Görünümü
19. İnteraktif Keşif
20. Atomic Design
21. Bit + React
22. Case Study : yolcu360
23. Yolcu360 - B2C Web Uygulaması
24. Yolcu360 - B2B Web Uygulaması
27. Sonuç • 125+ komponent ortak modül haline getirilerek bit üzerinden paylaşıldı. • Duplike kod üretilmeden yapılan geliştirme, yazılım ekibine fazladan minimum iş yükü üretti. • Şu anda iki projede de geliştirmeler devam ederken, kod değişimleri çift yönlü olarak senkronize ediliyor.
28. TEŞEKKÜRLER...