DOC 2. [Overview] What's New in Sencha Touch 2.0

원문 : http://docs.sencha.com/touch/2-0/#!/guide/whats_new

번역 : 정건우 [Github:NangChun]

Here's a list of the new features and functionality in Sencha Touch 2.0 that were not part of the earlier versions.

Note: This guide is a work in progress and does not cover all new Sencha Touch 2 functionality. Check back frequently for updates. Sencha Touch 2 is currently in Developer Preview. Expect there to be bugs, missing features, and incomplete documentation.

센차터치 2.0 에서 새로워진 점

다음은 이전 버전의 일부가 아니었던 센차터치 2.0의 새로운 기능과 기능의 목록입니다.

참고: 이 가이드는 진행중인 작품이며 모든 새로운 센차터치 2 기능이 적용되지 않습니다. 업데이트를 자주 확인하십시오. 센차터치 2는 현재 개발자 프리뷰 입니다. 버그, 누락된 기능 및 불완전한 문서가 있을 수 있습니다.

Welcome to Sencha Touch 2

Sencha Touch was the first HTML5 mobile framework and 2.0 is its most significant upgrade. The foremost focus of the release is performance -- getting apps running fast on as many devices as possible. Apps start up much faster, provide a much snappier initial render and layout, and lay out again immediately when a device is roatated. Among the other significant enhancements:

• A brand new scroller, optimized for each platform and faster than ever - especially on Android devices. We've optimized the rendering process and have applied innovative techniques to reuse existing components without having to instantiate new ones.

• Many innovations from Ext JS 4, including the advanced new class system, reconfigurable components, and improvements to application architecture.

• Increased support for a wider range of devices with reduced emphasis on WebKit and a more robust platform that we can use to support more devices over time.

Here's a closer look at these and other enhancements introduced with Sencha Touch 2.0.

센차터치2에 오신것을 환영합니다.

센차터치는 첫번째 HTML5 모바일 프레임워크이며 2.0에서 가장 중요한 업그레이드가 있었습니다. 릴리스의 제일의 초첨은 성능 입니다. 보다 많은 장비에서 애플리케이션을 빠르게 실행할 수 있습니다. 휠씬 더 빠르게 애플리케이션이 시작되고, 휠씬 신속하게 초기 렌더링과 레이아웃을 제공하며, 장치가 회전하면 화면을 즉시 다시 배치합니다. 그 중 다른 중요한 개선사항 입니다 :

• 새로운 스크롤러, 어느 때 보다도 각 플랫폼에 - 특히 안드로이드 장치에서 빠르고 최적화된. 렌더링 프로세스를 최적화했고 새 인스턴스를 적용하지 않고 기존의 컴포넌트를 재사용하기 위해 혁신적인 기술을 사용.

• 새로운 고급 클래스 시스템, 재구성 구성 요소 및 응용 프로그램 아키텍처에 대한 향상된 기능을 포함하며 EXT JS 4에서의 많은 혁신.

• 시간이 지나면서 장치들의 종류가 광범위하게 늘어남과 동시에 웹킷이 강하고 가벼워지면서 더많은 장치들을 지원하는데 사용할 수 있는 보다 강력한 플랫폼.

여기 센차터치 2.0과 함께 소개된 이러한 및 기타 향상된 기능에 대해 자세히 살펴보실 수 있습니다.

Smaller, faster layout engine

Sencha Touch offers a very flexible layout system that makes it easy to lay out apps for a variety of device shapes and sizes. Version 2 brings a layout engine that runs much more like the browser's optimized CSS engine. The result is enormously improved performance in several key areas:

• Apps render and lay out faster on startup
• Updating the screen after rotating the device is much faster than with Sencha Touch 1.x apps
• Layout engine is much smaller, resulting in faster download

All of the layout configuration options from Sencha Touch 1 continue to work with the new layout engine so you don't have to change a line of code.

The result is massively improved layout performance across the board. Screens pop onto the page much faster when navigating through the app, giving a much more fluid experience. The most dramatic improvement occurs when a device changes orientation. The new layout engine is so fast we had to use a high-speed camera to measure it. Here’s the Kitchen Sink buttons example running on 1.x and 2.x, slowed down to one quarter speed:

작고 빠른 레이아웃 엔진

센차터치는 쉽게 장치 형태와 크기의 다양한 애플리케이션을 배치하기 위해 만들어져 매우 유연한 레이아웃 시스템을 제공합니다. 버전 2는 브라우저의 최적화된 CSS엔진과 같이 더 많은 것들을 실행하는 레이아웃 엔진을 제공합니다. 그 결과 몇 가지 주요 분야에서 성능이 매우 향상 되었으며 다음과 같습니다 :

