Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

前端技術大亂鬥

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
22 2 15
22 2 15
Cargando en…3
×

Eche un vistazo a continuación

1 de 146 Anuncio

Más Contenido Relacionado

Más reciente (20)

Anuncio

前端技術大亂鬥

  1. 1. 技 術 演 進 ⼤大 亂 ⾾鬥 C A S E A R C H U 1
  2. 2. C A S E A R C H U 2
  3. 3. 你 升 級 E I C A P I TA N 了 嗎 ? 3
  4. 4. 4
  5. 5. 5
  6. 6. 因 為 ⼤大 家 都 很 快 所 以 今 天 早 上 我 升 級 了 6
  7. 7. 7
  8. 8. 8
  9. 9. PA R S E R 要 看 字 型 要 調 佈 景 要 顧 F P S 9
  10. 10. 今 天 的 S L I D E 是 ⽤用 K E Y N O T E 做 的 10
  11. 11. 最 重 要 的 是 PAY PA L 台 灣 不 做 ⽣生 意 了 11
  12. 12. • 2005 前 - javascript • 2005 - jquery • 2006 - YUI • 2007 - EXT.js • 2009 - Node.js ,coffeescript 12
  13. 13. • 2010 - backbone.js • 2011 - d3.js , angularjs , sass , compass , less • 2012 - meteor.js , gruntjs, livescript • 2013 - React.js, gulpjs, webpack • 2014 - Flux (⼀一⼤大堆) , postcss , react native ios , html5 , Babel.js • 2015 - Flux (⼀一⼤大堆) , Redux ,Relay , GraphQL , angular 2.0 , react native android • ……. 13
  14. 14. 我 都 還 沒 說 到 T E S T 的 東 ⻄西 或 C S S S M A C S S B E M … … . 14
  15. 15. – 赫 ⻔门 ( S H E N J S ) 「每18⾄至24个⽉月,前端都会难⼀一倍。」 15
  16. 16. 16
  17. 17. 每 個 新 的 技 術 誕 ⽣生 時 17
  18. 18. 因 為 他 只 想 到 他 ⾃自 ⼰己 . . . . 18
  19. 19. 所 以 學 F R O N T E N D 要 從 ⼩小 開 始 19
  20. 20. 開 始 啃 書 六 個 ⽉月 20
  21. 21. 繼 續 啃 書 ⼀一 歲 21
  22. 22. 實 作 ⼀一 歲 半 22
  23. 23. B T W, 被 吃 的 那 本 是 C 語 ⾔言 23
  24. 24. PA C K A G E M A N A G E R F R E A M W O R K B U I L D C S S F O N T I M A G E 24
  25. 25. PA C K A G E M A N A G E R 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. N P M 為 主 要 的 核 ⼼心 29
  30. 30. B O W E R 還 沒 完 全 無 ⽤用 30
  31. 31. 例 如 : C O L O R - T H I E F 31
  32. 32. 32
  33. 33. F R E A M W O R K 33
  34. 34. 34
  35. 35. 好 ⽤用 , 簡 單 F O R ⼯工 程 師 完 全 不 懂 F O R 設 計 師 35
  36. 36. 問 題 36
  37. 37. 要 寫 很 多 C O D E 那 個 S E O . . . 37
  38. 38. 38
  39. 39. D I R E C T I V E 39
  40. 40. 好 ⽤用 , 簡 單 F O R 設 計 師 有 點 複 雜 F O R ⼯工 程 師 40
  41. 41. 問 題 41
  42. 42. 那 個 S E O . . . . . 42
  43. 43. M A R K D O W N 每 打 ⼀一 個 字 就 要 重 新 R E N D E R 所 有 東 ⻄西 43
  44. 44. 44
  45. 45. 45
  46. 46. 我 們 不 ⽤用 J S X , 我 們 使 ⽤用 L I V E S C R I P T 46
  47. 47. 47
  48. 48. 就 像 J A D E 48
  49. 49. B T W 設 計 師 被 我 強 迫 寫 L I V E S C R I P T 49
  50. 50. 現 在 我 後 悔 了 50
  51. 51. 結 果 現 在 ⼤大 家 都 跳 槽 了 51
  52. 52. S E O … 52
  53. 53. I S O M O R P H I C 後 端 跟 前 端 R E N D E R 是 ⼀一 樣 的 53
  54. 54. 54
  55. 55. PA G E L O A D 的 時 候 S T O R E 的 資 料 由 S E R V E R 準 備 55
  56. 56. 提 醒 : F L U X I B L E ⽂文 件 寫 得 超 爛 ( 不 過 我 也 沒 資 格 說 ⼈人 家 ) E X A M P L E 很 久 沒 更 新 56
  57. 57. 今 年 的 春 假 57
  58. 58. ' 0 . 3 . 0 ' : ' 2 0 1 5 - 0 3 - 1 3 T 0 0 : 0 6 : 2 7 . 2 0 6 Z ' , ' 0 . 3 . 1 ' : ' 2 0 1 5 - 0 3 - 2 4 T 2 3 : 2 7 : 0 6 . 7 8 0 Z ' , ' 0 . 3 . 2 ' : ' 2 0 1 5 - 0 3 - 3 0 T 2 2 : 1 3 : 1 8 . 2 9 8 Z ' , ' 0 . 2 . 1 0 ' : ' 2 0 1 5 - 0 3 - 3 0 T 2 2 : 2 5 : 3 3 . 8 0 1 Z ' , ' 0 . 3 . 3 ' : ' 2 0 1 5 - 0 4 - 0 1 T 0 1 : 1 5 : 1 9 . 7 2 6 Z ' , ' 0 . 4 . 0 ' : ' 2 0 1 5 - 0 4 - 0 4 T 0 6 : 4 2 : 0 3 . 2 8 6 Z ' , 58
  59. 59. 把 前 端 資 訊 傳 到 後 端 59
  60. 60. 60 screen={ “screenWidth":1440, “screenAWidth":1440, “screenHeight":900, “screenAHeight”:873, “clientWidth”:1600, “clientHeight”:841 }
  61. 61. 結 果 現 在 ⼤大 家 都 跳 槽 了 61
  62. 62. 幹 譙 時 間 62
  63. 63. ` ` ` C H A R T S G R A P H L R A [ S Q U A R E R E C T ] - - L I N K T E X T - - > B ( ( C I R C L E ) ) A - - > C ( R O U N D R E C T ) B - - > D { R H O M B U S } C - - > D 63
  64. 64. R E A C T 不 ⽀支 援 所 有 的 S V G 64
  65. 65. A N I M AT I O N 65
  66. 66. C S S T R A N S I T I O N G R O U P H T T P S : / / G I T H U B . C O M / FA C E B O O K / R E A C T / I S S U E S / 1 3 2 6 66
  67. 67. R E A C T- A N I M AT E 不 ⽀支 援 T R A N S F O R M 67
  68. 68. 68
  69. 69. R E A C T I V E P R O G R A M M I N G 69
  70. 70. 70
  71. 71. 如 果 你 夠 瞭 解 D D P ( 不 是 D P P. . . ) 你 就 可 以 不 ⽤用 使 ⽤用 M O N G O D B 71
  72. 72. 我 最 近 在 L I N K I T O N E 上 ⾯面 加 了 D D P C L I E N T 的 功 能 . . . 那 ⼜又 是 另 ⼀一 段 故 事 了 72
  73. 73. W H I C H O N E I S B E S T ? 73
  74. 74. 各 有 各 的 ⽤用 途 74
  75. 75. W O T C I T Y - B A C K B O N E . J S 75
  76. 76. 可 以 ⽤用 N O D E . J S 不 是 W I N D O W S M E T E O R ( ⼤大 ⼩小 專 案 皆 可 ) 只 能 ⽤用 W I N D O W S A N G U L A R . J S ( ⼩小 型 ) A N G U L A R . J S + R E A C T. J S ( 都 可 ) R E A C T. J S + F L U X ( ⼤大 型 - 重 視 F P S ) 76
  77. 77. B U I L D 77
  78. 78. 78
  79. 79. 慢 , 設 定 好 ⿇麻 煩 79
  80. 80. 80
  81. 81. 81
  82. 82. 快 , 但 設 定 好 ⿇麻 煩 82
  83. 83. 83
  84. 84. VA R R E A C T = R E Q U I R E ( ‘ T E S T. L S ’ ) 84
  85. 85. 快 , 設 定 ⽐比 較 簡 單 85
  86. 86. 86
  87. 87. 整 合 好 時 , 我 眼 淚 都 快 掉 下 來 了 87
  88. 88. 前 端 ⽤用 H O T L O A D E R 後 端 ⽤用 N O D E - D E V 這 樣 開 發 應 該 超 快 了 吧 88
  89. 89. 可 是 瑞 凡 , 我 們 有 I S O M O R P H I C 89
  90. 90. 改 前 端 = 改 後 端 = 後 端 重 啟 90
  91. 91. H T T P S : / / G I T H U B . C O M / C A S E A R / N O D E - D E V 91
  92. 92. " I G N O R E " : [ " . / I G N O R E D M O D U L E . J S " , " . / I G N O R E S / * . J S " ] 92
  93. 93. R E A C T H O T L O A D E R I S D E P R E C AT E D . H T T P S : / / T W I T T E R . C O M / D A N _ A B R A M O V / S TAT U S / 6 4 5 5 9 5 8 5 5 4 7 5 6 1 3 6 9 7 93
  94. 94. R E A C T- T R A N S F O R M - B O I L E R P L AT E H T T P S : / / G I T H U B . C O M / G A E A R O N / R E A C T- T R A N S F O R M - B O I L E R P L AT E 94
  95. 95. C S S 95
  96. 96. 96
  97. 97. 沒 有 C O M PA S S 級 的 S U P P O R T N I B 討 論 度 不 ⾼高 97
  98. 98. 98
  99. 99. 99
  100. 100. 我 有 ⼀一 個 設 計 師 ( ㄇ ㄟ ㄍ ㄨ ㄥ ) 100
  101. 101. 我 們 可 以 ⽤用 S U B M O D U L E 來 控 管 101
  102. 102. 問 題 102
  103. 103. 你 叫 設 計 師 學 G I T ! ! ! ! ! 是 的 . . . 103
  104. 104. S U B M O D U L E 很 難 ⽤用 104
  105. 105. 105
  106. 106. 106
  107. 107. 快 , 可 以 ⾃自 ⼰己 決 定 ⾃自 ⼰己 要 ⽤用 的 P L U G I N 107
  108. 108. 匯 ⼊入 N O D E _ M O D U L E S @ I M P O R T “ [ M O D U L E ] / S T Y L E . C S S ” ; 匯 ⼊入 相 對 ⺫⽬目 錄 @ I M P O R T “ . / L I B / S T Y L E . C S S ” ; 108
  109. 109. 問 題 109
  110. 110. //extend @define-placeholder op-black-base { .test{ background: black; } } //nested .e-op-black { op-0{ @extend op-black-base; opacity: 0; } } 110
  111. 111. P L U G I N 的 順 序 S I M P L E E X T E N D N E S T E D 111
  112. 112. .e-op-black .op-0 .test{ background:black; } opacity: 0; } 112
  113. 113. P L U G I N 的 順 序 N E S T E D S I M P L E E X T E N D 113
  114. 114. .e-op-black .op-0{ .test{ background: black; } opacity: 0; } 114
  115. 115. P L U G I N 的 順 序 N E S T E D S I M P L E E X T E N D N E S T E D 115
  116. 116. .e-op-black .op-0{ opacity: 0; } .e-op-black .op-0 .test{ background: black; } 116
  117. 117. F O N T S 117
  118. 118. 118
  119. 119. 後 端 R E N D E R H T T P S : / / G O . J U S T F O N T. C O M / J F O N T / A P I 119
  120. 120. I M A G E 120
  121. 121. 121
  122. 122. < I M G S R C = ‘ D ATA . J P G ’ W I D T H = ‘ 2 0 0 ’ H E I G H T = ‘ 2 0 0 ’ / > < D I V S T Y L E = “ B A C K G R O U N D - I M A G E : U R L ( ‘ D ATA . J P G ’ ) ; W I D T H : 2 0 0 P X ; H E I G H T: 2 0 0 P X ” > < D I V > 122
  123. 123. 開 端 123
  124. 124. 124
  125. 125. 125
  126. 126. 126
  127. 127. R E S I Z E ( I M A G E , 8 0 0 , 6 0 0 ) . T H E N ( R E S I Z E ( I M A G E , 4 0 0 , 3 0 0 ) ) . T H E N ( R E S I Z E ( I M A G E , 2 0 0 , 1 0 0 ) ) . T H E N ( R E S I Z E ( I M A G E , 1 0 2 4 , 7 6 8 ) ) . T H E N ( R E S I Z E ( I M A G E , 3 2 0 , 4 8 0 ) ) 127
  128. 128. 128
  129. 129. D E V E L O P M E N T I N T W O H O U R S 129
  130. 130. T E S T I N G D U R I N G T W O D AY S 130
  131. 131. 131
  132. 132. – C A S E R C H U 「Hi ⼤大⼤大...能否請教您GCS的問題...」 132
  133. 133. – ⼤大 ⼤大 「你是說縮圖那個嗎 那個我也試不出來 XDD」 「你是說縮圖那個嗎 那個我也試不出來 XDD」 「你是說縮圖那個嗎 那個我也試不出來 XDD」 133
  134. 134. – C A S E A R C H U 「我滿⼼心歡喜的要轉到GCS了說....XDDDD...」 134
  135. 135. – ⼤大 ⼤大 哈哈 我當時也爽了⼀一下 我聽到也差點⾼高潮了 135
  136. 136. 136
  137. 137. N O D E . J S S H A R P H T T P S : / / G I T H U B . C O M / L O V E L L / S H A R P 137
  138. 138. 2 0 X S P E E D 138
  139. 139. 139
  140. 140. H T T P S : / / G I T H U B . C O M / C A S E A R / A Z U R E - T H U M B N O D E . J S V E R S I O N H T T P S E R V E R 140
  141. 141. B E N C H M A R K 141
  142. 142. 1024 Concurrent Users 0.184s per request 5.41 requests per second 142
  143. 143. 沒 關 係 我 們 有 C D N 擋 著 143
  144. 144. 結 論 144
  145. 145. 「 認同請.........」 145
  146. 146. 學 F R O N T E N D 真 的 需 要 熱 情 啊 146

×