各frontendフレームワークでの読み込みファイルsizeの比較

github.com

前からGithubで調査していたsize比較のグラフができたので公開 (あとで全体の比較も追加する予定)

フロントエンド ポータルサイト

f:id:wheatandcat:20180925041430p:plain

hyperappとpreactが圧倒的に低く、angular、nextが大きい感じでした。(angularがここまで大きいのは正直予想外だったので、もしかしたらimportの書き方ミスっているかも・・・)

ちなみに計測の仕方は以下の通り

読み込んでいるjsサイズの計測方法

frontend-example/report.sh at master · wheatandcat/frontend-example · GitHub

計測スクリプト

#!/bin/bas
MOCK_HOST=https://mock-server-yznxmkzmvo.now.sh
ROOT_DIR=hyperapp-examples
DIR=001-simple

rm -rf build/*
npm run build
rm -rf ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report
mkdir -p ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report
cp dist/report.html ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report

serve -s dist &
lighthouse http://localhost:5000 --output json --output-path ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report/report.json
kill $(jobs -p)
mkdir -p ../../portal/src/data/${ROOT_DIR}/${DIR}
cp ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report/report.json ../../portal/src/data/${ROOT_DIR}/${DIR}
open ../../../examples-pages/frontend-example/${ROOT_DIR}/${DIR}/report

buildしたファイルを「serve -s dist」で立ち上げて、lighthouseで計測

www.npmjs.com

計測結果のjsonの中にnetworkから読みんだアイテム情報があるので、その情報をパースしてグラフ化しています。

あとで、全部のbundleファイルのanalyze情報も追加する予定。

react-nativeのfastlaneでfabric自動化(ios/android)

push通知実装はできたけど、デプロイできなかったので、今日はfabricの紹介 githubに動くsource上げてます

github.com

ios

取り敢えず、手元で動かす前提で実装 ciだと証明書関係があるので、matchを実装しる必要がある

match - fastlane docs

  • ios/fastlane/Fastfile
default_platform(:ios)

platform :ios do
  desc "create ipa"
  lane :create_ipa do

    sigh(
      force: false,
      app_identifier: "org.reactjs.native.example.FastlaneWithFabric",
      adhoc: true,
    )

    increment_version_number(
      version_number: "0.0.0",
      xcodeproj: "FastlaneWithFabric.xcodeproj"
    )

    increment_build_number(
      build_number: Time.now.strftime("%Y%m%d%H%M"),
      xcodeproj: "FastlaneWithFabric.xcodeproj"
    )

    build_app(
      scheme: "FastlaneWithFabric",
      output_name: "FastlaneWithFabric.ipa",
      export_method: "ad-hoc"
    )

  end

  desc "deploy fabric"
  lane :fabric do

    crashlytics(
      crashlytics_path: "./Crashlytics.framework",
      api_token: ENV["FABRIC_API_TOKEN"],
      build_secret: ENV["FABRIC_API_SECRET"],
      ipa_path: 'FastlaneWithFabric.ipa',
      notes: "by fastlane",
      notifications: true,
      groups: ENV["FABRIC_GROUP"],
    )

  end

end

android

androidの方は↓を導入したらいけました。(android studioプラグインの方はうまくいかなかったので。。。)

github.com

default_platform(:android)

platform :android do

  desc "Submit a new Beta Build to Crashlytics Beta"
  lane :create_apk do

    gradle(task: "clean")
    
    gradle(task: "assembleRelease")

    sh("jarsigner", "-storepass", ENV["KEY_STORE_PASSWORD"], "-verbose", "-keystore", "../app/android-release.keystore", "../app/build/outputs/apk/app-release-unsigned.apk", "android-release")

  end

  desc "deploy fabric"
  lane :fabric do

    crashlytics(
      api_token: ENV["FABRIC_API_TOKEN"],
      build_secret: ENV["FABRIC_API_SECRET"],
      apk_path: 'app/build/outputs/apk/app-release-unsigned.apk',
      notes: "by fastlane",
      notifications: true,
      groups: ENV["FABRIC_GROUP"],
    )

  end

end

react-nativeのpush作成(途中)

全部、終わってから書きたかったけど、今日中は完成は無理そうだなってことで報告だけ

一応、androidiosどっちも通知が受信するまではできました

github.com

ハマりまくったので、詳しい内容は次の記事で書こうと思います。。。

@angular/formsについて

noteに投稿を始めました。今回はその過程で一番最後に開発したangularの話について

note.mu

@angular/formsとは

angularでフォーム入力をバインドする時に使うモジュールです。

angularドキュメントが非常に充実しているので、詳しくは下のリンク参照

Angular 日本語ドキュメンテーション

github

ここで実装しています

github.com

実装の仕方

↑のgithubのsourceに沿って紹介

入力フォームのモデル生成

f:id:wheatandcat:20180904083315p:plain

画像の入力に合わせて入力フォームのモデルを生成するために以下のコマンドを実行

ng generate class User

「src/app/user.ts」が生成されるので、中身を以下に修正

■ src/app/user.ts

export class User {

  constructor(
    public name: string,
    public genderCode: number
  ) {}

}

入力フォームのモデルをコンポーネントに追加

■ src/app/app.component.ts

import { Component, OnInit } from "@angular/core";
import { User } from "./user"; // ← 追加

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {

  model = new User("", 1); // ← 追加


(以下略)

@angular/formsをモジュールに追加

■ src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";   // ←追加
import { HttpClientModule } from "@angular/common/http";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule    // ←追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

htmlにバインドを追加

上記で追加した @angular/forms を使って入力フォームのモデルにバインドしていく

テキスト入力のバインド

テキスト入力とmodel.nameをバインドさせる

■ src/app/app.component.html

    名前:
    <input name="name" placeholder="name" [(ngModel)]="model.name" />

ラジオボタン入力のバインド

テキスト入力とmodel.genderCodeをバインドさせる

■ src/app/app.component.html

    性別:
    <input type="radio" id="male" name="genderCode" [value]="1" [(ngModel)]="model.genderCode" [checked]="model.genderCode === 1" />
    <label for="male" style="padding-right:8px">男性</label>
    <input type="radio" id="female" name="genderCode" [value]="2" [(ngModel)]="model.genderCode" [checked]="model.genderCode === 2" />
    <label for="female">女性</label>

(最後)バインドしたモデルを参照する

入力したモデルの値を参照する

■ src/app/app.component.ts

import { Component, OnInit } from "@angular/core";
import { User } from "./user";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {

  model = new User("", 1); 

  onClick() {  // ← 追加
    console.log(this.model)
  }

追加した値参照用のメソッドを呼ぶ

■ src/app/app.component.html

<button (click)="onClick()">ログ確認</button>

ここまでバインド & 参照完了

bundleファイルのanalyzeを測定方法

せっかく複数のfrontend技術で同じサンプルができたので、数値の出るデータで色々と比較していきたよねー ということで、今回はbundleファイルのanalyzeについて記載していきます。

まず、bundleファイルのanalyzeを簡単に測るツールを紹介

 

 source-map-explorer

github.com

これは簡単なツールで↓のようにbuildしたjsとjs.mapを指定して実行すると

source-map-explorer bundle.min.js bundle.min.js.map dist/js/app.2e7aac92.js dist/js/app.2e7aac92.js.map

こんな感じでjsの全体のサイズと中身のパッケージのサイズを表示してくれます

f:id:wheatandcat:20180830230843p:plain

簡単ですが、複数ファイルには対応してなさそうなので辛いかも、ってことで次

webpack-bundle-analyzer

www.npmjs.com

webpackのconfigに仕込む系ですが、今回はできるだけ最小コストで開発しているから、全部隠蔽され済みなんだよなーと思って調べたら、 いろいろとやり方が見つかったので記載

vue

vue-cliを使っているなら↓で出力できます

npm run build -- --report
open dist/report.html

f:id:wheatandcat:20180830233847p:plain

hyperapp (parcel)

parcelにもプラグインありました

www.npmjs.com

npm install --save-dev parcel-plugin-bundle-visualiser
npm run build
open dist/report.html

f:id:wheatandcat:20180830234436p:plain

nuxtjs

nuxtjsは標準の機能として入ってます

ja.nuxtjs.org

npm run build -- --analyze

f:id:wheatandcat:20180830234917p:plain

まとめ

調べる意外とやれるなって気がしたので、 次は統計データを見やすく出力する方法と、継続的にデータを取る方法について調べていく予定

demoのホスティングについて考える

 最近↓みたいなことをやっていて、demoのホスティングについて色々試してみたので、それについての話

github.com

■ demoのポータルサイト

demoをデプロイは何が良いか?

  • フォーカスしていること
  • 無料で使える
  • demoなのでパフォーマンスとは、どうでも良い
  • 簡単にデプロイできる

ってことで書いていきます  

 GitHub Pages

静的ファイルのホスティングができるので、取り敢えずそれだけで済む場合は GitHub Pagesがオススメ。やり方は↓参照

qiita.com

で、これでいけると思ったら、以下の奴が駄目だったので一部ホスティングできなかった・・・

  • ハッシュルーティングならいけるけど、URLルーティングは無理
  • 今回のやつだと、nextjsとnuxjsは、nodejsの環境が無いと無理

ってことで、次を調査

now

zeit.co

コマンド一発でnodejsプロジェクトとDockerをデプロイしてホスティングできるサービス。 これでいける!と思ったけど、無料枠のインスタンスが3つしかない・・・・

zeit.co

今回は少なくとも10個のdemoが必要なので足りませんでした

Glitch

glitch.com

こっちはブラウザ内のエディタ環境で書いたnodejsをコードをそのままホスティングしてくれるサービス。 ファイルの同期手段が手動しかないので却下

Google App Engine

cloud.google.com

Quickstart for Node.js in the App Engine Standard Environment  |  App Engine standard environment for Node.js docs  |  Google Cloud

googleが提供しているPaaSプラットフォーム。対応言語も多いのでオススメ。 無料枠で済むなら、これでOKだと思います。

heroku

jp.heroku.com

有名なPaaSプラットフォーム。 結局、nextjsはherokuでデプロイしました。

同じリポジトリで複数アプリをデプロイする場合は「heroku-buildpack-monorepo」を使えばOK

jaketrent.com