Adobe Flex 3 Migration & Optimization guide Ver 1.0

1. Adobe Flex 3 Migration & OptimizationguideVer 1.0 옥상훈 차장 한국어도비시스템즈

2. Contents • Flex 제품군의 변화 • Flex 3 마이그레이션 가이드 • 작업 개요 및 소요시간 • 플렉스 빌더 3 설치 • 라이브사이클 데이터 서비스 2.5 설치 • 액션스크립트 마이그레이션 가이드 • Deprecated APIs • Flex 3 컴포넌트 변경 사항 • Flex 3 최적화 가이드 • 플렉스 SWF 사이즈 축소 방안 • 플렉스 3의 Framework RSL 적용 • 공통 모듈(RSL) 적용 • 플렉스 SWF 애플리케이션 분리 • ModuleLoader를 사용한 최적화 • 플렉스 빌더3의 성능 프로파일링 • LCDS를 적용한 성능 향상 • LCDS의 기능 • LCDS의 통신방식 • 실시간 데이터 처리 • 대량 데이터 처리

3. 1.Flex 제품군의 변화 Flex 3에서 프로그램 문법 변화는 없음 Flex 3 (2008.2) Flex 1.5 (2005.2) Flex 2 (2006.7) 플래시 플레이어 Flash Player 8 Flash Player 9 기존과 동일 개발언어 ActionScript 2.0 ActionScript 3.0 기존과 동일 개발서버 Flex Presentation Server 1.5 Flex Data Service 2 LiveCycle Data Service ES2.5 플렉스 개발툴 Flex Builder 1.5 Flex Builder 2 Flex Builder 3 Standard Flex Charting 2 Flex Builder 3 Professional Flex SDK 2 Flex SDK 3 • Flex 3는 Flex 2와 랭귀지 스펙은 동일하므로 Flex 2로 작성한 코드는 Flex 3에서 작동 가능 • Flex 2에서 Deprecated 된 속성, 함수, 스타일은 변경 권장(변경 안 해도 컴파일 및 실행 가능)

4. 1.Flex 제품군의 변화 버전업 내용

5. 2.Flex 3 마이그레이션 가이드 작업 개요 및 소요시간 • 개발툴 • 플렉스 빌더 3 설치 • 소요 예상 시간 : 1시간 • 서버 • 라이브사이클 데이터 서비스 2.5 설치 • 소요 예상 시간 : 4시간 • 코드 • AS(액션스크립트) 마이그레이션 가이드 참조 • 코드의 경우 최소한 다음과 같은 작업이 필요함 • 변경할 코드 검색 • 화면 레이아웃 맞추기 • 화면 단위 별 기능 테스트 • 소요시간 : 5일 이상 (프로그램 본 수에 따라 더 늘어날 수 있음)

6. 2.Flex 3 마이그레이션 가이드 플렉스 빌더 3 설치 • FB3_win.exe 실행 • 기본 설치 디렉토리가 C:\Program Files\Adobe\Flex Builder 3로 바뀜 • JRE는 Java 5를 사용함 (플렉스 빌더3 설치 프로그램에 포함됨)

7. 2.Flex 3 마이그레이션 가이드 플렉스 빌더 3 특징 Flex Builder 1.5 Flex Builder 2 Flex Builder 3 • 디자이너 개발자 협업 지원 • 강력한 데이터처리 컴포넌트 추가 • 개발 생산성 강화 및 성능향상 • AIR 애플리케이션 개발 지원 • 이클립스 기반 • 플렉스 2 컴포넌트 + SDK + 플렉스 챠팅 2 • 코드힌팅, 디자인보기, 소스보기, 디버깅 • 컴파일, 프로젝트관리, 라이브러리 관리 • 드림위버 UI • 플렉스 1.5 컴포넌트 포함 • 코드힌팅, 디자인보기, 소스보기, 디버깅

