シンプルなJavaScriptでビルド強力なWebアプリ

そばEkekenta Odionyenfe Clinton
JavaScriptのフレームワークは、あなたの仕事を効率的に、できるだけ簡単に行わを検索しているか?あなたのプロジェクトのための最良のフレームワークを選択しながら、パフォーマンス、速度、およびシンプルを検討していますか?もしそうなら、次の10分間ハングアップします.このチュートリアルでは、Aureliaを使用して簡単なJavaScriptで強力なWebアプリケーションを構築する方法を学びます.

Aureliaとは何か

Aureliaは、結合されるとき、ブラウザー、デスクトップとモバイル・アプリを開発するための強力なプラットホームを提供する現代のJavaScriptモジュールのセットです.Aureliaの最後の目標は、お客様のための豊富な、魅力的な経験を作成し、会議や現代のネイティブアプリケーションで発見されて超えている.

なぜAureliaを使用する？

Aureliaは、それがあなたのWebアプリケーションの良いツールになる多くの利点があります.これらは

これは、オールインワンソリューションを提供しています:Aureliaは、依存性の注入、テンプレート、ルーティングのようなコア機能を提供し、パブ/サブので、一緒にアプリケーションを構築するライブラリの束を一緒にする必要はありません.この豊富なコアの上に、Aureliaはまた、国際化、バリデーション、モーダルダイアログ、UI仮想化のためのいくつかの追加プラグインを提供します.

それは偉大なレンダリング速度とメモリ効率を提供しています:Aureliaは、他のフレームワークよりも速くレンダリングすることができますバッチレンダリングと観測可能なオブジェクトプーリングを実装しています.Aureliaはまた、少ないメモリを使用して、他のフレームワークよりも少ないGCの群れを引き起こす.

Aureliaは、そのコアAPIのアップグレードのための変更がないことを保証します.

Aureliaは、プレーン、バニラJavaScriptまたはTypesScriptを使用してアプリケーションのコンポーネントを構築することができます.

そのシンプルさと一貫したデザイン構造のため、Aureliaは他のフレームワークよりもはるかに簡単に学ぶことです.

Aureliaの拡張可能な設計とWeb標準への厳格な遵守のため、AureliaをJQuery、Reaction、Polymer、Bootstrap、Materializecssなどのサードパーティ製のライブラリやフレームワークと統合するのは簡単です.

それはMITライセンスの下で供給されて、特別な条項または許可を条件に加えるか、取り除きません.

そして、より多くのあなたはdocumentation .

私たちは何を建てていますか。

どのように強力でシンプルなAureliaを実証するには、下のスクリーンショットに示すように、ToDoアプリケーションを構築します.

Aureliaから始める

このチュートリアルを始める前にNodejs インストールされているバージョン10以上.nodejsがインストールされている場合は、以下のコマンドでaurelia cliをインストールします.

npm install -g aurelia-cli

NPMはアプリケーションを実行するために必要なパッケージをインストールします.インストールが完了すると、プロジェクトを作成する時間です.

Aureliaプロジェクトを作成する

Aurelia CLIをコンピューターにインストールし、次のコマンドで新しいAureliaプロジェクトを作成します.

au new

上記のコマンドは、プロジェクト名とプロジェクトのデフォルト設定を入力するプロンプトを表示します.デモンストレーションのために、我々はプロジェクト「タスクToDOS」を指名して、「デフォルトTypeScript App」を選んで、アプリケーションを走らせるためにすべての依存関係をインストールするためにパッケージマネージャとして「NPM」を選びます.インストールが完了すると、ディレクトリをプロジェクトフォルダに変更し、次のコマンドでアプリケーションを起動します.

cd task-todo
au run --open

ポート8080で起動したら、アプリケーションはブラウザで開きます.既定のポートでアプリケーションを実行している問題が発生した場合は、AureliaCountプロジェクト/Aureliaの既定のポートを変更できます.JSON

アプリケーションクラスの作成

この時点で、アプリケーションが稼働している.Aureliaは同じようなフォルダ構造を持っています.jsすべてのプロジェクトはsrcフォルダにあります.コンテンツをレンダリングするためにAureliaで作成するすべてのコンポーネントのHTMLファイルが必要です.では、app.ts 以下のコードスニペットを持つファイル

