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

번역 : 정건우 [Github:NangChun]

Sencha Touch 2 comes with a brand new class system that features an ability to dynamically load classes when they are needed. This has many benefits in both development and production.

In development, dynamic loading means you get a file-by-file stack trace, which makes it much easier to debug problems with your application. For production, we provide a build tool that enables you to easily create a minified custom build that only includes the classes your app actually uses, meaning loading times are often reduced for your users.

필요할 때 동적으로 클래스를 로드하는 능력을 갖춘 새로운 종류의 클래스 시스템과 함께 센차터치2가 제공됩니다. 개발과 생산성 모두 많은 장점이 있습니다.

개발시에는, 동적 로딩은 파일간 스택 추적을 얻을 수 있음을 의미하며, 훨씬 쉽게 응용 프로그램 문제를 디버깅할 수 있습니다. 제작을 위해선, custom빌드를 앱이 실질적으로 사용하는 클래스를 포함하여 축소하고 빌드를 가능한 쉽게 만드는 도구를 제공하며, 주로 사용자를 위한 로딩시간 감소를 목적으로 합니다.

Sencha Touch 2 ships with 5 builds out of the box. If you just want to get up and running as quickly as possible it's best to simply use sencha-touch-debug.js while developing your app locally then switch to sencha-touch.js in production. The other three builds are good for debugging in production, running in production without a custom build, and migrating your 1.x app to 2.x. Because each build is good for a different purpose an created using a different set of build options we've created a simple table below that shows how each one is configured:

Note that the last 3 builds are contained within the 'builds' directory in the SDK download. If the table above is not self-explanatory, here's a little more detail on what each option means:

• Type: either "Core" or "All" - Core includes the base classes but none of the Components, All means everything is included
• Loader: whether dynamic loading is activated or not. Only sencha-touch.js has this activated by default
• Minified: means the build has been compressed with YUI compressor
• Comments: means the build still contains the JSDoc comments (these are usually stripped in production to speed up downloads)
• Debug: means that the build will give you debug messages such as telling you if you have misconfigured a class
• Compat: means that code to provide backwards compatibility with Sencha Touch 1.x is present in the build

Again, use sencha-touch-debug.js in development mode then switch to either sencha-touch.js or sencha-touch-all.js plus a custom build in production.

센차터치2는 5가지 빌드들과 함께 출시됩니다. 깨우고 최대한 빠르게 실행하려는 순간일 경우 간단히 sencha-touch.js를 사용하고 제작시엔 로컬에서 앱을 개발 할때면 sencha-touch-debug.js로 전환하여 사용하는 것이 좋습니다. 제작할때 디버깅에 좋은 다른 세가지 빌드는, custom 빌드 없이도 제작하여 실행됩니다, 그리고 1.x 에서 2.x로 이전합니다. 각 빌드는 다른 목적을 위해 있는 것이기 때문에 아래에 간단한 테이블을 작성해 옵션을 빌드의 각기 다른 세트 하나하나로 구성하는 방법을 사용하여 만드는 것이 좋다는 것을 보여 줍니다 :

마지막 3가지 빌드는 SDK 다운로드 안의 '빌드'디렉토리 내에 포함되어 있는지 참고 합니다. 다만 위의 테이블로 이해가 안될 경우, 여기서 좀더 자세히 각각의 옵션의 의미를 알수 있습니다:

• 종류: "코어"또는 "전부" 중 하나 입니다 - 코어는 기본 클래스는 포함되었으나 컴포넌트가 없으며, 전부는 모든것을 포함하였다는 의미
• 로더: 동적로딩이 활성화 되었는 지에 대한 여부입니다. sencha-touch.js 만이 기본적으로 활성화
• 축소됨: YUI 압축기로 빌드가 압축되었음을 의미
• 주석: 빌드가 아직 JSDoc 주석이 아직 포함되었음을 의미 (보통 다운로드 속도를 높이기 위해 제작시 제외)
• 디버그: 빌드가 잘못 구성된 클래스가 있을 경우를 말하는 등의 디버그 메시지가 제공 된다는 것을 의미
• Compat: 센차터치1.x 과 함께 하위 호환성을 제공하는 코드가 빌드에 존재함을 의미

다시, 제작중에 sencha-touch.js 또는 sencha-touch-all.js 중 하나를 개발자 모드시에 sencha-touch-debug.js 로 전환하여 사용합니다.

In the vast majority of cases a Sencha Touch 2 app should use a custom build in production, for 2 main reasons:

1. Custom builds include only the framework classes your app is actually using, saving on download time
2. A custom build includes all of your app classes in a single file, which means only one network request

