[별천지 세미나] 세션1 Sencha로 끝장내는 Front-End 개발과 Architect 2013.05.14 별천지 세미나 자료 입니다. - 세미나 후기 : http://sencha.or.kr/?p=855

1. https://www.facebook.com/groups/korea.sencha
Sencha 로 끝장내는 HTML5 Front-End 개발과
Architect
§ 한국센차유저그룹 - 김종광
1
13년 5월 15일 수요일

2. https://www.facebook.com/groups/korea.sencha
§ (현) 한국 센차 유저 그룹(http://sencha.or.kr) – 운영자
§ (현) Sencha Inc. 국제 공인 트레이너
§ (현) 김종광 / 미래웹기술연구소 책임 연구원
§ (현) OKJSP 오픈소스 Committer 활동
§ (전) OKJSP 개발자 커뮤니티 HTML5 버전 + 모바일 버전 구축
§ (전) 멜론 모바일 사이트(iPad 용) Sencha Touch 사이트 개발
§ 월간 마이크로소프트 2011년 1월호 ~ 4월호 Sencha Touch 연재
§ 월간 웹 2011년 7월호 ~ 9월호 Sencha Touch 연재
§ HTML5 / Sencha Touch 관련 강의 및 도서 집필 중
§ E-mail : jongkwang@w3labs.kr
§ Twitter : @jongkwang
§ Facebook : https://www.facebook.com/kimjongkwang
§ (현) 한국 센차 유저 그룹(http://sencha.or.kr) – 운영자
§ (현) 김종광 / 미래웹기술연구소 수석 연구원
§ (현) Sencha Inc. 공인 Instructor
§ (전) OKJSP 개발자 커뮤니티 HTML5 버전 + 모바일 버전 구축
§ (전) 멜론 모바일 사이트(iPad 용) Sencha Touch 사이트 개발
§ 월간 마이크로소프트 2011년 1월호 ~ 4월호 Sencha Touch 연재
§ 월간 웹 2011년 7월호 ~ 9월호 Sencha Touch 연재
§ E-Mail : kim@jongkwang.com
§ Site : http://jongkwang.com
§ Twitter : @jongkwang
§ Facebook : https://www.facebook.com/kimjongkwang
2
발표자
13년 5월 15일 수요일

3. https://www.facebook.com/groups/korea.sencha3
13년 5월 15일 수요일

4. https://www.facebook.com/groups/korea.sencha
Sencha

5. 로

6. 끝장내는
Front-End

7. 개발
3
13년 5월 15일 수요일

8. https://www.facebook.com/groups/korea.sencha
Sencha

9. 로

10. 끝장내는
Front-End

11. 개발
4
13년 5월 15일 수요일

12. https://www.facebook.com/groups/korea.sencha
-

13. HTML5

14. Web

15. 개발
-

16. HTML5

17. App

18. 개발
Sencha

19. 로

20. 끝장내는
Front-End

21. 개발
4
13년 5월 15일 수요일

22. https://www.facebook.com/groups/korea.sencha
Object-C
Android

23. Java
HTML5
5
HTML5 Mobile Development
13년 5월 15일 수요일

24. https://www.facebook.com/groups/korea.sencha
Object-C
Android

25. Java
HTML5
싫어!
5
HTML5 Mobile Development
13년 5월 15일 수요일

26. https://www.facebook.com/groups/korea.sencha
Object-C
Android

27. Java
HTML5
싫어!
싫어!
5
HTML5 Mobile Development
13년 5월 15일 수요일

28. https://www.facebook.com/groups/korea.sencha
Object-C
Android

29. Java
HTML5
싫어!
싫어!
좋아!!

30. ^^
5
HTML5 Mobile Development
13년 5월 15일 수요일

31. https://www.facebook.com/groups/korea.sencha
HTML5

32. 로
앱을

33. 만들어

34. Store

35. 에
올려보신

36. 분?
6
HTML5 Mobile Development
13년 5월 15일 수요일

37. https://www.facebook.com/groups/korea.sencha
HTML5
7
HTML5 Mobile Development
13년 5월 15일 수요일

38. https://www.facebook.com/groups/korea.sencha
HTML5
7
HTML5 Mobile Development
13년 5월 15일 수요일

39. https://www.facebook.com/groups/korea.sencha
HTML5
7
HTML5 Mobile Development
13년 5월 15일 수요일

40. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
8
HTML5 Mobile Development
13년 5월 15일 수요일

41. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
8
HTML5 Mobile Development
13년 5월 15일 수요일

42. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
9
HTML5 Mobile Development
13년 5월 15일 수요일

43. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
9
HTML5 Mobile Development
13년 5월 15일 수요일

44. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
10
HTML5 Mobile Development
13년 5월 15일 수요일

45. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
11
HTML5 Mobile Development
13년 5월 15일 수요일

46. https://www.facebook.com/groups/korea.sencha11
HTML5 Mobile Development
13년 5월 15일 수요일

47. https://www.facebook.com/groups/korea.sencha12
13년 5월 15일 수요일

48. https://www.facebook.com/groups/korea.sencha
어떻게

49. 만드는지
Demo를

50. 보시죠
12
with
Sencha

51. Architect
13년 5월 15일 수요일

52. https://www.facebook.com/groups/korea.sencha13
13년 5월 15일 수요일

53. https://www.facebook.com/groups/korea.sencha13
13년 5월 15일 수요일

54. https://www.facebook.com/groups/korea.sencha
vs.
Sencha

55. Touch

56. 는
무겁다??
14
Sencha Touch 는 무겁다?
13년 5월 15일 수요일

57. https://www.facebook.com/groups/korea.sencha
vs.
Sencha

58. Touch

59. 는
무겁다??
옛날

60. 이야기

61. 입니다
Sencha

62. Touch는

63. 가볍
습니다15
Sencha Touch 는 무겁다?
13년 5월 15일 수요일

64. https://www.facebook.com/groups/korea.sencha
Sencha

65. Touch는

66. 가볍습니다
16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일

67. https://www.facebook.com/groups/korea.sencha
Sencha Touch 1
• sencha-touch.js - 374 KB
(minified)
Sencha

68. Touch는

69. 가볍습니다
무거웠었습니다
16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일

70. https://www.facebook.com/groups/korea.sencha
Sencha Touch 1
• sencha-touch.js - 374 KB
(minified)
Sencha Touch 2
• sencha-touch.js - 92 KB
(minified)
Sencha

71. Touch는

72. 가볍습니다
무거웠었습니다 가볍습니다
16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일

73. https://www.facebook.com/groups/korea.sencha
Sencha Touch 1
• sencha-touch.js - 374 KB
(minified)
Sencha Touch 2
• sencha-touch.js - 92 KB
(minified)
jQuery Mobile
• jquery.mobile-1.2.0.min.js - 113 KB
Sencha

74. Touch는

75. 가볍습니다
무거웠었습니다 가볍습니다
jQuery Mobile
보다 더16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일

76. https://www.facebook.com/groups/korea.sencha
Sencha Touch 1
• sencha-touch.js - 374 KB
(minified)
Sencha Touch 2
• sencha-touch.js - 92 KB
(minified)
jQuery Mobile
• jquery.mobile-1.2.0.min.js - 113 KB
• jquery.js
- 32 KB
Sencha

77. Touch는

78. 가볍습니다
무거웠었습니다 가볍습니다
jQuery Mobile
보다 더16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일

79. https://www.facebook.com/groups/korea.sencha
Faster

80. Startup

81. Time
17
13년 5월 15일 수요일

82. https://www.facebook.com/groups/korea.sencha
Faster

83. Startup

84. Time
18
‣ Faster startup time
• Sencha SDK Tools - Optimization
• Code combination + minified
• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일

85. https://www.facebook.com/groups/korea.sencha
개발버전
Faster

86. Startup

87. Time
18
‣ Faster startup time
• Sencha SDK Tools - Optimization
• Code combination + minified
• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일

88. https://www.facebook.com/groups/korea.sencha
개발버전
첫번째.
Faster

89. Startup

90. Time
18
‣ Faster startup time
• Sencha SDK Tools - Optimization
• Code combination + minified
• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일

91. https://www.facebook.com/groups/korea.sencha
개발버전
첫번째.
두번째.
Faster

92. Startup

93. Time
18
‣ Faster startup time
• Sencha SDK Tools - Optimization
• Code combination + minified
• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일

94. https://www.facebook.com/groups/korea.sencha
개발버전
첫번째.
두번째.
n번째
Faster

95. Startup

96. Time
18
‣ Faster startup time
• Sencha SDK Tools - Optimization
• Code combination + minified
• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일

97. https://www.facebook.com/groups/korea.sencha
vs.
19
Smaller

98. CSS
13년 5월 15일 수요일

99. https://www.facebook.com/groups/korea.sencha20
‣ sencha-touch.css 크기 비교
Smaller

100. CSS
13년 5월 15일 수요일

101. https://www.facebook.com/groups/korea.sencha
Sencha Touch 2
• sencha-touch.css - 351 KB
(minified)
SASS Compass Compile
• sencha-touch.js - 103 KB
(minified)
20
‣ sencha-touch.css 크기 비교
Smaller

102. CSS
13년 5월 15일 수요일

103. https://www.facebook.com/groups/korea.sencha
@include sencha-panel;
@include sencha-buttons;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-layout;
@include sencha-carousel;
@include sencha-msgbox;
@include sencha-list;
// @include sencha-picker;
// @include sencha-toolbar-forms;
// @include sencha-indexbar;
// @include sencha-sheet;
// @include sencha-form;
Sencha Touch 2
• sencha-touch.css - 351 KB
(minified)
SASS Compass Compile
• sencha-touch.js - 103 KB
(minified)
21
‣ 사용하지 않는 컴포넌트(CSS) 제외
Smaller

104. CSS
13년 5월 15일 수요일

105. https://www.facebook.com/groups/korea.sencha
vs.
그밖의

106. 기능
22
13년 5월 15일 수요일

107. ‣ Smoother Scrolling and Animations
• 특히 안드로이드 강점!!
‣ Advanced List Plugin
• Pull to Refresh , Load More
‣ Config System
‣ Class System - from Ext JS 4
‣ History, Back Button
‣ Infinite Carousel
https://www.facebook.com/groups/korea.sencha23
13년 5월 15일 수요일

108. ‣ Smoother Scrolling and Animations
• 특히 안드로이드 강점!!
‣ Advanced List Plugin
• Pull to Refresh , Load More
‣ Config System
‣ Class System - from Ext JS 4
‣ History, Back Button
‣ Infinite Carousel
https://www.facebook.com/groups/korea.sencha23
13년 5월 15일 수요일

109. ‣ Sencha Touch Chart
• http://www.sencha.com/products/touch/charts
‣ HTML5 Canvas based
• iOS
• Android
https://www.facebook.com/groups/korea.sencha24
13년 5월 15일 수요일

110. https://www.facebook.com/groups/korea.sencha
vs.
Mobile
WebApp 최고의

111. 솔루션
25
13년 5월 15일 수요일

112. https://www.facebook.com/groups/korea.sencha
HTML5
Mobile
WebApp
26
HTML5 Development
13년 5월 15일 수요일

113. https://www.facebook.com/groups/korea.sencha
HTML5
Mobile
WebApp
Mobile
App
Desktop
WebApp
Desktop
App
27
HTML5 Development
13년 5월 15일 수요일

114. https://www.facebook.com/groups/korea.sencha28
HTML5 Development
HTML5는
Mobile이

115. 다가

116. 아니다
Desktop

117. 은??
13년 5월 15일 수요일

118. https://www.facebook.com/groups/korea.sencha28
HTML5 Development
HTML5는
Mobile이

119. 다가

120. 아니다
Desktop

121. 은??
13년 5월 15일 수요일

122. https://www.facebook.com/groups/korea.sencha
Mobile이

123. 다가

124. 아니다
Desktop

125. 은??
Sencha Touch
Mobile Desktop
29
13년 5월 15일 수요일

126. https://www.facebook.com/groups/korea.sencha
Mobile이

127. 다가

128. 아니다
Desktop

129. 은??
Sencha Touch Ext JS
Mobile Desktop
29
13년 5월 15일 수요일

130. https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
30
13년 5월 15일 수요일

131. https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha Desktop
+ +
31
13년 5월 15일 수요일

132. https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha Desktop
32
13년 5월 15일 수요일

133. https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha Desktop
Sencha Charts
33
13년 5월 15일 수요일

134. https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha Desktop
Sencha Charts
Sencha Architect
34
13년 5월 15일 수요일

135. https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha Desktop
Sencha Charts
Sencha Architect
35
13년 5월 15일 수요일

136. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha Architect
36
13년 5월 15일 수요일

137. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse
36
13년 5월 15일 수요일

138. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse
37
13년 5월 15일 수요일

139. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse
Sencha Animator
37
13년 5월 15일 수요일

140. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha EclipseSencha Animator
38
13년 5월 15일 수요일

141. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha EclipseSencha Animator
Enterprise
38
13년 5월 15일 수요일

142. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse
Sencha Architect
Sencha AnimatorEnterprise
39
13년 5월 15일 수요일

143. https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha Charts
Sencha Care
Sencha Eclipse
Sencha Architect
Sencha AnimatorEnterprise
39
13년 5월 15일 수요일

144. Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha EclipseSencha AnimatorEnterpriseSencha Care
40
13년 5월 15일 수요일

145. Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha EclipseSencha AnimatorEnterpriseSencha Care
Sencha Market
40
13년 5월 15일 수요일

146. Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha EclipseSencha AnimatorEnterpriseSencha Care
Sencha Market
41
13년 5월 15일 수요일

147. Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha EclipseSencha AnimatorEnterpriseSencha Care
Sencha Market Sencha.IO
41
13년 5월 15일 수요일

148. Sencha ArchitectSencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha EclipseSencha AnimatorEnterpriseSencha Care
Sencha Market
Sencha.IO
42
13년 5월 15일 수요일

149. Sencha ArchitectSencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha Touch
Ext JSSencha MobileSencha DesktopSencha ChartsSencha EclipseSencha AnimatorEnterpriseSencha Care
Sencha Market
Sencha.IO
Sencha

150. Complete

151. !!
42
13년 5월 15일 수요일

152. https://www.facebook.com/groups/korea.sencha
Sencha

153. Complete

154. !!
Framework
Enterprise
Support
Development
Tools
Native

155. Packaging
Sencha Touch
Ext JS
Sencha Mobile Sencha Desktop
Sencha Eclipse
Sencha Animator
Enterprise
Sencha Care
Sencha Market
Sencha.IO
Sencha Architect Sencha Charts
43
13년 5월 15일 수요일

156. https://www.facebook.com/groups/korea.sencha
Sencha

157. Complete

158. !!
Framework
Enterprise
Support
Development
Tools
Native

159. Packaging
Sencha Touch
Ext JS
Sencha Mobile Sencha Desktop
Sencha Eclipse
Sencha Animator
Enterprise
Sencha Care
Sencha Market
Sencha.IO
Sencha Architect Sencha Charts
43
13년 5월 15일 수요일

160. https://www.facebook.com/groups/korea.sencha
vs.
Performance
44
Performance
13년 5월 15일 수요일

161. ce
https://www.facebook.com/groups/korea.sencha
Fa

164. book
45
Performance
13년 5월 15일 수요일

165. https://www.facebook.com/groups/korea.sencha
Fa

168. bookst
45
Performance
13년 5월 15일 수요일

169. https://www.facebook.com/groups/korea.sencha
§ Mark Zuckerberg
- “HTML5 wasn`t ready”
§ HTML5 App == Native App
46
Sencha Touch - Fastbook
13년 5월 15일 수요일

170. https://www.facebook.com/groups/korea.sencha
§ Sencha Inc - fastbook
- Video : http://vimeo.com/55486684
- Demo : http://fb.html5isready.com
47
Sencha Touch - Fastbook
13년 5월 15일 수요일

171. https://www.facebook.com/groups/korea.sencha
Demo
48
Sencha Touch - Fastbook
13년 5월 15일 수요일

172. https://www.facebook.com/groups/korea.sencha48
Sencha Touch - Fastbook
13년 5월 15일 수요일

173. https://www.facebook.com/groups/korea.sencha
vs.
iPhone

174. 말고
Android

175. 는?
49
Sencha Touch - Fastbook
13년 5월 15일 수요일

176. https://www.facebook.com/groups/korea.sencha
Demo

177. -

178. Android
50
Sencha Touch - Fastbook
13년 5월 15일 수요일

179. https://www.facebook.com/groups/korea.sencha50
Sencha Touch - Fastbook
13년 5월 15일 수요일

180. https://www.facebook.com/groups/korea.sencha
vs.
JavaScript

181. +

182. DOM
Performance
51
Sencha Touch - Fastbook
13년 5월 15일 수요일

183. https://www.facebook.com/groups/korea.sencha
vs.
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 952
Sencha Touch - Fastbook
13년 5월 15일 수요일

184. https://www.facebook.com/groups/korea.sencha
vs.
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 9
Row 7
Row 8
Row 9
Dynamic
Loading
Dynamic
Remove
52
Sencha Touch - Fastbook
13년 5월 15일 수요일

185. https://www.facebook.com/groups/korea.sencha53
13년 5월 15일 수요일

186. https://www.facebook.com/groups/korea.sencha
마무리
53
13년 5월 15일 수요일

187. https://www.facebook.com/groups/korea.sencha54
13년 5월 15일 수요일

188. https://www.facebook.com/groups/korea.sencha
Sencha

189. 로

190. 끝장내는
Front-End

191. 개발
54
13년 5월 15일 수요일

192. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
55
13년 5월 15일 수요일

193. https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
55
13년 5월 15일 수요일

194. https://www.facebook.com/groups/korea.sencha
Sencha

195. Complete

196. !!
Framework
Enterprise
Support
Development
Tools
Native

197. Packaging
Sencha Touch
Ext JS
Sencha Mobile Sencha Desktop
Sencha Eclipse
Sencha Animator
Enterprise
Sencha Care
Sencha Market
Sencha.IO
Sencha Architect Sencha Charts
56
13년 5월 15일 수요일

198. https://www.facebook.com/groups/korea.sencha
감사합니다
57
§ 김종광 (JongKwang Kim)
§ E-Mail : kim@jongkwang.com
§ Blog : http://jongkwang.com
§ Twitter : @jongkwang
§ Facebook : https://www.facebook.com/kimjongkwang
13년 5월 15일 수요일