Sprute.js。 別の同形JavaScriptフレームワーク

画像

注目を集める絵



Sprute.jsは、新しい同形JSフレームワークです。 設計と実装の間、主に開発の利便性と、フレームワーク自体をできるだけシンプルでコンパクトに維持することに重点が置かれました。 まず第一に、これは同型性に関するものです。



なぜ別のフレームワークですか?



既存のフレームワークでは、私は同型を実装するアプローチに満足していません-私の目標は、アーキテクチャを定義せず、同型を中心にアーキテクチャを構築する必要がないように同型を実装することでしたが、サーバーコードをできる限り透明にすることです、そして彼はクライアントで働いていました。 私のアプローチは、最初にサーバー側と呼ぶことができます。



私はテキストの不足のために多くを蹴らないようお願いします-私の考えの詳細な説明は常に私の弱点でした。



同型アプローチ



同型を実装するために、ブラウザでnode.jsを「エミュレート」することにしました。同型コードはサーバー上で記述され、クライアント上でも同じように機能します。 これを行うには、node.jsの要件をブラウザに移植し、ファイルシステムをエミュレートする必要がありました。 また、node.jsモジュールのプロセス、fs、イベントを部分的に移植しました。



建築



すべてのコードは、サーバー、クライアント、同形の3つのカテゴリに分けられ、バック、フロント、共通のディレクトリに分けられます。 バックディレクトリとフロントディレクトリには、対応する環境に固有の基本クラスが含まれ、コードの90%は共通ディレクトリにあります。 サーバー、テンプレートエンジン、ソケット接続などのフレームワークの機能は、コンポーネント-基本的にモジュールの形で実装されます。 これにより、特定の責任領域でコードをカプセル化できます。 また、ソケット接続などの同形のラッパーを作成し、クライアントとサーバー上に単一のAPIを作成し、将来コンポーネントの実装を変更できるようにします。



コンポーネントの例:



'use strict'; module.exports = { init() { let module; app.clientSide(() => { module = require('./lib/client') }); app.serverSide(() => { module = require('./lib/server') }); return module.init() } };
      
      







静力学



スタイル、インターフェイスの対話機能を実装するスクリプトなどは、テーマ(ファイルと構成オブジェクトを含むディレクトリ)で収集されます。 これにより、インターフェイスロジックを残りのロジックから分離できます。 また、ページごとに個別のトピックを設定することもできます-サイトを再設計したり、さまざまな管理パネルなどを作成したりするときに便利です。



データを操作する



データの操作は、データマッパーパターンを使用して実装されます。 データを保存/選択するためのロジックはマッパーにあり、ビジネスロジック(たとえば、ユーザーには特定の特権がありますか)-モデルでは、セットで作業するためのロジックはコレクションにあります。 マッパーの作業の同型は次のように実装されます-要求はオブジェクトにシリアル化され、サーバーに送信されます。サーバーでは、要求オブジェクトは同じマッパーに送信されます。 結果はクライアントに返されます。 現時点では、knexライブラリを使用してクエリを作成し、データを取得するマッパーが実装されています。

マッパーの例



 const BaseMapper = require(app.get('commonPath')+'/mappers/knex-mapper'); class CoolModel {} class CoolMapper extends BaseMapper { constructor() { let connections; app.serverSide(() => { connections = require(process.cwd()+'/configuration/connections') }); app.clientSide(() => { connections = {}; }); super({ client: 'mysql', connection: connections.mysql }) } get tableName() { return 'cool' } get model() { return CoolModel } beforeCreateTable(table) { table.comment('very cool table') } addColumns(table) { table.increments('id').primary(); table.string('field1'); table.integer('field2'); table.string('field3') } get validator() { if(!this._validator) { let vE = app.get('validationEngine'); this._validator = new vE({ id: 'integer', field1: 'not_empty', field2: 'integer', field3: 'not_empty' }) } return this._validator } validateModel(model) { return this.validator.validate(model) } } const mapper = new CoolMapper(); mapper.find().limit(10).offset(5).then(collection => { /* code here */ }); mapper.findOne().where({id:2}).then(model => { /* code here */ })
      
      







仕組み



エントリポイントはAppクラスです。 クラスが初期化されると、コンポーネントが初期化されます-フレームワークの作業はここで完了します。 次に、サーバーコンポーネントがそれ自体を処理し、ルーターが登録されます。 さらなる作業スキームは、ルーターによるリクエストの処理です。



ルーターの例:



 'use strict'; const BaseRouter = require(app.get('classPath')+'/routers/base'), process = require('process'), theme = require(process.cwd()+'/configuration/theme-light'); module.exports = class extends BaseRouter { constructor(params, DomDocument) { super(params); this.DomDocument = DomDocument || require(app.get('classPath')+'/classes/dom-document') } index(req, res) { const view = new (require('../views/main-page'))(theme), DomDocument = new this.DomDocument(theme); view.render().then(html => { DomDocument.setBlock('main', html); this.loadPage(DomDocument, res) }) } };
      
      







現状



現時点では、1つのサイトが作業中です-bel31stroy.ruと別のサイトが建設中です。 フレームワーク自体は定期的に改訂されます。 プルリクエストとバグレポートは大歓迎です。



Github: github.com/one-more/sprute



All Articles