96
https://www.facebook.com/groups/korea.sencha Sencha 끝장내는 HTML5 Front-End 개발과 Architect 한국센차유저그룹 - 김종광 1 13515수요일

Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha 로 끝장내는 HTML5 Front-End 개발과Architect

§ 한국센차유저그룹 - 김종광

1

13년 5월 15일 수요일

Page 2: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 3: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha3

13년 5월 15일 수요일

Page 4: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha����������� ������������������  로����������� ������������������  끝장내는Front-End����������� ������������������  개발

3

13년 5월 15일 수요일

Page 5: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha����������� ������������������  로����������� ������������������  끝장내는Front-End����������� ������������������  개발

4

13년 5월 15일 수요일

Page 6: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

-����������� ������������������  HTML5����������� ������������������  Web����������� ������������������  개발-����������� ������������������  HTML5����������� ������������������  App����������� ������������������  개발

Sencha����������� ������������������  로����������� ������������������  끝장내는Front-End����������� ������������������  개발

4

13년 5월 15일 수요일

Page 7: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Object-CAndroid����������� ������������������  Java

HTML5

5

HTML5 Mobile Development

13년 5월 15일 수요일

Page 8: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Object-CAndroid����������� ������������������  Java

HTML5

싫어!

5

HTML5 Mobile Development

13년 5월 15일 수요일

Page 9: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Object-CAndroid����������� ������������������  Java

HTML5

싫어!싫어!

5

HTML5 Mobile Development

13년 5월 15일 수요일

Page 10: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Object-CAndroid����������� ������������������  Java

HTML5

싫어!싫어!

좋아!!����������� ������������������  ^^

5

HTML5 Mobile Development

13년 5월 15일 수요일

Page 11: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

HTML5����������� ������������������  로앱을����������� ������������������  만들어����������� ������������������  Store����������� ������������������  에

올려보신����������� ������������������  분?

6

HTML5 Mobile Development

13년 5월 15일 수요일

Page 12: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

HTML5

7

HTML5 Mobile Development

13년 5월 15일 수요일

Page 13: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

HTML5

7

HTML5 Mobile Development

13년 5월 15일 수요일

Page 14: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

HTML5

7

HTML5 Mobile Development

13년 5월 15일 수요일

Page 15: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

8

HTML5 Mobile Development

13년 5월 15일 수요일

Page 16: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

8

HTML5 Mobile Development

13년 5월 15일 수요일

Page 17: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

9

HTML5 Mobile Development

13년 5월 15일 수요일

Page 18: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

9

HTML5 Mobile Development

13년 5월 15일 수요일

Page 19: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

10

HTML5 Mobile Development

13년 5월 15일 수요일

Page 20: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

11

HTML5 Mobile Development

13년 5월 15일 수요일

Page 21: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha11

HTML5 Mobile Development

13년 5월 15일 수요일

Page 22: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha12

13년 5월 15일 수요일

Page 23: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

어떻게����������� ������������������  만드는지Demo를����������� ������������������  보시죠

12

withSencha����������� ������������������  Architect

13년 5월 15일 수요일

Page 24: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha13

13년 5월 15일 수요일

Page 25: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha13

13년 5월 15일 수요일

Page 26: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

Sencha����������� ������������������  Touch����������� ������������������  는무겁다??

14

Sencha Touch 는 무겁다?

13년 5월 15일 수요일

Page 27: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

Sencha����������� ������������������  Touch����������� ������������������  는무겁다??

옛날����������� ������������������  이야기����������� ������������������  입니다Sencha����������� ������������������  Touch는����������� ������������������  가볍

습니다15

Sencha Touch 는 무겁다?

13년 5월 15일 수요일

Page 28: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha����������� ������������������  Touch는����������� ������������������  가볍습니다

16

Sencha Touch 는 무겁다?

13년 5월 15일 수요일

Page 29: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha Touch 1

• sencha-touch.js - 374 KB

(minified)

Sencha����������� ������������������  Touch는����������� ������������������  가볍습니다

무거웠었습니다

16

Sencha Touch 는 무겁다?

13년 5월 15일 수요일

Page 30: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 31: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 32: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 33: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Faster����������� ������������������  Startup����������� ������������������  Time

17

13년 5월 15일 수요일

Page 34: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 35: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 36: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 37: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 38: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 39: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

19

Smaller����������� ������������������  CSS

13년 5월 15일 수요일

Page 40: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha20

‣ sencha-touch.css 크기 비교

Smaller����������� ������������������  CSS

13년 5월 15일 수요일

Page 41: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 42: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 43: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

그밖의����������� ������������������  기능

22

13년 5월 15일 수요일

Page 44: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

‣ 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일 수요일

Page 45: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

‣ 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일 수요일

Page 46: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

‣ 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일 수요일

Page 47: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

MobileWebApp 최고의����������� ������������������  솔루션

25

13년 5월 15일 수요일

Page 48: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

HTML5 MobileWebApp

