Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドのパラダイムシフトとプロダクトの成長

joe_re
November 05, 2016

 フロントエンドのパラダイムシフトとプロダクトの成長

Front Line of Frontend − Forkwell Meetup #2 発表資料
http://forkwell.connpass.com/event/42527/

joe_re

November 05, 2016
Tweet

More Decks by joe_re

Other Decks in Technology

Transcript

  1. Who am I? • twitter: @joe_re • github: @joe-re •

    freeeͱ͍͏ޒ൓ాͷ
 ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ
 ࡞͍ͬͯ·͢
  2. freeeͷϑϩϯτΤϯυͷࠓͱੲ 2012೥(ϩʔϯν࣌఺) 2016೥(ݱࡏ) • BowerͰdependenciesͷ؅ཧ
 (use bower-rails) • CoffeeScript •

    SproketsʹΑΔassetsͷbuild • BackboneMVC(not SPA) • npmͰdependenciesͷ؅ཧ • ESNext • gulp + WebpackʹΑΔassetsͷ build(Babel) • React + Flux(෦෼తͳSPA) • flowtype
  3. MPDBMEJSFDUPSZ GSPOUEJSFDUPSZ SBJMTBTTFUTEJSFDUPSZ
 BQQBTTFUT Ϗϧυͷߏ੒ gulpɺwebpack
 - transpile(coffee,esnext,sass)
 - concat


    - uglify
 - minify QSPEVDUJPOTFSWFS sprockets
 - resolve server context
 - fingerprint QVCMJDEJSFDUPSZ
  4. ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "KBYͷൃݟ
 1SPUPUZQFKTɺK2VFSZͷ੮ר #BDLCPOFKTͷొ৔
 ϑϩϯτΤϯυʹ.7$͕࣋ͪࠐ·ΕΔ XBZCJOEJOHͷྲྀߦ .77. 
 "OHVMBSKTɺ7VFKTɺ.BSJOPOFUUFKTFUDʜ ձܭGSFFFϩʔϯν

    7JSUVBM%0.ͷొ৔
 %FLVɺ3FBDUɺ7VFKT Y FUDʜ main topics of frontend history of freee 2010 2005 2012 2014 څ༩ܭࢉGSFFFϩʔϯν ձܭGSFFF։ൃ։࢝ ձࣾઃཱGSFFFϩʔϯν now!
  5. Flux͓͞Β͍ • ୯ํ޲σʔλϑϩʔΛ࣮ݱ͢Δ࣮૷ύλʔϯ • ActionCreator → Dispatcher → Store →

    View • Component͔Βঢ়ଶ͸੾Γ཭͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫ͸StoreʹͭΊ͜ΈɺViewʹ͸ඳըʹඞཁͳ৘ใ͕ߏ੒ࡁΈ
 Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