Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
https://www.facebook.com/groups/korea.sencha
Sencha 로 끝장내는 HTML5 Front-End 개발과Architect
§ 한국센차유저그룹 - 김종광
1
13년 5월 15일 수요일
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 : [email protected]
§ 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 : [email protected]
§ Site : http://jongkwang.com
§ Twitter : @jongkwang
§ Facebook : https://www.facebook.com/kimjongkwang
2
발표자
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha3
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha����������� ������������������ 로����������� ������������������ 끝장내는Front-End����������� ������������������ 개발
3
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha����������� ������������������ 로����������� ������������������ 끝장내는Front-End����������� ������������������ 개발
4
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
-����������� ������������������ HTML5����������� ������������������ Web����������� ������������������ 개발-����������� ������������������ HTML5����������� ������������������ App����������� ������������������ 개발
Sencha����������� ������������������ 로����������� ������������������ 끝장내는Front-End����������� ������������������ 개발
4
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Object-CAndroid����������� ������������������ Java
HTML5
5
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Object-CAndroid����������� ������������������ Java
HTML5
싫어!
5
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Object-CAndroid����������� ������������������ Java
HTML5
싫어!싫어!
5
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Object-CAndroid����������� ������������������ Java
HTML5
싫어!싫어!
좋아!!����������� ������������������ ^^
5
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
HTML5����������� ������������������ 로앱을����������� ������������������ 만들어����������� ������������������ Store����������� ������������������ 에
올려보신����������� ������������������ 분?
6
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
HTML5
7
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
HTML5
7
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
HTML5
7
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
8
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
8
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
9
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
9
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
10
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
11
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha11
HTML5 Mobile Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha12
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
어떻게����������� ������������������ 만드는지Demo를����������� ������������������ 보시죠
12
withSencha����������� ������������������ Architect
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha13
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha13
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
Sencha����������� ������������������ Touch����������� ������������������ 는무겁다??
14
Sencha Touch 는 무겁다?
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
Sencha����������� ������������������ Touch����������� ������������������ 는무겁다??
옛날����������� ������������������ 이야기����������� ������������������ 입니다Sencha����������� ������������������ Touch는����������� ������������������ 가볍
습니다15
Sencha Touch 는 무겁다?
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha����������� ������������������ Touch는����������� ������������������ 가볍습니다
16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha Touch 1
• sencha-touch.js - 374 KB
(minified)
Sencha����������� ������������������ Touch는����������� ������������������ 가볍습니다
무거웠었습니다
16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일
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����������� ������������������ Touch는����������� ������������������ 가볍습니다
무거웠었습니다 가볍습니다
16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일
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����������� ������������������ Touch는����������� ������������������ 가볍습니다
무거웠었습니다 가볍습니다
jQuery Mobile보다 더16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일
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����������� ������������������ Touch는����������� ������������������ 가볍습니다
무거웠었습니다 가볍습니다
jQuery Mobile보다 더16
Sencha Touch 는 무겁다?
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Faster����������� ������������������ Startup����������� ������������������ Time
17
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Faster����������� ������������������ Startup����������� ������������������ Time
18
‣ Faster startup time• Sencha SDK Tools - Optimization• Code combination + minified• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
개발버전
Faster����������� ������������������ Startup����������� ������������������ Time
18
‣ Faster startup time• Sencha SDK Tools - Optimization• Code combination + minified• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
개발버전
첫번째.
Faster����������� ������������������ Startup����������� ������������������ Time
18
‣ Faster startup time• Sencha SDK Tools - Optimization• Code combination + minified• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
개발버전
첫번째.
두번째.
Faster����������� ������������������ Startup����������� ������������������ Time
18
‣ Faster startup time• Sencha SDK Tools - Optimization• Code combination + minified• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
개발버전
첫번째.
두번째.
n번째
Faster����������� ������������������ Startup����������� ������������������ Time
18
‣ Faster startup time• Sencha SDK Tools - Optimization• Code combination + minified• HTML5 App Cache - Manifest 자동 생성
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
19
Smaller����������� ������������������ CSS
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha20
‣ sencha-touch.css 크기 비교
Smaller����������� ������������������ CSS
13년 5월 15일 수요일
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����������� ������������������ CSS
13년 5월 15일 수요일
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����������� ������������������ CSS
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
그밖의����������� ������������������ 기능
22
13년 5월 15일 수요일
‣ 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일 수요일
‣ 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일 수요일
‣ 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일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
MobileWebApp 최고의����������� ������������������ 솔루션
25
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
HTML5 MobileWebApp
26
HTML5 Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
HTML5 MobileWebApp
MobileApp
DesktopWebApp
DesktopApp
27
HTML5 Development
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha28
HTML5 Development
HTML5는Mobile이����������� ������������������ 다가����������� ������������������ 아니다
Desktop����������� ������������������ 은??
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha28
HTML5 Development
HTML5는Mobile이����������� ������������������ 다가����������� ������������������ 아니다
Desktop����������� ������������������ 은??
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Mobile이����������� ������������������ 다가����������� ������������������ 아니다Desktop����������� ������������������ 은??
Sencha Touch
Mobile Desktop
29
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Mobile이����������� ������������������ 다가����������� ������������������ 아니다Desktop����������� ������������������ 은??
Sencha Touch Ext JS
Mobile Desktop
29
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
30
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha Desktop
+ +
31
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha Desktop
32
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha Touch Ext JS
Mobile Desktop
Sencha Mobile Sencha DesktopSencha Charts
33
13년 5월 15일 수요일
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일 수요일
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일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect
36
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse
36
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse
37
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse
Sencha Animator
37
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse Sencha Animator
38
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect
Sencha Eclipse Sencha Animator
Enterprise
38
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse
Sencha Architect
Sencha AnimatorEnterprise
39
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha Charts
Sencha CareSencha Eclipse Sencha Architect
Sencha AnimatorEnterprise
39
13년 5월 15일 수요일
Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse Sencha AnimatorEnterpriseSencha Care
40
13년 5월 15일 수요일
Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse Sencha AnimatorEnterpriseSencha Care
Sencha Market
40
13년 5월 15일 수요일
Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse Sencha AnimatorEnterpriseSencha Care
Sencha Market
41
13년 5월 15일 수요일
Sencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse Sencha AnimatorEnterpriseSencha Care
Sencha Market Sencha.IO
41
13년 5월 15일 수요일
Sencha ArchitectSencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse Sencha AnimatorEnterpriseSencha Care
Sencha MarketSencha.IO
42
13년 5월 15일 수요일
Sencha ArchitectSencha Architect
https://www.facebook.com/groups/korea.sencha
Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse Sencha AnimatorEnterpriseSencha Care
Sencha MarketSencha.IO
Sencha����������� ������������������ Complete����������� ������������������ !!
42
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha����������� ������������������ Complete����������� ������������������ !!Framework
EnterpriseSupport
DevelopmentTools
Native����������� ������������������ PackagingSencha Touch
Ext JSSencha Mobile Sencha Desktop
Sencha Eclipse
Sencha Animator
Enterprise
Sencha Care
Sencha Market
Sencha.IO
Sencha Architect Sencha Charts
43
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha����������� ������������������ Complete����������� ������������������ !!Framework
EnterpriseSupport
DevelopmentTools
Native����������� ������������������ PackagingSencha Touch
Ext JSSencha Mobile Sencha Desktop
Sencha Eclipse
Sencha Animator
Enterprise
Sencha Care
Sencha Market
Sencha.IO
Sencha Architect Sencha Charts
43
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
Performance
44
Performance
13년 5월 15일 수요일
ce
https://www.facebook.com/groups/korea.sencha
Fa����������� ������������������ ����������� ������������������ ����������� ������������������ book
45
Performance
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Fa����������� ������������������ ����������� ������������������ ����������� ������������������ bookst
45
Performance
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
§ Mark Zuckerberg- “HTML5 wasn`t ready”
§ HTML5 App ==> Native App
46
Sencha Touch - Fastbook
13년 5월 15일 수요일
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일 수요일
https://www.facebook.com/groups/korea.sencha
Demo
48
Sencha Touch - Fastbook
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha48
Sencha Touch - Fastbook
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
iPhone����������� ������������������ 말고Android����������� ������������������ 는?
49
Sencha Touch - Fastbook
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Demo����������� ������������������ -����������� ������������������ Android
50
Sencha Touch - Fastbook
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha50
Sencha Touch - Fastbook
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
vs.
JavaScript����������� ������������������ +����������� ������������������ DOM
Performance
51
Sencha Touch - Fastbook
13년 5월 15일 수요일
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일 수요일
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
DynamicLoading
DynamicRemove
52
Sencha Touch - Fastbook
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha53
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
마무리
53
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha54
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha����������� ������������������ 로����������� ������������������ 끝장내는Front-End����������� ������������������ 개발
54
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
55
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
UI
Control
Logic
55
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
Sencha����������� ������������������ Complete����������� ������������������ !!
Framework
EnterpriseSupport
DevelopmentTools
Native����������� ������������������ PackagingSencha Touch
Ext JSSencha Mobile Sencha Desktop
Sencha Eclipse
Sencha Animator
Enterprise
Sencha Care
Sencha Market
Sencha.IO
Sencha Architect Sencha Charts
56
13년 5월 15일 수요일
https://www.facebook.com/groups/korea.sencha
감사합니다
57
§ 김종광 (JongKwang Kim)
§ E-Mail : [email protected]
§ Blog : http://jongkwang.com
§ Twitter : @jongkwang
§ Facebook : https://www.facebook.com/kimjongkwang
13년 5월 15일 수요일