シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 Discord Channel: #track1-8-spa-security
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
@herablog さん、@shunke07 さんと共に Muddy Web #3 で発表した資料です。 https://cyberagent.connpass.com/event/261115/ news.ameba.jpは5年前にデスクトップ版ではReact化、モバイル版ではAMP化が行われました。当時は最先端の技術でしたが時が経つにつれて技術的なトレンドも変化しています。TypeScriptやTanStack、Core Web Vitalsの登場によりWebフロントエンドの技術構成は日々進化しています。 時代の流れに合わせてAmebaNewsでは、脱AMP、脱SPAやTypeScript化などを行いましたので紹介いたします。
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング（SSR）の導入によってSSRFが発生する問題を見つける機会があったため、本記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング（SSR）とは？ 本記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjspのようなテンプレートからHTMLを出力するのとは異なり、一般的には以下のようにクライアントサイドレンダリング（CSR）の文脈で使われることが主です。 近年のVue.jsやReactを代表するようなWebフロントエンドフレームワークはブラウザ上で動的にDOMツリーを構築して画面を描画（CSR）するのが主流となっています。これによってページ遷移を挟まずユーザ体験のよいシングルページアプリケーション（SPA）が作ることができるというメリットがあります。 ただ、単純なSPAにはデメ
ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン
Firebaseで作ったWebサービスを3ヶ月運用してみて、ハマったこと・知っておきたかったこと - Qiita
Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースして、はや3ヶ月。。 RDB脳なのでFirebaseを使った開発でいろいろとハマった。。そのポイントを整理してみました。 Firebaseをはじめようとしている人の一助になれば。 Nuxt.js(SPA)+Firebaseで作っています！ 以前、以下のような記事を書いたのですが、そのFirebase関連ぽいまとめです。 ・Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... - Qiita 前回同様、内容的にはドキュメントをよく読めば書いてあることばかりですが、 実際に運用したり、機能追加したりする時に、気づくので、手戻りが多く... あらかじめ、知っていたら良かったなと思う点をまとめています。 Firebaseはとてもよいですが、RDBに慣れ親しんでいると、 思
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
Niigata 5分 Tech #4と、モニクル社の社内LT大会で喋ったやつです https://niigata-5min-tech.connpass.com/event/307076/
今や温泉だけでなく、プールやカフェが併設されるなど、進化がとまらないスーパー銭湯。天候に左右されることもなく、一日過ごせるスポットとして人気のお出かけ先となっています。 今回は全国のスーパー銭湯の中から、もう一度行きたいと思う施設を調査しました。気になるランキング結果はこの後！ぜひチェックしてみてください！！ 記事配信：じゃらんニュース 『じゃらん』もう一度行きたいスーパー銭湯ランキング 【アンケート調査概要】インターネット調査／東北、関東、東海、関西、中国・四国、九州までの6エリアで『じゃらん』本誌掲載のスーパー銭湯を選抜し、計161施設を選択肢として設定。過去1年以内に行ったことのある施設の中から、もう一度利用したいと思う施設を選択。行ったことがあると回答した数が40人以上の施設を対象に集計。調査時期：2019年9月25日（水）～27日（金）／調査対象：45都府県在住 20代～50代男
フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog
※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました
WebAssembly (wasm) allows code written in languages other than JavaScript to run on browsers. If you haven’t been paying attention, all the major browsers support wasm and globally more than 90% of users have browsers that can run wasm. Since Rust compiles to wasm, is it possible to build SPAs (Single Page Applications) purely in Rust and without writing a single line of JavaScript? The short answ
JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 - エンジニアHub｜Webエンジニアのキャリアを考える！
JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 JAMstackは、「JavaScript」「APIs」「Markup」の3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。いち早くJAMstackを利用してWebサイトを作成した、寺川直宏さんと風間雅也さんにJAMstackについて聞きました。 JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。 しかしまだ登場したばかりの概念ゆえ、実例も少なく、理解しにくい面もあります。そこで、いち早くJAMstackでWebサイトを
SPA+SSR+APIで構成したWebアプリケーションのセッション管理 - Pepabo Tech Portal
カラーミーショップ サービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。 アプリケーションの構成 構成の概要 今回は例としてEC事業部で提供するカラーミーリピートをとりあげます。構成としては、Railsで作られたAPIサーバ1と、Vue.jsで作られたシングルページアプリケーション(SPA)からなります。また、SPAはExpressが動くフロントエンドサーバでサーバサイドレンダリング(SSR)します。APIサーバはSPAかフロントエンドサーバだけが呼び出します。各ロールはサブドメインが異なります。 APIサーバでセッションIDを持つCookieを発行し、Redisを用いてセッション管理します。また、APIサーバへのセッションが有効なリクエストはフロント
Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass の発表内容のテキスト版です。 発表に載せられなかった参考資料集 StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share The "Developer Experience" Bait-and-Switch - Infrequently Noted JavaScriptよ。文明を捨て、自然に還れ。 ::ハブろぐ Deno - A secure runtime for JavaScript and TypeScript Rome Toolchain Blitz.js - The Fullstack React Framework | Blitz.js ⚡️ Prisma - Da
はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。 Vanilla JS ＆ SPAとは？ Vanilla（バニラ） JSというのは何もフレームワークを使っていない素のJavaScriptのことです。 ただのJavaScriptなんですが、ジョークでフレームワーク風の公式サイト？っぽいものがあったりします。 SPAというのはシングルページアプリケーションの略です。 ページごとにHTMLを用意するのではなく、1つのHTMLの中でJavaScriptに
【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか？（筆者は沼にはまりました） コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。（筆者の経験談より） そこで今回は、数々
HyperForm
formタグのaction属性にURLをセットするだけで、データの管理や自動返信メールの送信などができる、ヘッドレスフォームサービスです。
Hotwireとは何なのか？
はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。「それ普通のWebアプリケーションでは？」と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。 僕個人は、最初は「ふ〜ん」という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだり と、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として
Auth0のアクセストークンをLocal Storageに保存するのは安全？メリット・デメリットをin-memory方式と比較して検討する - Flatt Security Blog
※追記: 本記事の続編としてin-memory方式からアクセストークンを奪取するPoCを下記記事で公開しました。ぜひあわせてご覧ください。 はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事では、Auth0のSPA SDKでアクセストークンのキャッシュを有効化する際の考慮ポイントについて紹介し、それを切り口にアクセストークンの保存場所に関してin-memory方式とlocalStorage方式の2つについて解説します。 Auth0のようなIDaaSは昨今かなり普及が進んでいると思いますが、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用まで観点に含めて専門家がチェックすることが可能です。 ご興味のある方は是非IDaaS利用部
Firebase AuthなどJavaScriptでAPIセッション用のトークンを得ることについて - Qiita
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう （※ こちらの参照記事の内容自体に不備があるとか甘いとか指摘するものではないんですが、勝手に枕として使わせてもらいます） 上記記事は、Firebase Authenticationが提供するJavaScript APIを使ってJWTのトークンを取得し、自前のサーバにHTTPのヘッダで送りつけて検証をさせることで、認証の仕組みをセキュアかつかんたんに実現しよう、という内容です。 このようにJavaScriptのAPIでトークンを発行して自前バックエンドのAPI認証につかう方法はAuth0のSDKなどでも行われていますので、IDaaSをつかってSPAを開発する場合には一般的なのかもしれません。 話は変わりますが、SPAの開発に携わっている方は「localStorageにはセッション用のトー
HTML Over The Wire | Hotwire
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditi
@July Tech Festa 2020
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
【PoC編】XSSへの耐性においてブラウザのメモリ空間方式はLocal Storage方式より安全か？ - Flatt Security Blog
はじめに こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事は、Auth0のアクセストークンの保存方法について解説した前回の記事の補足となる記事です。前回の記事の要旨をざっくりまとめると以下のようなものでした。 Auth0はデフォルトではアクセストークンをブラウザのメモリ空間上にのみ保存するin-memory方式であり、XSSへの耐性のなさ等の理由でlocalStorageで保存することを推奨していない しかし、XSSでアクセストークンを奪取できるのはin-memory方式でも同じのはず(検証は行いませんでした)。localStorage方式を過度に忌避する必要はないのではないか なお、Flatt Securityの提供するセキュリティ診断はAuth0に限らずFirebase AuthenticationやAmazon CognitoなどのIDaaSのセキュアな利用
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
2022/9/21 Techfeed カンファレンスで発表した MPA化するSPAとSPA化するMPA の話です。
こんにちは、株式会社カミナシでデザインエンジニアをしているショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果を待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
pixivではNext.jsを用いたフロントエンドのリプレイスプロジェクトを2022年3月末より行っており、現時点(2022年8月)でリクエスト機能をNext.jsにてリプレイスしました。 今回のpixiv insideではピクシブ株式会社で働くエンジニアの取り組みとして、pixivのフロントエンドをNext.jsでリプレイスする取り組みについて実際に取り組んだメンバーからご紹介します。 まずは皆さんの自己紹介をお願いします namazu: pixivのウェブ領域に関するテックリードを担当しているnamazuです。今回のNext.js化プロジェクトではPjMやNext.jsのホスティング回りの実装を担当しています。 shu: 2022年3月に入社したshuです。Next.js化ではフロントエンドの設計、実装を担当しています。 mog: エンジニアとしてアルバイトをしているmogです。Nex
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
2022年のRailsの開発現場事情について語ろう！ Qiita Night https://increments.connpass.com/event/241385/
はじめに サーバーレスアプリケーションにおけるフロントエンド SPAの課題 サーバーサイドレンダリング Jamstack サーバーフル? サーバーレス? サーバーレスでサーバーサイドレンダリング Nuxt.jsでの例 次回 はじめに サーバーレスでサーバーサイドレンダリングの話です。ReactとかVueを使ったシングルページアプリケーション（SPA）を開発している人がサーバーサイドレンダリングやりたいんだけどサーバーレスでどうやるのって話です。 今回も『サーバーレスアンチパターン今昔物語』というイベントのための記事となっています。 serverless-newworld.connpass.com なお、今回は前編と称してそもそものところを簡単に説明しつつ、サーバーレスでやる場合の基本的な話を説明していきたいと思います。次回、後編で実際にサンプルアプリを用意して動くもので説明をしていきます。
SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Vue.js logo: ©︎ Evan You (CC BY-NC-SA 4.0 with extra conditions(It’s OK to use logo in technical articles for educational purposes)) / React logo: ©︎ Meta Platforms, Inc. (CC BY 4.0) / Angular logo: ©︎ Google (CC BY 4.0) はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近のJavaScriptフレームワークの進化は著しく、VueやReactやAngularは様々なWebサービスに採用されています。そのため、多くのWebサービスがSPAを実装するようになりました。JavaScriptフレームワークは便利な一方で
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
2020-10-20フロントエンド開発環境の継続的なリファクタリングこんにちは、第二開発グループエンジニアの西村です。主にCLINICSの開発を担当しています。 はじめにCLINICS は電子カルテ、オンライン診療、予約システム、患者アプリなどを含む統合アプリです。CLINICS がローンチしてから現在に至るまで常に新機能開発と定常改善が行われており、開発環境のメンテナンスは後手になりがちでした。今回はそういった状況を改善すべく、開発環境のメンテナンス、リファクタリングを行った過程から得られたプラクティスについて紹介していこうと思います。 モチベーションプロダクトの新規開発時に行われる技術選定は非常に難しく、業務要件やチーム状況など総合的に考慮してその時点でのベストな選択をする必要があります。 しかし、選択した技術で長期運用をしていくうちに、メンテナンスが行き届かなくなったコードやライブラ
こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしていた記述を削除 ・レガシーMPA + Ajaxについて、初回表示に関する言及を削除。SPAで行われる初回表示に関する変化の説明と重複するため ・SPAの初回表示について、FCPが速くなったとポジティブな書き方を、逆にLCPが遅くなったとのネガティブな記述に修正 ・SPA+SSRのページを削除。サーバーサイドフェッチを伴うSSRについてはNext.js側のページで解説 ・サーバーサイドフェッチを伴うSSRについてのネガティブな記述を削除し、SPA的なクライアントサイドフェッチのアーキテクチャとフラットに取り扱う
Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
TAG : Advent Calendar | Firebase | Firestore | React | Refeed | TypeScript | トチカチ | フロントエンド AUTHOR : ギックス POSTED : 2020.12.23 08:25 この記事は GiXo アドベントカレンダー の 23 日目の記事です。 昨日は、少人数の開発で Kubernetes を活用するための設計戦略 でした。 MLOps Div. の堀越です。本記事では、React と TypeScript で SPA の実装を行う際に採用しているレイヤードアーキテクチャについてご紹介します。 レイヤードアーキテクチャというとクリーンアーキテクチャや DDD が有名ですが、弊チームフロントエンド の場合はクリーンアーキテクチャから SPA にマッチする箇所を部分的に取り入れた簡易版のレイヤードア
対象読者 RemixがNext.jsなどとはどんなところが違うのか知りたいJavaScriptエンジニア WebブラウザとNode.jsという異なるランタイムをそれぞれキャッチアップするのが辛くなってきたエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.5.1 Remix 1.7.1 Webフロントエンド技術の広がり Webブラウザ上で動くアプリケーション周辺のエンジニアリング分野は、JavaScriptの進化とともにサーバーサイドの責務から分離され、「Webフロントエンド」という名前で呼ばれることが多くなりました。この分野は、Webブラウザをランタイムとしてリッチなアプリケーションを効率良く開発し、ユーザーに良い体験を与えることを主な目的としていると、筆者は認識しています。 ここで着目したいのが、このWebフロントエンド分野においては「Webブラ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPAセキュリティ入門
リリースから5年、Webフロントエンドの経年劣化と向き合う
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Webpack チャンク最適 テクニック - Qiita
じゃらん「もう一度行きたいスーパー銭湯ランキング2019」を発表！1位は愛媛県【全国】 ｜じゃらんニュース
Single Page Applications using Rust
Frontend Study #1: 基調講演 - Frontend 領域を再定義する
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
バックエンドエンジニアの私がお勧めする SPAフロントエンド開発環境
SPA Componentの推しディレクトリ構成について語る
MPA化するSPAとSPA化するMPA
UIが嘘をつく？ ユーザ体験における「楽観的な更新」とSPAでの作り方
Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
pixivをNext.jsでリプレイスする取り組みをご紹介します。 - pixiv inside
Hotwire を 本番環境で使ってみた感想
サーバーレスでサーバーサイドレンダリング 前編 - Sweet Escape
Remove TypeScript - laiso
フロントエンド開発環境の継続的なリファクタリング | MEDLEY Developer Portal
フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代
React で作る中規模 SPA のレイヤードアーキテクチャ - GiXo Ltd.
「Remix」という哲学を学ぼう──学習コストを最小限に抑えるReactベースの注目フレームワークを解説！