Reason 2 is especially important. Most applications will have a large number of files (sometimes hundreds), and loading them one by one, especially over a 3g network, can take a long time. That's because each request can add several hundred milliseconds of delay, depending on network conditions, which can easily add several seconds to your application's overall load time.

To ensure your applications load quickly in production we have created the Sencha SDK Tools, which includes a build script that automatically does all of this:

1. Figures out which framework classes your application is actually using
2. Figures out which application classes are loaded when your application boots up
3. Combines all of these into a single file, with the classes in the right order
4. Strips out all of the JSDoc comments, then minifies the file so it's as small as possible

If you don't already have the Sencha SDK Tools installed, you'll need to install them before you can create a build. A quick way to check to see if the tools are already installed is to open up your command line terminal and type in 'sencha' - if the SDK Tools are present you should see something like this:

Output of running 'sencha' on the command line if the SDK Tools are installed

If you get an error instead you probably don't have the SDK Tools installed. Just hit the download button on http://www.sencha.com/products/sdk-tools, double-click the downloaded file to install then try the sencha command again and everything should work.

** Note: ** The build steps are expected to be simplified in the next release (2.0.0 Beta 2) so please check this page again once that release is available.

We're going to assume you have an app that works locally already and that you just want to build it for production. If you don't have an app yet or don't know what this is all about, check out the getting started guide.

Assuming you app does work locally though, let's proceed. We're going to use the Twitter example that comes with the Sencha Touch SDK to illustrate how this works. Firstly let's familiarize ourselves with that example's index.html file:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Twitter</title>

    <link rel="stylesheet" href="resources/css/application.css" type="text/css">

    <script type="text/javascript" src="touch/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

Notice that we're loading sencha-touch-debug.js and app.js - this combination is what allows us to use dynamic loading while developing our app, and is the basis for the SDK Tools' ability to generate a minimal build. We'll come back to this html file's contents shortly.

Back to the command line - first you'll need to cd into to the directory that your app can be found in on your hard drive:

cd ~/path/to/my/app

Next you'll need to generate a jsb file for your app. A jsb file is basically a list of all the classes that your application uses. Thankfully, the SDK Tools do this for you:

sencha create jsb -a index.html -p app.jsb3

This command takes your index.html file (the same file you use in your browser while developing your app), figures out all of the class dependencies and writes them out into a file called app.jsb3. From here we just need one more command to actually generate the build itself:

sencha build -p app.jsb3 -d ./

This final command takes all of the files listed in the jsb and combines them into a single file, which it then minifies to make as small as possible. The output is a file called all-classes.js, which contains all of the framework classes plus your application classes.

The final step to prepare your app for production is to update your HTML file to use sencha-touch.js instead of sencha-touch-debug.js, and to load your newly-generated all-classes.js. Here's how our twitter example file ends up:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Twitter</title>

    <link rel="stylesheet" href="resources/css/application.css" type="text/css">

    <script type="text/javascript" src="touch/sencha-touch.js"></script>
	<script type="text/javascript" src="all-classes.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

Rather than change your main index.html file all the time, it's common to create a duplicate called index-production.html that looks like the file above. Many developers will produce a simple deploy script that copies the app into a deploy folder and renames index-production.html to index.html automatically so that the build can simply be uploaded.

Although it's only a few steps, we'd like to improve both the workflow and the output of the builder for the next release of Sencha Touch. If you're building using Sencha Touch 2.0 beta 1 please be sure to check back when you upgrade to a later release as it is likely the steps and output will have changed slightly.

대부분의 경우 센차터치2 앱은 제작에 custom 빌드를 사용하고 있을 것이며, 2가지 이유 때문입니다 :

1. custom 빌드는 앱을 실제로 사용하는 경우에만 프레임워크 클래스가 포함됩니다, 다운로드 시간을 절약합니다
2. custom 빌드는 하나의 파일에서 응용 프로그램의 클래스를 모두 포함, 이것은 하나의 네트워크만 요청함을 의미합니다

2의 이유는 중요합니다. 대부분의 애플리케이션은 많은수의 파일을(때로는 수백의) 가져야 하고, 하나씩 로드 하며, 특히 3g 네트워크를 통해서, 시간이 오래 걸릴 수 있습니다. 네트워크 조건에 따라, 각 요청이 수백 밀리초를 추가로 지연 시킬수 있기 때문에, 응용 프로그램의 전체적인 로드시간을 몇초 정도 쉽게 추가할 수 있습니다.

제작 중 응용프로그램의 신속한 로드를 보장하기위해 SDK 도구를 만들었습니다, 다음 빌드 스크립트를 모두 자동으로 포함합니다:

