enamored Flex 개발자를위한 HTML5 프레임 워크

Question

저는 수년 동안 Flex 개발자로 일해 왔으며 실제로 복잡한 앱을 제작했습니다. 최근의 과장된 내용으로 인해 HTML5를 배우는 데 관심이 있습니다.

Flex 프레임 워크에 대해 내가 좋아하는 것은 RIA를 구축하기위한 일관되고 일관된 완벽한 스택입니다. 나는 그것이 즉시 구성 요소의 광범위한 집합을 가지고 있고, 실제로 복잡한, 많이 사용자 정의 된 & 스킨 구성 요소를 확장하고 구축하기위한 프레임 워크를 좋아합니다.

비슷한 프레임 워크가 HTML5 공간에 있습니까?

필자가 수행 한 검색 결과 유용한개의 스크립트가 있습니다. 멋진 구성 요소, 효과 등을 제공하는 스크립트가 있습니다. 그러나 성숙한 아키텍처의 견고한 JS 프레임 워크를 찾을 수 없었습니다. 컴포넌트 라이브러리.

이렇게 복잡한 응용 프로그램을 작성할 때 여러 구성 요소를 서로 연결하는 많은 배관 코드를 작성하게 될 수도 있습니다.

나는 HTML5가 아직 초기 단계에 있다는 것을 안다. 그래서 유망한 프레임 워크가 있다면 나는 그것에 대해 알고 싶다.

다음과 같이 이상적인 프레임 워크 요구 사항의 내 쇼핑 목록은 다음과 같습니다

• 데이터
• 브라우저 불가지론
• 지원
• 확장
• 레이아웃 매니저 (라이프 사이클 이벤트를 포함한다) 고체 구성 요소 아키텍처 바인딩
• 복잡한 스키닝 지원
서비스 레이어
• 추상화 & 프로토콜 (예., SOAP/JSON IRemoteService의/XML 서비스는 모든 타입)이 UI 프레임 워크 자체와 함께

, 무슨 프레임 워크

의 자바 스크립트 공간에 존재
• MVC 아키텍처. (플렉스 세계에서 Parsley, 또는 Maté 유사)
• 의존성 삽입 (Dependency Injection)
• 단위 테스트

Answer 1

Flex 개발자의 경우 데스크톱 PC 용 Ext JS와 모바일/태블릿 용 Sencha Touch에 대한 Sencha Frameworks (내 회사)의 데스크톱 및 모바일 버전을 확인하는 데 관심이있을 수 있습니다.

Ext JS는 IE6까지 작업 할 수있는 데스크톱 웹 앱에 중점을두고 있으므로 "HTML5"가 될만한 공간이별로 없지만 새로운 차트 작성 도구는 Canvas, SVG 또는 VML을 사용합니다. 브라우저에 따라 다름).

Sencha Touch는 Android, iOS, Blackberry 및 IE9 (?) 모바일 브라우저에 중점을두고 있으므로 모든 CSS3, localStorage 등을 사용하여 스틱을 흔들 수 있습니다. 현대적인 브라우저의 가정으로 시작할 때 할 수있는 일의 테스트 케이스를 찾고 있다면이게 그 것이다.

Ext JS & Sencha Touch는 구성 요소를 완전히 제거합니다. 구성 요소와 레이아웃 모델 모두 Ext JS 3에서 많이 변경되지는 않았지만 Ext JS 2 용으로 작성된 구성 요소와 레이아웃의 가장 좋은 개요는 this article입니다. 레이아웃은 Ext JS 4에 대한 재 작성을 얻고 있습니다. 첫 번째 베타 이번 달에는 CSS3 플렉스 박스 레이아웃 시스템과 비슷한 모양이 될 것입니다.

확장 성은 적절한 구성 요소 모델을 가지고있는 결과입니다. Ext JS에는 혼합되어 일치 할 수있는 사용자 확장 구성 요소가 있습니다. 전문 시장 구성 요소의 좋은 예가 Ext Scheduler.good tutorial on how to create components입니다.

데이터 바인딩 : UI 구성 요소는 상점에 바인딩되므로 여러 UI 요소가 변경 될 때 새 데이터로 업데이트됩니다. store API reference을 읽으면 작동 원리를 알 수 있습니다.

복잡한 스킨은 -하지만 내선 JS 3 2