26

HTML5 Development

13년 5월 15일 수요일

Page 49: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

HTML5 MobileWebApp

MobileApp

DesktopWebApp

DesktopApp

27

HTML5 Development

13년 5월 15일 수요일

Page 50: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha28

HTML5 Development

HTML5는Mobile이����������� ������������������  다가����������� ������������������  아니다

Desktop����������� ������������������  은??

13년 5월 15일 수요일

Page 51: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha28

HTML5 Development

HTML5는Mobile이����������� ������������������  다가����������� ������������������  아니다

Desktop����������� ������������������  은??

13년 5월 15일 수요일

Page 52: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Mobile이����������� ������������������  다가����������� ������������������  아니다Desktop����������� ������������������  은??

Sencha Touch

Mobile Desktop

29

13년 5월 15일 수요일

Page 53: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Mobile이����������� ������������������  다가����������� ������������������  아니다Desktop����������� ������������������  은??

Sencha Touch Ext JS

Mobile Desktop

29

13년 5월 15일 수요일

Page 54: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha Touch Ext JS

Mobile Desktop

30

13년 5월 15일 수요일

Page 55: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha Touch Ext JS

Mobile Desktop

Sencha Mobile Sencha Desktop

+ +

31

13년 5월 15일 수요일

Page 56: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha Touch Ext JS

Mobile Desktop

Sencha Mobile Sencha Desktop

32

13년 5월 15일 수요일

Page 57: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha Touch Ext JS

Mobile Desktop

Sencha Mobile Sencha DesktopSencha Charts

33

13년 5월 15일 수요일

Page 58: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 59: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 60: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect

36

13년 5월 15일 수요일

Page 61: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect

Sencha Eclipse

36

13년 5월 15일 수요일

Page 62: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect

Sencha Eclipse

37

13년 5월 15일 수요일

Page 63: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect

Sencha Eclipse

Sencha Animator

37

13년 5월 15일 수요일

Page 64: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect

Sencha Eclipse Sencha Animator

38

13년 5월 15일 수요일

Page 65: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Architect

Sencha Eclipse Sencha Animator

Enterprise

38

13년 5월 15일 수요일

Page 66: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse

Sencha Architect

Sencha AnimatorEnterprise

39

13년 5월 15일 수요일

Page 67: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha Charts

Sencha CareSencha Eclipse Sencha Architect

Sencha AnimatorEnterprise

39

13년 5월 15일 수요일

Page 68: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

Sencha Architect

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

Sencha TouchExt JSSencha MobileSencha DesktopSencha ChartsSencha Eclipse Sencha AnimatorEnterpriseSencha Care

40

13년 5월 15일 수요일

Page 69: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 70: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 71: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 72: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 73: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 74: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 75: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 76: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

Performance

44

Performance

13년 5월 15일 수요일

Page 77: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

ce

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

Fa����������� ������������������  ����������� ������������������  ����������� ������������������  book

45

Performance

13년 5월 15일 수요일

Page 78: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Fa����������� ������������������  ����������� ������������������  ����������� ������������������  bookst

45

Performance

13년 5월 15일 수요일

Page 79: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

§ Mark Zuckerberg- “HTML5 wasn`t ready”

§ HTML5 App ==> Native App

46

Sencha Touch - Fastbook

13년 5월 15일 수요일

Page 80: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 81: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Demo

48

Sencha Touch - Fastbook

13년 5월 15일 수요일

Page 82: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha48

Sencha Touch - Fastbook

13년 5월 15일 수요일

Page 83: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

iPhone����������� ������������������  말고Android����������� ������������������  는?

49

Sencha Touch - Fastbook

13년 5월 15일 수요일

Page 84: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Demo����������� ������������������  -����������� ������������������  Android

50

Sencha Touch - Fastbook

13년 5월 15일 수요일

Page 85: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha50

Sencha Touch - Fastbook

13년 5월 15일 수요일

Page 86: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

vs.

JavaScript����������� ������������������  +����������� ������������������  DOM

Performance

51

Sencha Touch - Fastbook

13년 5월 15일 수요일

Page 87: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 88: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 89: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha53

13년 5월 15일 수요일

Page 90: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

마무리

53

13년 5월 15일 수요일

Page 91: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

https://www.facebook.com/groups/korea.sencha54

13년 5월 15일 수요일

Page 92: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

Sencha����������� ������������������  로����������� ������������������  끝장내는Front-End����������� ������������������  개발

54

13년 5월 15일 수요일

Page 93: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

55

13년 5월 15일 수요일

Page 94: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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

UI

Control

Logic

55

13년 5월 15일 수요일

Page 95: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일

Page 96: Sencha 로 끝장내는 HTML5 Front-End 개발과 Architectsencha.or.kr/wp-content/uploads/2013/05/별천지... · Sencha 로 끝장내는 HTML5 Front-End 개발과 Architect! 한국센차유저그룹

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일 수요일