転職会議のフロントエンドパフォーマンス改善〜React/Next.jsでWeb Vitals健全化、スコア2.5倍改善を達成した手法の全て - LIVESENSE ENGINEER BLOG

2022/12/15 21 users LIVESENSE ENGINEER BLOG 手法 全て

これは Livesense Advent Calendar 2022 DAY 15 の記事です。 はじめに 転職会議事業部エンジニアの、池田、犬島、佐藤、浜田です。 転職会議は、ユーザーの口コミ投稿によって成り立っている転職サイトです。 フロントエンドはReact/Next.jsによる独立したマイクロサービスとして切り出されており、BFFを通じてバックエ... 続きを読む

フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた

2022/09/11 192 users フロントエンド界隈 TypeScript 技術スタック 昨今

T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。 またバックエンドとフロントエンド、またBFFによる構成において、いかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが... 続きを読む

DMM GAMESのプラットフォームリプレイスを支えるBackends For Frontends (BFF) の裏側 - DMM inside

2022/06/24 10 users リプレイス 松下 リプレイスプロジェクト フロントエンド開発

はじめに こんにちは、合同会社EXNOAプラットフォームマイグレーション部の松下です。DMM GAMESのオンラインゲームプラットフォームのリプレイスプロジェクトでフロントエンド開発を担当しています。 プラットフォームマイグレーション部では2020年3月よりオンラインゲームプラットフォームのリプレイスに取り組んできま... 続きを読む

話題騒然！に全然なっていない Java x TypeScript な Web フレームワーク "Hilla" の紹介

2022/05/03 14 users TypeScript フレームワーク exit 話題騒然 対象

あまり話題になっていない Web フレームワーク "Hilla"[1] を紹介したいと思います（もう少し話題になってほしい）。 BFF を Java で作りたい、または作らざるを得ない人向けなので該当しない方は、ここで exit です。Hilla は、SSR とかないので SEO が不要なシステムが対象になるかと思います。 Hilla の最大の特徴は... 続きを読む

NestJSでスケーラブルなBFFを構築。メルカリShopsエンジニアがGraphQL活用のリアルを語る【技術選定の裏側：GraphQL編 vol.2】

2022/03/09 25 users NestJS GraphQL編 リアル 構築 技術選定

事前スキルチェックで効率のいい転職活動を。IT/WEBエンジニアのスマートな転職活動ならFindy 続きを読む

データ指向アプリケーションデザインから見るGraphQL

2022/03/04 12 users GraphQL データ指向アプリケーションデザイン SOE

グラフモデルとSoEとGraphQL / TECH STAND #7 GraphQL 2022/03/03 に行われた stand.fmさん主催の TECH STAND #7 にて上記のタイトルで登壇しました。 今回の内容は GraphQLの採用を検討するにあたって、RESTとの違い、BFFとの違いをデータの観点から言語化したかった Hasuraが良いという意見と, Apolloやgraphql-ruby, ... 続きを読む

GraphQLを導入する時に考えておいたほうが良いこと

2022/03/03 392 users GraphQL Sue メルカリShops 技術スタック 実装

はじめに こんにちは、ソウゾウSoftware Engineerの@sue71です。連載：メルカリShops 開発の裏側 Vol.2の13日目を担当させていただきます。 以前メルカリメルカリShopsの技術スタックと、その選定理由でBFFの実装にGraphQLを採用していることをお伝えしました。メルカリShopsをリリースしてから約半年たった今、これまで... 続きを読む

NestJS を使った GraphQL Server の実装 | メルカリエンジニアリング

2021/08/19 19 users メルカリエンジニアリング ソウゾウ NestJS レイヤ 実装

ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF（Backend for Frontend） レイヤとして用意した GraphQL サーバについて、NestJS ... 続きを読む

Backends For Frontends（BFF）はじめました - ZOZO Technologies TECH BLOG

2021/04/30 16 users Backends For Frontends

はじめに こんにちは。EC基盤本部SRE部プラットフォームSREの三神です。 2021年3月18日、ZOZOTOWNは大規模なリニューアルをしました。その中でも、コスメ専門モールのZOZOCOSMEと、ラグジュアリー&デザイナーズゾーンのZOZOVILLAを同時にオープンし、多くの反響をいただきました。 今回のリニューアルではBackends For F... 続きを読む

