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

Preview:

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

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 : kim@jongkwang.com

§ Blog : http://jongkwang.com

§ Twitter : @jongkwang

§ Facebook : https://www.facebook.com/kimjongkwang

13년 5월 15일 수요일