TypeScript her şey dahil: Acıları ve kazanımlarıyla birlikte Monorepo
Bu makalede, felsefe hakkında olduğu için monorepo ve polyrepo'yu karşılaştırmayacağım. Bunun yerine, yapı inşa etme ve geliştirme deneyimine odaklanacağım ve JS/TS ekosistemine aşina olduğunuzu varsayacağım.
Airbnb için çalışırken monorepo yaklaşımını gördüm, ancak bu sadece frontend içindi. JavaScript ekosistemi ve “mutlu” TypeScript geliştirme deneyimine olan derin bir sevgiyle, frontend ve backend kodunu aynı dilde hizalama sürecine yaklaşık üç yıl önce başladım. Bu, işe alım için harika idi, ancak projelerimiz hala birden çok repo'da dağılmış olduğu için geliştirme adına o kadar iyi değildi.
Denildiği gibi, “bir projeyi yeniden yapılandırmanın en iyi yolu yeni bir başlangıç yapmaktır”. Bu yüzden bir yıl önce startup'ımı başlatmaya başladığımda, toplam bir monorepo stratejisi kullanmaya karar verdim: frontend ve backend projelerini, hatta veritabanı şemalarını, tek bir repo'ya koydum.
Bu makalede, felsefe hakkında olduğu için monorepo ve polyrepo'yu karşılaştırmayacağım. Bunun yerine, yapı inşa etme ve geliştirme deneyimine odaklanacağım ve JS/TS ekosistemine aşina olduğunuzu varsayacağım.
Dürüst olmak gerekirse, ben bir JavaScript ve TypeScript hayranıyım. Esnekliği ve rigorozluğunun uyumluluğunu severim: unknown veya any ye geri dönebilir (her ne kadar kod tabanımızda any formunun her türlüsünü yasaklasak da) veya takım boyunca kod tarzını hizalayan süper katı bir lint kural setini kullanabilirsiniz.
“Fullstack” kavramı hakkında konuştuğumuzda, genellikle en az iki ekosistem ve programlama dili hayal ederiz: biri frontend, diğeri backend için.
Bir gün, daha basit olabileceğini aniden fark ettim: Node.js yeterince hızlıdır (inanın bana, çoğu durumda, kod kalitesi çalışma hızından daha önemlidir), TypeScript yeterince olgunlaşmıştır (büyük frontend projelerinde iyi çalışır) ve monorepo kavramı bir dizi ünlü takım tarafından uygulanmıştır (React, Babel, vb.) - o yüzden neden tüm kodu bir araya getirmiyoruz, frontend'den backend'e? Bu, mühendislerin aynı repo'da iş yapmasını ve bir özelliği (neredeyse) bir dilde uygulamalarını sağlar.
“Tamam, şimdi yükseltiyorum.” V1 ile mücadeleyi bıraktım ve taşınmaya başladım. Ancak berry'nin uzun geçiş rehberi beni korkuttu ve birkaç başarısız denemeden sonra pes ettim.
Dolayısıyla paket yöneticileri hakkında araştırmalar başladı. Pnpmyi denedikten sonra büyülendim: Yarn kadar hızlı, yerel monorepo desteği, npmye benzer komutlar, sert linkler vb. En önemlisi, sadece çalışıyor. Bir ürünle başlamak isteyen ancak bir paket yöneticisi geliştirmek istemeyen bir geliştirici olarak, birkaç bağımlılığı eklemek ve bir paket yöneticisinin nasıl çalıştığını veya başka herhangi bir havalı kavramı bilmeden projeye başlamak istedim.
Aynı fikir üzerine, paketler arasında komutları çalıştırmak ve iş alanı paketlerini yayınlamak için eski bir arkadaş lernayi seçtik.
Her paketin nihai kapsamını baştan belirlemek zordur. Durumun gerektirdiği şekilde en iyi denemenizle başlayın ve geliştirme sırasında her zaman yeniden yapılandırma yapabileceğinizi unutmayın.
JavaScript ekosistemini benimsediğimiz ve ana programlama dilimiz olarak TypeScript'i kullandığımız için, birçok seçim açıkçı (benim tercihime dayanarak 😊):
Backend hizmeti (çekirdek) için koajs': expresste async / await` kullanırken zor bir deneyimim oldu, bu yüzden yerel desteğe sahip bir şey kullanmaya karar verdim.
i18n (phrases/ui) için i18next/react-i18next: API'lerin basitliğini ve iyi TypeScript desteğini beğeniyorum.
Ancak ikisi de önceki geliştirmede garip bir duygu yarattı:
ORM için: Dekoratörlerin hayranı değilim ve veritabanının başka bir soyut katmanı ekibin daha fazla öğrenme çabasına ve belirsizliğine neden olur.
Sorgu oluşturucu için: İyi bir şekilde bazı kısıtlamalarla SQL yazmanız gibidir, ancak gerçek SQL değildir. Bu yüzden birçok durumda ham sorgular için .raw() kullanmamız gerekiyor.
Daha sonra bu makaleyi gördüm: “Knex.js kullanmayı bırakın: SQL sorgu oluşturucu kullanmak bir anti-kalıptır”. Başlık agresif görünüyor, ama içerik harika. Bana güçlü bir şekilde “SQL bir programlama dilidir” hatırlattı, ve SQL'i doğrudan yazabileceğimi (CSS gibi, bunu nasıl kaçırdığım!) Anladım, yerel dili ve veritabanı özelliklerini kullanmak yerine başka bir katman eklemek ve gücü azaltmak yerine.
Sonuç olarak, aynı makalenin belirttiği gibi, Postgres ve Slonik (açık kaynaklı bir Postgres istemcisi) ile tutunmayı karar verdim:
… farklı veritabanı lehçeleri arasında seçim yapma yararı marjinaldir ve birden çok veritabanı için aynı anda geliştirme yapmanın maliyeti önemlidir.
SQL'i yazmanın bir başka avantajı, onu TypeScript tanımlarının tek gerçeği olarak kolayca kullanabilmemizdir. SQL şemalarını backend'de kullanacağımız TypeScript koduna dönüştüren bir kod üreteci yazdım ve sonuç fena görünmüyor:
Gerekirse `jsonb'yi bir TypeScript tipine bağlayabilir ve backend servisinde tip doğrulamayı gerçekleştirebiliriz.
Bir yönlü bir diyagram olduğunu fark edersiniz, bu da bize açık bir mimariyi koruma ve projenin büyüdükçe genişleme yeteneğini kazanma konusunda büyük yardımcı oldu. Ayrıca, kod (temelde) tümüyle TypeScript'te.
Pnpm ve lerna, iç iş alanı bağımlılıklarında muhteşem bir iş çıkarıyor. Proje kökünde kardeş paketleri eklemek için aşağıdaki komutu kullanırız:
Bu, @logto/scheması @logto/coreın bir bağımlılığı olarak ekler. Dahili bağımlılıklarınızın semantik sürümünü package.jsonda tutarken, pnpm onları pnpm-lock.yamlda doğru bir şekilde bağlayabilir. Sonuç şöyle görünür:
Monorepo’daki her paketi “bağımsız” olarak görürüz. Bu nedenle, tsconfig, eslintConfig, prettier, stlyelint ve jest-configi kapsayan standart yapılandırma paylaşımı yöntemini kullanabiliriz. Örnek için bu projeye bakın.
Günlük geliştirme için VSCode kullanıyorum ve kısa bir şekilde, proje düzgün bir şekilde yapılandırılmış olduğunda bir şey farklı değil:
ESLint ve Stylelint normal çalışır.
VSCode ESLint eklentisini kullanıyorsanız, kişi başına ESLint yapılandırmasını onurlandırması için aşağıdaki VSCode ayarlarını ekleyin (pattern değerini kendi değerinizle değiştirin):
husky, commitlint ve lint-staged beklenildiği gibi çalışır.
Frontend ve backend için farklı derleyiciler kullanıyoruz: UI (React) için parceljs ve tüm diğer saf TypeScript paketleri için tsc. Denediyseniz parceljsyi şiddetle tavsiye ederim. Bu, farklı dosya türlerini zarif bir şekilde ele alan gerçek bir “sıfır yapılandırma” derleyicidir.
Parcel kendi frontend geliştirme sunucusuna sahip ve üretim çıktısı yalnızca statik dosyalardır. CORS sorunlarını önlemek için API'ları ve SPA'yı aynı kökene bağlamak istediğimizden, aşağıdaki strateji işe yarar:
Geliştirme ortamında, trafiği Parcel geliştirme sunucusuna yönlendirmek için basit bir HTTP proxy kullanın.
Üretimde, statik dosyaları doğrudan sunun.
Frontend middleware işlev uygulamasını burada bulabilirsiniz.
Her paket için package.json'da gerektiğinde yeniden derleyen dosya değişikliklerini izleyen bir devscriptimiz var.Lernaya teşekkürler, lerna exec` kullanarak paket scriptlerini paralel olarak çalıştırma işleri kolaylaştırıyor. Kök script şöyle görünür:
Takımımız bu yaklaşım altında bir yıl boyunca geliştirdi ve bundan oldukça memnunuz. Projemizin son halini görmek için GitHub repo'muzu ziyaret edin. Özetlemek gerekirse:
Acılar
JS/TS ekosistemine aşina olmanız gerekiyor
Doğru paket yöneticisini seçmeniz gerekiyor
Ek bazı bir seferlik kurulumlar gerektirir
Kazanımlar
Tüm projeyi bir repo'da geliştirme ve bakım yapma
Basitleştirilmiş kodlama beceri gereksinimleri
Paylaşılan kod stilleri, şemalar, ifadeler ve yardımcı programlar
İletişim verimliliğinin artması
API tanımı nedir gibi sorular artık yok
Tüm mühendisler aynı programlama dilinde konuşuyor
Kolay CI/CD
Derleme, test etme ve yayınlamak için aynı araç zincirini kullanma
Bu makale, repo'yu sıfırdan kurmak, yeni bir paket eklemek, GitHub Actions'ı CI/CD için kullanma vb. birçok konuyu ele almıyor. Her birini genişletirsem bu makale için çok uzun olurdu. Yorum yapmaktan çekinmeyin ve gelecekte hangi konuyu görmek istediğinizi bana bildirin.
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'%3e%3cg data-look='classic' id='Monorepo' class='cluster'%3e%3crect height='208' width='369.40234375' y='112' x='8' style=''/%3e%3cg transform='translate(156.677734375%2c 112)' class='cluster-label'%3e%3cforeignObject height='24' width='72.046875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eMonorepo%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_database_Schemas_0' d='M279.051%2c62L279.051%2c66.167C279.051%2c70.333%2c279.051%2c78.667%2c279.051%2c87C279.051%2c95.333%2c279.051%2c103.667%2c279.051%2c111.333C279.051%2c119%2c279.051%2c126%2c279.051%2c129.5L279.051%2c133'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Phrases_Core_1' d='M84.97%2c191L81.671%2c195.167C78.372%2c199.333%2c71.774%2c207.667%2c70.63%2c215.428C69.486%2c223.19%2c73.796%2c230.379%2c75.951%2c233.974L78.106%2c237.569'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Phrases_UI_2' d='M157.766%2c191L165.701%2c195.167C173.635%2c199.333%2c189.505%2c207.667%2c204.928%2c216.342C220.35%2c225.018%2c235.325%2c234.036%2c242.812%2c238.544L250.3%2c243.053'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Schemas_Core_3' d='M229.022%2c191L221.302%2c195.167C213.581%2c199.333%2c198.14%2c207.667%2c184.072%2c215.656C170.003%2c223.646%2c157.307%2c231.291%2c150.959%2c235.114L144.611%2c238.937'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Schemas_UI_4' d='M299.392%2c191L302.531%2c195.167C305.67%2c199.333%2c311.948%2c207.667%2c313.267%2c215.406C314.585%2c223.145%2c310.944%2c230.291%2c309.123%2c233.863L307.302%2c237.436'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(279.05078125%2c 35)' id='flowchart-database-0' class='node default'%3e%3crect height='54' width='196.078125' y='-27' x='-98.0390625' style='' class='basic label-container'/%3e%3cg transform='translate(-68.0390625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='136.078125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3ePostgres Database%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(279.05078125%2c 164)' id='flowchart-Schemas-1' class='node default'%3e%3crect height='54' width='126.703125' y='-27' x='-63.3515625' style='' class='basic label-container'/%3e%3cg transform='translate(-33.3515625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='66.703125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eSchemas%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(106.34765625%2c 164)' id='flowchart-Phrases-2' class='node default'%3e%3crect height='54' width='118.703125' y='-27' x='-59.3515625' style='' class='basic label-container'/%3e%3cg transform='translate(-29.3515625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='58.703125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3ePhrases%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(96.34765625%2c 268)' id='flowchart-Core-3' class='node default'%3e%3crect height='54' width='94.6875' y='-27' x='-47.34375' style='' class='basic label-container'/%3e%3cg transform='translate(-17.34375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='34.6875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eCore%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(291.7265625%2c 268)' id='flowchart-UI-5' class='node default'%3e%3crect height='54' width='76' y='-27' x='-38' style='' class='basic label-container'/%3e%3cg transform='translate(-8%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='16'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eUI%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)