내 프로젝트와 이러한 Javascript 프레임 워크에 대해 내가 잘못한 부분은 무엇입니까?


107

먼저, 제가 만들고 싶은 프로젝트의 가장 중요한 뼈는 단일 페이지 웹 앱으로 구현 된 위키 엔진입니다. 나는 많은 기능 추가와 함께 처음부터 사용할 수있는 기능 세트를 가질 계획입니다.

기본 기능

  • 페이지 생성 (해당 기사에 대한 위키 기사와 토론 포럼 모두 생성)
  • 마크 업 및 WYSIWYG 알라 markitup
  • 마크 업 / HTML / WYSIWYG 간의 즉각적인 변환
  • 빠른 탐색을위한 사이드 바
  • 편집 /보기 선택을위한 상단 도구 모음

고급 기능

  • 다른 방법을 통해 탐색 할 수있는 구성 가능한 사이드 바
  • 구성 가능한 도구 모음 (선택한 마크 업 언어 추가 가능)
  • 태그
  • 편집 가능한 할 일
  • 파일 업로드 및 이미지 첨부를 끌어서 놓기

엔진은 원래 가장 기본적인 페이지 생성, 마크 업 및 WYSIWYG 편집 및 저장으로 구성됩니다. 결국 드래그 앤 드롭 이미지 지원, 파일 업로드, 라이브 데이터 그래프 및 뷰 사용자 지정을위한 사이드 바로이 기본 엔진을 확장하고 싶습니다.

내 프로젝트를 기반으로 할 괜찮은 프로젝트를 상당히 광범위하게 검색했지만 TiddlyWiki 외에는 좋은 자바 스크립트 기반 위키 엔진이없는 것 같습니다. 또한 기존 위키 엔진 위에 Jquery를 적용하는 것을 고려했지만 결국에는 결국 다시 작성하게 될 것이라고 생각합니다 (또한 내가 원하는 기능을 추가하는 것이 더 흥미 진진합니다). 어느 쪽이든 나는 자바 스크립트 라이브러리 + 프레임 워크 로이 짐승을 구현하는 데 도달했습니다.

나는 이러한 프레임 워크 중 일부를 서로 비교할 수 없다는 것을 알고 있습니다. 각 프레임 워크의 비교 가능한 부분에 대해 비교 의견 / 질문을 구성하려고 시도했지만 수정 될 수 있습니다.

그래서 우리는 간다 :

내 연구와 의견을 바탕으로 목록을 아래 항목으로 좁혔습니다. 제한된 능력으로 아래 항목이 더 적합하다고 생각했기 때문에 SproutCore, corMVC, YUI 및 기타와 같은 것을 의도적으로 생략했습니다.

내 옵션


jquery / UI + backbonejs

사무용 겉옷

내가 읽은 바에 따르면이 조합은 많은 사람들이 사용하고 사랑하며 매우 유연하고 확장 가능합니다. 내 주요 관심사는이 조합이 데스크톱 지향 UI 인터페이스를 개발하는 데 가장 좋은 출발점이 아니라는 것입니다.

UI

jQueryUI 또는 jqueryTools는 경쟁력이있을 수 있지만 확실히 다른 프레임 워크의 UI 기능과 동등하지 않은 것 같습니다. 특히 그들은 효과에 무거워 보이지만 적절한 레이아웃 슬라이싱 지원이 부족합니다.

javascriptMVC

사무용 겉옷

나에게 JavascriptMVC는 문서화 (documentJS), 기능 테스트 (funcUnit), 코드 및 종속성 관리 (stealJS)를위한 몇 가지 다른 앱과 함께 본질적으로 jquery + MVC (jqueryMX) 확장 인 것처럼 보입니다. 추가 모듈의 이점 외에도 기능적 논쟁은 실제로 backbonejs 대 jqueryMX로 귀결된다고 생각합니다. 내가 이것에 대해 정확하고 누구든지 둘 다 작업하거나 비교 한 적이 있습니까?

UI

JavascriptMVC는 Jquery에서 사용할 수있는 모든 항목에 MXUI 항목을 추가 하므로 최소한 해당 범주에서 약간의 승리라고 생각합니다.

녹아웃

사무용 겉옷

이것에 대한 내 생각과 우려는 jquery + backbone 주석과 매우 유사합니다. 둘 다 유사한 기능을 제공하는 것처럼 보이지만 다른 관점에서 볼 수 있습니다. 자주 인용되는 단점은 knockoutjs가 비즈니스 논리와 프레젠테이션을 데이터 바인딩과 너무 밀접하게 결합하고이 바인딩 방법이 복잡한 UI 상호 작용을 위해 분해 될 수 있다는 것입니다. 그러나 이것이 문제가되지 않는 이유를 듣고 싶습니다.

