NemerleWeb-ユニークなWebフレームワーク

NemerleWebは、NemerleコードをJavaScriptとHTMLの混合に変換するシングルページアプリケーション（SPA）フレームワークであり、双方向のデータバインディング、サーバーとの透過的な二重通信、実際のヒントによる静的型付けなどを提供します他に何。

どのように機能しますか？

開発者は、コンパイルされたNemerle言語でモデルのロジックを説明します。

マクロのおかげで、この言語のコードは非常に簡潔です。実際、アプリケーションロジックのみを記述しています。 これにより、当社のソリューションは純粋なJavaScriptライブラリとは一線を画しています。



ほとんどのモデルには、双方向のデータバインディングが実行される1つ以上のHTMLテンプレートが含まれています。 バインディングは、他のコードと同様、非常に単純に見えます。

<input value=”$Name” />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

属性内に最初の文字$を入れるだけで十分です。属性は後続のコードに基づいて自動的に計算されます。

ちなみに、このコードでは、ほとんどすべての式が許可されています。主なことは、これらの式が結果のHTMLに適合することです。



さらに、作成されたモデルから* .jsファイルとテンプレートが生成され、全体が以前の静的ページに挿入されます。



モデルの説明は、通常のASP.NET MVCプロジェクト内の単一のファイルです。

コードを見せてください！

最も単純なモデルコードは次のようになります。

 [Unit] public class Page { Name : string = "world"; [Html] public View() : string { <# <input value=”$Name” /> <div>Hello, $Name</div> #> } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウォッチ： 結果 、 ソースコード



これにより、JavaScriptの「クラス」 ページと、自動双方向データバインディングのプリミティブを含むHTML Page_Viewテンプレートが生成されます。



[Unit]属性は、クライアント側コードを作成する必要があるクラスと、テンプレートに変換する[Html]メソッドをマークします。

私はすでにC＃で準備ができたサイトを持っています

Nemerleをアタッチしたくない既製のサイトがある場合は、Nemerleで別のプロジェクトを作成できます。このプロジェクトから、この方法でC＃のメインサイトにモデルを挿入できます。

 public ActionResult PageWithModel() { return View("Index", (object)NemerleProject.MyModel.Render()); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

静的なRenderメソッドは、作成したモデルのコンパイラーによって自動的に生成されます。 ところで、このメソッドにパラメーターを渡すことで、後でクライアント側のコンストラクターを呼び出すことができます。

NemerleとNemerleWebを選ぶ理由

実際、Nemerleにはマクロを作成するための非常に高度なインフラストラクチャがあります。 開発者は、コンパイルの多くの段階に介入し、必要に応じて変更を加えることができます。

非常に簡潔な構造で、実質的に無限の可能性を持つフレームワークを作成できるようにしたのは、メタプログラミングでした。 また、Nemerleも静的に型付けされているため、無料のインテリジェンスと基本的なタイプミスチェックを取得できます。

タスクリスト

機能を示すために、高度な機能を備えた典型的なToDoリストを選択しました。 リストは、SignalRを介して他のクライアントに更新について通知しながら、サーバーへの変更を自動的に保存します。



タスクは、LINQを使用して優先度順に並べ替えられます。 ところで、テンプレートから直接使用できます。



サーバーとクライアント間の通信には、ASP.NETのそのようなソリューションの標準であるSignalRを使用します。

 //       [Unit]    JavaScript, //    Server,     // ASP.NET MVC Controller [Unit] public class ReactiveToDo { //  [Dto]     public mutable. //    [Record],   , //     [Dto] public class Task { Name : string; IsDone : bool; Priority : string; } //       [Unit]        Server,    . //  Nemerle         C#. //    ,      mutable. mutable _tasks = List.[Task](); mutable _todoName = "New task"; mutable _todoPriority = "high"; public this() { //  server  ,    Unit //   Server (. ) //    Load()  callback, //   . //     Load ,  callback -   . //      XMLHttpRequest //         . _ = server.Load(tasks => SetTasks(tasks)); } //          SignalR, //         SetTasks(tasks : List[Task]) : void { _tasks = tasks; } Add() : void { _tasks.Add(Task(_todoName, false, _todoPriority)); SaveToServer(); _todoName = "Task #" + _tasks.Count; _todoPriority = "high"; } SaveToServer() : void { //  Save   List[Task],     //     . //         , //      ,   //  window.console.log    JavaScript . _ = server.Save(_tasks, status => window.console.log(status)) } //         . //   ,     LINQ, //     linq.js // <# #> -  C#   @””,     . //     : <# <# a #> #> . [Html] public View() : string { <# <table class="reactive-todo-table"> <tr> <th>Priority</th><th>Task</th><th>Status</th> </tr> <tr $foreach(task in _tasks.OrderBy(t => t.Priority))> <td>$(task.Priority)</td> <td>$(task.Name)</td> <td><input type="checkbox" event-change="$SaveToServer" checked="$(task.IsDone)" /></td> </tr> </table> <div> <input value="$_todoName" /> <select value="$_todoPriority"> <option>high</option> <option>low</option> </select> <button click="$Add">Add</button> </div> #> } //       ASP.NET MVC //        , //         ,  //     . //  [SignalR]    Server, //       broadcast  signal (. ) [SignalR] public class Server { //     . //          . static mutable _db : List[Task] = List(); static this() { _db.Add(Task("Write article", false, "high")); _db.Add(Task("Fix website bugs", false, "high")); _db.Add(Task("Add new functionality", false, "low")); } public Load() : List[Task] { // Nemerle    return    //      "  " _db } //     . //        'void'. public Save(tasks : List[Task]) : string { _db = tasks; //    SignalR.  ,    //    .      //  client,        //  . //    . //  broadcast   SetTasks   . //      signal,   //           broadcast client.SetTasks(_db); //  ,   : "ok" } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウォッチ： 結果 、 ソースコード

コメントを削除した例： gist



注：データを自動的に更新する方法を確認するには、2つのタブで同時にページを開きます。

リトリート

この出版物の目的は、人々が本番環境でNemerleWebを使用することを奨励することではなく、プロジェクトについて話し、同じ考えを持つ人々を見つけることです。 謙虚な意見では、Nemerleマクロシステムを使用すると、以前はWeb開発では利用できなかったことができます。そのため、このベンチャーに夢中になりました。 最終的には、これから調和のとれた信頼できる枠組みを作ることが可能になることを願っています。

おわりに

これが最初の記事を完了する時間です。



次のパートで説明します。

• データバインディング、テンプレート。
• サーバー通信、SignalR
• ブロードキャストの詳細、Typescript（はい、Typescript宣言を自動的に解析できます）

参照資料

プロジェクトのウェブサイト： www.nemerleweb.com

リポジトリ： https : //github.com/NemerleWeb/NemerleWeb