• 애플리케이션 렌더링 및 시작할 때 빨리 배치
• 애플리케이션에서 장치를 회전 후 화면이 센차터치 1.x보다 훨씬 빠른 업데이트
• 레이아웃 엔진은 훨씬 작아지고, 빠른 다운로드

코드라인을 변경하지 않아도 되도록 센차터치 1의 모든 레이아웃 구성 옵션은 새 레이아웃 엔진과 지속적으로 일하고 있습니다.

그 결과 보드가 교차할때의 성능이 탄탄하게 향상되었습니다. 앱을 항상 빠르게 탐색 할때에도 팝업 창이 매우 빠르게 뜨며, 유연한 경험을 더욱 많이 제공해줍니다. 새 레이아웃 엔진이 빨라진 만큼 그를 측정하는 고속 카메라 도구를 이용하고 있습니다. 다음은 싱크대 버튼 예제로 1.x은 2.x보다 매분기마다 실행속도가 둔화됩니다 :

Stronger, smarter core

Sencha Touch benefits from a shared development environment with Ext JS. Ext JS 4 brought a range of new innovations that are now build into Sencha Touch, including the following:

• Upgraded class system with support for dynamic loading and dependencies
• Support for class configurations as a core construct - gives you getters and setters for free and a clean, consistent API

똑똑하며 더강해진 코어

센차터치 EXT JS와 공유 개발 환경의 장점. EXT JS 4는 이제 다음과 같은 센차터치에 빌드되는 새로운 혁신의 범위를 가져왔습니다 :

• 동적 로딩과 종속성을 지원하는것과 업그레이드된 클래스 시스템
• 코어 구조와 같은 클래스 구성 지원 - 무료이며 깨끗하고 일관된 API에 당신에게 getters와 setters을 제공

Faster startup time

We weren’t happy with app startup time in 1.x so we’re optimizing everything we can with startup. So far we’re seeing between 10% to 25% improvement in startup time on a range of devices when testing our Kitchen Sink example. This app is sizable—it demonstrates almost every component in the framework. On many devices, it loads almost a second faster in 2.x:

할 수있는 모든 시작을 최적화하고 있으므로 1.x에서의 응용 프로그램 시작시간에 만족하지 못하였습니다. 지금까지 싱크대 예제를 테스트할 때 기기의 대한 시작시간 범위를 25% 10% 사이로 개선한 것으로 보고 있습니다. 이 애플리케이션은 상당히 큰 프레임워크의 거의 모든 구성 요소를 보여줍니다. 많은 장치에서 2.x가 거의 두배가 빠르게 로드 되었습니다 :

Class system and apps

Sencha Touch 2 uses the powerful new class system from Ext JS 4. This provides all the benefits of dynamic loading, intelligent builds that only include the classes you use, mixins, configurations, and all the other features of the new engine. For details, see the How to use classes in Sencha Touch 2 guide.

We’ve also brought across the Ext JS 4 application architecture, that includes ComponentQuery and production build support. We’re not quite done with the model view controller (MVC) packaged in the developer beta release and will be adding features like deep linking/history support in upcoming previews and betas.

어플리케이션과 클래스 시스템

센차터치 2는 EXT JS 4의 강력하고 새로운 수준의 클래스 시스템을 사용합니다. 이는 동적 로딩에만 사용할 클래스, mixins, 구성, 그리고 새로운 엔진의 다른 모든 기능을 포함한 지능적 빌드의 모든 이점을 제공합니다. 자세한 내용은 참조 Sencha 터치 2에서 클래스 이용 방법 안내.

또한 EXT JS 4 애플리케이션 아키텍처를 가져 왔으며, ComponentQuery 및 제작 빌드지원이 포함되어 있습니다. 개발자 베타 릴리즈는 아직 끝난게 않았고 모델뷰 컨트롤러 패키지(MVC)와 함께 deep linking / 예정된 프리뷰의 히스토리 지원과 같은 베타기능을 추가할 것입니다.

Config-driven components

One of the benefits of the new class system is the ability to set up 'configs' - simple properties that are automatically given getter and setter functions, defaults, and more.

Sencha Touch 2 makes use of the config system throughout the framework. Whenever you see a config on a class you already know that you can reconfigure it at any time (even after it is rendered). Even better, because the config's setter name always follows the same pattern you already know what function to call.

For example, we can give a 'Text Field' a label when we instantiate it and then know we can easily change it later:

var text = Ext.create('Ext.form.Text', {
	label: 'My Field'
});

//anything we can configure also has a setter function
//its name always follows the setConfigName pattern
text.setLabel('Another Field');

Configs are great because they give classes a very clean API. Everything you see under the 'Config options' in the API docs for each class is a true config complete with standardized getter and setter functions.