UI

현재 공백

Dojo 및 ExtJS

사무용 겉옷

Dojo와 ExtJS에 대해 가장 적게 알고 있고 거의 같은 공간에서 플레이하는 것처럼 보이기 때문에 토론을 결합 할 것입니다. 이 두 가지에 대한 stackoverflow에 대한 대부분의 정보는 오래된 것 같습니다. 내가 본 것은 둘 다 데스크톱 수준의 앱 구현에 좋은 대형 프레임 워크라는 것입니다. Dojo는 잘못된 문서화로 꾸짖었지만 더 이상 그렇지 않은 것 같습니다. ExtJS는 물론 상용 라이센스를 가지고 있지만, 당신이 얻는 것에 대해 정말 합리적이며 너무 많이 반대하지 않을 것입니다. ExtJS의 위젯은 Dojo보다 다소 전문적으로 수행 된 것 같지만 확실히 수정할 수 있습니다. 두 가지 모두에 대한 경험이있는 사람의 의견을 듣고 싶습니다.

UI

Dojo에는 dijit UI 라이브러리가 있습니다. ExtJS에는 UI 기능이 있지만 Ext 코어에는 없습니다. 여기에 설명서데모가 있습니다.

카푸치노

사무용 겉옷

그리고 카푸치노가 있습니다. CSS도, html도 없지만 기존의 자바 스크립트 라이브러리를 사용하는 것도 어려울 수 있습니다. Objective-J는 특히 평범한 자바 스크립트를 작성할 수 있다고 선전한다는 점을 고려할 때 무섭지 않은 것 같습니다. 데모는 인상적이며 위키 엔진의 UI 요구 사항에 가깝게 접근하는 것 같습니다. 코코아 기반 API는 익숙하지 않은 사람에게는 많은 도움이되지만 그만한 가치가 있습니다. 레이아웃 엔진이 항상 작업하기 쉬운 것은 아니지만 이와 같은 젊고 파괴적인 기술에는 확실히 몇 가지 단점이 있다고 들었습니다.

UI

현재 공백

나는 너무 많은 글을 쓴 것에 대해 사과하지만 적어도 값싼 답변을 기대하는 ax vs y vs z 질문은 아닙니다. 그래서 당신은 어떻게 생각하십니까? 시간이 지남에 따라 더 풍부한 기능 (복잡한 읽기)이되기를 바라는 위키 엔진과 같은 데스크탑의 기반은 무엇입니까?


9
믿을 수 없을 정도로 상세하고 신중한 질문에 +1!
Sean Vieira 2011 년

8
타임 라인과 리소스에 대해서는 확실하지 않지만 여러 프레임 워크 / 환경 중에서 결정하려고 할 때 계속 진행하여 프로토 타입을 빠르게 빌드하려고합니다. 하나 또는 두 개의 주요 기능 일지라도 전 세계의 모든 연구와 문서가 실제로 도구를 사용하여 무언가를 구축하려는 것과 일치하지 않을 것입니다. 나는 각각 하루를 가지고 당신이 얼마나 멀리 떨어져 있는지 보라고 말한다. 그러면 어떤 도구가 작업에 적합한 지 알 수 있고 가장 편안하게 느낄 수 있습니다.
Brian Flanagan 2011 년

1
@Brian Flanagan "메타"인 경우에도 답변으로 이동합니다.

1
tiddlywiki.com을 보셨나요? JavaScript로 작성된 순수 자체 포함 위키라고 생각합니다
Bernhard

그래, 나는 tiddlywiki를 보았다. 여러면에서이 프로젝트에 영감을 주었지만 저는이 프로젝트에 대한 저만의 기반과 방향을 구상하고 있습니다.
funkyeah 2011 년

답변:


4

먼저 프로젝트에 대한 특정 UI 요구 사항을 제시하는 것이 좋습니다. 시도해 본 프레임 워크 중 어떤 프레임 워크를 사용해 보셨습니까?

개인적으로 저는 ExtJS 개발에 들어갔습니다. 제가 작업하는 프로젝트에는 컨트롤 / 위젯의 많은 사용자 정의가 필요하기 때문입니다. ExtJS는 상자에서 꺼내는 즉시 수많은 기능을 가지고 있으며 비즈니스에 필요한 모든 괴물로 확장, 결합 또는 통합 할 수 있습니다.

