フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
CSS/jQuery/JavaScriptで作られた無料ツールチッププラグイン21選 - Workship MAGAZINE(ワークシップマガジン)
「ツールチップ」とは、ボタン等にカーソルをあわせることで表示される”小さな吹き出し”のことです。吹き出しによる補足情報でユーザーの理解を助けてくれる、便利な存在ですね。 今回はCSS / jQuery / JavaScriptで作られた、オープンソースのツールチッププラグインを21個、それぞれの特徴とともにご紹介します。すべて無料で簡単に使えるので、ぜひ活用してみてください。 1. Tooltipster 多くのインタラクションやテーマ、トリガーを備えており、クリーンでモダンなツールチップが作成できます。
Mackerel のフロントエンド "React化" プロジェクトを支える技術と設計 - Hatena Developer Blog
こんにちは, Mackerel 開発チーム アプリケーションエンジニアの id:susisu です. 現在 Mackerel では, Web コンソール画面の開発に使用しているフレームワークを, これまで使用してきた AngularJS から React へ移行することを中心とした, フロントエンド開発の刷新プロジェクトを行っています. このプロジェクトの立ち上げについては以前 Hatena Engineer Seminar で発表しましたが, そこでは時間の都合もあり, 技術的側面についてはあまり深く掘り下げることは出来ませんでした. ということでこの記事では, より技術的な面にフォーカスしてプロジェクトの内容をご紹介できればと思います. "React化" プロジェクトについて Mackerel の開発は 2014 年ごろから始まりましたが, フロントエンドのフレームワークとしては当初か
「5年後も使い続けたい」JavaScript UIコンポーネントを目指す「Wijmo」とは？［PR］
jQuery、Angular 2、React……。時代とともに次々と登場する新しいJavaScriptライブラリのいずれにも対応してきた実績を持つUIコンポーネントがWijmo。そのカギは、特定のフレームワークに依存しない、徹底したWeb標準への準拠だ。 ← 前回 連載 INDEX Webを構成する技術領域では、新たな技術やフレームワークが次々と生み出されている。それらの多くはオープンな文化から生まれたものだ。開かれた日進月歩の世界。それが現在のWebといってよいだろう。 周知のとおり、こうしたWeb技術は、コンシューマー向けサービスばかりでなく、業務アプリケーションでも積極的に活用されるようになってきた。しかし業務アプリには「開かれた日進月歩の世界」を必ずしも歓迎できない側面がある。業務アプリが取り扱う顧客の業務内容は、時間が経ってもそれほど変わらないケースが多いので、業務アプリが提供す
フロントエンドに秩序は戻ったか？
Kyoto.js 12発表スライドです。 https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。
ツールチップへの表示内容をカスタマイズするには？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザーインターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。 別稿「jQuery UI逆引きリファレンス： Tooltipウィジェットでツールチップを表示するには？」では、Tooltipウィジェットを使って基本的なツールチップを作成する方法について紹介しました。本稿では、引き続きTooltipウィジェットのパラメーターを利用しながら、画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりする方法について紹介していきます。 画像付きのツールチップを生成する tooltipメソッドのi
スマホ向けサイトをアプリっぽく見せるために半年間頑張ったことをまとめる - Qiita
この記事は リクルートライフスタイル Advent Calendar2018の20日目の投稿です。 はじめに この記事では スマホ向け web ページをアプリっぽく見せるための Tips を多く紹介します。 (CSS / JS / jQuery / React / WebGL の事例を紹介します) （注） React 環境でのサンプルコードが多めですが、実装方法はどの環境でも変わらないと思います。ライブラリも同種のものが存在しているはずです。 最近だと、僕の大好きなアプリで味わった体験を、どうすれば Web で再現できるかなーって考えていました。そうしたネイティブアプリをWebで模倣したときに、知ったTipsやテクニックをまとめていきます。 この記事に書いてあること アプリっぽい体験はどのようなものがあるか CSS / JS / jQuery / React / GLSL を利用したネイテ
Webアプリケーションフロントエンド年代記 - 2018年夏編 | To Be Decided
Webアプリケーションの、主にフロントエンド周りに関連する歴史をまとめた。 静的サイト まずは原初の話から。 1990年代前半、まだWebアプリケーションという言葉が無かった時代。 静的にHTMLファイルを配信するだけのWebサイト(静的サイト)だけがあった。 静的サイトでは、HTTPサーバーに複数のHTMLファイルを置いておいて、クライアントのHTTPリクエストのURLのパスによって配信するHTMLファイルを変える。 例えば、HTTPサーバーをhttpdで立てて、ドキュメントルートを/var/www/htmlに設定して、以下のようにファイルを配置したとする。 この場合、ブラウザでhttp://<HTTPサーバアドレス>/index.htmlにアクセスすれば/var/www/html/index.htmlが配信されてレンダリングされて表示される。 http://<HTTPサーバアドレス>/
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
JavaScriptからダイアログ・ボックスを動的に操作するには？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。 別稿「jQuery UI逆引きリファレンス： Dialogウィジェットでダイアログ・ボックスを生成するには？」では、Dialogウィジェットにより基本的なダイアログ・ボックス（以下、「ダイアログ」と略記）を作成する方法について紹介しました。本稿では、引き続きDialogウィジェットのパラメーターやメソッドを利用しながら、JavaScriptコードから動的にダイアログを制御する方法について紹介していきます。 イベント経由でダイアログを開く dial
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
第68回HTML5とか勉強会の資料です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脱jQueryのためにしたこと - Qiita