Vol.226
Microfrontends: the good, the bad, and the ugly by Kevin Ball Jump to heading
マイクロフロントエンド: そのメリット、デメリットとは Jump to heading
マイクロフロントエンドという考え方について、その意味と、メリット・デメリットを解説していく。
「マイクロフロントエンドアーキテクチャ」とは、マイクロサービスからモデル化されたフロントエンドアプリケーションを構築するためのアプローチです。フロントエンドを独立してデプロイ可能な疎結合アプリケーションのセットに分割し、それらを組み合わせて、ユーザー向けのアプリケーションを作り上げます。
メリットとしては、アプリケーションが大規模であっても、分割された小規模のアプリケーションとして管理でき、デプロイも独立して行えるという点が挙げられるが、システム全体でバグの追跡、バージョンの管理などが複雑になるという面を併せ持っているという点がデメリットといえる。また、パフォーマンスの低下や、一貫性の欠如といった面も問題も。より詳細な解説はこちらから。
How To Save 35 Hours Using A Design System by Marcin Fuja Jump to heading
デザインシステムを利用して、どのように35時間の節約ができたのか Jump to heading
デザインシステムは時間を節約するとよく言われているが、実際の所どれだけの時間が節約されるのだろうか。Marcin氏は、実際に仮想のシナリオを立て、デザインシステムがある場合とない場合にどういった違いがあるのかを解説していく。デザインシステムを活用することで、不要で繰り返しの多い作業をすべて取り除くことができ、合理的に作業を進めることができると話す。
Good Code Reviews, Better Code Reviews by Gergely Orosz Jump to heading
良いコードレビュー、悪いコードレビュー Jump to heading
10年以上コードレビューをしてきたというGergely氏によるコードレビューをする際のTipsの紹介。
- コードレビューでカバーする範囲について
- レビュー時のトーン
- 変更依頼と許可について
- コードレビューから対話へ
- あら探し
- 新人へのコードレビュー
- 異なるオフィス、タイムゾーンでのレビュー
- 組織的なサポート
Web Components Jump to heading
Why I use web components by Andrea Giammarchi Jump to heading
Andrea氏はWeb Componentsのメリットや、よくある質問を取り上げながら、なぜWeb Componentsが有用なのかについて解説していく。
- プログレッシブ・エンハンスメントの観点
- CSSの観点
- プラットフォームの観点
Why I don’t use web components by Rich Harris Jump to heading
Rich氏はAndrea氏のポストとは対象的に、なぜWeb Componentsの技術に懐疑的であるかを記事に残している。対象的な2つの記事を比べながら読んでいただきたい。
The Truth about Web Components and Frameworks by Dion Almaer Jump to heading
Webコンポーネントvs.フレームワークの話題がなぜ何度も取り上げられるのか。Dion氏によるWeb Componentsについてのオピニオン。
Web Components Tutorial for Beginners [2019] by Robin Jump to heading
Web Componentsについて基礎から解説していく。チュートリアルでは実際にドロップダウンメニューのコンポーネントを作成する。
In Brief Jump to heading
- Functional JavaScript: What are higher-order functions, and why should anyone care? by Christian: 高階関数について。その定義から、JavaScriptでどのように扱えるかについてコードを交えて解説していく
- 8 DOM features you didn’t know existed by Louis Lazaris: DOMを扱う際に使える便利な機能を紹介する。JavaScriptで実装せずともできることが多々ある
- How to test for accessibility with Cypress by Josh McClure: E2EテストツールであるCypressを用いて、アクセシビリティのテストを行う方法について
- Menus with “Dynamic Hit Areas” by Chris Coyier: hoverした際に開く別のメニューにフォーカスする際、
動的ヒット領域
という考え方を適応することで、ユーザビリティを向上できる - Best practices for building a large scale react application by Aman Khalid: Reactで大規模開発する際に覚えておきたいポイントを紹介していく