For a full overview of the new capabilities see the Class System guide .

config 기반의 구성 요소

새 클래스 시스템의 장점 중 하나는 'configs'을 설정하는 기능입니다 - 자동 getter 및 setter 기능, 디폴트값 등을 부여하는 속성입니다. 센차터치 2 프레임워크에 걸쳐 config 시스템을 사용합니다. 알다시피 클래스에 config를 볼 때마다 언제든지 reconfigure(렌더링 후에도) 할 수 있습니다. 훨씬 나으며, 때문에 언제나 config's Setter 와 같은 이름의 함수호출 방식을 따릅니다.

예를 들어, '텍스트 필드'에 초기화하고 쉽게 나중에 변경해 줄 수 있음을 알고 있을 때의 label 입니다 :

var text = Ext.create('Ext.form.Text', {
	label: 'My Field'
});

//언제나 setter 함수를 가지고  configure 할 수 있다.
//이름은 항상 setConfigName 패턴을 따른다.
text.setLabel('Another Field');

Configs를 쓰는 주된 이유는 클래스에게 매우 깔끔한 API를 제공하기 때문입니다. 보이는 모든 규격화된 getter와 setter 함수는 함께 각각의 구성이 완료된 클래스를 위한 API문서의 'Config 옵션'을 따릅니다.

새로운 기능의 전체 개요는 클래스 시스템 가이드를 참조.

Improved MVC Capabilities

Sencha Touch 1 came with a simple way to organize your application along MVC (Model View Controller) lines. Sencha Touch 2 significantly improves on this, incorporating full history support, a powerful new way to control Components, and a powerful way to customize your application for a different screen sizes.

On top of this, the data package has been ported to use the new class system, making it much more flexible and improving performance. For a full overview on the MVC improvements in Sencha Touch 2 see the following guides:

• Intro to Applications
• Profiles
• Controllers
• History Support

향상된 MVC 기능

센차터치 1은 MVC (모델 뷰 컨트롤러) 구조를 따라 응용프로그램을 구성하는 간단한 방법으로 해왔습니다. 센차터치 2는 크게 전체 히스토리 지원, 강력하고 새로운 방법으로 구성 요소를 제어, 그리고 응용프로그램에서 서로 다른 화면 크기를 사용자에게 맞추는 강력한 방법등을 통합하여 향상시킵니다.

데이터 패키지는 훨씬 더 유연한 제작 및 성능을 개선, 새 클래스 시스템을 사용하는 폼에 장착을 할 수 있습니다. 센차터치 2 MVC 개선에 대한 전체 개요는 다음 가이드를 참조하십시오 :

• 어플리케이션 개론
• 프로필
• 컨트롤러
• 기록 지원

Much better Android support

Sencha Touch 2 brings a big improvement in Android performance, particularly when it comes to scrolling and animation. In Sencha Touch 1.x Android devices were noticeably slower when scrolling through large lists. Animations could be choppy and exhibit weird visual artifacts.

Touch 2 gives Android its own optimized mechanism for achieving both smooth scrolling and fast, fluid animations. We’ll go further into the technology behind these advances at SenchaCon later this month, but for now here’s the Motorola Atrix again, showing just how much faster 2.x feels on Android devices:

향상된 안드로이드 지원

센차터치 2는 스크롤 애니메이션에 관해서, 안드로이드의 성능에 특히 큰 향상을 가져옵니다. 센차터치 1.x 에서 안드로이드 디바이스에서 큰 목록은 스크롤이 눈에 띄게 느려집니다. 애니메이션이 자주 끈어질수 있으며 이상한 결과물이 보일 수 있습니다.

터치 2는 안드로이드에게 부드러운 스크롤과 유동적인 고속 애니메이션을 모두 달성하기 위해 자체적으로 최적화된 메커니즘을 제공합니다. 이달 SenchaCon 이후로도 나중에 기술적으로 더 나아갈 것 입니다만, 지금은 안드로이드 장치에서 2.x이 얼마나 빨라졌는지를 모토로라 Atrix로 느껴보십시요.

Native packaging

One of the most common questions developers ask when building Sencha Touch apps is, “How do I get my app in front of customers?” In many scenarios, building and deploying apps to the web is exactly what developers want and customers expect. In other cases, getting apps in to app stores is the fastest way to reach customers.

Sencha Touch 2 makes it incredibly easy to build and deploy apps to both the Android Marketplace and the iOS App Store. Today, along with Sencha Touch 2 preview, we’re shipping a developer preview of our SDK Tools 2.0. The new SDK Tools include a new sencha package command that enables you to take your Sencha Touch app and package it up as an APP for iOS or an APK for Android. It’s that easy: One command, and your app is ready to be submitted to Apple or Google for distribution.

