私のプロジェクトとこれらのJavaScriptフレームワークのどこが間違っていますか?


107

まず、私が作成したいプロジェクトの最も重要な部分は、単一ページのWebアプリとして実装されたWikiエンジンです。私は、多くの機能を追加して、最初から利用可能な一連の機能を用意する予定です。

基本的な機能

  • ページの作成(Wiki記事とその記事のディスカッションフォーラムの両方を作成します)
  • マークアップとWYSIWYG ala markitup
  • マークアップ/ html / WYSIWYG間のオンザフライ変換
  • クイックナビゲートするサイドバー
  • 編集/表示を選択するための上部ツールバー

高度な機能

  • 別の方法でナビゲートするための設定可能なサイドバー
  • 構成可能なツールバー(選択したマークアップ言語を追加する可能性があります)
  • タグ
  • 編集可能なToDo
  • ファイルのアップロードと画像の添付ファイルをドラッグアンドドロップする

エンジンは元々、最も基本的なページの作成、マークアップとWYSIWYGの編集、および保存で構成されます。最終的には、この基本的なエンジンを、画像のドラッグアンドドロップサポート、ファイルのアップロード、ライブデータグラフ、ビューをカスタマイズするためのサイドバーで拡張したいと思います。

私は自分のプロジェクトのベースとなる適切なプロジェクトをかなり広範囲にわたって検索しましたが、TiddlyWiki以外に、JavaScriptベースの優れたWikiエンジンはないようです。また、既存のWikiエンジンの上にJqueryを適用することも検討しましたが、いずれにしても最終的には書き直してしまうことになると思います(加えて、必要な機能を追加していくと、さらにエキサイティングになります)。どちらの方法でも、JavaScriptライブラリ+フレームワークを使用してこの獣を実装することに到達しました。

私はこれらのフレームワークのいくつかを互いに比較することは実際にはできないことを知っています。私はそれぞれのフレームワークの比較可能な部分に対して比較コメント/質問を組み立てようとしましたが、修正されることは許されています。

だからここに行きます:

自分の調査と意見に基づき、以下の項目に絞り込みました。SproutCore、corMVC、YUIなどを意図的に省略したのは、限られた容量の中で、以下の項目の方が適していると考えたためです。

私のオプション


jquery / UI + backbonejs

全体

私が読んだことから、この組み合わせは多くの人に愛用されており、非常に柔軟で拡張可能です。私の主な懸念は、この組み合わせは、デスクトップ指向のUIインターフェースを開発するための最適な出発点ではないということです。

UI

jQueryUIまたはjqueryToolsは競争力があるかもしれませんが、他のフレームワークのUI機能と同等ではないようです。具体的には、それらは効果には重いようですが、適切なレイアウトスライスのサポートには欠けています。

javascriptMVC

全体

私にとってのJavascriptMVCは、ドキュメント化(documentJS)、機能テスト(funcUnit)、およびコードと依存関係の管理(stealJS)のための他のいくつかのアプリと共に、本質的にjquery + MVC(jqueryMX)拡張であるように見えます。追加モジュールの利点を超えて、機能的な議論は本当にbackbonejsとjqueryMXに帰着すると思います。

  • 機能:ジュピター(jMVCのメーカー)の機能の概要
  • jqueryMXへのリンク

UI

JavascriptMVCは、JQueryで利用可能なものの上にMXUIアイテムを追加するので、少なくとも、そのカテゴリーではわずかに有利だと思います。

ノックアウト

全体

これに関する私の考えと懸念は、jquery +バックボーンコメントと非常によく似ています。どちらも同様の機能を提供しているようですが、見方は異なります。よく引用される欠点は、nockoutjsがビジネスロジックとプレゼンテーションをデータバインドと非常に強く結び付けていること、およびこのバインディングメソッドが複雑なUIの相互作用で機能しない可能性があることですが、それが問題にならない理由を知りたいです。

UI

現時点では空白

DojoとExtJS

全体

私はDojoとExtJSについての議論を結合するつもりです。なぜなら、私はそれらについて最低限知っていて、彼らはほぼ同じ空間でプレーしているように見えるからです。これら2つのスタックオーバーフローに関する情報のほとんどは古くなっているようです。私が見てきたことから、どちらもデスクトップキャリバーアプリの実装に適した大きなフレームワークであることがわかります。Dojoは不十分なドキュメントのためにうんざりしていましたが、それはもはやそうではないようです。ExtJSにはもちろん商用ライセンスがありますが、あなたが手に入れるものは本当に合理的であり、私はそれに対してそれをあまり持ちません。ExtJSのウィジェットは、Dojoよりも専門的に行われているようですが、私は間違いなくそこで修正できました。両方の経験をお持ちの方からの連絡をお待ちしています。

UI

Dojoにはdijit UIライブラリがあります。ExtJSにはUI機能がありますが、Extコアにはありません。ここにドキュメントがあり、ここにそれらのデモがあります

カプチーノ

全体