export class Todo {
  public todos;
  public name = "";

  constructor() {}
}

次に、app.html ファイルを下にしてToDoビューをレンダリングします.

<template>
  <div class="container">
    <div class="main">
      <div class="todo-header">
        <h4>My Task</h4>
      </div>
      <div class="todo-body">
        <form>
          <input type="text" class="task">
          <button type="submit" class="add">Add</button>
        </form>
        <ul>
          <div class="todo-list">
            <input type="checkbox"/>
            <li>Write some code</li>
            <span>X</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

上記のコードスニペットでは、ToDoビューを作成しました.新しいToDoを追加する入力フォームを作成し、ToDoを表示する順序のないリストを作成します.この時点で、我々のアプリはスタイリングをしています前に行って、ものがよりよく見えるように若干のスタイルを加えましょう.

カスタムスタイルの追加

アプリケーションのビューを作成すると、作成style.css srcフォルダ内のファイルを次のスタイルを追加します.

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

body {
  background-color: rgb(204, 211, 218);
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-between;
  width: 500px;
  margin: 10px;
  align-items: center;
}

.header h4 {
  color: rgb(175, 98, 158);
}

.add {
  background-color: rgb(12, 127, 204);
  border: 0px;
  padding: 6px;
  color: white
}

.main {
  width: 500px;
  margin-top: 12px;
}

.main .todo-header {
  background-color: rgb(175, 98, 158);
  color: white;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 20px;
}

.main .todo-body {
  background-color: white;
  padding: 10px;
}

.main .todo-body .task {
  padding: 10px;
  border: 0px;
  outline: none;
  border-bottom: 1px solid rgb(175, 98, 158);
  width: 90%;
  margin-bottom: 20px;
}

.main .todo-body ul {
  list-style: none;
}

.main .todo-body ul div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
}

.main .todo-body ul div input {
  margin-right: 5px;
}

.main .todo-body ul div span {
  color: rgb(204, 77, 77);
  position: relative;
  left: 20em;
  display: none;
  cursor: pointer;
}

.main .todo-body ul div:hover span {
  display: flex;
}

.completed {
  text-decoration: line-through;
}

さあインポートしましょうstyle.css ファイルを使用して我々のアプリケーションビューでrequire 要素を使用して、ビューにリソースをインポートできます.次のコードスニペットを追加しますapp.html ファイル.

<template>
  <require from="./style.css"></require>
  ...

アプリケーションは、より魅力的に見えるはずです.スタイルを変更する無料!

オープンソースセッション

OpenReplay フルストーリーとログオンにオープンソースの代替手段です.それはあなたのすべてのユーザーがあなたのアプリケーションで行うと、すべての問題のスタックの動作方法を示すすべての再生によって完全な観測能力を与える.OpenReplay自分のデータを完全に制御するためのホストです.

ハッピーデバッギング、現代のフロントエンドチームstart monitoring your web app for free .

カスタムデータの読み込み

この時点で、私たちは1つのtodoを持っています.外部ファイルからいくつかのtodosを読み込みましょう.完全なスタックアプリケーションでは、このデータはバックエンドAPIからなるはずです.デモのために、ダミーデータを作成します.クリエイトア**api/index.js** srcディレクトリ内のフォルダを指定し、以下のコードスニペットを追加します.

interface Todo {
  id: number;
  name: string;
  completed: boolean;
  dateCreated: number;
}

export class API {
  id = 0;

  Todos: Todo[] = [
    {
      id: ++this.id,
      name: "Sleep",
      completed: false,
      dateCreated: Date.now(),
    },
    {
      id: ++this.id,
      name: "Excercise",
      completed: false,
      dateCreated: Date.now(),
    },
    {
      id: ++this.id,
      name: "Eat",
      completed: false,
      dateCreated: Date.now(),
    },
    {
      id: ++this.id,
      name: "Code",
      completed: false,
      dateCreated: Date.now(),
    },
    {
      id: ++this.id,
      name: "Sleep",
      completed: false,
      dateCreated: Date.now(),
    },
  ];

