フロントエンドのGitHub Actions実行時間を削減するために取り組んだこと | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。GitHub Actionsの実行時間を削減するために取り組んだことについて紹介します。 経緯 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 GitHub Enterprise Cloudプランでは月50,000分のGitHub Actionsを無料で実行することができますが、prtimes-frontendだけで7割近い時間を消費してしまっていました。またCIに時間がかかることで、Pull Requestを作成した後、10分近く待たないとコードレビューに回すことができず、開発効率が落ちてしまっていました。 そこで現状の使い方を見直して、billable timeの削減に取り組むことになりました。 billable time削減の改善点を探す b
azu/kvsというブラウザとNode.jsで動くファイルサイズが小さいキーバリューストレージを作りました。 モチベーション ファイルサイズが小さくIndexedDBを使っていて、Node.jsでも透過的に同じAPIで利用できるライブラリが必要となったため作りました。 textlint-editorというアプリを書いていて、キャッシュストレージとしてlocalstorage-ponyfillを使っていました。 しかし、localstorage-ponyfillはブラウザとNode.jsで透過的に動くストレージライブラリですが、LocalStorageベースとなっています。 textlint-editorでは、スクリプトをWeb Workerで動かすため同期的なAPIであるLocalStorageは利用できません。 そのため、IndexedDBベースでシンプルなキーバリューストレージを扱える
TerraformとGitHub Actionsで複数のCloud RunをまとめてDevOpsした結果, 開発者体験がいい感じになった話. - Lean Baseball
ざっくり言うと「TerraformとGitHub ActionsでGoogle Cloudなマイクロサービスを丸っとDeployする」という話です. Infrastructure as Code（IaC）は個人開発（趣味開発）でもやっておけ 開発〜テスト〜デプロイまで一貫性を持たせるCI/CDを設計しよう 個人開発（もしくは小規模システム）でどこまでIaCとCI/CDを作り込むかはあなた次第 なお, それなりに長いブログです&専門用語やクラウドサービスの解説は必要最小限なのでそこはご了承ください. あらすじ 突然ですが, 皆さんはどのリポジトリパターンが好きですか? 「ポリレポ（Polyrepo）」パターン - マイクロサービスを構成するアプリケーションやインフラ資材を意味がある単位*1で分割してリポジトリ化する. 「モノレポ（Monorepo）」パターン - アプリケーションもインフラも
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog この記事は UIT 新春 Tech blog 2023 4日目の記事です。 こんにちは。LINEフロントエンド開発センターの幾野(ikuno)です。普段は LINE NEWS のフロントエンド開発をしています。 LINE NEWS では昨年テストをたくさん書いた 昨年 LINE NEWS ではたくさんテストを書きました。当初 78 ファイルだったテストファイルは半年で 150 ファイルに倍増しました。 テストカバレッジも statements 33.6% から 64.4% まで改善しました。 昨年当初のテストカバレッジ 現在のテストカバレッジ 今回はどういったテストを書いたらうまくいったかについて書いていきます。 テストは意図
Cloud FunctionsのNode.jsランタイムを使うときに毎回設定していること - yashiganiの英傑になるまで死ねない日記
Cloud Function使ってますか？簡単なサービスをシュッと作って公開するにはとても便利ですよね。筆者もよく使っています。今やGCPの中では一番手に馴染んだサービスのひとつです。 最近Cloud Functionsを使っていくつかサービスを作っていて、最初にすることが決まってきたのでご紹介します。 TypeScriptの導入 初手はTypeScriptの導入です。みなさんはTSを導入するときどうしていますか？入れるだけなら簡単なんですが、ESLintだとかPrettierだとか考え始めるとゾッとしますよね。これから楽しくプログラミングを始めるのにゾッとはしたくないので、で頭をカラッポにしてgtsを使います。gtsというのはgoogleが作っているいい感じにTypeScriptを使えるやつで、入れておくだけでそれはそれはいい感じになります。詳しくはこのエントリーを見てくれ。npx gt
[TypeScript]モノレポ管理ツール比較検討
モノレポ管理のツールを検討したときのメモ Background 自分が所属するチームで開発する JavaScript/TypeScript のプロダクトが増えてきて、同じような内容のリポジトリがいくつも存在している（n個とする）。 変更を加えていくにつれて、それぞれの差分が大きくなり、以下のような問題が発生する。 開発が止まっているプロジェクトの構成が古くなり、修正コストが発生する 開発が複数同時進行している場合、同じような実装を手動で同期する必要がある これらは共通の基盤等があれば効率的に（理想的にはn分の1の労力で）開発が可能であり、将来的なコストを考えると、いまのうちにその仕組みを考えておきたい。 Proposed Solutions 要件は以下 複数のパッケージをnpmとしてpublishできる アプリケーションも管理できる Nx, Rush, Lerna を主要な選択肢としている
![[TypeScript]モノレポ管理ツール比較検討](https://cdn-ak-scissors.b.st-hatena.com/image/square/e204665caf2bdc344987086461dd0424f7c8112d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--mp4vbqB0--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BTypeScript%25255D%2525E3%252583%2525A2%2525E3%252583%25258E%2525E3%252583%2525AC%2525E3%252583%25259D%2525E7%2525AE%2525A1%2525E7%252590%252586%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E6%2525AF%252594%2525E8%2525BC%252583%2525E6%2525A4%25259C%2525E8%2525A8%25258E%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aokmttdhr%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I5NmZlMjc4YTYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
こんにちは、Web チームの井手です。 この度 NIKKEI Professional Media（通称 Promedia） という新媒体をリリースしました。各トピックに特化したメディアで、現在は 日経モビリティ、日経GX、日経テックフォーサイトが展開されています。 これまで日経 Web チームでは特定のFWを利用せず、長年JSXをテンプレートエンジンとした独自FWを開発して、モノレポとして運用していました。これはチューニングの余地を自分で確保することや、自分たちのチームにあった規約を作りやすくするための選択です。しかし Promedia の開発は電子版本体のリリースサイクルと外れるためにモノレポの中に入れたくないことや、長年の開発の負債を引き継ぎたくないこと、なによりNextJSエコシステムの発達によって僕たちの要求をカバーできつつあることから、試験的にNextJSを採用して開発してみま
「東京Node学園」は、Node.js日本ユーザグループ主催のNode.js勉強会です。36時限目の今回は、オンラインで開催されました。Naturalclar氏は、node_modulesを意識的に削減することで得られるメリットとその方法を発表しました。 宇宙の中で一番重い「node_modules」 Naturalclar氏：よろしくお願いします。「node_modulesのブラックホールとの向き合い方」という資料で発表します。Naturalclarです。 はじめにちょっと自己紹介すると、本名はJesseと申します。現在、株式会社stand.fmというところで、音声配信アプリを作っています。React NativeでAndroid・iOS向けのアプリを作っています。また、OSS活動をいろいろとやっていて、「React Native Community」というGithub Organiza
Highlights from Git 2.28
EngineeringOpen SourceHighlights from Git 2.28The open source Git project just released Git 2.28 with features and bug fixes from over 58 contributors, 13 of them new. We last caught up with you on the… The open source Git project just released Git 2.28 with features and bug fixes from over 58 contributors, 13 of them new. We last caught up with you on the latest in Git back when 2.26 was released
こんにちは、セキュリティチームでソフトウェアエンジニアをしてる@sota1235です。 明けましておめでとうございます！本年も10X Product Blogを何卒よろしくお願いします。 さて、今回はセキュリティチームで今年の6月ごろから取り組んできたGitHub Dependabot Alertの削減についてお話しします。 サマリーとしては以下です。 今年の6月頃から取り組みを開始 初期はセキュリティチームで毎日トリアージ、泥臭くAlertの対応を行う 主要なRepositoryのAlertは一通り解消、一部は担当チームへの移譲等を行い継続的に維持できる状態へ 結果として半年間で500件弱のAlertをcloseし、残ってるAlertも対応方針が全て確定した状態になりました。 この数が多いか少ないかはソースコードの規模感にも依存するので言及しませんが、この記事では小さいリソースで取り組み
履歴 期間限定で公開されている前夜祭(Day0)の動画リンクを追加しました AWS上に構築したマイクロサービスに対する効率的な性能・負荷テストの実行方法 のスライドを追加しました どんな低スペックPCが割り振られても泣かないで！開発環境をCloudへ移行した話 のスライドを追加しました Amazon Neptuneとサーバーレスから始まった高速バス予約システム開発 のスライドを追加しました CloudbaseでのAWS CDKとStepFunctionsを用いたバッチ処理基盤の爆速構築 のスライドを追加しました Day 0 開発者を魅了するオープンソースソフトウェアSupabaseとは Youtube動画リンク [レポート]OSSエンジニアのBetter than Nothingという生き方 〜 全力で5％を目指せ！ #AWSDevDay | DevelopersIO Youtube動画リ
Self-Hosted Cluster から EKS への移行と Platform の Production Readiness - スタディサプリ Product Team Blog
こんにちは。SRE の @chaspy です。 Quipper では AWS 上で Kubernetes Cluster を運用してサービスを提供しています。 これまで kube-aws を用いて Kubernetes Cluster を Self Host してきましたが、このたび Managed Services である Amazon EKS に移行しました。（以下、 Amazon EKS を EKS と表記します） 本記事では、 Kubernetes Cluster の移行で遭遇した問題をどのように解決したかを説明します。また、数多くの Application が稼働している Platform を移行する際にどのような点を考慮するとよいのか、経験を通して学んだことを共有します。 EKS への移行を検討している方はもちろん、Platform Migration に携わる方にとって学びに
こんにちは。SRE の @chaspy です。 ユーザに価値が提供できなくなってしまうシステム障害は起きてほしくはありませんが、絶対に発生しないとは言い切れません。 そんなシステム障害は、そもそも発生頻度が不定、かつ多くないので、どのように対応すべきかを体系化することは（起きる事象が毎回異なることも相まって）難しいと思います。 本記事では、Quipper において、どのように障害対応を行うのか、また、障害発生時の考え方を紹介します。 障害はどのように対処されていくのか 障害発生フロー Quipper では 標準化された障害時連絡のフロー / 障害レベルがあります。 これによって、障害の内容、影響範囲によっては親会社のリクルートマーケティングパートナーズへのエスカレーションが必要であることと、その基準が言語化されました。また、エスカレーション時に送るメールのテンプレートも用意されており、「誰
Monorepo開発のメリット vs デメリット
Monorepoとは？ Monorepo(モノレポ)とは、アプリケーションやマイクロサービスの全コードを単一のモノリシックなリポジトリ (普通は Git) に保存するパターンを指します。 一般的には、さまざまなアプリ コンポーネントのコードをサブフォルダーに分割し、新機能やバグ修正には Git ワークフローを使用します。 モノリシック アーキテクチャでアプリケーションやシステムを開発するのであれば、たいていは、こうしたアプローチを自然と採用することになります。 通常、このようなMonorepoでは、コードから実行可能なアプリケーションを生成するビルド パイプラインも 1 つだけです。この手法は、メンテナンスはしやすいのですが、全体的な開発速度は落ちます。修正に手間のかかるバグが少しあるだけで、リリース候補版を本番環境にデプロイできなくなってしまうからです。 この記事では、Monorepoと
Webサービス開発の文脈で、モノレポ環境を作る方法について整理しました。 ※バックエンドもフロントエンドも全てTypeScriptで開発している前提 この記事を書いた背景 世間で言われる「モノレポ」がどのように達成されているのか知らなかった 参考記事を読んでると実現方法が異なっていたり、運用のイメージが見えなかったり、ベストプラクティスが分かりづらかった Turborepoのようなモノレポツールを導入すれば解決しそうだが、このツールが何をしてくれるのか理解できなかった モノレポ何も分からない………になった この記事ではモノレポに関連する仕組みを1つ1つ丁寧に把握し、最終的に理想的なモノレポ環境を実現することを目指します。 モノレポとは？ まずは用語の整理から。 モノレポを素直に訳せば「1つのリポジトリ」という意味でしかなく、1つのリポジトリで開発していればそれは「モノレポ」と呼べそうです。
メルカリShopsのキャッシュ戦略
メルカリ Shops の開発 vcl, python, golang, containers, typescript, etc. が入っている monorepo で開発が行われている。 なので、あまり専門性はあってもどの領域でも開発を行う。 メルカリアプリ上で動いているため、 webview がベースとなりパフォーマンスは普段以上に求められている。 技術スタックはこちらを参照 ユーザーへの UX を下げないために。。 First Meaningful Paint を速くするSkeleton などでフィードバックを適切に行う => とりあえず速く結果を返却すればよい 結果を速く返すために考えること 共通な結果はすべてキャッシュし、CDN などを使い近くに置く極力、ユーザーからのアクセスを origin まで到達させない常に新鮮な結果を近くに保持することにより、上記を満たせるようにする =>
eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう - BASEプロダクトチームブログ
フロントエンドチームの右京です。 Vue.js 3 が八月上旬にリリース予定ということで、BASE でもバージョンアップに向けて少しづつアクションを始めています。 Vue.js 3 では多くの機能が追加され開発の幅が広がりますが、一方で削除や非推奨となる機能も多く頭を悩まされている方もいるのではないでしょうか、BASE もそうです。 この記事では ESLint とその Vue.js 向けプラグインの eslint-plugin-vue を利用した、deprecated となる機能へのアプローチを紹介します。 なぜ eslint-plugin-vue か ESLint には Vue.js の SFC のためのプラグインとして eslint-plugin-vue が開発されていて、BASE でもこれを利用しています。 このプラグインには vue/no-deprecated- で始まるルールがい
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
JavaScriptランタイム「Bun v0.5」登場。MySQLやPostgreSQLのデータベース接続対応、新機能「Workspaces」、Bun.dnsなど搭載
JavaScriptランタイム「Bun v0.5」登場。MySQLやPostgreSQLのデータベース接続対応、新機能「Workspaces」、Bun.dnsなど搭載 サーバサイドで実行可能なJavaScriptランタイム「Bun」の最新バージョン「Bun v0.5」がリリースされました。 Introducing Bun v0.5 - bun install workspaces && bun install bugfixes - postgres, mysql, redis & more DB-related npm pkgs work in bun now - Bun.dns && some of node:dns, node:net, & node:tls - new WebSocket supports headers - HTTP client proxy supporthttp
Corepackを使ってNode.jsをアップデートする ⬆️⬆️ 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info [.background-color: #FFFFFFF] Node.js 14は2023年4月でEOL Node.js 14.xは2023-04-30、Node.js 16.xは2023-09-11でEOL(End Of Life) 2023年10月からはNode.js 18と20のみがLTSとしてサポートされるバージョンとなる https://github.com/nodejs/release#release-schedule サマリ Node.jsのバージョンアップは面倒だけど ほとんどのBREAKING CHANGEはライブラリにある npmのバージョンアップは面倒 npm 6とnpm
For repositories with multiple projects, any number of languages, and team members constantly pushing changes, moon will help simplify the experience of working in and maintaining a complex monorepo. Learn more about moon
EngineeringOpen SourceGit’s database internals I: packed object storeThis blog series will examine Git’s internals to help make your engineering system more efficient. Part I discusses how Git stores its data in packfiles using custom compression techniques. Developers collaborate using Git. It is the medium that allows us to share code, work independently on our own machines, and then finally com
Terraform の CI に tfmigrate を導入した話 - スタディサプリ Product Team Blog
こんにちは。 SRE の @suzuki-shunsuke です。 Terraform Monorepo の CI にtfmigrate を導入した話を紹介します。 なお、弊社の Terraform Monorepo に関しては過去の記事も参照してください。 Terraform リポジトリをマージして CI/CD を改善した話 - スタディサプリ Product Team Blog Pull Request の terraform plan の実行結果を S3 に保存して安全に apply - スタディサプリ Product Team Blog Terraform の CI/CD を CodeBuild に移行した話 - スタディサプリ Product Team Blog tfmigrate とは tfmigrate とはなにかについては、 tfmigrate の作者様がこちらの記事で詳し
Figma でアイコンを更新したら GitLab に勝手に MR が作られるやつ - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。最近は社内のデザインシステム整備の仕事もやっており、今回はそちらで作っているアイコンライブラリの話をします。 SVG アイコンを社内 npm で配る みなさん、プロダクト内で利用するアイコンをどのように管理していますか？ 大抵の場合は元になる .svg ファイルが存在し、それを最終的に React コンポーネントで読んだり、あるいは昔ながらのアイコンフォントを生成したりして使っているでしょう。 ピクシブではこれまで各プロダクトがそれぞれの方法でアイコンを生成していました。あるプロジェクトは svg スプライトを生成して <use> タグで読み、またあるプロジェクトは svgr を使い、これまたあるプロジェクトでは woff を生成する npm スクリプトを持ったりしています。 実装方法
ハードシングスを引き起こしたHype Driven Development(HDD) | HiCustomer Lab - HiCustomer Developer's Blog
Hype Driven Development(HDD) シード・アーリーステージのスタートアップの開発者のみなさん、こんにちは。突然ですが、ソフトウェア開発していますか？毎日設計しコードを書いていますか？私は毎日しています。毎日ビジネスドメインと向き合っております。今日はそんなみなさんに、弊社のソフトウェア開発の失敗談（ ハードシングスへの突入と脱出 の「根の深い技術的負債」を掘り下げる内容になっています）を共有します。この失敗からなにか参考になるものがあれば幸いです。 実際に起ったこと 2018年初頭にサーバレスとDDDの導入 弊社のHiCustomerサービスのアーキテクチャはサーバーレスとDDDを軸に設計されました。サーバーレス環境としては、AWS APIGateway、AWS Lambda、AWS DynamoDBを使ったAWS推奨の構成を採用しました。DDDはGolangを使用
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
こんにちは！ソウゾウのSoftware Engineerの@ogataka50です。連載：「メルカリShops」プレオープンまでの開発の裏側の9日目を担当させていただきます。 1日目の記事「メルカリShops の技術スタックと、その選定理由」にあった通りメルカリShopsではMonorepoで開発を行なっています。この記事では主にSoftware Engineerとして、DX (Developer eXperience)の観点からPJ初期からMonorepo上で開発を進めていった中で経験したこと感じたことを実際に起きた出来事とともに共有したいと思います。 Monorepoとは Monorepoとは単一のリポジトリに特定のプロジェクトのコードをすべて含めるパターンです。 下記のような利点があると言われています。 コードの可視性 統一されたバージョン管理, Single Source of T
Cloud FunctionsをGoで書く。またはFirebaseのためのマイクロサービスアーキテクチャ - laiso
Firebase Advent Calendar 2019 の17日目です。16日目はKesin11さんの「Firebase Emulator Suiteをフル活用してTDDで開発しよう」でした。 はじめに FirebaseプロジェクトでCloud Firestoreを利用する時は通常Node.jsによるCloud Functionsでトリガーとなる処理を記述します。その他には関連するAPIサーバー、WebアプリのフロントエンドのSSR、バックエンドの非同期処理など、多くの場面でCloud Functionsが活用されています。 この開発→デプロイサイクルをお手軽に行ってくれるのがfirebase-toolsというnpmモジュールです。JavaScriptでFunctionを実装し、firebase deployコマンドを実行するだけでFirebaseプロジェクト用のCloud Funct
みなさんこんにちは。 現在、フロントエンドでは宣言的UIが大流行しており、そのためのフレームワークも Vue.js をはじめ複数存在しています。 （React はフレームワークではなくライブラリです） 同種のソフトウェアや言語があれば、自分の好みを巡って意見を出し合うのはエンジニアの常でして。 それがパフォーマンスに関することであれば、無関心ではいられなかったりするわけです。 とはいえ Evan You もいうように特定のフレームワークやライブラリが現実世界のパフォーマンスの問題を銀の弾丸のように解決できるわけではありません。 フレームワークの開発者が数10ミリ秒単位でパフォーマンス改善に勤しむなか、利用する企業が（数100ミリ秒要するような）広告会社のスクリプトを迷いなく追加したりするのですから。 それでも僕たちは、パフォーマンスの話題をせずにはいられません。 だって、それがエンジニアで
Follow on FacebookThis is a comprehensive tutorial on Monorepos in JavaScript/TypeScript --- which is using state of the art tools for these kind of architectures in frontend applications. You will learn about the following topics from this tutorial: What is a monorepo?How to structure a monorepo architecture?How to create a monorepo?Which tools to use for a monorepo?How to perform versioning in a
TL;DR 弊社で実験的に導入を始めている、2024初頭時点で今後に期待が高まる最新のweb技術についてまとめています。 新規プロダクトの技術選定に迷っている方などにおすすめです。 Turborepo - Monorepo管理 モノレポ構成における懸念点の一つとして、プロダクトが大きくなるにつれてビルド時間が膨大になって来る点です。 TurborepoはRust製、並列化、差分ビルド、Remote Cashingなど、肥大化しがちなmonorepoのビルド時間を短縮するメソッドがたくさん詰まっています。 Bun - Package manager (runtime, test tool) 正確にはBunはランタイムですが、Nextなど厳密にはNode.jsで動かす必要があるため、弊社では（ほぼ）パッケージマネジャーとして活用しています。 pnpmやyarnと比較してnpm installな
Mercari Microservices Platform における Terraform 0.12 対応 | メルカリエンジニアリング
Platform Group, Platform Infra Team の @dtan4 です。 現在メルカリ/メルペイのマイクロサービス基盤 (Microservices Platform) では、様々なクラウドリソース・SaaS を開発者に提供しています。これらのリソースを宣言的に管理するための手段として HashiCorp Terraform を利用しており、数百のマイクロサービスのインフラが Terraform によって管理されています。 1年以上前の話ですが、Terraform 0.12 がリリースされました。昨年後半に、我々が管理している Terraform リポジトリにおいて Terraform 0.12 対応作業を行いました。本記事では、我々の環境においてどのように Terraform 0.12 対応作業を行ったかについて説明します。 Terraform 0.12 対応の動
はじめに フロントエンドエンジニアの @mk0812 です。自分は普段BackOfficeというチームで新規機能開発を担当しています。 この記事ではBASEのフロントエンド周りの事例として「Monorepo」を紹介します。 エンジニアの皆さんなら1度は聞いたことあるかもしれませんが、BASEではここ最近Monorepoにしていきました。 具体的にどこをMonorepoにしてるかというとBASEの管理画面にある基本機能とBASE Appsです（下図）。 前者はBASE管理画面で使用する機能を指しており、後者はショップにより充実した設定を追加したり、新しい機能が必要となる時に追加できる機能で、数多く提供されていて、その機能単位もしくはApp単位でMonorepo化されています。 基本機能とBASE Apps Monorepo とは 「Monorepo」とは単一のリポジトリである特定のプロジェク
EDIT: A previous version of this post recommended publishConfig, operating under the mistaken belief that it could be used to override "exports" during npm publish. As it turns out, npm only uses "publishConfig" to override certain .npmrc fields like registry and tag, whereas pnpm has expanded its use to override package metadata like "main", "types", and "exports". There are a number of reasons y
2022年のオープンソース活動の振り返り記事です。 今までの振り返りの一覧です。 今年のオープンソース活動振り返り @ 2021 | Web Scratch 今年のオープンソース活動振り返り @ 2020 | Web Scratch 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2022年のGitHubのPublicなContributionsは7000~8000ぐらいを推移していました。 Privateリポジトリも含めると大体1.5
2020年のオープンソース活動の振り返り記事です。 今までの振り返り。 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2020年のGitHubのPublicなContributionsは7000~9000ぐらいを推移していました。 最近はPrivateリポジトリをメモやブックマーク管理などでも使うようになったので、Private比率は増えてPrivateなContributionsは13400でした。 GitHub Issuesを個人
フロントエンドエンジニアの小林和弘です。 去年の 4 月に「Web アプリを 3 つ使ったサービスを 3 ヶ月でつくりたい」という話が降ってきて、無茶を現実にした話をします。 新規サービス「やくばと」で Workspaces のモノレポを使って、医療機関画面、薬局画面、患者画面の 3 つの Nuxt を構築しました。 やくばととは 医療機関、薬局、患者さまの間でやり取りされる医療機関起点の薬局向け処方せん画像事前送信サービスです。処方せんに関する業務負荷を軽減すると共に、患者さまの大きな負担である医療機関、薬局での待ち時間を軽減するということを主な目的としたサービスです。 医療機関、薬局の DX を進め、患者さまの負荷軽減に貢献できる素晴らしいサービスになっています。 開発チームでは医療機関、薬局、患者さまに提供している Web 画面をそれぞれ医療機関システム、薬局システム、患者システムと
割とよくある構成かなと思いますが、私たちは主に "ドキュメント管理の難しさ"と"共有リソースの管理コスト"、"分業制によるチーム内の分断" に課題感を持っていました。それぞれの問題とそれらが解決されどのようになったかを詳細に見ていきましょう。 抱えていた問題とMonorepo移行後 私たちが抱えていた問題がmonorepo移行によってどのように解決されたかをまとめます。 ドキュメントが分散して探しにくい問題 Before プロジェクトに関するドキュメントが複数のリポジトリに分散するためにドキュメントの検索性や一覧性が低下しており、私たちのプロジェクトについて知りたい人が情報を探すのが難しい問題がありました。他方で、私たち自身も、どこに情報を残すかで迷うことも少なくありませんでした。 After プロジェクトに関する情報が1つのリポジトリに集約されたため、ドキュメントの探しやすさが向上しまし
🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package 🌕 moon 一貫性を持ったmonorepo管理ツール for JavaScript ハッシュを使ったファイルキャッシュ プロジェクトのパッケージ間の依存関係の分析とタスク実行 Node.js/npmパッケージマネージャーのバージョン管理と一貫性 TypeScriptのProject Referendcesの一貫性 比較 Nx: The Framework + Pluginで拡張する Lerna: Nx傘下、ライブラリ公開向け Turborepo: タスク実行の最適化をする moon: monorepoでの一貫性を提供する Packemon: moonと同じ作者。ESM/CJSのライブラリ公開向け 比較(言語) Nx: TypeScript + C++[^1] Turborepo: Go
Flutter Project Structure: Feature-first or Layer-first?
When building large Flutter apps, one of the first things we should decide is how to structure our project. This ensures that the entire team can follow a clear convention and add features in a consistent manner. So in this article we'll explore two common approaches for structuring our project: feature-first and layer-first. We'll learn about their tradeoffs and identify common pitfalls when tryi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザとNode.jsで動く1kBのキーバリューストレージライブラリを書いた
LINE NEWS フロントエンドの自動テストの改善
日経の新媒体における、既存資産を活かすフロントエンド技術選定 — HACK The Nikkei
Node.jsの“ブラックホールに立ち向かえ！ 膨れ上がる「node_modules」の容量を削減する4ステップ
GitHub Dependabot Alertを愚直に潰し込んだ話 - 10X Product Blog
AWS Dev Day 2022 Japan スライドまとめ - Qiita
障害対応とポストモーテム - スタディサプリ Product Team Blog
Webサービス開発でのmonorepo環境(Turborepo, nx)
ウェブとReact Nativeアプリのコード共通化による同時展開 - Hello Tech
Corepackを使ってNode.jsをアップデートする ⬆️⬆️
A developer productivity tooling platform. | moonrepo
Git's database internals I: packed object store
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
メルカリShops での monorepo 開発体験記 | メルカリエンジニアリング
Reactに有利なベンチマークを Vue.js で試したところ大差なく、そして…
Monorepos in JavaScript & TypeScript
【2024初頭】新規開発で使ってみたいモダンフロントエンド最前線
BASEフロントエンド Monorepo 化の取り組み - BASEプロダクトチームブログ
Live types in a TypeScript monorepo
今年のオープンソース活動振り返り @ 2022
今年のオープンソース活動振り返り @ 2020
2ヶ月半で Nuxt サービスを 3.5 個つくった話 - メドピア開発者ブログ
言語が違う複数のリポジトリをmonorepoへ移行した話
🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package