Save 37% off PRO during our Black Friday Sale! »

make_frontend_properly_spa.pdf

Bf8ff0032ca825e1c179261effdd766c?s=47 mtblue81
November 22, 2018

 make_frontend_properly_spa.pdf

Bf8ff0032ca825e1c179261effdd766c?s=128

mtblue81

November 22, 2018
Tweet

Transcript

  1. > ϑϩϯτΤϯυΛ͖ͪΜͱ41"ʹ͍ͨ͠ʂ  4BOTBOº.5FDI/JHIUʙϨΨγʔγεςϜʹཱͪ޲͔͑ʂʙ

  2. !NU@CMVF !.U#MVF

  3. None
  4. None
  5. None
  6. None
  7. +49ԽϩδοΫ ίϐʔ

  8. JSX ES5 ES5 ϓϦίϯύΠϧ

  9. ίϯϙʔωϯτ άϩʔόϧͳελΠϧ 結果...

  10. 理想 •コンポーネントは独⽴させたい •構成 •スタイル •ロジック •(SSRなどを除いて) SPAにアプリサーバはいらない
 ファイルサーバにアップロードするだけ 8FC$PNQPOFOUT

  11. 改善プラン 1.CSSファイルをコンポーネント(JS)に合わせる 2.CSSクラス名でスタイルの影響範囲を抑える 3.JS,CSSをどちらもnode.js側でビルドする

  12. CSSファイルをコンポーネント(JS)に合わせる 1.まずは空ファイルでJSと同名CSSを準備 2.新規作成コンポーネントではスタイルはそこに B@DPNQPOFOUKT B@DPNQPOFOUDTT

  13. CSSクラス名でスタイルの影響範囲を抑える 1.ファイルパスと同等のクラス名を定義する
 (BEMのBlock相当) 2.コンポーネントJSXの最外でクラス名を付与 B@DPNQPOFOUKT B@DPNQPOFOUDTT

  14. CSSクラス名でスタイルの影響範囲を抑える 1.ファイルパスと同等のクラス名を定義する
 (BEMのBlock相当) 2.コンポーネントJSXの最外でクラス名を付与 B@DPNQPOFOUKT B@DPNQPOFOUDTT SFOEFS \ SFUVSO 

    EJWDMBTT/BNFbB@DPNQPOFOU` ʜ EJW   B@DPNQPOFOU\ CBDLHSPVOEHSBZ ʜ MJOUͰωετΛ੍ݶ ^
  15. JS,CSSをどちらもnode.js側でビルドする

  16. JS,CSSをどちらもnode.js側でビルドする \ lCVOEMFKTzlCVOEMFYYYYKTz  lCVOEMFDTTzlCVOEMFZZZZDTTz ʜ ^ CVOEMFYYYYKT CVOEMFZZZZDTT

  17. つらかったところ 1.CSSファイルをコンポーネント(JS)に合わせる 2.CSSクラス名でスタイルの影響範囲を抑える 3.JS,CSSをどちらもnode.js側でビルドする

  18. つらかったところ طଘͷڊେͳCSSͱίϯϙʔωϯτΛʹΒΊͬ͜͠ͳ͕Β CSS෼ׂΛ͍ͯͬͨ͠ ͓͓Αͦ2ϲ݄͘Β͍ʁ ؆қతͳϨάϨογϣϯ߲໨Λઃ͚ͯνΣοΫ ௒ڞ௨ͳ෦෼͸Ͱ͖Δ͚ͩSCSSͷmixinԽͯ͠ಀ͛ΔͳͲ

  19. まとめ 改善プランをやってみたら - コンポーネント指向での開発ベースができてきた - ビルドプロセスをRailsからNodeに移せた

  20. でもまだまだ道半ば ੩తܕ෇͚ 443 #'' &&ςετ

  21. ͦͷଞʹReact͇ReduxͰͷ޻෉ʹ͍ͭͯ͸ աڈͷεϥΠυͰ঺հ͍ͯ͠·͢  IUUQTXXXTMJEFTIBSFOFU4IVIFJ"PZBNBSFBDUSFEVYBUFJHIU  IUUQTTQFBLFSEFDLDPNNUCMVF KBWBTDSJQUNFUBQVSPHVSBNJOHVNJBORJBOHIVJOVNCFSNFUBQSPFT

  22. None