To make a developer’s life easier, on iOS the packager doesn’t require the native SDK so you can package without having to download Apple’s SDK. Just download the SDK Tools and you’re ready to build. If you’re deploying to Android, you’ll need to download the Android SDK from Google. For developers who do have the the native SDKs, you can use the SDK Tools to directly push your app to the iOS and Android emulators so you can see how your app will run on device.

The SDK Tools Developer Preview is now available on Mac OS X; Windows and Linux support will be added soon. We’ll also be adding device APIs that will make it easy to use native features like camera and contacts among others. For all the details on how to use the new packaging capabilities, see Native Packaging for iOS on Mac and Native Android Packaging. We think you’ll be as excited as we are with how easy it is now to build and package your web app for native distribution.

네이티브 패키징

센차터치 애플리케이션을 빌드하던 중 개발자 한명이 가장 흔한 질문을 하길, "저의 앱을 어떻게 고객 앞에 노출할수 있을까요?" 많은 시나리오 안에서, 고객들과 개발자들이 정확히 얼마만큼 요구하느냐에 따라 웹으로 앱이 빌드되고 배포됩니다. 그 외에 앱스토어로 애플리케이션을 받는 것은 고객에게 접근하는 가장 빠른 방법입니다.

센차터치 2는 안드로이드 마켓과 iOS 앱스토어 모두 애플리케이션을 빌드하고 배포하기가 매우 쉽습니다. 오늘날 센차터치2 프리뷰 와 함께, 우리는 SDK 도구 2.0 개발자 프리뷰를 출시하고. 새로운 SDK 도구는 새로운 센차패키지에 포함되고 센차터치 애플리케이션을 가지고 iOS이나 안드로이드에 대한 APK를위한 APP로 최대 패키지 할 수 있도록 명령할수 있습니다. 특정 마켓에 종속되지 않게 배포 준비를 하는 일은 쉽지 않습니다.

애플의 SDK를 다운로드하지 않고 패키지할 수 있게 packager가 네이티브 SDK를 요구하지 않는 iOS로, 개발자의 활동을 더 편하게 합니다. 그저 SDK 도구를 다운로드하면 빌드 준비가 된 것입니다. 안드로이드로 배포하는 경우 구글에서 안드로이드 SDK를 다운로드해야합니다. 개발자들을 위해 네이티브 SDKs가 있으며, iOS와 안드로이드 에뮬레이터에 즉시 앱을 넣어 앱이 어떻게 장치에서 실행되는지 볼 수있는 sdk도구를 사용할 수 있습니다.

SDK 도구 개발자 프리뷰는 이제 맥 OS X에서 사용할 수 있고, Windows 및 Linux 지원은 곧 추가됩니다. 또한 쉽게 ​​카메라와 다른 사람 사이에 접촉과 같은 기본 기능을 사용하는 장치 API가 추가됩니다. 새로운 패키징 기능 사용 방법에 대한 모든 세부 사항을 보려면 Mac에서 iOS를 위한 네이티브 패키징 및 네이티브 안드로이드 패키징. 이젠 네이티브 배포를 목적으로 웹앱을 빌드하고 패키지 하는것이 너무나 쉬워져서 우리처럼 흥분되시리라 생각합니다.

Overhauled docs

All of the most widely used classes in Sencha Touch 2 feature excellent documentation right in the API reference. Interspersed into the class docs are dozens of live examples that run right in your browser and let you see (and even modify) the example code on the fly. We’ve also brought all of the SASS variables for each component into the API docs, making it much easier to see what you can customize.

We’re shipping 11 brand new guides out of the box. We have guides that explain core concepts like layouts, components, and classes, others that cover how to use components like tab panels, forms, and carousels, and a new getting started guide that takes you through building your first app from scratch.

철저한 문서도구

API 레퍼런스에서 뛰어난 기능의 센차터치2 클래스가 문서 오른쪽에 가장 넓게 사용 되었습니다. 클래스 문서로 배치되어 바로 브라우저에서 실행되는 라이브 예제 수십가지가 있으며 (지속적인 수정과) 예제 코드를 바로 보십시오. 또한 API 문서에 각 컴포넌트에 대한 SASS 변수를 모두 가져 왔으며, 훨씬 쉬워 보이도록 정의 합니다.

11가지의 새로운 가이드를 출시하였습니다. 레이아웃, 컴포넌트 그리고 클래스, 다른것을 감추는 탭 패널과 같은 컴포넌트를 어떻게 사용하는지, forms, 및 carousels, 그리고 시작 가이드를 통해 첫 번째 앱을 구축 할 수 있습니다.