Node.jsとPHPからJavaScriptへの移行

10年以上、私はPHP開発者でしたが、最近、サーバーとクライアントの機能を使用してJavaScriptに切り替えました。 その前、私はすでにJSに精通していました。 最初にjQueryを使用し、次にAngularを習得し、最終的にReactの使用を開始しました。



PHPで書き始めたとき、それをHTMLファイルに埋め込みました。 それはコードではなく、完全な混乱をもたらしました。 したがって、開発をまともな外観にするために、フレームワーク、特にZF1とZF2の使用を開始しました。 しばらくして、APIを使用して開発を開始したアプローチにより、生成されたREST APIと数百行の独自のコードで構成されるサーバーができました。







プロジェクトの最も重要な部分ではなく、ごく一部しかPHPで記述されていないため、それを取り除くことができるかどうかという疑問が生じました。 そして、できれば、それが私たちに何を犠牲にし、それから何を得るのか。 この記事では、私の経験を、私のように、彼が何をして何をしているのかを理解し、PHPの世界を去り、あらゆる形でJavaScriptの旗の下に立つ人々と共有します。



今日は、主にNode.jsの形式で、PHPのサーバー側からJSのサーバー側への旅について説明します。 ここでは、Webpack、React、およびその他のJSクライアントテクノロジーについては説明しません。

技術スタックの進化

PHPからNode.jsに切り替えるときに使用するテクノロジースタックの進化を説明する一般的なスキームから始めましょう。





技術スタックの主要な変更



Node.jsは、新しいテクノロジースイートのコアコンポーネントです。 高性能を備えています。



Node.jsは非常にうまく機能しているため、以前は低レベル言語で記述された多くのツールで、JavaScriptに相当するものが利用可能になりました。 使用するプラットフォームに通常のプログラムをインストールするのは非常に時間がかかるため、Ansibleを使用して作業環境を展開する必要がありました。 新しいツールはNode.jsのみに依存するようになったため、独自にインストールする必要があるのは、Node.jsをインストールするためのツールであるNVM （Node Version Manager）です。

NVMを使用してNode.jsを適切にインストールする方法

Node.jsを手動でインストールした場合、またはオペレーティングシステムパッケージマネージャーを使用した場合、Nodeのバージョンを切り替えようとすると、すぐに多くの問題が発生しました。 その結果、NVM​​を使用するようになりました。



このツールは、インストールと使用が非常に簡単です。

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash nvm install node nvm use v6.9.1
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インストール後、次の機能が利用可能になりました。

• 1つのコマンドを使用して、異なるバージョンのNode.jsを同じシステムにインストールします。
  
  
• Node.jsのインストール済みバージョン間の便利な切り替え。
  
  

さらに、これは特に素晴らしいことですが、NVMはLinux、Mac、およびWindowsで実行されます 。

2017年のJavaScript

JavaScriptを学び始めて、私は動的なWebサイトを作成せずに「残念ながら、できない」二流の言語としてそれを感じました。 その結果、私はそれを適切に理解しようとしませんでした。 主にブログの投稿でJavaScriptを学びましたが、Stack Owerflowの回答で学びました。 今、それについてすみません。





材料を学ぶ！



最新のJavaScriptフレームワークとツールを使い始める準備ができていませんでした。 2017年、JavaScriptは新しい機能のおかげで完全に異なりました。 その中でも、次のことに注意してください。

• クラス。
  
  
• 約束（言語に組み込まれました）。
  
  
• 再構築および拡張演算子。
  
  
• モジュールとモジュールローダー。
  
  
• 弱いリンクを持つ構造とそのオプションをマップ/設定します。
  
  
• 非同期/待機。
  
  

最後に、私は時間をかけて多くの資料を作成し、JavaScriptを適切に学習しました。 たとえば、 Babeljs.ioのWebサイトは、最新のJavaScriptプログラミングとは何かの素晴らしい概要を教えてくれました。

ComposerからYarnへの移行

Composerは素晴らしいが遅いツールです。 NPMにも同じ欠点があるため、代わりにYarnを選択しました。 これは、NPMの最速の代替手段です。



前回のプロジェクトでは、約1,000の依存関係がありました。 開発チームは10人で構成され、 node_modules



フォルダーは少なくとも1日に2回変更されます。 次の式を使用して、2か月でパッケージをインストールするのにかかる時間を見積もりましょう。



（10人の開発者+ 3つの環境）* 1日2回のインストール* 60日* 1インストールあたり3分= 78時間。



パッケージのダウンロードとRedditの読み取りの進行状況の監視に2週間の作業時間が費やされたことがわかりました。 3分は、大きな損失を招く可能性がある十分な時間ですが、インストールの進行中に他のタスクに切り替えるには短すぎます。



