SPA Are Dead, Long Live SPA - Semaphore
I picked up most of my soft/hardware troubleshooting skills in the US Army. A decade of Java development drove me to operations, scaling infrastructure to cope with the thundering herd. Engineering coach and CTO of Teleclinic. 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 challenge
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がある、ということを知っているだけでは、
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
社内管理画面を Vue + Go で作る - Gunosy Tech Blog
広告技術部のUTと呼ばれている @mocyuto です。 普段は広告配信のバックエンドを主に担当しています。 今回は社内管理画面を作った話をお伝えしたいと思います。 はじめに 設計 バックエンド goa 構成 フロントエンド 構成 TypeScript Vuex Atomic Design まとめ はじめに Gunosyの管理画面ではRailsが多いですが、社内用管理画面を新規で作ることになり、Vue + Go のSPA（Single Page Application）で作ることにしました。 管理画面をVueとGoで作る事例は最近増えてきていますが、弊社でもすでにこの組み合わせで実績はあり、２つ目となりました。 今回の社内向けの管理画面の作成意図としては、ABテスト反映の高速化が目的です。 今までは、リリースフローは以下のようになっていました。 配信チームとロジックチームをまたいでファイル
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
大規模Angular SPA開発に立ち向かうためにアプリとUIを切り分けた話
ビズリーチで「HRMOS（ハーモス）採用管理」のフロントエンドエンジニアをしています、浅井です。 前編では「AngularJSのリプレースにAngularを選んだ話」についてお話しました。 今回は、長期的にサービスを発展させていくことを念頭に置き、アプリケーションの規模もチームメンバーの人数が増えていってもスムーズに開発・メンテナンスしていくために、AngularでWebアプリケーションを再構築していく中で盛り込んだことをご紹介したいと思います。 AngularJS時代の課題 せっかくAngularに移行するからには、「AngularJS時代からの負債は引き継ぎたくない、メンテナンスしやすい仕組みにしておきたい」というのがチームメンバー全員の想いとしてありました。 まずは、AngularJS時代に実装・運用フェーズで感じていた課題を洗い出したところ、 ページ単位で 似たようなUIが別々に
Kaizen AdにおけるSPAでのi18nへの取り組みと手法について - Kaizen Platform 開発者ブログ
こんにちは。フロントエンドエンジニアのaxrossです。この記事では、弊社のサービス「Kaizen Ad」で行った "i18n" (国際化) の取り組みについて紹介したいと思います。 Kaizen Adでは、サービス提供を行う地域として日本とアメリカを同時に見据えて開発をしてきました。そのため、プロジェクト発足当初から意識して開発を始め、(クローズドな) ファーストローンチの2週間後にはこの記事で紹介するようなi18nを取り入れています。 i18nとは "Internationalization" の略で、単語の最初の文字 "I" と 単語の最後の文字 "N" との間に18文字あることからこのように略されます。 i18nをどのように考えるか? まずは、Kaizen Adを国際化するにあたって考えたことについて話したいと思います。大きく分けて2つの点をチームで徹底して意識しながら開発を進めま
Vue.jsで作る初めてのSPA〜Udemyの"The Ultimate Vue JS 2 Developers Course"のProject 2を受講した - こまぶろ
初めてのSPAをVue.jsで作る 前々回の記事の続きです。 ky-yk-d.hatenablog.com UdemyのThe Ultimate Vue JS 2 Developers CourseのProject 2を終えました。今回は、そちらの感想記事です。 www.udemy.com 3つのサンプルアプリケーションを作りながらVue.jsを学ぶこちらのコースの2番目のプロジェクトで作るのは、"Vue.js Cinema"。映画のポスターと詳細情報と上映時刻をAPIで取得し、一覧・フィルター・詳細表示するSPAです。講師の方が公開しているデモサイトは下のリンクにあります。 vuejs-cinema.vuejsdevelopers.com 1番目のプロジェクトで作成した"Vue.js Poster Store"との大きな違いは、今回のアプリケーションがVue routerを利用したSPA
C# で Single Page Web Application が書ける Blazor が凄かった件 - Qiita
Blazor との出会い 今年2018年2月7日に、自分のソーシャルネットワークのタイムラインに Microsoft のブログ記事が流れてきました。 A new experiment: Browser-based web apps with .NET and Blazor ブラウザベースの .NET による Web アプリフレームワーク、"Blazor" (ブレイザー) だそうです。 これを読んだ当時、自分はこんな感想を持ちました。 「 "ブラウザベースの .NET による Web アプリ" ってなんのこっちゃ? まだ実験段階的なこと書いてるし、急いで試さなくてもいいかー。それよりも、これまで作った Angular 1.x な Web アプリの Angular5 への移行を急がなきゃ...」 ...ということで、何度も import 文を書く苦行や、*[(xyz)] みたいな呪文マークアッ
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
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）とは？
CloudFront と S3 で 配信した Angular 製 SPA から API Gateway を通してファイルアップロードする | DevelopersIO
CloudFront と S3 で 配信した Angular 製 SPA から API Gateway を通してファイルアップロードする サーバーレスな話で以下のような構成、よく見かけます。 CloudFront と S3 で SPA を配信する API Gateway と S3 で CRUD API を作る よく見かけるのですが、私が知っているのは「構成」であって「実装」ではないな、ということで簡単なものを作ってみることにしました。図にすると以下のようなイメージ。 簡単なストーリー 各地域に投票所があり、エンドユーザーが投票する 地域ごとに投票データをCSV管理しており、投票が終わったら管理者が中央ストレージへCSVファイルをアップロードする 想定読者 サーバーレス構成で CloudFront や S3 を組み合わせたサンプルを見てみたい方。 作ってみて 最初に感想を書いてしまいます。
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」と呼ばれるスターターツールを使用します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPA開発未経験者によるNuxt.jsを使った自社サービス開発 / Development of own service using Nuxt.js by inexperienced SPA development
React製のSPAのパフォーマンスチューニング実例
革命と秩序とSPA
