この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele

Editor’s note: As of 5 October 2023, this article has been updated to include information about security considerations, performance optimization with Electron.js, scalability, and modular design. A while back, I began working on a side project called taggr, a completely offline, interactive photo exploration app. Developing taggr required me to navigate up from the lowest level of app complexity,

April 25, 2022 Four Eras of JavaScript Frameworks April 25, 2022 I started coding primarily in JavaScript back in 2012. I had built a PHP app for a local business from the ground up, a basic CMS and website, and they decided that they wanted to rewrite it and add a bunch of features. The manager of the project wanted me to use .NET, partially because it’s what he knew, but also because he wanted i

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte

Muneaki NishimuraSenior Security Engineer at Recruit Technologies Co., Ltd.

Learning from Mini Apps Thomas Steiner Slides: goo.gle/learning-from-mini-apps @tomayac tomayac tomac@google.com

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい

これは何か キーワード 横断的関心事とは Higher-Order Components Vue と Higher-Order Components Render Props Vue の Scoped Slots Render Props と Higher-Order Components Mixins Mixins => HOCs => Render Props => Hooks Vue Composition API Composition API RFC | Vue Composition API: 参考 URLs これは何か 複数のコンポーネントが必要とする機能を共有可能にする方法を整理してみました。プロコンとこれから。基本的には 参考 URLs にあるドキュメントの切り貼りです。 キーワード Mixin 高階コンポーネント (Higher-Order Components) Re

2019.10.11(FRI) 新潟最大級のモバイルアプリカンファレンス MOBILE CREW NIIGATAでの講演資料です。 アプリ開発はプロダクトのステージや体制など外的要因からも影響を受けています。 本講演ではAndroidアプリをテーマに変化に強いアーキテクチャや構成の選択的アプローチを紹介し、 プロダクトにおいてソフトウェア開発者ができる貢献、アーキテクチャの価値を示します。 カンファレンス概要：https://www.mobilecrew.jp/ 【こんな人にオススメ！】 ・現在モバイルアプリ開発に携わっている技術者及びデザイナー・その他関連職 ・モバイルアプリ開発に興味があるが、情報のキャッチアップの場に困っている ・これからモバイルアプリ開発者を目指す学生

宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql

日経電子版の最近の取り組みをマイクロフロントエンドとPWAに絡めて紹介します。（Developers Summit 2019でお話した内容です）

JavaScript2 シェアフル Advent Calendar 2018 10 日目の記事です。 Microsoft EdgeがChromiumベースになるということで賑わっていますので、私も話に乗っかりたいと思い、IE6の話を書くことにしました。 BabelとParcelとHyperappでIE6対応SPA作ってみました デモ: https://boiyaa-ie6-compatible-spa.appspot.com ソース: https://github.com/boiyaa/ie6-compatible-spa これを見ているほとんどのみなさんはIE6を持っていないと思うので、↑を開いてもただの簡素なSPAでしかありませんが。。 記事の最後に載せた画面キャプチャのようになります。 IE6で見る方法 Windows XP マシンを入手するか、BrowserStack の有料プラン

こんにちは、aggre です。 最近はマイクロフロントエンドなどの文脈で、Web Components や、その要素技術である Custom Elements などの話題をよく聞くようになりました。 マイクロフロントエンドの文脈においては Web Components の実装そのものは React や Vue でもよいことになっています。実装を隠ぺいして境界をクリーンにするのが Web Components なので、マイクロフロントエンドは相性のよい活用です。 しかしせっかく Web Components を採用するなら、その実装の選択肢に 標準仕様の Web Components もあることを知っておくといいと思います。 標準仕様の Web Components でも React や Vue を代替することができるようになっていることを理解すると、組み合わせて使うときの解像度も変わるはず