  getTodos() {
    return new Promise((resolve) => {
      const results = this.Todos.map((todo) => {
        return {
          id: todo.id,
          name: todo.name,
          completed: todo.completed,
          dateCreated: todo.dateCreated,
        };
      });
      resolve(results);
    });
  }
}

上記のコードスニペットでは、我々はAPI いくつかのtodosを持つクラスとtodosを返す方法.
今すぐあなたのAPIクラスをインポートして使用しますapp.ts ファイル.その前に、API クラスでinject 「Aureliaフレームワーク」からの機能.Aureliaには依存関係インジェクションコンテナがあり、アプリケーションのクラスをインスタンス化するために使用されます.

import { inject } from "aurelia-framework";
import { API } from "./api";

Todoクラスのインターフェイスを作成し、APIクラスをバインドしましょう.アプリを更新します.以下のコードスニペットを持つtsファイル

import { inject } from "aurelia-framework";
import { API } from "./api";

interface todoInterface {
  id: number;
  name: string;
  completed: boolean;
  dateCreated: number;
}

@inject(API)
export class Todo {
  public todos;
  public name = "";

  constructor(private api: API) {}
}

アプリケーションメソッドの作成

さあ、TODOクラスにメソッドを追加して、更新してtodosを削除します.APIを使うには、getTodos 作成するメソッドhook , ビューモデルとビューの両方が呼び出された後に呼び出されます.それから、todosをtodos変数に保存しますTodo クラス.以下のコードスニペットを追加しますapp.ts ファイル.

created() {
  this.api.getTodos().then((todos) => (this.todos = todos));
}

Todoを作成、更新、削除するには、次のメソッドを追加します.

// ...
  async createTodo() {
    if (this.name) {
      const todoObj: todoInterface = {
        id: this.todos.length + 1,
        name: this.name,
        completed: false,
        dateCreated: Date.now(),
      };
      this.todos.push(todoObj);
      this.name = "";
    }
  }

  updateTodo(id: number) {
    this.todos.map((todo) => {
      if (todo.id == id) {
        todo.completed = !todo.completed;
      }
    });
  }

  deleteTodo(id) {
    this.todos.splice(
      this.todos.findIndex((todo) => todo.id == id),
      1
    );
  }

  // ...

最後に、アプリを更新します.以下のコードスニペットを持つHTMLファイル

<template>
  <require from="./style.css"></require>
  <div class="container">
    <div class="main">
      <div class="todo-header">
        <h4>My Task</h4>
      </div>
      <div class="todo-body">
        <form submit.trigger="createTodo()">
          <input type="text" class="task" value.bind="name">
          <button type="submit" disabled.bind="!name" class="add">Add</button>
        </form>
        <ul repeat.for="todo of todos">
          <div class="todo-list" click.trigger="updateTodo(todo.id)">
            <input type="checkbox" checked.bind="todo.completed"/>
            <li class="text-decoration: ${todo.completed ? 'completed' : 'none'}">${todo.name}</li>
            <span click.trigger="deleteTodo(todo.id)">X</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

上記のコードスニペットでは、次のイベントとバインドをアプリケーションビューに追加しました.

- submit.trigger="createTodo(): This event gets called when the user clicks the submit button.



click.trigger="updateTodo(todo.id)" and click.trigger="deleteTodo(todo.id)": The events get called when the user click the delete carret or clicks on the todo, which will either delete or update the compeleted properties of that todo.

value.bind="name": This allows us to bind the users' input to the input field. Learn more about Aurelia binding here.

disabled.bind="!name": This binding enables us to disable the submit button when the input field is empty.

checked.bind="todo.completed": This binding checks the input box when a todo is completed.

アプリケーションのテスト

この時点で、Aureliaアプリケーションが完成します.先に行くと追加、更新、およびtodoを削除することによってそれをテストします.

結論

うわー、とうとうここで作りました.このチュートリアルでは、Aureliaを使用して強力なWebコンポーネントを構築する方法を学びました.あなたはAureliaが何であるか、そしてなぜあなたがそれを使用するべきかの概要を持っていました.その後、デモのToDoアプリケーションを作成しました.ご質問がございましたら、ご遠慮願います.