Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

前端技術大亂鬥

1,760 views

Published on

JSDC 2015

Published in: Engineering
  • Be the first to comment

前端技術大亂鬥

  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

×