最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか!」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として
幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 Draft.js冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変
recompose の withState がわからなかったけどブログ記事とコードを読んだらなんとなくわかった(たぶん)。 公式の API ドキュメントのこのサンプルコードがわからなかった。 https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate const addCounting = compose( withState('counter', 'setCounter', 0), withHandlers({ increment: ({ setCounter }) => () => setCounter(n => n + 1), decrement: ({ setCounter }) => () => setCounter(n => n - 1), reset: ({ setCounter }) => (
Reactのv16がリリースされたので、変更点などを整理したいと思います。 https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ React v16やReact Fiberについては、下記で書いたりもしているのでそちらも参考にしてみてください。 React Fiber現状確認 Capability of React Fiber React v16 and beyond React Fiber ReactはなぜFiberで書き直されたのか?Reactの課題と将来像を探
Facebookが開発している、WYSIWYGエディタのベースになるDraft.JSというソフトウェアがあります。Draft.JSを使うことで効率的に非開発者でも使いやすいエディタが開発できます。 今回はDraft.JSをベースとして、さらに拡張性を高めたMegadraftを紹介します。 Megadraftの使い方 デモです。リスト表示の例。 それぞれ編集、削除できます。 新しいリストの追加もできます。 画像や動画を埋め込んだりすることもできます。 Megadraftはユーザビリティ高く、プラグインによって拡張可能なライブラリとなっています。何でも作れると言うよりも、プラグインでテンプレートを作ることで、ユーザは特定のフォーマットに沿った入力を簡単にできるようになるというもののようです。 MegadraftはReact/JavaScript製のオープンソース・ソフトウェア(MIT Lice
こんにちは、fluctの@nekoyaです。 今日は現在開発に携わっている、俗に言う「管理画面」のWebアプリケーションのアーキテクチャをご紹介します。 このアプリケーションはReactとRxJSを軸として作られており、コードはTypeScriptを使って書いています。 アプリケーションを流れるデータと状態の管理について、Write StackとRead Stackという考え方を取り入れたところ、いろいろなメリットが得られたので、そのあたりを軸に掘り下げてみます。 全体の大まかな構成 各Stackの前に、まずはアプリケーション全体の構成をざっくりと見ておきます。 流れとしては、DispatcherからWrite Stack, Read Stackを通ってStateが生成され、それをViewが受け取るという構成になっています。 全体の流れとしてはFluxっぽい何かのひとつのあり方なのですが、
Gijgo 1.9.14 Gijgo is a set of free for commercial use javascript controls distributed under MIT License. All widgets are high performance and works great in combination with Angular 2+, Bootstrap 4 and/or jQuery. They are designed to saves you time and scales with your development process. Download Gijgo
Jestとは facebook.github.io Facebook製のテストフレームワーク Reactアプリケーションのテストに向いてる スナップショットテストがある スナップショットテストとは スナップショット != スクリーンショット 画像の差分を取るのではない 出力されるHTMLの構造を比較する Worcに導入してみた shibe97.hatenablog.com Twitterクライアント、Windowsも対応しました〜https://t.co/HDikkJPm4P— シベ (@shibe97) 2017年3月14日 (別件ですが、先日Windowsにも対応しました!) Worcはかなり細かくコンポーネントを分けているので、試しやすかった。 完全に自分にとっての実験環境になりつつある・・・ 対象のコンポーネント とりあえず今回は、ツイート部分のテキストエリアコンポーネントを対象と
We're a passionate team of frontend developers, united by our love for coding and open source. Founded in 2017, Epicmax quickly became known for our deep dive into open source with a sharp focus on Vue.js, marking our expertise in the domain. With 8+ years of Vue.js expertise, we’ve explored every corner of the ecosystem and become trusted partners of its leaders: Vuetify, PrimeVue, and VueJobs. F
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く