8. 2.Flex 3 마이그레이션 가이드 LiveCycle DataService 2.5 설치 • lcds251-win.exe 실행 • 설치 디렉토리는 C:\lcds 로 바뀜 • C:\lcds\flex.war를 WAS에 디플로이 함 • WEB-INF\web.xml (WAS설정파일) • WEB-INF\flex\* (LCDS설정파일,플렉스 라이브러리 JAR, 플렉스 컴포넌트 SWC) • WEB-INF\lib\* (LCDS 라이브럴리) • 서버에서 컴파일 하는 경우는 라이브사이클 데이터 서비스 2.6으로 업그레이드(3/4분기예정)

9. 3. AS 마이그레이션 가이드 Deprecated APIs • Flex 3로 오면서 없어진 메서드, 속성, 스타일로서 컴파일시 경고메시지가 나오지만 실행에는 지장이 없다. • Deprecated API 목록 : http://livedocs.adobe.com/flex/3/langref/deprecated.html • 메서드 : 17개 • CartesianChart : 4개 • ChartBase : 4개 • PoloarChart : 2개 • ResourceBundle : 7개 • 속성 : 14개 • CartesianChart 관련 : 11 개 • WebService 관련 : 3개 • 스타일 : 38개 • CartesianChart : 4개 • Accordion :7개 • ColorPicker : 14개 • DateChooser : 2개 • DateField : 8개 • MenuBar : 2개 • ComboBox : 1개

10. 3. AS 마이그레이션 가이드 Flex 3 컴포넌트 변경 사항 • WebService • protocol -> 설정안해도 됨 • serviceName -> destination • document -> xml • DataGrid • rowCount, lockedRowCount 수에 header는 카운트 되지 않음 • UITextField • IUITextField 로 바뀜 • ComboBox • itemRenderer를 사용할 경우 paddingLeft 기본값이 2에서 5로 바뀜 • flashType=true • fontAntiAliasType="advanced" 로 변경

11. 4. Flex 3 최적화 가이드 SWF 사이즈 축소 방안 • 화면의 복잡도 감소 • 컨트롤, 컨테이너가 불필요하게 중첩되지 않도록 • 서브 화면들은 Module이나 별도의 애플리케이션으로 분리 • 컴포넌트 사용성 • ActionScript오브젝트의 데이터 타입 확인 (Number보다는 int 사용) • 불필요한 데이터 바인딩 사용 금지 • Embed된 Asset 사용 줄이기 • 이미지는 url경로로 • 꼭 필요한 경우가 아니라면 기본 폰트 사용 • 데이터는 런타임으로 나눠서 받도록

12. 4. Flex 3 최적화 가이드 SWF 사이즈 축소 방안 • RSL 사용 • 인증 프레임웍 RSL : 플래시 플레이어 자체에 캐시됨 • 일반 RSL : 런타임시 캐시됨 • RSL 명령어 • 형식 • mxmlc -runtime-shared-library-path=SWC파일명,RSL의SWF파일 웹경로MXML파일명 • 일반 RSL 적용 • mxmlc -runtime-shared-library-path=gosulib.swc,http://okgosu.net/flex/rsl/gosulib.swf SWFLoaderApp.mxml • 인증프레임웍 RSL 적용 • mxmlc -runtime-shared-library-path=framework.swc,http://okgosu.net/flex/rsl/framework_3.0.0.477.swz,http://okgosu.net/flex/rsl/framework_3.0.0.477.swf SWFLoaderApp.mxml

13. 4. Flex 3 최적화 가이드 Framework RSL 적용 • 인증 Framework RSL을 이용한 애플리케이션 경량화 • 적용 방법 : 플렉스 빌더3 또는 mxmlc 컴파일 옵션 적용 플렉스 2 애플리케이션 사이즈 플렉스 3 애플리케이션 사이즈 사이트A 사이트B 플렉스 2 애플리케이션 RSL 플렉스 3 애플리케이션 인증 Framework RSL 캐쉬 플렉스 2 애플리케이션 RSL 플래시 플레이어 플렉스 3 애플리케이션 플래시 플레이어 Flex Component Cache(인증 Framework RSL)