BFF、Storybook、TypeScript、App Center、Sentry――Web開発者によるReact Native開発、運用のポイント：Webフロントエンドエンジニアだけでスマホアプリ開発（3） - ＠IT

2020/10/13 6 users Sentry TypeScript StorYBook 運用

Webフロントエンドエンジニアだけでスマホアプリ開発（3）：BFF、Storybook、TypeScript、App Center、Sentry――Web開発者によるReact Native開発、運用のポイント リクルートテクノロジーズが開発している、B2Bのスマホアプリ『Airシフト メッセージ用アプリ』。Webフロントエンドエンジニアだけで行っている開発の裏側... 続きを読む

厳選TypeScript 〜おすすめしたいライブラリ、ツール、ノウハウ、情報源のリンク集〜 - Qiita

2020/06/17 158 users Qiita ライブラリ ノウハウ 実践TypeScript

個人的にTypeScriptプロジェクトで使って良かったと感じたライブラリやツール、役立ったノウハウ・情報源へのリンクをまとめていきます。随時更新します。 記事更新時に通知を受け取りたい方はこの投稿を「ストック」してください。 追加された内容は更新履歴をご覧ください。 書籍 『実践TypeScript ~BFFとNext.js&Nuxt... 続きを読む

Protocol BuffersでgRPCとGraphQL両対応のコードを生成するプラグイン書いた - blog::wnotes.net

2020/05/22 17 users grpc Protocol Buffers GraphQL

gRPC、あるいはGraphQL 昨今のAPI開発にgRPC、またはGraphQLを採用するケースは増えてきていて、ドメインロジックをgRPCで実装して、フロントエンド(BFF)はGraphQL経由のHTTP一本で取得するのはベストプラクティスの一つだと思っています。 とはいえ人的リソースや管理の問題から、ProtobufとGraphQLスキーマを両方メン... 続きを読む

Universal Data Fetch ライブラリ、 Specter の紹介 - from scratch

2019/12/16 8 users Specter backend データフェッチ client

この記事は Recruit Engineers Advent Calendar 2019 の 16日目の記事です。 adventar.org 最近僕が作っている OSS である Specter の話をします。 github.com Specter とは Client から Backend と BFF から Backend への Universal なデータフェッチを提供してくれるためのツールです。以下の特徴を持ちます。 軽量 Ty... 続きを読む

FOLIOのフロントエンドで働くということ - takanorip blog - Medium

2019/12/02 5 users Folio medium クライアントアプリケーション

バックエンドはScalaで書かれていてマイクロサービスになっています。フロントエンドはNode.js（koa.js）で書かれたBFFとReactで書かれたクライアントアプリケーションがあり、BFFではマイクロサービスのAggregationとServer Side Renderingを行っています。 フロントエンドの記述構成はReact/Redux/Flow/CSS Moduleです... 続きを読む

ヤフーのフロントエンドと Node.js の関係性 - Yahoo! JAPAN Tech Blog

2019/11/20 115 users ヤフー node.js フロントエンド Yahoo 関係性

こんにちは。今期から Web フロントエンド領域で黒帯を務めることになりました伊藤（@koh110）です。 普段は情報システム本部に所属しチャットなど内製基盤の開発・運用をしつつ、Node.js 言語サポートチームとしてサーバサイド TypeScript の活用や、SSR（Server Side Rendering）、BFF（Backends For Frontends）のチ... 続きを読む

【書評】「実践TypeScript」のレビューに携わって - potato4d log

2019/06/26 42 users 実践TypeScript 書評 potato4d log

本日、6/26 に発売開始された吉井 健文さんの「実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~」の執筆に、レビュアーという形で協力させていただきました。 書籍内に Vue / Nuxt.js における TypeScript の項が存在したためそこからスタートし、それ以外の部分についても一通り読んだ形です。 献本もいただいたので折... 続きを読む

ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割

