フロントエンドの React Redux Rx などの設計パターンを元に GUI 設計について考えてみました
![今、我々は、 GUI の設計について 何を考えるべきか](https://cdn-ak-scissors.b.st-hatena.com/image/square/45232d3a814a7b45136eaf188955d1ac6d888ee2/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F40bd384fb6214ec093071007012216fd%2Fslide_0.jpg%3F8596702)
AlminはClient-side DDD/CQRSをしやすい構造を作ることを目的にした – いわゆるステート管理ライブラリです。 Almin 0.14.0でperformance.markベースのプロファイルを取れるようになりました。 これにより、AlminのUseCaseやStoreといったそれぞれの処理にどれぐらいかかっているかを開発者ツールのタイムラインで見ることができます。 performance.markはUser Timing Level 2で標準化されている方法なので、後述するようにReactやVueなどのライブラリと組み合わせた状態も見ることができます。 performance.markについては次の記事でも書いています。 performance.markでパフォーマンス計測する | Web Scratch 使い方 Contextを作成する際にperformancePro
ガラケーアプリは1本で300万円稼げたが、スマホアプリは全然稼げてない。老舗ゲームサークルが体感したアプリ市場の「残酷な変化」とコアファンの偉大さ 2名の個人アプリ開発者を取材しました。「個人開発者特集2017」の第三回です。 <目次> 1)ガラケーアプリは1本で300万円稼げたが…ゲームサークルが語る「アプリ市場」の変化。 2)80万ダウンロード「まりも」開発者が体験した、何かを「はじめるタイミング」の大切さ。 1、ガラケーアプリは1本で300万円稼げたが…ゲームサークルが語る「アプリ市場」の変化。 ※ゲームサークル「WEAKEND」のしょーたweさん(左)、昼間は会社員として働いている。 「WEAKEND」の活動について、教えていただけますか? もともと「WEAKEND」は、ガラケーアプリをつくるゲームサークルとしてはじまって、これまで14年ほど活動をつづけてきました。 基本的には、2
react-routerのハッシュリンクとスムーススクロール React Router を使っているプロジェクトで、できれば「ハッシュリンクを踏んだ時に、対象位置までスクロールしたい」というのがあり、少し調べていた。そもそも React Router はハッシュリンクが正しく機能しないという不具合があったり、既に公開されているライブラリでは機能を満たせない、メンテナンスが不安、コードがアレ…等等、スクラッチで書くところから始まった。 react-router-hashlink React Router の <Link> コンポーネント をラップして、ハッシュリンクに対応したのが 1000ch/react-router-hashlink である。 import { HashLink } from 'react-router-hashlink'; function render() { ret
クラス関数をthrottleするデコレータ 掲題の通り、throttle してくれる 1000ch/throttle-decorator というモジュールを作った。ES Decorator については全力で ES Decorator使ってみたが参考になると思う。標準化されるか問題は一旦さておいて。 インストールと使い方 npm でインストールする。 $ npm install --save-dev throttle-decorator 旧来 throttle() するときは宣言してあるイベントハンドラに throttle() を挟んで新たな名前付き関数を宣言していたと思う。React のコンポーネントの例だと次のようになる。 import throttle from 'lodash.throttle'; class Foo extends React.Component { constru
Electronアプリの自動アップデートサーバーをhazelとnowで作る Trello のデスクトップアプリ 1000ch/whale や esa.io のデスクトップアプリ 1000ch/quail は Electron 製だが、この macOS バージョンに、重い腰を上げて自動アップデート機能を実装した。 Electronの自動アップデート機能 Electron には autoUpdater という自動アップデートを提供するクラスが備わっている。これは Squirrel/Squirrel.Mac というフレームワークの機能で、Electron 側についてはそれをラップした autoUpdater を通して簡単に実装できる。 const { autoUpdater } = require('electron'); autoUpdater.on('checking-for-update'
画像を便利に扱うReactコンポーネント React を使った Web プロダクト開発では、遅延ロードやアクセシビリティといった画像として基本的な機能を備えつつ、ステートレスな <Image> コンポーネントを実装することがしばしある。 FRESH! の Web 開発チームでは以前Intersection Observerを使った要素の出現を検出するReactコンポーネントを公開したが、今度は画像を扱う汎用 React コンポーネントを公開した。今日はその紹介と、それらを組み合わせた <Image> コンポーネントの実装をしてみる。 こちらも FRESH! 以外でも使えたら便利だなと思った次第で、機能の切り出しは作業は富澤さん @tommy-san がやってくれた 🙏 SuperImage 仮で付けていた SuperImage がそのまま名前に採用されてしまった。openfresh/su
2017.09.12 Web Components 周辺の仕様とかブラウザ互換性 2017年秋 二週間後の素振り入ってます、連投ですが悪しからず。Web Components v0 から Web Components v1 へのアップデートに関しては、去年の DevFest Tokyo 2016 で発表した Web Components 2016 & Polymer v2 にまとめてあるが、それを改めて見直している。 HTML Templates HTML Templates は HTML ドキュメントに埋め込まれてもコピーして使うまで非活性であるような、本来的な雛形の機能を実現する <template> 要素の仕様である。 <script type="text/template">...</script> やら <div style="display: none">...</div> や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く