マイクロフロントエンド

最近、マイクロフロントエンドという技術を知っていろいろ調べていたら以下のような記事を見つけました。 martinfowler.com マイクロフロントエンドとは何か、非常に分かりやすくまとまっています。 なので日本語で要約・加筆して後で読み返しやすくしていこうと思います。 マイクロフロントエンドとは マイクロフロントエンドとは、 単体で実行可能な、サイトから切り出された特定のUI領域 であり、Webフロントエンドの新たなアーキテクチャです。 この特徴から以下のようなメリットがあります。 インクリメンタルアップグレード シンプルで分離されたコードベース 独立したデプロイ 自立したチーム インクリ…

こんにちは。 SaaS Product チームの板倉です。 SaaS Productチームでは開発運用しているサービスのマイクロサービス/マイクロフロントエンド化を進めています。 マイクロフロントエンドを実現する技術として採用しているフレームワークはAngular(TS, Dart)、Vue.js、Reactとなっています。 どれも素晴らしいフレームワークだと思いますが、私たちが進めているマイクロフロントエンドのやり方だと他にも良いフレームワークがあるんじゃないかと感じることがありました。 以前から気になっていたSvelteをブログにまとめながら自分でもキャッチアップしてみようと思ったのが今回…

はじめに こんにちは！ エンジニアの高橋です。 みなさんは、Micro Frontends （以下マイクロフロントエンド）という言葉は聞いたことはありますか？ 自分は、数年ほど前から話題になっているキーワードとして聞いたことはありましたが、「フロントエンドのマイクロサービス化」程度の認識しかありませんでした。 では、マイクロフロントエンドとマイクロサービスの違いはなんでしょうか？ また、マイクロフロントエンドのアプローチを採用することで、具体的にどういったメリット・デメリットがあるのでしょうか？ 今回は、マイクロフロントエンドについて、調査した結果をまとめてみたいと思います。 概要 マイクロフ…

こんにちは。SaaS Product Divisionのとみたです。 WebComponentsを使ってみよう(その1)の続きです。 今回は、Reactアプリケーションをカスタムエレメントとし、さらに別のフレームワークから使う、といったマイクロフロントエンドをやっていく上で実践的な部分について記載します。 Reactでカスタムエレメントを作る 前回の記事では、ピュアなJavaScriptで実装する方法を書きましたが、では、Reactなどのフロントエンドフレームワークではどのように実装すればよいかを書いていこうと思います。 大抵は、ピュアなJavaScriptと同じです。 以下のようにすることで…

はじめに 最近の業務で、SaaSと連携したシステム構築によりWeb APIにふれる機会が多くなったり、Next.jsでシステムを構築する中で、自身でAPIを作成することも出てきたので知識の整理をしたいと思い、「Web API: The Good Part」を読んでみました。 Web API: The Good Parts作者:水野 貴明発売日: 2014/11/21メディア: 大型本 感想 API設計の具体的なベストプラクティスをまとめて知ることができた 本書を読むまでは、なんとなくググったり、先輩社員に聞いて設計していることが多かったので、まとまった知識がなかったように思います。 近いうちに…

翻訳を担当した書籍『モノリスからマイクロサービスへ ―モノリスを進化させる実践移行ガイド』（オライリー・ジャパン）が12月26日に発売になります。本書は2019年11月にO'Reilly Mediaより出版されたSam Newman著『Monolith to Microservices: Evolutionary Patterns to Transform Your Monolith』の全訳で、マイクロサービスアーキテクチャを解説した書籍として日本でも定評のある『マイクロサービスアーキテクチャ』（原題『Building Microservices』）の著者であるSam Newmanによるマイク…

この記事はテックタッチアドベントカレンダー16日目の記事です。 15日目は terunuma サンによる Chrome 拡張の Overview of Manifest V3 を翻訳しました でした。Greasemonkey 黄金期の牧歌的な時代を過ごしてきた身なので、ブラウザの拡張がどんどん肩身が狭くなっていくのは少し寂しかったりします。セキュリティ上仕方ないということなのかもしれませんが。 エンジニアの jigsaw です。今夏からパートタイムでテックタッチさんのお手伝いをしています。もうすぐ人生初のマイカーが納車されるので、今からどこへ行こうか考えながら床につく日々を送っています。 テッ…

SaaS Product Team の野口です。 以前にもいくつかの記事で触れたように、SaaS Product Team では XP（エクストリーム・プログラミング）をベースとしたチーム開発に取り組んでおり、ほぼ全ての作業をペアで行っています。*1 かく言う私もこのチームに入ってから 1 年以上の間 *2、日々ペアプログラミングに取り組む中でわかってきたことがあるので、この記事で共有したいと思います。 XP はうまくいくことを極限（エクストリーム）まで推し進めることから生まれた Kent Beck の『エクストリームプログラミング』の「はじめに」には、以下の記述があります。 本書は、良いソフ…

Micro Frontends in Action作者:Geers, Michael発売日: 2020/10/13メディア: ペーパーバック フロントからバックエンドあとインフラを含んだ小規模チームをユニットとして、プロダクトを1ユニットで開発できる単位にどのように分割するか、何種類か方法を挙げながらそれぞれのメリット・デメリットを論じた感じ。バズりはじめた？感のフロントのマイクロサービスだけど、この方法が適するのは開発からリリースまで担当できるチームが複数開発にあたる場合なので、プロダクト規模というよりチーム規模で課題にはならないのが理解できたのが一番の収穫。これはメルカリとか規模じゃないと…

会社のフロントエンドエンジニアの方にReact/Typescript関連のおすすめのドキュメントを聞いたところりあクトを教えてもらいました。 読んでみてとてもおもしろく、おおげさですが感動してしまったので感想を書きます。 読んだ本 りあクト！ TypeScriptで始めるつらくないReact開発 第3版(200912) Ⅰ. 言語・環境編 (https://oukayuka.booth.pm/items/2368045) Ⅱ. React基礎編 (https://oukayuka.booth.pm/items/2368019) Ⅲ. React応用編 (https://oukayuka.boo…

×178 ソフトウェアの互換性と僕らのUser-Agent文字列問題｜Rui Ueyama｜note ×149 第2次大戦で沈没のドイツ軍艦、80年ぶりに発見 ノルウェー沖（CNN.co.jp） - Yahoo!ニュース ×58 TikTok reveals details of how its coveted algorithm works - Axios ×55 The state of QUIC and HTTP/3 2020 | Fastly ×54 Sync vs. Async Python: What is the Difference? - miguelgrinberg.com …

×147 リクルートテクノロジーズ エンジニアコース新人研修の内容を公開します！（2020年度版） | リクルートテクノロジーズ メンバーズブログ ×114 Announcing the newest AWS Heroes – August 2020 | AWS News Blog ×106 iOS版Lightroomの最新版ですべての写真が消えてしまうバグが発生 - GIGAZINE ×101 GitHub - DIYgod/RSSHub: 🍰 Everything is RSSible ×75 Event Queue · Decoupling Patterns · Game Program…