ExtJS 4 를 사용하면 UI를 "스킨"하여 모양과 느낌을 추가로 사용자 지정할 수 있습니다.

JavaScript를 처음 사용하고 Java에 익숙하다면 GWT , JSF 또는 Vaadin 과 같은 서버 측 솔루션을 살펴볼 수도 있습니다.


19

타임 라인과 리소스에 대해서는 확실하지 않지만 여러 프레임 워크 / 환경 중에서 결정하려고 할 때 계속 진행하여 프로토 타입을 빠르게 빌드하려고합니다. 하나 또는 두 개의 주요 기능 일지라도 전 세계의 모든 연구와 문서가 실제로 도구를 사용하여 무언가를 구축하려는 것과 일치하지 않을 것입니다. 나는 각각 하루를 가지고 당신이 얼마나 멀리 떨어져 있는지 보라고 말한다. 그러면 어떤 도구가 작업에 적합한 지 알 수 있고 가장 편안하게 느낄 수 있습니다.


6

요즘 대세 입니다 ( GitHubMeteorpedia 에서 가장 별표를받은 풀 스택 JavaScript 프레임 워크 는 Meteor로 작성된 위키 엔진입니다.

출시 비디오는 당신이 1:28에 의해 미혹합니다.

UI와 관련하여 불가지론 적이며 Bootstrap 및 Famo.us로 광범위하게 테스트되었습니다 . 또한 동일한 코드베이스에서 모바일 앱을 생성합니다.


1
그리고 React와의 통합이 있지만 그것은 100 % 그것에 대한 사람들만을위한 것입니다. Meteor에 대한 많은 지식없이 jquery 플러그인과 svg / canvas 그리기 라이브러리를 사용하는 데 문제가 없습니다.
imslavko 2014

1

선택한 프레임 워크는 상상하는 것만 큼 UI 선택을 제한하지 않을 수 있습니다. 콘텐츠 관리 분리에 관한이 최근 Henri Bergius 기사는 제가 할 수있는 것보다 훨씬 더 좋은 점을 보여줍니다. 그리고 우연히도 꽤 멋져 보이는 순수 자바 스크립트 (프레임 워크 독립적) 내부 콘텐츠 편집기에 대한 링크 입니다.


나는 확실히 WYSIWYG의 알로하 편집기를 파헤 치고있다. 나는 확실히 그것을 화면 상단에 고정하고 탭을 추가하여 일부 형식의 마크 업으로 텍스트 영역을 볼 수도 있습니다. 내 다른 주요 옵션은 markItUp의 맛입니다 .
funkyeah 2011 년

1

당신은 혼자가 아닙니다!

VanillaJSAmpersand ..는보다 간단하고 모듈화 된 JavaScript를위한 진지한 추진력의 좋은 예입니다.

그것에 관한 도 있습니다.

단순성은 과소 평가 된 es6 기능인 모듈SystemJS 구현 표준 에 의해 주도되고 있습니다. non-es6 시스템에서도 사용할 수 있습니다.

얼마나 멋진가요!


1

나열된 다른 프레임 워크보다 더 적합한 AngularEmber를 모두 생략했기 때문에 후보자의 전반적인 선택이 잘못되었다고 말할 수 있습니다.

전반적으로 Angular.js가 이것에 대한 프레임 워크라고 말하고 싶습니다.

라우팅에 대한 강조

당신이 말하는 내용의 대부분 (탐색을위한 여러 사이드 바, 단일 페이지 앱)은 라우팅의 기능 또는 프런트 엔드가 URL 탐색 바의 텍스트를 해석하는 방법입니다.

Angular.js와 Ember에는 추가 코드없이 필요한 모든 것을 수행 할 수있는 우수한 라우터가 있습니다.

귀하의 이익을 위해 단일 페이지 위키를 만드는 데 사용할 수있는 Angular의 기능에 대한 빠른 분석이 있습니다.

사이트 자체의 구조

Angular에는 UI 라우터라는 놀라운 라이브러리가있어 사용자 지정 탐색을 생성하고 콘텐츠를 공개하는 SEO 친화적 구조를 설정할 수 있습니다. 다중보기는 상단 도구 모음도 허용합니다.

Ui 라우터 자습서 : http://cacodaemon.de/index.php?id=57

WYSIWYG 편집기

Angular는 라이브 양방향 바인딩을 기반으로합니다 (어딘가에서 변경하면 자동으로 다른 곳에서 변경됩니다.) 따라서 이러한 종류의 편집기에서 잘 작동하는 많은 기능이 패키지로 제공됩니다. 몇 가지 좋은 것들이 이미 만들어졌고 그것들을 구현하기 만하면됩니다.

http://textangular.com/

그래프 및 기타 깔끔한 항목

Angular 지시문은 재사용 가능한 차트 구성 요소를 만드는 것과 같은 작업을 수행하도록 설계되었습니다. 그들은 Wordpress 위젯과 완전히 다르지 않습니다. 이들 중 상당수는 이미 개발되었으며 Angular 프로젝트에 추가 할 수 있습니다.

http://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/

Ember에 관해서는 그것에 대해 잘 모르기 때문에 특정 기능에 대해 말할 수 없습니다.


0

Backbone에 대한 한 가지 제안은 Backbone을 사용하기로 결정한 경우 Backbone이지만 더 나은 아키텍처 구조와 더 많은 의견을 가지고 있기 때문에 Marionnete를 선택해야합니다 (개인적으로 Backbone이 지침을 설정하지 않았고 대형 앱의 단점처럼 느껴집니다) .

여러 js 라이브러리를 결합하여 몇 달 동안 작업했으며 다른 프레임 워크처럼 방해받지 않으며 메시지 파이프 라인은 앱을 통해 구성 요소를 연결하지만 분리 된 상태로 유지하는 정말 좋은 방법입니다.

여기에 제가 결정하게 만든 멋진 강연이 있습니다 : https://www.youtube.com/watch?v=qWr7x9wk6_c

여기에 드래그 앤 드롭 요소와 다른 js 라이브러리가 연결된 데모 프로토 타입이 있습니다. 웹 개발에서 1.5 년을 일한 이후로 내 코드에 대해 어떻게 생각하는지 듣고 싶습니다 ... 저는 아직 초보자입니다 : https://github.com/Drasky-Vanderhoff/marionette-demo/

Knockout 정보는 이미 가지고있는 콘텐츠와의 상호 작용을 원하고 백엔드와 지속적으로 연결하지 않을 경우 정말 좋습니다. 6 개월 동안 작업했고 라우팅을 위해 많은 다른 js 라이브러리를 사용해야했습니다. 게다가 Backbone 및 기타 JS Framework가 갖는 많은 구조를 반복하게됩니다. 내가 말할 것은 그것이 당신의 길을 전혀 방해하지 않고 제약이 아니라 도구가 될 것이라는 것입니다. 또한 이것은 거의 1 년 전이어서 몇 가지 사항이 변경되었습니다.

한 가지, Knockback (Knockout + Backbone)을 찾으면 피하십시오. 문서가 제대로 작동하지 않아서 배우는 데 더 많은 시간이 걸립니다. 그것을 위해 가고 싶다면 먼저 빠른 프로토 타입을 만들어 원하는 것이 있는지 확인하십시오.


이 글을 올린 지 1 년이 지났습니다. 지금 새로운 개발을 시작하려고하는데, 마리오네트가 여전히 자바 스크립트 개발을위한 최고의 선택을 유지하고 있습니까?
AlVaz

전혀 아닙니다. 지금 Angular.js 또는 React.js를 사용하는 것이 더 좋습니다 (원하는 경우 둘 다 결합 할 수 있음). 앱의 모바일 버전과 웹 버전을 모두 원한다면 React Native가 iOS 및 Android 네이티브 앱을 만드는 데 사용되고 있기 때문에 React.js를 사용하는 것이 좋습니다. : 같은 개념, 구조와 패러다임 React.js 및 기본 주 모두 (P 한 번 알아보세요있다가, 어디에서나 사용, 아는 React.js는 == 내가 삼중 등호 사용하지 않는 그래, 원주민 반응)
DraskyVanderhoff

또한 Polymer를 사용하는 웹 구성 요소가 있는데, 내년에 가장 인기있는 프레임 워크를 사용하고 싶다면 확인해 보라고 강력히 제안합니다. 마지막으로 Meteor는 100 % 실시간 데이터 동기화 / 3 방향 데이터 바인딩이 필요한 경우 훌륭한 옵션입니다. 특히 params에 대한 유효성 검사기를 작성하면 백엔드와 프런트 엔드 모두에서 동일한 유효성 검사기를 실행하므로 2 개의 코드가 필요하지 않습니다. 동일한 기지.
DraskyVanderhoff

한 가지 설명, 나는 Marionette가 내 최고의 선택이라고 말한 적이 없습니다 (실제로는 당시 Angular였습니다) 내가 말한 것은 Backbone.js를 사용하려는 경우 Marionette.js를 대신 사용한다는 것입니다.
DraskyVanderhoff
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.