제 11회 Meteor Seoul Meetup에서 발표한 'Fast-Render 톺아보기' 슬라이드입니다.

1. Fast-Render

2. 톺아보기
Lab80

3. 김우진

4. lab80.co

5.
hellomoney.co

6. 우리가

7. 가야

8. 할

9. 길
소개

11. DEMO

12.
어떻게

13. 이런일이?

14.
간단한

15. 사용법

16.
응용

17.
주의할

18. 점

19. 소개

21. DEMO

22. Meteorhacks!
Arunoda

23. Susiripala

24. meteorhacks:flow-router 1.19.0 Use kadira:flow-router instead of this version
meteorhacks:kadira 2.23.0 Performance Monitoring for Meteor
meteorhacks:picker 1.0.3 Server Side Router for Meteor
meteorhacks:search-source 1.4.0 Reactive Data Source for Search
meteorhacks:subs-manager 1.5.2 Subscriptions Manager for Meteor
meteorhacks:unblock 1.1.0 a way to use this.unblock inside publications
meteorhacks:fast-render 2.8.1* Render your app before the DDP connection even
comes alive - magic?
meteorhacks:inject-initial 1.0.2 Allow injection of arbitrary data to initial
Meteor HTML page

25. DEMO
Fast-Render님이

26. 안계실

27. 때

28.
http://oridinary-telescope.meteor.com/
Fast-Render님이

29. 출동하면?

30.
http://fast-render-telescope.meteor.com/

31. 어떻게

32. 이런일이?

33. HOW?

34. HOW?subscription.ready() == false
subscription.ready() == true

35. HOW?

36. HOW?subscription.ready() == true!
Where?

37. 꼽사리
With Server-side Rendering
(아직 구현된 패키지가 없음.)
Send

38. the

39. full

40. rendered

41. HTML

42. page

43. 정리하면
Fast-Render는

44. Server사이드에서

45. Client사이드에게

46. 보내려는

47.
HTML

48. Page를

49. 갈취하여,
Data를

50. 주입하고,
Client사이드의

51. Mini-mongo에

52. Data를

53. 넣은

54. 후,

55.
준비가

56. 끝난

57. 척(subscription

58. ready)

59. 한다.
결과적으로,

60. Client사이드는

61. Data를

62. 기다릴

63. 필요

64. 없이

65.
바로(!)

66. 데이터를

67. 사용

68. 할

69. 수

70. 있다.

71. 정리하면
Fast-Render는

72. Server사이드에서

73. Client사이드에게

74. 보내려는

75.
HTML

76. Page를

77. 갈취하여,
Data를

78. 주입하고,
Client사이드의

79. Mini-mongo에

80. Data를

81. 넣은

82. 후,

83.
준비가

84. 끝난

85. 척(subscription

86. ready)

87. 한다.
결과적으로,

88. Client사이드는

89. Data를

90. 기다릴

91. 필요

92. 없이

93.
바로(!)

94. 데이터를

95. 사용

96. 할

97. 수

98. 있다.
meteorhacks:picker
meteorhacks:inject-data
Client와

99. Server모두(lib)에

100. 코드가

101. 필요하다!
시작부터

102. subscription.ready() == true

103. HOW

104. TO

105. USE
자세한건,

106. https://github.com/meteorhacks/fast-render
먼저,

107. route를

108. 담당하는

109. 파일을

110. lib폴더에

111. 넣는다.
Iron

112. Router Flow

113. Router
this.route('post_edit', {
path: '/posts/:_id/edit',
waitOn: function () {
return Meteor.subscribe('singlePost');
},
fastRender: true
});
끝

114. Data

115. injection

116. 응용하기

117.
meteorhacks:picker과

118. meteorhacks:inject-initial을

119. 활용하여
Server-side

120. router
meteorhacks:inject-data와

121. 비슷하나,

122. HTML도

123. 주입

124. 가능하다.

125. Make

126. Loading

127. Page
DEMO

128. Move

129. Scripts

130. to

131. Bottom
DEMO

132. Fast-Render

133. 따라하기

134.
Connection이

135. 끝나기

136. 전에

137. 데이터가

138. 필요할

139. 때.
그

140. 페이지로

141. 접속했다면

142. 있고,

143. 아니면

144. 없다.
바로

145. 사용

146. 할

147. 수

148. 있으므로,

149.
subscription.ready()를

150. 체크

151. 할

152. 필요가

153. 없다.
초기화

154. 주의할 점
BEFORE
AFTER
GET TO PAGE
0s
BLANK PAGE
(4kb)
0.5s
●●●
LOADING PAGE
(25~70kb)
1s
●●●d
FULL PORTFOLIO
●●●d
LEFT SIDE LOADED
FULL PORTFOLIOEMPTY PORTFOLIO
DEMO
DEMO
너무

155. 커지지

156. 않게

157. 주의하기!

158. 두줄

159. 요약
$ meteor add meteorhacks:fast-render
$ meteor add meteorhacks:fast-render
Server-side

160. Rending이

161. 안되는

162. 이상,

163. 두번

164. 까세요

165. Q

167. A

168. Reference
https://meteorhacks.com/

169.
https://github.com/meteorhacks