タグ

設計とVueに関するjsstudyのブックマーク (6)

  • Elmの型で読むReduxやVuexのアーキテクチャ - Qiita

    はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactVue.jsといったwebフロントエンドフレームワークのお供にReduxVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か?|Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ

    Elmの型で読むReduxやVuexのアーキテクチャ - Qiita
    jsstudy
    jsstudy 2020/01/09
    ReduxやVuexは使い道がよくわからない関数をたくさん定義して、何をしたいのかわからなくなることがありますが、結局modelを引数にしてhtmlを返す巨大な純粋関数としてwebフロントエンドを定義してあげたいだけなんですね。
  • Elmをプロダクトで一年書き続けた感想 - Runner in the High

    この記事はElm Advent Calendar 2019最終日の記事です。 去年末あたりから現職のチームでElmを書き始めたので、大体1年程度はプロダクションでElmのコードを書き続けたことになる。学生時代はRubyJavaScriptばっかりだったので、関数型プログラミングとかそういうバックグラウンドは一切なかった。その観点から、改めて率直な感想を申し上げておく。 なお、弊社フロントエンドチームとElmに関するはなしは、私の書いたFringe81アドベントカレンダーの記事を参照のこと。 fringeneer.hatenablog.com Elmには中毒性がある Elmを触ったことのない方からすると「?」になるかもしれない(というか、昔の自分がそうだった)が、率直に言ってElmには中毒性がある。一度Elmを知ると、Elm以外の言語を触るたびに「これ、Elmだったら〇〇なのにな〜」と思う

    Elmをプロダクトで一年書き続けた感想 - Runner in the High
  • JAMstack - Google 検索

    事前にデータを埋め込んだ静的HTMLを生成することで、配信するWebアプリケーションと、コンテンツを管理するCMSなどを完全に分離したアーキテクチャをJamstackといいます。 静的HTMLでも、完全に分離したサービスやシステムのAPIを通じて、ブラウザで実行するJavaScriptで動的コンテンツを扱えます。

  • Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか

    静的サイトジェネレーターが最近、非常に普及してきました。 それに合わせて注目されているのが「JAMスタック」です。JAMスタックとは何なのか、なぜJAMスタックが人気になっているのかを紹介します。 Why JAMstack is Becoming so Popular by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに JAMスタックとは JAMスタックを使用する利点 JAMスタックはなぜ人気があるのか まとめ JAMスタックの有用なリソース はじめに 最近、静的サイトジェネレーターが非常に普及してきています。静的サイトジェネレーターは使い方が簡単で、最新のテクノロジーVue.jsやReactなどのJavaScriptフレームワークに基づいて実装されています。静的サイトジェネレーターをは

    Web開発アーキテクチャ「JAMスタック」がなぜ人気になっているのか
    jsstudy
    jsstudy 2019/11/06
    NetlifyはJAMstackという新しい用語を発表しました。JAMstackは静的なHTMLサイトで、コンテンツを更新するたびに自動的に再構築され、CDNに直接デプロイされます。ちなみにJAMstackのJAMは、JavaScript、API、Markupの頭文字です
  • VuexのStore設計のTips - 薄いGetter

    Vue + Vuexで中〜大規模なアプリケーションの開発をするとき、どんな設計にするか未だによく悩みます。試してみては捨ててを繰り返していて、そろそろ自分の中でベターなパターンを固めたいと思いつつも固まらず、気づけば数年経ちました。 そういった前提を踏まえつつではありますが、現時点で設計時に意識していることをTips的に少しずつまとめてみようと思います。今回はVuexのGetterに関するお話です。 Getterの役割を見直す 副作用のないクエリとして実装する プロパティアクセスとメソッドアクセスを区別して命名する プリミティブでシンプルなクエリとして実装する 表示用の加工処理はComponentに実装する 例外1. 加工された値の賞味期限が長い場合 例外2. 加工処理が複数Componentで繰り返される場合 おわりに Getterの役割を見直す VuexはFluxアーキテクチャを参考に

    VuexのStore設計のTips - 薄いGetter
    jsstudy
    jsstudy 2019/10/05
    データモデルやアプリケーションの状態といったコアな情報のみをStoreで持ち、Viewの状態をComponentで持つことでViewの仕様変更に耐えやすくする狙い。StoreのGetterをViewに依存させないこと(Viewの仕様に引きずられない)を重視
  • Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜

    Vue.js の設計地図を作成しました。設計概念の依存関係の図式化して理解し、 フロントエンド設計をモデリング起点で考えたブログです。

    Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜
    jsstudy
    jsstudy 2019/09/05
    RDBの3層スキーマ、DOA(データ中心アプローチ)に似てる? クリーンアーキテクチャーとの対比図も描いてもらえるとありがたいかも cf. 宣言的UI - Speaker Deck https://b.hatena.ne.jp/entry/s/speakerdeck.com/sonatard/xuan-yan-de-ui
  • 1