2019/05/21 22 users jjug_ccc ホットペッパービューティー ccc_c

ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割 1. ホットペッパービューティーにおける モバイルアプリ向けAPIの BFF/Backend分割 Nawate Ippei @JJUG 2019 Spring #jjug_ccc #ccc_c4 2. ⾃⼰紹介 • Nawate Ippei • リクルートライフスタイル • 2016/04に新卒⼊社 • ⼊社してからずっとホ... 続きを読む

iOSエンジニアがBFF環境を構築しました #bff - Timers Tech Blog

2019/05/17 27 users iOSエンジニア Timers Tech Blog

もう少しでAlt Confの為にアメリカに出発なので少し緊張してきたiOSアプリエンジニアのかっくんです。 少し前にリリースした機能で、APIサーバーでもクライアントサイドでもロジックを実装しない中間層として BFF を構築・リリースしました。 BFFとは BFFはBackend for Frontendと呼ばれ、クライアントの為のサーバー環... 続きを読む

フロントエンドエンジニアの積極募集を始めました - SmartHR Tech Blog

2019/04/26 62 users フロントエンドエンジニア nabeliwo 表題 経緯 通り

こんにちは、エンジニアの nabeliwo です。 先日リリースされたカスタム社員名簿ではフロントエンドと BFF 層の開発を担当しました。かなりサクサク動くので機会がありましたらぜひ触ってみてください！ カスタム社員名簿 さて、表題の通りですがフロントエンドエンジニアの募集を始めました。 本記事ではその経緯につい... 続きを読む

プロジェクトマネージャーとは BFF である｜ぴかし｜note

2018/12/19 26 users PJM Folio Note プロジェクトマネージャー 性質

FOLIO で フロントエンドチームリーダー 兼 プロジェクトマネージャー (PJM) をしている @pika_shi です．PJM としては，おまかせ投資 を今年の春から見ていて，11 月にようやくローンチしました． フロントエンドとプロジェクトというと，性質の違う 2 つのものを見ていると思われるかもしれません．自分も当初はそう思... 続きを読む

Apolloでの綺麗なAPI実装（GraphQL）を試す

2018/06/10 39 users Apollo GraphQL redux React grpc

はじめに 今回のサンプルは以下に用意しました。 Apollo Server & Apollo Clientサンプル 以前こんな記事を書きました。 React(+Redux)+gRPCで実現するクリーンアーキテクチャ＋マイクロサービス構成 BFFのフロントエンドAPI部分に関して、次の記事を見てクライアント通信の部分をGraphQLで実装できるとより柔軟で堅牢な気がしたので試してみました。 世のフロ... 続きを読む

BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由：マイクロサービス/API時代のフロントエンド開発（1） - ＠IT

2018/03/13 139 users Twitter Netflix リクルートテクノロジーズ

マイクロサービス/API時代のフロントエンド開発（1）： BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由 (1/2) マイクロサービス/API時代のフロントエンド開発に求められる技術の1つBackends For Frontends（BFF）について解説する連載。初回は「超入門」としてBFFの概要や事例を中心に... 続きを読む

BFF/SSRの話 // Speaker Deck

2018/02/19 113 users SSR Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

BFFの設計とflowtype - Qiita

2017/12/07 28 users Qiita Flowtype Folio バス プレゼン

株式会社FOLIOのフロントエンドエンジニアをしています、諸見里です。 この記事は FOLIOアドベントカレンダー 7日目の記事です。昨日の記事はバズらせてサーバーを落とすことで有名な弊社CDOの 超心に刺さってイヤでも印象に残るプレゼンの方法 でした。それほどバズらずサーバーは落ちなかったようです。 会社のアドベントカレンダーということで、今回はFOLIOのBFF(Backend For Fro... 続きを読む

Microservices Meetup Vol.5 (API Gateway & BFF) を開催しました

2017/05/01 44 users Twitter qsona 全編 API Gateway 主催

Microservices Meetup Vol.5 (API Gateway & BFF) を開催しました こんにちは、qsona ( twitter ) です。弊社FiNCでは Microservices Meetup という技術勉強会を開催しており、今回で5回目の開催になりました。毎度盛況でありがたい限りです。 今回も主催として全編じっくり参加させていただきましたが、4人の方の発表、そしてパ... 続きを読む