Yarnのおかげで、インストール時間を3分から1分に短縮できました。 これにより、作業時間が46時間短縮されました。 そして、これは素晴らしい結果です。

JavaScriptでAPIを作成する

おそらく、自分でそれについて話すのではなく、コードにフロアを与えます。 以下は、次のパッケージに基づくAPIの最小限の例です。

• Expressは、Zend Frameword 2 / Symfonyと同等の軽量JSです。
  
  
• SequelizeはDoctrineの代替です。
  
  
• エピローグはアピジリティの代替です。
  
  

 const Sequelize = require('sequelize'),   epilogue = require('epilogue'),   express = require('express'),   bodyParser = require('body-parser'); //     Sequelize //  -    Doctrine let database = new Sequelize('database', 'root', 'password'); let User = database.define('User', { username: Sequelize.STRING }); //   Express let app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); //  Epilogue  Express epilogue.initialize({ app: app, sequelize: database }); // ,   Epilogue,    REST let userResource = epilogue.resource({ model: User, endpoints: ['/users', '/users/:id'] }); //  ,   User   GET/POST  DELETE. app.listen(() => {   console.log('Server started!'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

数行のコード-カスタマイズおよび拡張可能なREST APIがあります。

Apigilityを使用して50を超えるAPIエンドポイントを作成した後、2つのことを理解しました。 第一に-それは可能であり、第二に-効果的に。



たとえば、Epilogueは問題なく10個のエンドポイントを生成します。 ユーザー権利などの複雑な条件をサポートするために、独自のコードを標準フレームワークに接続する機能もあります。 自動生成できないものは、Sequelizeを使用して簡単なExpress RPCエンドポイントとして作成されます。



Zend Framework 2がExpressよりもはるかに優れた機能を持っているとは言いません。 しかし、Expressは経済的でシンプルなソリューションであることが判明しました。これはすべてのニーズに十分でした。 それに切り替えるとき、私たちは何もあきらめる必要はありませんでした。

フロー：データ型の海でdrれた人のための救命浮き輪

