Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sencha touch 발표자료_20121220

  • Be the first to comment

Sencha touch 발표자료_20121220

  1. 1. 모바일 web APP Framework Sencha Touch 2012.12.20 황창근
  2. 2. 한달안에 멋진APP 좀 만들어주세요.기대하겠습니다~!
  3. 3. 고객이 생각하는 UI와 UX
  4. 4. 네이티브APP 으로?시간개발인력돈
  5. 5. 궁금해요? 궁금하면 뽀뽀~
  6. 6. 차세대 웹 표준기술html > xhtml > html5Html5 : W3C 2014년에 정식 표준기술 권고예정.현재 초안으로 표준화작업이 진행중. HTML5로는 안되는게 없다!
  7. 7. HTML5 기반의 모바일 WEBAPP facebook(HTML5의 기술로 밀어붙인 마크주커버그) 안드로이드 : HTML5기반 Hybrid APP (속도가 최악) iOS : native APP (올 8월 HTML5 > 네이티브APP으로 변경) 센차로만든 HTML5 패스트북 : http://vimeo.com/55486684 clear ( 일정관리 APP) 심플함을 대명사로 이슈가 되었던 APP 소개동영상 http://www.youtube.com/watch?v=S00H-rz7fGo Html5 webapp : http://www.youtube.com/watch?v=RZ- R0AsnWxY
  8. 8. Sencha Touch센차터치의 개발방식은 마크업기반인 jQuery Mobile과는 달리 JavaScript 기반이다.다른 프레임웍에 비해ExtJS라는 기존웹앱 개발프레임웍 기반으로 제작되어 개발난이도가 높음.방대하고 체계적인 API를 제공하여 다양한 기능과 높은성능의 APP 개발이 가능. 터치UI 화면전환 애니메이션(슬라이드/팝업)
  9. 9. iOS용 APP Store 및안드로이드용 Play스토어에 등록된 APP
  10. 10. 센차터치는 index페이지 최초 호출시 index및 하위페이지에 선언된 모든 페이지를 로드한다. 서버와의 연결을 통해 데이터를 가져올때는 AJAX로 처리.<script id="microloader" type="text/javascript"src="touch/microloader/development.js"></script> 마크업 기반이 아니어서 body태 그엔 내용이 없다.(그냥 로딩이미 지나 간단한 태그만 들어감)
  11. 11. 초기로딩시의 느린속도터닝 WEB APP 소스에 들어간 JS 로딩<script type="text/javascript" src="/smartlearning/mobile/app/view/dataStore.js"></script><script type="text/javascript" src="/smartlearning/mobile/app/view/content_list_Tablet.js"></script<script type="text/javascript" src="/smartlearning/mobile/app/view/content_search_tablet.js"></script<script type="text/javascript" src="/smartlearning/mobile/login.js"></script><link rel="stylesheet" href="/smartlearning/mobile/css/android.css" type="text/css"><script type="text/javascript" src="/smartlearning/mobile/js/video_ios.js"></script><script type="text/javascript" src="app.js"></script><script type="text/javascript" src="/smartlearning/mobile/js/sencha-touch.js"></script><script type="text/javascript" src="/smartlearning/mobile/js/cookies.js"></script>초기 전체 로딩용량 : 680KB보통 3G속도는 1Mbps ~ 2Mbps입니다. (1Mbit/sec = 128KByte)이는 5.3초 ~ 2.7초 걸린다는 말. 실제 체감속도는 이보다 더 느림!
  12. 12. Sencha touch 2.11) Layout 퍼포먼스 향상- 네이티브APP에 근접한 레이아웃UI(화면슬라이딩, 부드러운 움직임 등 개선)- 아래는 실제 디바이스로 비교한결과(orientation change event) http://vimeo.com/30296006/ http://www.youtube.com/watch?v=M3mbu6cA_lE2) List Component 성능향상- 리스트의 수가 많을경우 상/하단 리스트항목의 dom elements를 추가/삭제 하여 부드러운 스크롤링 가능해짐.(무제한 리스트 구현의 성능 해결)3) 기타 개선항목- 기본MVC 모델제공(유지보수 및 확장성 용이)- 동적 클래스(js파일) 로딩기능(초기 로딩용량을 줄일 수 있음)- Native API Support 확대
  13. 13. MVC모델 개발기법 사용으로 체계화되고 짜임새 있는개발가능. 요기가 구현부. js파일로 개발.
  14. 14. 센차터치의 기본문법 - JSON(제이슨)- XML과 같이 인터넷을 통해 자료를 주고받을때 그 자료를 표현하는 방법- 자바스크립트 기반의 프로그램언어 및 플랫폼 독립적으로 센차터치 뿐 아니라 많은 언어에서 이용.- Xml보다 속도가 빠르고 데이터 표현방식도 쉬워 많이 사용되고 있음.<book> XML <type>textbook</type> <pages>256</pages> <title>Programming Pearls 2nd Edition</title> <description>The first edition of Programming Pearls was one of the most...</description> <rating>4.5</rating> <coverType>paperback</coverType> <genre>Computer Science</genre></book>{"book": { JSON "type": "textbook", "pages": "256", "title": "Programming Pearls 2nd Edition", "description": "The first edition of Programming Pearls was one of the most...", "rating": "4.5", "coverType": "paperback", "genre": "Computer Science", } }
  15. 15. TED 처럼 디자인 해주세요. 이미지 좀 예쁘게 색상도 예쁘 게 버튼모양하고 UI에 신경 써 주세요. 프로답지 않게 왜 디자인이 이 모양이래요~? 그거밖에 못해요? 단조로운 디자인고객의 요구는 멋진 디자인에 멋진 UI를 원하지만 센차터치 만으론 이를 충족할 수 없다.
  16. 16. Sencha touch문법 + 익숙한 기존HTML 개발방식 적용contentEL 속성contentEL 속성을 이용하면 HTML 형태로 화면을 구성할 수 있다.<script>var mainPanel = new Ext.Panel({ width: 260, scroll: vertical, contentEl: menuList <!-- menuList를 불러 온다 -->});</script><div id="menuList"> <!-- menuList라고 ID 값을 준다. --> <ul> <li><a href="bbs1.html">게시판1</a></li> <li><a href="bbs2.html">게시판2</a></li> <li><a href="bbs3.html">게시판3</a></li> </ul></div> 동영상 : http://www.youtube.com/watch?v=63WA_idl5Io
  17. 17. 터닝 적용사례나 플래시… 앨범형 이미지 리스트 복잡한 화면구성 Html DOM Element 를 붙이는형식
  18. 18. Hybrid APP- HTML5 webAPP + 네이티브APP의 기능
  19. 19. 네이티브APP과의 경쟁에서모바일 WEBAPP의 전망이 밝은 이유1.HTML5의 발전.2.Sencha Touch와 모바일프레임웍은 현재 계속 버전업이 되면서 성능이 향상되고 있음.3.국내 개발자와 레퍼런스도 늘어나고 있음.4.더불어 디바이스의 성능 또한 좋아지고 있음.
  20. 20. 지속적인 관심과 STUDY만이 살길!WEB/모바일기술의 트랜드에 대한 관심과 study.- html5, 모바일개발 프레임웍, WEB관련기술교육솔루션 상품개발에 대한 연구/준비-개발기술의 전문성과 고객만족.

    Be the first to comment

    Login to see the comments

  • ssuser860745

    Mar. 20, 2013
  • mohwa

    Sep. 25, 2013
  • SeongHaRyu

    Dec. 6, 2013

Views

Total views

1,742

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

0

Shares

0

Comments

0

Likes

3

×