make_frontend_properly_spa.pdf

Transcript

1. > ϑϩϯτΤϯυΛ͖ͪΜͱ41"ʹ͍ͨ͠ʂ  4BOTBOº.
   5FDI
   /JHIU
   ʙϨΨγʔγεςϜʹཱͪ޲͔͑ʂʙ
2. !NU@CMVF
   !.U#MVF
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
    
    
    
    
    
    EJW
    DMBTT/BNFbB@DPNQPOFOU`
    
    
    
    
    
    ʜ
    
    
    
    
    EJW
    
    
    
    B@DPNQPOFOU
    \
    
    
    CBDLHSPVOE
    HSBZ
    
    
    ʜ
    
    
    
    MJOUͰωετΛ੍ݶ
    ^
15. JS,CSSをどちらもnode.js側でビルドする
16. JS,CSSをどちらもnode.js側でビルドする \
    
    
    lCVOEMFKTz
    lCVOEMFYYYYKTz
    
    
    lCVOEMFDTTz
    lCVOEMFZZZZDTTz
    
    
    ʜ
    ^ 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