SPA Are Dead, Long Live SPA - Semaphore
For the past decade, Single-Page Applications (SPAs) have become the de facto standard for developing complex web applications. However, SPAs are not without their challenges. A growing number of community leaders are advocating for a new generation of applications—an integrated client/server solution that reduces the dependence on client-side JavaScript to enhance loading speeds. Two primary reas
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
Rails+ReactなSPAサイトでSEOをしようとしてぶつかった壁 - オウチーノ開発者ブログ
Rejectcon 2018 レポート記事 こんにちは。オウチーノ吉川です。 去る9/29にRejectconで「Rails+ReactなSPAサイトでのSEO」について登壇してきました。 SPAサイトでSEOを行う際にぶつかった壁と、それをどのように乗り越えていったかの経緯をご紹介しました。 ちょっと内容詰め込みすぎて途中途中端折ってしまったのと、発表後にもいろいろ質問などをいただいていたのであわせて補足しながらご紹介します。 発表資料はこちらです。 なぜ経緯を紹介したのか？ 昨今のフロントエンド技術の進化速度は非常に速く、どんどん新しい技術が登場しています。 記事などでどういった技術が登場しているのかは抑えているが、実際に全てちゃんと触ってはいないという方も多いのではないでしょうか。 SSRをするためにはreact-railsやhypernovaがある、ということを知っているだけでは、
React製のSPAのパフォーマンスチューニング実例
カギは社内事例にあり！？システム効率化を超えて運用ミスを激減させた件 2024.09.02 コーポレート 業務改善 業務設計 社内ICT
Kaizen AdにおけるSPAでのi18nへの取り組みと手法について - Kaizen Platform 開発者ブログ
こんにちは。フロントエンドエンジニアのaxrossです。この記事では、弊社のサービス「Kaizen Ad」で行った "i18n" (国際化) の取り組みについて紹介したいと思います。 Kaizen Adでは、サービス提供を行う地域として日本とアメリカを同時に見据えて開発をしてきました。そのため、プロジェクト発足当初から意識して開発を始め、(クローズドな) ファーストローンチの2週間後にはこの記事で紹介するようなi18nを取り入れています。 i18nとは "Internationalization" の略で、単語の最初の文字 "I" と 単語の最後の文字 "N" との間に18文字あることからこのように略されます。 i18nをどのように考えるか? まずは、Kaizen Adを国際化するにあたって考えたことについて話したいと思います。大きく分けて2つの点をチームで徹底して意識しながら開発を進めま
React Routerで複雑な画面遷移をシンプルに実装する
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。今回はライブラリ「React Router」を利用して、GUIアプリケーションには欠かせない画面遷移とURLの管理を行う方法を学びましょう。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS Sierra 10.12 Node.js v8.9.3／npm 5.5.1 React 16.1.1 react-router-dom 4.2.2 画面遷移とReactとURL GUIアプリケーションが多くの機能を持つために欠かすことができない機能のひとつとして、画面遷移があります。図1はページを2つ持つWebサイトの
ASP.NET Core 2.0でSPAテンプレートを使おう【前編】
ASP.NET CoreではView層にSPA（Single Page Application）を実現するJavaScriptフレームワークを使い、Webアプリケーションを作成することもできます。さらに、SPAの問題点を解消するサーバサイドレンダリングの仕組みも提供しています。今回は最新バージョンのASP.NET Core 2.0を使って、SPA対応のアプリケーションの実装方法と仕組みを確認していきます。 対象読者 新しいASP.NET Coreの機能について知りたい方 MacやLinuxなどでASP.NET Coreアプリケーションを動かしたい方 検証環境 本稿では、以下の環境で動作を確認しています。 macOS Sierra 10.12.6 .NET Core 2.0 Node.js v7.10.1 npm v4.2.0 SPA（Single Page Application）とは？
ReactJSで作る今時のSPA入門（基本編） - Qiita
GitHubサンプルをbabel7に対応しました。 GitHubサンプルコード：GitHub （※この記事のサンプルはすでに古いです。最新版のサンプルと説明はGitHubのreadmeに書いてあるのでそちらを見てください） ReactJS使ってナウいウェブアプリケーション作ろうぜってことでまとめてみようと思います。 以前はウェブアプリケーション作る時はBracketsやAtom使っていたのですが プラグインのアップデートとかバグった時がめんどくさかったり、エディタが重かったりしたので 最近はVisual Studio Code(VSCode)に乗り換えました。 （必要な便利な機能もプラグインいれなくても揃ってるし、デフォルトでJSXサポートしてるから楽） VSCode環境構築：VSCodeで爆速コーディング環境を構築する(主にReactJS向け設定) ちょこっとReactJSを試したいとき
ReactとTypeScriptでシングルページアプリケーション - Qiita
以前に作成していた「Node.jsによるSNSアカウント認証と二段階認証」（以下WST）をReactでリプレースしました。どうして？元々は独自のフレームワークで実装していましたが、あるプロジェクトでReactを使う機会があり、とても気に入ったからです。React化そのものは数日で完了。しかしそこで終わりではありませんでした。ついでだからSPAにしよう、いまどき必要ないかもだけど初期表示で一瞬画面が表示されないのも気になるからサーバーサイドレンダリング（SSR）もやっておくか、という具合にとうとう３カ月以上の時間を費やすことになってしまいました。 「ソースコード」 web service template 4.4.1 「デモ」 https://www.printf.jp:8443/ 「機能一覧」 メールアドレスとパスワードでのログイン SNSアカウント（Twitter、Facebook、Go
ReactとAngular2の使い方やコードの違いをコンポーネント単位で比較する
SPAはWeb標準技術（HTML、JavaScript、CSS）で構成されているため、環境依存がほとんどありません。Node.jsやnpmは公式サイトから各OSに対応したインストーラーが取得できますので、環境の構築も容易です。また開発用のエディタとしては、近年はAtomやVisual Studio CodeといったOSSエディタが充実しているので、Node.jsとエディタの2つをインターネットから取得すれば、すぐにSPA開発を始めることができます。 スターターツールとは SPA開発を始めるに当たり、さまざまなライブラリを組み合わせる必要があります。本来であれば、ライブラリを選定し、環境を構築するところから始める必要がありますが、今回は開発を簡単に始めるため、Reactは「create-react-app」、Angular2では「Angular CLI」と呼ばれるスターターツールを使用します
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
革命と秩序とSPA