(당신이 이미지를 생성해야한다) 때문에 IE6 호환성 요구 사항을 테마로 조금 더 복잡하다 - 센차 터치 내선 JS 4에 이식되고있는 excellent theming system가있다 서비스 계층은 data proxy, which is extended for JSON, Http, XML etc으로 추상화됩니다.

Sencha Touch 및 Ext JS 4에는 (단순한) MVC 아키텍처가 있습니다. Ext JS 3 이하는 그렇지 않습니다. 중추 연구소에서 나온 -

여기 a good write-up on dependency injection in Ext JS있어 (하지만 터치하는 일반화한다) 단위 테스트를 위해

, 우리는 재스민 좋습니다.

Ext JS와 Sencha Touch는 주로 기업용 앱용으로 많이 사용되지만 Salesforce, Marketo 및 외부 사용자를 대상으로하는 대기업이 많이 있습니다. Sencha Touch는 a nice gallery of apps from our latest dev contest입니다. 체크 아웃해야합니다. 당신이 공구에 대해 신경 경우

, 우리는 또한 GUI 드래그 앤 드롭 디자이너와 CSS3 애니메이션 도구 (개발자 미리보기에서 후자) 나는 당신 같은 보트에있어

Answer 2

HTML5의 상용구 당신에게 흥미로운 일이 될 수 있습니다. http://html5boilerplate.com/

MVC 또는 종속성에 대한 JS 프레임 워크에 대해서는 확실하지 않지만 Dojo의 하네스 (새 사용자 제한으로 인해 두 번째 링크는 게시 할 수 없지만 쉽게 찾을 수 있어야 함)는 매우 강력합니다. . Dojo의 물건에 대해 좀 더 살펴 보겠습니다.

Answer 3

당신이 찾고있는 것 중 일부를 따르는 Sencha Framework을 좋아할 것 같아요.

Answer 4

Sproutcore는 자바 스크립트 응용 프로그램 프레임 워크입니다. 풍부한 MVC로 완벽한 키 - 값 관찰/바인딩 인프라를 제공하므로 올바르게 사용해야 만 작성해야하는 배관 코드의 양을 줄일 수 있습니다.

"솔리드 컴포넌트 아키텍처 (라이프 사이클 이벤트 포함)"- 모든 뷰에는 여러 라이프 사이클 이벤트가 있습니다.

"Extensible"- Sproutcore는 mixins을 지원하며 JS에서 클래스를 생성하는 것처럼 느껴질 수 있도록 고유 한 상속 속성에 대한 자체 '원형 프로토 타입 변환'을가집니다.

"레이아웃 관리자"- 자신의 견해를 어디에 배치했는지, 얼마나 큰지 직접 배치합니다. 크기를 조정하고 중첩 할 수있는 SplitView가 있지만 SC가 요구 사항을 충족하지 못하는 영역 중 하나 일 수 있습니다. (관찰을 통해보기 크기 조정을 쉽게 구현할 수 있지만)

"브라우저에 무관심합니다" 다른 JS 프레임 워크와 마찬가지로

"데이터 바인딩 지원"- 매우 광범위한 바인딩 인프라. 뷰 필드를 모델 필드에 바인딩하면 모델이 변경 될 때 뷰 필드가 업데이트됩니다.

기본 테마가 마음에 들지 않으면 "다른 웹 응용 프로그램과 마찬가지로 CSS를 통해 복잡한 스키닝 지원"이 가능합니다.

"단위 테스트"- SC에는 qunit 테스트 장치가 함께 제공됩니다. SC 명령 행 도구를 사용하여 클래스를 작성하면 (M, V 또는 C와 같음)이 도구는 테스트 스텁을 작성합니다.

'HTML5'- 시작하는 성운 개념의 일종. SC는 빌드 도구에서 html5 앱 매니페스트 생성을 지원합니다. 브라우저 로컬 저장소에 쓸 수있는 프레임 워크가 있습니다. 가까운 html5 기능이 온라인에 추가 될 것이라고 생각합니다.

크롬 앱 스토어의 NPR 앱과이 sudoku 앱은 모두 SC 앱입니다.

Answer 5

있습니다. 발견 된 모든 js 프레임 워크는 네이티브 플렉스만큼 반으로 만드는 데 많은 CSS가 필요합니다. 새로운 js 프레임 워크의 대부분은 구형 브라우저를 포기합니다.

자금 및 시원한 데모는 유성을 장기적인 프레임 워크 수상자로 만들 수 있습니다.

는 여기

http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/