フロントエンドの技術選定 ~2023を振り返る~ Lunch LT での発表資料です https://findy.connpass.com/event/306714/
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです(記事執筆時点1)。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした(Promiseが解決されるまでレンダリングできない)ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
はじめに タイトルにある通り Next.js + Vercel + swr + TypeScript という構成で短期間チーム開発をした。 以下のように特殊な状況なので色々試してみた。 開発状況 約3週間の短期間開発。 世間にリリースしない。プロトタイプを作って終了。メンテナンスもしない。 フロントエンドを触るのは自分を含めて3人。 自分・フロントの経験もあるバックエンドエンジニア・フロントエンドの経験が浅いエンジニアの3人。 ログイン機能有りのSNS的なもの。既に世の中に存在するプロダクトと似てる。 それぞれ選定理由と使用感を雑に書いていく。 Next.js github.com 環境構築が楽 Node.js環境さえ整えてもらえればすぐ動く。 ライブラリが最小限で済む Create React Appも環境構築が楽だが使われているライブラリのドキュメントを探すのが初学者には少しハードルが
nodefest@2018.11.23 html5j@2018.11.25
SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記(はてブコメントより) Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの?」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ(Gentleさ)を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
The document discusses React Native for Android. It explains that React Native uses React to render user interfaces and runs on both Android and iOS. It describes how React Native works on Android by using a ReactRootView within an Activity to display the JavaScript UI. It also covers how to create Native Modules that allow exposing Android APIs to JavaScript code.Read less
東京Node学園祭 2017 Nov 25 React Nativeアプリで「E2Eやってみよう」と思い実行に移した話 E2Eテストやってみようかな、と思っている人を想定
This document summarizes a presentation about React Native given at DroidKaigi 2017. It discusses how React Native allows building native Android and iOS apps using React by rendering UI components to native platform views. It describes how React Native maps React components to native platform views, implements native modules to access platform features, and uses the JavaScript bridge to allow cal
This article was reformatted for the React Native Log from my published Summa Cuma Laude thesis at the University of Florida. If you wish to read the original, here is the link: https://ufdc.ufl.edu/AA00058596/00001 React-Native is a cross-platform mobile framework that lets you build apps using only JavaScript. However, unlike other hybrid mobile technologies, you are not building a “mobile Web A
前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた
先日、オプト社内で納会がありました。 その際の出し物の一つとしてクイズ大会があり、技術検証を兼ねてクイズアプリを作成したので中身についてお話します。 (今回はフロントエンド編です) はじめに クイズアプリ仕様 概要 使った技術 画面設計 回答者:ログイン画面 回答者:待機画面 管理者:管理画面 回答者:回答画面 回答者:正誤確認画面 管理者:ランキング画面 技術的な話 アーキテクチャ サーバー通信について WebSocketについて フロントの開発について テストについて まとめ はじめに こんにちは。uryyyyyyyです。 先日(といっても7月あたりですが)、オプトの納会が行われました。 有志による多くの出し物があったのですが、その中の「クイズ大会」コンテンツにて、 問題の回答&集計をできるアプリを作れないかと頼まれたため、Webアプリを作ってみました。 せっかくなので会社固有の情報を
長らく停滞していたFacebook製のJavaScriptテストフレーム「Jest」が息を吹き返しています。概要とサンプルを使ったテストの手順を紹介します。JavaScript PlaygroundのJack Franklinによる特別寄稿です。 この記事ではFacebookが開発したテストフレームワークJestを使い、ReactJSコンポーネントをテストする方法を説明します。Jestの独創的な機能、特にReactアプリ向けテストを簡単に実施する機能について説明するまえに、プレーンなJavaScript関数でのJestの使用法を紹介します。 Jestが注目に値するのは、Reactに対応しているだけでなく、JavaScriptアプリケーションのテストにも使用できるからです。ただし、いくつかの機能はユーザーインターフェイスのテストにとても役立つ形で提供されるので、Reactにぴったりです。 サ
投稿開発部の外村(@hokaccha)です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション(以下SPA)についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く