14. 4. Flex 3 최적화 가이드 Framework RSL 적용 • 플렉스 빌더 3의 속성에서 Library path에서 Framework linkage를 RSL로 변경후 컴파일 • 커맨드라인 컴파일 명령어 예:

15. 4. Flex 3 최적화 가이드 공통 모듈 RSL 적용 • SWF파일을 클라이언트에게 전송할 때 같이 공유할 컴포넌트를 라이브러리로 묶어서 전송하는 방법 • http://livedocs.adobe.com/flex/201/html/rsl_124_1.html#168690

16. 4. Flex 3 최적화 가이드 SWF 애플리케이션 분리 • SWF 애플리케이션 분리 여부 • 확장성 : 화면의 개수가 수십 개 이상으로 애플리케이션 사이즈가 현저히 커질 것으로 예상되는 경우 • 로딩속도 : 네트워크 속도가 낮아 애플리케이션 로딩 속도에 문제를 줄 경우 • 배포 : 애플리케이션 내의 모듈의 변경이 잦아 부분적으로 배포해야 할 경우 • SWF 애플리케이션 분리 방법 • 1 + N : 1개의 메인 SWF+ N개의 화면당 N개의 SWF로 구성 • 서브 SWF는 ModuleLoader를 이용하여 로딩 • html + N : 1개의 컨트롤 html + N개의 SWF • Html에서 각 SWF를 로드하도록 컨트롤

17. 4. Flex 3 최적화 가이드 ModuleLoader를 사용한 최적화 • ModuleLoader는 메인애플리케이션에 대해 최적화 옵션으로 컴파일할 수 있음 • 플렉스빌더3의 프로젝트 속성에서 최적화 선택후 컴파일 • Externalize 옵션 컴파일 • 모듈과 메인애플리케이션간 공통 클래스를 빼냄으로써 최적화 • 명령어 예 • mxmlc -link-report=report.xml ModuleLoaderApp.mxml • mxmlc -load-externs=report.xml ModuleSubMenu0.mxml • mxmlc -load-externs=report.xml ModuleSubMenu1.mxml • mxmlc -load-externs=report.xml ModuleSubMenu2.mxml • mxmlc ModuleLoaderApp.mxml

18. 4. Flex 3 최적화 가이드 플렉스 빌더 3의 메모리 및 프로파일링 메모리 및 성능 프로파일링 • 성능 스냅샷을 통해 병목구간 탐지 • 메노리 누수와 과도한 객체 할당 부분 조사 가능 • Function별로 메모리 사용 최적화

19. LCDS의 기능 5. LCDS를 사용한 성능 향상 LiveCycle Data Services RPC Service Data ManagementService Message Service PDF Reporting Web Service 데이터 동기화 협업 RIA화면을 PDF로 출력 HTTP Service On/Off Line Data Publish/Subscribe Runtime Compiler LiveCycle 리모팅 Remote Object 페이징 데이터 푸시 서비스 어댑터 Java JMS Hibernate ColdFusion Custom…

20. LCDS의 통신 방식 5. LCDS를 사용한 성능 향상

21. Messaging System X Adapter X JMS Provider JMS Adapter Messaging System Y Adapter Y 실시간 처리 5. LCDS를 사용한 성능 향상 LiveCycle Data Service 2.5 Message Service Endpoint RTMP AMF HTTP Publisher Subscriber

22. 대량 데이터 처리 5. LCDS를 사용한 성능 향상 • 안정적인 데이터 처리 속도 • 2만 건까지 1초 이내의 응답속도를 보임 • Ajax – XML – Binary간 데이터 쿼리 비교 • 1,000건 이하는 별차이 없음 • 1,000건 이상은 LCDS를 사용한 방법이 성능을 보장 • 서버 자원 사용 감소 • 변경된 데이터만 전송하도록 설정 가능 • 네트워크 사용 감소 • 압축된 바이너리 데이터사용