そしてカプチーノがあります。CSSもHTMLもありませんが、既存のJavaScriptライブラリを使用するのも難しいかもしれません。Objective-Jは怖くないようです。特に、単純なJavaScriptを記述できることを宣伝していることを考えると、特にそうです。デモは印象的で、WikiエンジンのUIニーズに近づいているようです。ココアベースのAPIは、馴染みのない人にとっては多くのことを取り入れますが、多分価値があります。レイアウトエンジンは必ずしも簡単に操作できるとは限りませんが、このような若くて破壊的なテクノロジーには確かにいくつかの欠点があります。

UI

現時点では空白

私はたくさん書いてお詫び申し上げますが、ちょっと、少なくとも、安っぽい答えがたくさんあることを期待して、ax対y対zの質問ではありません。それで、あなたはどう思いますか?私のデスクトップのwikiエンジンの基礎は何であるべきですか、それはうまくいけば、時間が経つにつれて機能が豊富になる(複雑になる)でしょう。


9
信じられないほど詳細でよく考え抜かれた質問の+1!
Sean Vieira

8
タイムラインとリソースについてはわかりませんが、複数のフレームワーク/環境を決定しようとしているときは、先に進んでプロトタイプをすばやく作成してみます。たとえそれが1つまたは2つの主要な機能であっても、世界のすべての研究と文書化が、実際にツールで何かを構築しようとすることとは一致しないことがわかります。私はそれぞれと一緒に一日を取り、あなたがどのくらい遠くまで行くのか見てみましょう。これにより、どのツールがタスクに対応しているかがわかり、最も快適に感じるでしょう。
ブライアンフラナガン

1
@Brian Flanagan「メタ」の場合でも、回答に移動します。

1
あなたが見てきましたtiddlywiki.com、私はJavaScriptで行われ、純粋な自己含有ウィキだと思う
ベルンハルト

ええ、私はtiddlywikiを見てきました。多くの意味で、それはこのプロジェクトのインスピレーションですが、私はこのプロジェクトのために自分のベースと方向性を構想しています。
funkyeah

回答:


4

まず、プロジェクトの特定のUI要件を考え出すことをお勧めします。あなたが試したフレームワークのどれを試してみましたか?

個人的に、私が取り組んでいるプロジェクトは、コントロール/ウィジェットの多くのカスタマイズを必要とするため、ExtJS開発に入りました。ExtJSにはすぐに使えるものがたくさんあり、いつでも拡張、結合、またはビジネスに必要なあらゆる怪物に手を加えることができます。

ExtJS 4では、UIを「スキン」して、ルックアンドフィールをさらにカスタマイズすることもできます。

JavaScriptに慣れておらず、Javaに慣れている場合は、GWTJSF、またはVaadinなどのサーバー側のソリューションを検討することもできます。


19

タイムラインとリソースについてはわかりませんが、複数のフレームワーク/環境を決定しようとしているときは、先に進んでプロトタイプをすばやく作成してみます。たとえそれが1つまたは2つの主要な機能であっても、世界中のすべての研究と文書化が、実際にツールで何かを構築しようとすることとは一致しないことがわかります。私はそれぞれと一緒に一日を取り、あなたがどのくらい遠くまで行くのか見てみましょう。これにより、どのツールがタスクに対応しているかがわかり、最も快適に感じるでしょう。


6