PHPでは、必要な場合にのみデータ型のヒントを追加できます。 これは私のお気に入りのPHP機能の1つです。 強力だが柔軟な型システムがあります。

 <?php class UserService { public function createUser(string $name, User $parent = null, $isAdmin) : User {   $user = new User($name);   ...   return $user } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

長年にわたり、JSでこのようなことは不可能であり、唯一の解決策はTypeScriptに切り替えることだと考えていました。 しかし、私は間違っていました。



Flow-typeとも呼ばれるFlowライブラリを発見し、JSテキストに型情報を簡単に追加できました。



Flowライブラリのインストールは簡単です：

 yarn add --save-dev flow-bin node_modules/.bin/flow init
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、制御する必要があるファイルの先頭に1行のコードを追加することにより、簡単に接続できます。

 /* @flow */  // @flow
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、 flow check



コマンドを使用すると、推測されたタイプに基づいてレポートを取得できます。



プロジェクトでBabelなどのトランスパイラーを使用している場合、JSでフロータイプヒントをサポートする新しいルールを追加できます。 その結果、PHPと同様に便利に型を操作できます。





フローのヒント

サーバーのクラッシュとPM2による監視

PHPの世界では、スクリプトの失敗は生のリクエストを意味します。 Node.jsの場合、サーバーがクラッシュすると、Webサイト全体が機能しなくなります。 したがって、プロセスを監視する必要があります。



優れた監視システムを探して、 SupervisordからJavaScriptで記述された競合他社に切り替えました。 ここにあります：



→ PM2（プロセスマネージャー2）



私はPM2が大好きなので、ここに2、3のハートを挿入しなければなりません。



PM2はYarnを使用してインストールできます。Yarnはそれ自体非常に優れていますが、PM2自体には多くの長所があります。 したがって、機能の点では、Supervisoredを上回ります。 彼は、各プロセスがシステム上に作成する負荷、およびプロセスが占有するメモリを追跡する方法を知っており、コードが変更されたときにプロセスを再起動するように構成できます。





pm2 listコマンドは、すべての管理対象PM2プロセスに関する情報を表示します。



pm2 monit



は、各プロセスのリアルタイムの詳細なレポートを提供します。 さらに、PM2は、追加の努力なしに、標準のconsole.log()/.warn()/.error()



コマンドを使用して、ロギングを簡素化します。





PM2はサービス出力を視覚化し、ユーザー定義のメトリックを追跡できます



もっと言います。 Supervisordの機能の範囲はプロセス制御に限定されていますが、PM2はプロジェクトを展開するために使用されるスクリプトの一部を単純な構成ファイルに置き換えることができます。





プロセスを簡単に記述してデプロイできるようにする構成ファイル



PM2は、私にとってJavaScriptに切り替えることの最も重要な利点の1つです。 さらに、どの言語で書かれたプロジェクトにも使用できますが、唯一のマイナス点です。そのような場合、JSに基づいたプロジェクトで作業するときほど密接な統合はありません。

.envを使用したプロジェクトの構成

私たちのプロジェクトでは、 Phingを使用して3つの問題を解決しました。

• プロジェクト構成
  
  
• スクリプティング
  
  
• 便利なコマンドの保存。
  
  

JavaScriptの世界では、設定タスクは優れたDotEnvライブラリと.env



ファイルで.env



できます。 このライブラリを使用すると、環境変数を使用してアプリケーションを構成できます。 これは、 Twelve-Factor App方法論から推奨されるトリックの1つであり、継続的に使用しています。



Phingのスクリプト機能のおかげで解決されたタスクでは、特別なツールを使用する必要がなくなりました。 以前は、すべてのスクリプトは、Supervisordなど、PHPの世界以外のソフトウェアの構成に関連付けられていたか、独立したコマンドラインスクリプトとして設計できました。



その結果、Phingが果たすことができる唯一の役割は、コマンドを保存し、それらのショートカットを作成することです。 このタスクはYarn（またはNPM）によって完全に解決されます。

 { "name": "my project name", "...": "...", "scripts": {   "release": "standard-version",   "db-reset": "rm -rf data/main.db && sequelize db:migrate && sequelize db:seed:all",   "db-migrate": "sequelize db:migrate",   "dev": "pm2 delete all; pm2 startOrReload ecosystem.config.js && pm2 start react-scripts --name web -- start",   "start": "pm2 startOrReload ecosystem.config.js",   "build": "react-scripts build",   "test": "react-scripts test --env=jsdom",   "flow": "flow" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、Phingを完全に排除し、次の方法でチームに電話をかけることができました。

 yarn run db-migrate
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

優れたオープンソースエディターの検索と使用

PHPで開発するときは、無料のIDEであるPhpStormを使用しました。これは、無料で配布されているものが遅いように見えるか、プラグインが不足しているためです。



JavaScriptの世界では、適切なコードエディターの選択ははるかに豊富です。 VS Codeに決めました。 このエディターはJavaScriptで記述されており、愛好家とマイクロソフトのコミュニティーによってサポートされています。





VS Codeロゴ



これまでのところ、私たちはすべてVS Codeが好きです。 高速で動作し、素晴らしいコード補完システムを備えており、その背後には優れたコミュニティがあります。



ここで、プロジェクトで使用するプラグインを設定し、構成を共有する機能が本当に気に入っています。 そのおかげで、数回クリックするだけでプログラマーの職場を準備できます。

Prettierを使用して手動でリンティングを削除する

PHPでは、1つの素晴らしいことがありました。 これらはPSR標準です。 これらの標準は、コード設計ルールを準備するときに非常に役立ちます。



コードがPSR 1および2規格に準拠するようにIDEをセットアップしましたが、自動修正機能がないため、各自がそれらを個別に使用する責任がありました。 あまり良くありませんでした



JavaScriptに切り替えると、Prettierはこの分野で非常に貴重なアシスタントになりました。 Prettierは、ルールベースのコードフォーマッタです。 ファイルを保存するたびに、すべてのアマチュアスタイリングが削除され、単一のスタイルに一致するフォームにコードが導かれます。





アクションできれい



その結果、コードスタイルについてこれ以上の議論はありません。この方向でのトレーニングはありません。フォーマットのみが変更されるファイルを結合するのに時間の損失はありません。



チームの全員がPrettierを使用し、愛しています。 プログラマーが作業を行い、Prettierが詳細のフォーマットを担当します。

まとめ

PHPからJSに切り替えるときに遭遇する長所と短所を考えてみましょう。



長所：

• スタックのインストールとデプロイが簡単です。
  
  
• クライアントとサーバーのコードは1つの言語で書かれています。
  
  
• 複雑なインストールスクリプトに依存しなくなりました。
  
  

短所：

• 私たちのニーズを満たす一連のテクノロジーを形成するには、多くの労力が必要でした。
  
  
• JavaScriptで最新のプログラミングを学ぶためには、多くのトレーニングを編成する必要がありました。
  
  

移行後、サーバーAPIを迅速に生成できたことに注意してください。 これは、PHPで行ったことに似ています。 移行後は何も後悔しておらず、何も失っていないと感じています。 切り替えたすべてのツールは、以前使用したものと同等であるか、それらより優れています。



PHPからJSへの切り替えを検討している場合は、成功をお祈りし、JSの世界をナビゲートし、必要なものを正確に選択するのに役立つことを願っています。



親愛なる読者！ PHPを使用している場合は、あなたの生活を教えてください。JavaScriptに切り替える予定はありますか？