技術演進⼤大亂⾾鬥C A S E A R C H U

1

C A S E A R C H U

2

你升級 E I C A P I TA N了嗎？

3

4

5

因為⼤大家都很快 所以今天早上我升級了

6

7

8

PA R S E R 要看字型 要調佈景 要顧F P S

9

今天的S L I D E是⽤用K E Y N O T E做的

10

最重要的是PAY PA L台灣不做⽣生意了

11

• 2005 前 - javascript

• 2005 - jquery

• 2006 - YUI

• 2007 - EXT.js

• 2009 - Node.js ,coffeescript

12

• 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

我都還沒說到T E S T的東⻄西 或C S S S M A C S S B E M … … .

14

–赫⻔门（S H E N J S )

「每18⾄至24个⽉月，前端都会难⼀一倍。」

15

16

每個新的技術誕⽣生時

17

因為他只想到他⾃自⼰己 . . . .

18

所以學F R O N T E N D要從⼩小開始

19

開始啃書六個⽉月

20

繼續啃書⼀一歲

21

實作⼀一歲半

22

B T W, 被吃的那本是C語⾔言

23

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

PA C K A G E M A N A G E R

25

26

27

28

N P M為主要的核⼼心

29

B O W E R 還沒完全無⽤用

30

例如：C O L O R - T H I E F

31

32

F R E A M W O R K

33

34

好⽤用，簡單 F O R ⼯工程師 完全不懂 F O R 設計師

35

問題

36

要寫很多C O D E 那個S E O . . .

37

38

D I R E C T I V E

39

好⽤用，簡單 F O R 設計師 有點複雜 F O R ⼯工程師

40

問題

41

那個S E O . . . . .

42

M A R K D O W N每打⼀一個字 就要重新R E N D E R所有東⻄西

43

44

45

我們不⽤用 J S X ,我們使⽤用 L I V E S C R I P T

46

47

就像 J A D E

48

B T W 設計師被我強迫寫 L I V E S C R I P T

49

現在我後悔了

50

結果現在⼤大家都跳槽了

51

S E O …

52

I S O M O R P H I C 後端跟前端R E N D E R是⼀一樣的

53

54

PA G E L O A D的時候 S T O R E的資料由S E R V E R準備

55

提醒： F L U X I B L E⽂文件寫得超爛（不過我也沒資格說⼈人家） E X A M P L E很久沒更新

56

今年的春假

57

' 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

60

screen={ “screenWidth":1440, “screenAWidth":1440, “screenHeight":900, “screenAHeight”:873, “clientWidth”:1600, “clientHeight”:841 }

結果現在⼤大家都跳槽了

61

幹譙時間

62

` ` ` 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

R E A C T不⽀支援所有的S V G

64

A N I M AT I O N

65

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

R E A C T- A N I M AT E 不⽀支援T R A N S F O R M

67

68

R E A C T I V E P R O G R A M M I N G

69

70

如果你夠瞭解D D P (不是D P P. . . ) 你就可以不⽤用使⽤用M O N G O D B

71

我最近在 L I N K I T O N E上⾯面加了D D P C L I E N T的功能 . . .那⼜又是另⼀一段故事了

72

W H I C H O N E I S B E S T ?

73

各有各的⽤用途

74

W O T C I T Y - B A C K B O N E . J S

75

可以⽤用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

B U I L D

77

78

慢，設定好⿇麻煩

79

80

81

快，但設定好⿇麻煩

82

83

VA R R E A C T = R E Q U I R E ( ‘ T E S T. L S ’ )

84

快，設定⽐比較簡單

85

86

整合好時，我眼淚都快掉下來了

87

前端⽤用H O T L O A D E R 後端⽤用N O D E - D E V 這樣開發應該超快了吧

88

可是瑞凡，我們有 I S O M O R P H I C

89

改前端 ＝ 改後端 = 後端重啟

90

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

" 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

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

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

C S S

95

96

沒有C O M PA S S級的S U P P O R T N I B討論度不⾼高

97

98

99

我有⼀一個設計師 (ㄇㄟ ㄍㄨㄥ )

100

我們可以⽤用S U B M O D U L E來控管

101

問題

102

你叫設計師學G I T ! ! ! ! ! 是的 . . .

103

S U B M O D U L E很難⽤用

104

105

106

快，可以⾃自⼰己決定⾃自⼰己要⽤用的P L U G I N

107

匯⼊入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

//extend @define-placeholder op-black-base { .test{

background: black; }

} //nested .e-op-black { op-0{ @extend op-black-base; opacity: 0; } }

110

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

.e-op-black .op-0 .test{

background:black; } opacity: 0; }

112

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

.e-op-black .op-0{ .test{

background: black; }

opacity: 0; }

114

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

.e-op-black .op-0{ opacity: 0; } .e-op-black .op-0 .test{

background: black; }

116

F O N T S

117

118

後端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

I M A G E

120

121

< 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

124

125

126

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

D E V E L O P M E N T I N T W O H O U R S

129

T E S T I N G D U R I N G T W O D AY S

130

131

– C A S E R C H U

「Hi ⼤大⼤大...能否請教您GCS的問題...」

132

– ⼤大⼤大

「你是說縮圖那個嗎 那個我也試不出來 XDD」 「你是說縮圖那個嗎 那個我也試不出來 XDD」 「你是說縮圖那個嗎 那個我也試不出來 XDD」

133

– C A S E A R C H U

「我滿⼼心歡喜的要轉到GCS了說....XDDDD...」

134

–⼤大⼤大

哈哈 我當時也爽了⼀一下 我聽到也差點⾼高潮了

135

136

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

2 0 X

S P E E D

138

139

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

B E N C H M A R K

141

1024 Concurrent Users

0.184s per request

5.41 requests per second

142

沒關係 我們有C D N擋著

143

結論

144

「 認同請.........」

145

學F R O N T E N D真的需要熱情啊

146