じまぐ @nakajmg Frontend Engineer at PixelGrid Inc. + 副業 (元DMM.comラボ 7年前?
じまぐ @nakajmg Frontend Engineer at PixelGrid Inc. + 副業 (元DMM.comラボ 7年前?
2019/6/1 初夏のJavaScript祭りで使用したスライドです。 Atomic Designの考え方をNuxt.jsのコンポーネント分割に取り入れてサービス開発してみました。フロントエンドエンジニア、デザイナー両面からの視点でやってみて良かったことやハマりどころをご紹介します。
この記事はVue.js #3 Advent Calendar 2017の13日目の記事です Atomic Design自体の記事は色々ありますので、この記事ではAtomicDesignで設計したコンポーネントをVue.jsで実際に運用してみて感じた事をまとめてみました 実際にどんな感じになるか結論から言うと、AtomとMoleculeにStoreを持たせず。 OrganismsとTemplateあたりの粒度でStoreを利用するとIA的にも収まりがいい様に思えます。是非デザイナーにツッコミ入れましょう。 VueコンポーネントをAtomicDesignで実装するとだいたいこんな感じになります。Atomの役割色・タイポ・ボタン固定文言など 直接描画要素にデータをレンダリング描画要素のイベントを発行親要素からのデータ受け取り登場箇所がすごく多いのでステートレスを徹底するStoreみちゃダメ絶対!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く