最近は流行しています(GitHubで最もスター付きのフルスタックJavaScriptフレームワークであり、MeteorpediaはMeteorで作成されたWikiエンジンです。

打ち上げのビデオが 1時28分であなたを夢中にされます。

UIに関しては不可知論であり、BootstrapおよびFamo.usで広範囲にテストされています。また、同じコードベースからモバイルアプリを生成します。


1
そして、Reactとの統合がありますが、それは100%入念な人のためのものです。また、Meteorに関する多くの知識がなくても、jqueryプラグインとsvg / canvas描画ライブラリを使用しても問題はありません。
imslavko 14

1

フレームワークの選択は、想像しているほどUIの選択を制約しない場合があります。コンテンツ管理の分離に関するこの最近のアンリベルギウスの記事は、私ができるよりもはるかに優れた点を示しています-偶然にも、かなり見栄えの良い純粋なJavaScript(フレームワークに依存しない)インプレースコンテンツエディターへのリンクがあります。


私は確かにWYSIWYGのアロハエディターを掘っています。私は間違いなくそれを画面の上部にドッキングし、いくつかのフォーマットのマークアップでテキストエリアを表示するためのタブを追加します。私の他の主なオプションは、markItUpのフレーバーです。
funkyeah

1

あなた一人じゃありません!

VanillaJSアンパサンドは ...単純に、よりモジュールのJavaScriptのための深刻なドライブの偉大な例です。

それについてのさえあります。

シンプルさは、過小評価されているes6機能であるモジュールSystemJS実装標準によって推進されています。es6以外のシステムでも使用できます。

なんてクールなことでしょう。


1

リストされている他のどのフレームワークよりもどちらも適しているAngularEmberを省略しているため、候補の全体的な選択が間違っていると思います。

全体として、Angular.jsはこのフレームワークのフレームワークだと思います。

ルーティングを重視

あなたが話していることの大部分(ナビゲーション用のいくつかのサイドバー、単一ページアプリ)は、ルーティングの機能、またはフロントエンドがURLナビゲーションバーのテキストを解釈する方法です。

Angular.jsとEmberの両方に優れたルーターがあり、追加のコードなしで必要なすべてを実行できます。

あなたの利益のために、ここにあなたの単一ページのwikiを作成するために使用できるAngularの機能の簡単な内訳があります

サイト自体の構造

Angularには、UIルーターと呼ばれる素晴らしいライブラリーがあり、カスタムナビゲーションを作成したり、コンテンツを公開するSEO対応の構造を設定したりできます。複数のビューでは、上部のツールバーも使用できます。

UIルーターのチュートリアル:http : //cacodaemon.de/index.php?id=57

WYSIWYGエディター

Angularは、双方向のライブバインディングに基づいて構築されています(何かを変更すると、他のすべての場所で自動的に変更されます)。このため、この種類のエディターで機能する多くの機能がパッケージされています。いくつかの優れたものがすでに作成されており、それらを実装するだけで済みます。

http://textangular.com/

グラフとその他のきちんとしたもの

Angularディレクティブは、再利用可能なChartコンポーネントの作成などを行うように設計されています。それらはWordpressウィジェットと全く同じです。これらの多くはすでに開発されており、Angularプロジェクトに組み込むことができます。

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

エンバーに関しては、私はそれについてあまり知らないので、その特定の特徴について話すことはできません。


0

バックボーンについての1つの提案、それを使用することに決めた場合、それはバックボーンなので、マリオンテに行くべきですが、より良い構造的構造とより説得力があります(個人的には、バックボーンはガイドラインを設定しておらず、それは大きなアプリの欠点のように感じます) 。

私は数か月間、さまざまなjs libsを組み合わせて作業しましたが、他のフレームワークのように邪魔になりません。メッセージパイプラインは、コンポーネントをアプリ全体で接続するのに本当に良い方法ですが、それらを切り離しておきます。

ここであなたは私にそれを決心させた素晴らしい話がありますhttps : //www.youtube.com/watch?v=qWr7x9wk6_c

そして、ここには、ドラッグアンドドロップ要素と他のjs libsが接続されたデモプロトタイプがあります。1.5年間Web開発に取り組んでいるので、私のコードについてどう思うか聞いてみたいです...私はまだ初心者です:https : //github.com/Drasky-Vanderhoff/marionette-demo/

Knockoutについては、すでに持っているコンテンツとのやり取りが必要で、バックエンドと常に接続しているわけではない場合に非常に適しています。私はそれを6か月間使用しましたが、ルーティングのために他の多くのjsライブラリを使用する必要があります。さらに、Backboneや他のJSフレームワークが持つ構造の多くを繰り返すことになってしまいます。私が言うことは、それがまったく邪魔にならず、制約ではなくツールになるということです。また、これはほぼ1年前であったため、いくつか変更されました。

1つは、Knockback(Knockout + Backbone)を見つけた場合、それを避けてください。ドキュメントが適切ではなく、学習するのに多くの時間がかかります。あなたがそれのために行きたいならば、あなたが望むものであるかどうか確かめるために最初に速いプロトタイプを作ってください。


投稿してから1年になります。私は今新しい開発を始めるつもりですが、マリオネットはまだJavascript開発の最有力候補として受け入れられますか?
AlVaz

まったくそうではありません。今のところ、Angular.jsまたはReact.jsを使用する方が適切です(必要に応じて両方を組み合わせることができます)。アプリのモバイルバージョンとWebバージョンの両方が必要な場合は、React.jsを使用することを強くお勧めします。これは、React NativeがiOSおよびAndroidネイティブアプリの作成に使用されているためです。React.jsとネイティブの両方が同じ概念、構造、およびパラダイムを共有します(一度学習すると、どこでも使用できます。React.js== React Nativeを知っています。そうです、トリプルイコールを使用していません:P)
DraskyVanderhoff

また、Polymerを使用しているWebコンポーネントもあります。これは、来年おそらく最もホットなフレームワークになると思われる場合は、ぜひチェックしてみることをお勧めします。最後に、Meteorは、100%リアルタイムのデータ同期/ 3方向データバインディングが必要な場合に最適なオプションです。特に、paramsのバリデーターを作成すると、バックエンドとフロントエンドの両方で同じバリデーターが実行されるため、2つのコードを用意する必要がなくなります。同じベース。
DraskyVanderhoff

1つの明確化、私はマリオネットが私の一番の選択だとは決して言いませんでした(それは実際にはその時点ではAngularでした)私が言ったことは、もしあなたがBackbone.jsを使うつもりなら、代わりにMarionette.jsを使うということでした。
DraskyVanderhoff
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.