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の各要素の紹介を記事として
2021年の密かなトレンド？ “型安全ルーティング”の概観
2020年は、型安全ルーティングが密かに盛り上がりを見せた年でした。この記事では、TypeScript周りのエコシステムで発生した型安全ルーティングという概念とこれまでの流れを振り返ってご紹介します。 ルーティングとは この記事でいうルーティングは、URL（特に/user/uhyoといったパス部分）を見てコンテンツを出し分ける機構のことを指します。ルーティングは、主にSPA (Single Page Application) で必要となります。SPAはどのようなURLでも同じHTMLとJavaScriptが動作し、JavaScriptによってアドレスに対応したコンテンツが表示されます。まさに、ルーティングがSPAの根幹となっています。また、一般のウェブサーバーも、異なるURLに対するリクエストには異なるレスポンスを返しますから、ここでもルーティングが行われていることになります。 従来は、文
State of SEO for SPA 2019 - Qiita
メタ この記事はNode学園2018にて話した内容を記事として編纂 +その後の変化を加筆修正したものです。 スライドはこちら。 https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b 追記 2019/5/8 遂に Google bot が扱うレンダリングエンジンが Chrome 最新版(現時点では 74)相当となりました！ https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html ただタイムアウトなどのリスクは依然存在するので、信頼性を求めるならやはり Dynamic Rendering や SSR が選択肢になるのかなと言う気はしますが、そこまで要求が強くない場合にはあまり頑張らなくてよ
リクルートテクノロジーズのフロントエンド計測 | Recruit Tech Blog
同時に、redux-protoはリクルートテクノロジーズならではの大規模Web開発に必要な機能を盛り込んだ高機能なフレームワークでもあります。主なもので以下のような機能があります。 サーバサイドでHTMLを描画するためのSSR機能(Server Side Rendering) マイクロサービス化されたAPIを組み合わせて利用するためのBFFサーバ機能(Backend For Frontend) Atomicデザインを採用し、表示(Presentation)とロジック(Container)を切り分けるデザインパターンの徹底 titleタグ、metaタグ等のheadタグ要素の動的な変更のサポート URLに対応したルーティング、データフェッチとルーティングおよび描画の同期を行う機能 戻る操作時に以前の状態とスクロール位置を復帰する機能 ルーティングに応じたwebpackのコードスプリット、および
Reduxにおけるバリデーションの実装パターンとReducerの呼び出し遅延について（debounced-action-dispatcherを作りました）
アイデアです。 ちなみにredux-observableやredux-sagaを導入している場合はそちらで解決したほうが良いんじゃないかとおもいます。 MVXアプリケーションのバリデーションとパフォーマンス問題 Reduxを使っていなかったとしても、Reactを使って素朴にアプリケーションを開発しているとある程度以上の規模になって発生するのがバリデーションのパフォーマンスではなかろうか。 最初は一つのinputに対応するプロパティの正当性を素朴に判断するだけだったのが、ある程度の規模になった時点で同一モデルの他のプロパティも一緒に合わせてみなければいけなくなったり、あるいは他のモデルの面倒もみないといけなくなったり。 そのうちに、あちこちに散らばっていたバリデーションのロジックを一箇所に集めたくなる。それが終わったら次はパフォーマンスの問題だ。Facebookのアプリケーションなどを使った
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 | ランサーズ（Lancers）エンジニアブログ
@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の SPA で運用して得た知見などを共有できればと思い。公開してみた次第です。 内容としては 利用しているライブラリや開発環境、開発フロー コードベースでの実装例の紹介 その他 SPA サービスを運用する上での構成や知見 など、実例や結果を交えながら説明しています。 何かの参考になれば幸いです。 スライドを貼ってますが、以下のgoogle スライドで見た方が、アニメーションとか動いて見やすいかもしれません。 https://docs.google.com/presentation/d/1TIEg5rYJ9vlWTSO6etwupBBO0e
サーバーサイドレンダリングしないReact SPAのSEO - 橋本商会
普通にwebpackと@babel/preset-envで"last 2 versions", "Safari 10"をターゲットにしてビルドしているだけ
「Reactの難しさ」を分解しよう - タオルケット体操
他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 「テンプレートエンジン」として捉えて、シンタックスを攻撃するのをやめよう ライブラリとしてのReactはとても簡単 Reactの思想を理解するのはチョットムズカシイ 環境構築が難しい JavaScriptそのものが難しい GUIが難しい jQuery時代からのパラダイムシフト フレームワーク関係者の情報量が多い SPAはとりわけ難しい まとめ ずっと感じてたもやもやを書き連ねたら長くなってしまったが、ぼんやりとReactとかなんか難しそうだしめんどくさいから新規案件だけどjQueryでやろっかなどうしよっかなーと迷っている人の指針になってくれればうれしい。 他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 出た時から延々と言われ続けているものの、やっぱり今でもjQueryとRe
Reactでシンセサイザーを作った話 - Speee DEVELOPER BLOG
こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし
全社合宿を支えた SPA アプリ開発 〜 React + Rails でプログレッシブ Web アプリ構築〜 - adish intelligence
皆さんはじめまして。2年目新卒エンジニアの坪井(@ufo_ocha)です。普段は先日リリース致しましたhitoboの主にフロント周りを開発しています。 さて、Gaiaxグループでは年に2度、夏と冬に全社合宿を行っています。冬は事業部毎の発表など真面目なコンテンツがメイン、夏はみんなで集まり仕事を忘れて遊びましょうと交流がメインとなっています。だいぶ時間がたってしまっていますが、今回は9月に実施した夏合宿で運営として参加し、合宿用アプリを作成した話です。少しではありますが、当日の様子はこちらからどうぞ。 子ども・パートナーも参加！ガイアックスグループ夏合宿の軌跡 アプリ要件 今回の要件ですが、ざっくりと 合宿のしおり 参加メンバーのプロフィール閲覧 コンテンツのフォトロゲイニング となっています。これは僕ではないのですが、昨年度の冬合宿でしおりをスマホで閲覧しやすいWebページで提供したとこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NOT SO BADなブログ
今さら聞けないSPAのCORS対策の話