1. 프레임워크 클래스에서 애플리케이션이 자동으로 사용됨을 계산하기
2. 애플리케이션이 깨어날 때 애플리케이션 클래스에서 로드되는 것을 계산하기
3. 이들을 하나의 파일에, 모두 바른 순서대로 클래스와 함께 결합하기
4. JSDoc의 코멘트를 모두 제거, 파일이 가능한 작아지게 축소

센차 SDK 도구가 설치되지 않은 경우, 빌드를 생성하기 전에 설치 되어 있어야 합니다. 도구가 이미 설치되어 있는지 확인하는 빠른 방법은 커맨드 라인 터미널을 열고 'sencha' 를 입력합니다 - SDK 도구가 존재한다면 이렇게 나타납니다 :

SDK 도구가 설치된 경우 커맨드 라인에서 'sencha'가 실행 중 임을 출력

오류가 있다면 아마도 대게 SDK 도구가 설치되어 있지 않은 것 입니다. 그냥 http://www.sencha.com/products/sdk-tools에서 다운로드 버튼을 누르고 다운로드한 파일을 더블클릭하면 다시 센차 설치 명령을 시도한 후 모두 작동할것입니다.

** 참조: ** 빌드 단계 다음 릴리즈 (2.0.0 베타 2)에서 단순하게 예정된 것도 릴리즈를 사용할 수 있는지 다시 한 번 페이지를 확인하시기 바랍니다.

이미 로컬로 작동하는 앱을 가지고 있으며 제작하는 순간을 위해 빌드하길 원한다고 가정합니다. 이에 대해 무엇인지 모르거나 아직 앱이 없다면, 시작 가이드를 확인 하십시요.

앱이 로컬인 것처럼 가정하여, 진행합시다. 어떻게 작동하는지 설명으로 Sencha 터치 SDK와 함께 제공되는 트위터 예제를 사용 할 것 입니다. 첫번째로 index.html 페이지 파일과 함께 스스로 익숙해 집시다:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Twitter</title>

    <link rel="stylesheet" href="resources/css/application.css" type="text/css">

    <script type="text/javascript" src="touch/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

sencha - 터치 debug.js 및 app.js을 로드하고 있는지 주의 - 이 조합은 앱을 개발하면서 동적로드를 사용할 수 있게 해 주는 것이며, 그리고 최소한의 빌드를 생성하기위한 SDK 도구 능력의 기초입니다. 곧 이러한 HTML 파일의 내용으로 돌아올 것입니다.

커맨드라인으로 돌아가서 - cd의 디텍토리로 하드 드라이브에 앱을 먼저 찾아야 합니다 :

cd ~/path/to/my/app

다음은 앱을 위한 jsb 파일을 생성해야합니다. jsb 파일은 기본적으로 앱에서 사용하는 모든 클래스의 목록입니다. 다행히, SDK 도구로 다음을 수행합니다 :

sencha create jsb -a index.html -p app.jsb3

이 명령은 index.html 파일 (앱을 개발하면서 브라우저에서 사용하는 동일한 파일)을 가져가고, 호출된 app.jsb3 파일을 작성하고 전부 그 클래스 종속으로 이해합니다 :

sencha build -p app.jsb3 -d ./

최종 명령은 jsb에 나열된 모든 파일을 소요하고 나서 최대한 작게 만들기 위해 축소된 하나의 파일에 결합 합니다. 프레임워크 클래스 외에 응용 프로그램 클래스를 모두 포함하는 classes.js라는 파일을 출력합니다.

마지막 단계는 앱 제작에 대한 sencha-touch-debug.js의 sencha-touch.js를 대신 사용하고 모든 classes.js를 새로 생성하여 로드하는 HTML 파일의 업데이트를 준비하는 것입니다. 트위터 예제 파일을 마무리 하는 방법은 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Twitter</title>

    <link rel="stylesheet" href="resources/css/application.css" type="text/css">

    <script type="text/javascript" src="touch/sencha-touch.js"></script>
	<script type="text/javascript" src="all-classes.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

메인 index.html 페이지 파일을 내내 변경 하기보다, 위의 파일과 비슷한 index-production.html이 호출되는 사본을 만드는 것이 일반적입니다. 많은 개발자들은 자동적으로 그렇게 빌드를 간단하게 올릴 수 있는 index.html에 배포하는 폴더와 이름을 바꿉니다 index-production.html로 응용 프로그램을 복사하는 간단한 배치 스크립트를 작성할 것입니다.

단 몇 걸음이지만, 우리는 워크플로우와 센차터치의 다음 릴리스를 위한 빌더의 출력을 모두 개선하고 싶습니다. 센차터치 2.0 베타 1을 사용하여 구축하는 경우에는 그 가능성이 있는 단계이며, 출력이 약간 변경되는대로 나중에 릴리스를 업그레이드하면 다시 확인해 주시기 바랍니다.