Я был разработчиком PHP более 10 лет и недавно перешел в мир полного стека JS. Я уже был знаком с JavaScript. У меня была фаза jQuery, затем приложение Angular, и я, наконец, начал использовать React.

Когда я был новичком в PHP, я встроил его в файлы HTML. Мой код был беспорядочным. Поэтому я начал использовать фреймворки, чтобы попытаться организовать это: ZF1 и ZF2. Со временем подход, ориентированный на API, оставил мне сервер, состоящий из сгенерированного REST API и нескольких сотен строк пользовательского кода.

Поскольку только небольшая часть наших проектов была на PHP, возник вопрос; мы могли бы избавиться от этого? И если бы мы могли, каковы были бы затраты и выгоды? В этой статье я делюсь своим опытом для тех, кто, как и я, хочет уйти из мира PHP и твердо принять JS FullStack.

В этой статье я представлю вам в основном свое путешествие на стороне сервера от PHP к Node.js, и не буду говорить о Webpack, React и других интерфейсных технологиях JS.

Эволюция стека

Node.js - главный компонент нашего нового стека. Он выполняет программы JavaScript с большой скоростью.

Он настолько хорошо выполняет свою работу, что многие инструменты, ранее написанные на языках низкого уровня, теперь имеют свои аналоги в JavaScript. Установка собственных программ была настолько утомительной, что нам пришлось использовать Ansible, чтобы развернуть наш стек. Поскольку наши новые инструменты выбора теперь зависят только от Node.js, единственное, что нам нужно установить на сервере, это NVM (Node Version Manager): инструмент, предназначенный для установки Node.js.

Как правильно установить Node.js с помощью NVM

Использование диспетчера пакетов ОС или установка Node.js вручную быстро привели к множеству проблем, когда мы попытались переключить версию. Итак, мы использовали NVM.

Настроить очень просто:

После установки мы смогли:

  • Устанавливайте разные версии Node.js в одну систему одной командой
  • Легко переключаться между версиями Node.js

Более того, NVM работает в Linux, Mac и Windows благодаря nvm-windows.

JavaScript в 2017 году

Когда я начинал изучать JavaScript во время учебы, он считался языком мусора, «к сожалению, необходимым» для создания динамических веб-сайтов. Так что я никогда не тратил время на ее изучение. В основном я узнал о JavaScript из сообщений в блогах и ответов о переполнении стека. Я сожалею об этом.

Я не был готов начать использовать современные инструменты или фреймворк JavaScript. JavaScript в 2017 году - это совсем другой язык с такими современными функциями, как:

  • Классы
  • Обещания (теперь встроены в язык)
  • Оператор деструктуризации и распространения
  • Модули и загрузчики модулей
  • Карты / Наборы и их слабые версии
  • Асинхронный / Ожидание

Поэтому потребовалось время, чтобы изучить большой материал, чтобы правильно изучить Javascript. Сайт Babeljs.io дал мне лучший обзор того, что такое программирование на JavaScript на сегодняшний день.

От композитора к пряже

Composer - действительно хороший инструмент, но он медленный. У NPM такая же проблема, поэтому мы выбрали Пряжа. Это более быстрая альтернатива NPM.

В моем последнем проекте у нас было около сотни зависимостей. Среди нашей команды из 10 разработчиков у нас было как минимум 2 модификации папки node_modules в день.

(10 разработчиков + 3 среды) * 2 установки / день * 60 дней * 3 мин / установка = 78ч

Действительно, две недели были потрачены на просмотр загрузчиков и чтение Reddit. Трех минут достаточно, чтобы добавить к стоимости проекта, но слишком мало, чтобы переключиться на другую задачу разработки.

Сократив время установки с 3 до 1 минуты с помощью Yarn, мы сэкономили 46 часов фокуса! Если вы спросите меня, это хорошая сделка.

Создание API в JavaScript

Код говорит сам за себя. Вот минимальный пример API на основе:

  • Express, легкий JavaScript-эквивалент Zend Framework 2 / Symfony
  • Sequelize, альтернатива Doctrine
  • Эпилог, альтернатива Apigility

С помощью нескольких строк кода мы получили настраиваемый и расширяемый REST API.

Создав более 50 конечных точек API с помощью Apigility, мы убедились, что создание конечных точек REST возможно И эффективно.

Epilogue без проблем сгенерировал наши 10 конечных точек. Мы смогли включить некоторый собственный код в рабочий процесс по умолчанию для обработки сложных правил, таких как права пользователей. То, что невозможно было сгенерировать, было разработано как простые конечные точки Express RPC с помощью Sequelize.

Это правда, что Zend Framework 2 имеет гораздо больше возможностей, чем Express. Но Express оказался элегантным, компактным и достаточным для всех наших нужд. Ничего не пропустили.

Я скучаю по своим типам: поток приходит на помощь

Возможность добавлять подсказки типа ввода и возврата к нашим сценариям PHP, только когда это необходимо, была одной из функций, которые мне больше всего нравились в этом языке.

В течение многих лет я думал, что не может быть такой же поддержки типов без перехода на TypeScript.

Я был неправ.

Я открыл для себя Flow, также известный как Flow-type, и с легкостью начал добавлять типы в свои файлы JavaScript.

Flow - это простой в установке инструмент:

Это простой вариант, нам просто нужно было добавить однострочник в начало файлов, которые мы хотели отслеживать:

/* @flow */ or // @flow

Затем команда «проверка потока» дает полный отчет на основе предполагаемых типов.

Если в вашем проекте используется транспилятор, такой как Babel, можно добавить новые правила для обработки подсказок типов Flow внутри кода JavaScript, как в PHP:

Что делать, если мой сервер выйдет из строя? Контролируйте это с помощью PM2

С PHP сбой скрипта означал, что запрос не обслуживается. С Node.js, если сервер выходит из строя, веб-сайт не работает. Поэтому нам пришлось управлять нашими процессами.

Мы перешли от Supervisord к классному сопернику, написанному на JavaScript:

❤ PM2 (также известный как Process Manager 2) ❤

С большим удовольствием, так как это мой любимый выбор из этой статьи

У PM2 есть преимущества, которые можно установить с помощью Yarn, но есть и другие преимущества. Он поддерживает все функции мониторинга Supervisord и многое другое. Он отслеживает загрузку и память каждого процесса и может быть настроен для их перезагрузки при изменении их кода.

pm2 monit предоставит подробную информацию о том, что происходит для каждого процесса в режиме реального времени. Кроме того, ведение журнала стало проще, так как по умолчанию мы могли использовать собственный console.log () /. Warn () /. Error ().

Более того, хотя область Supervisord ограничена управлением процессами, PM2 также может заменить некоторые сценарии развертывания простым файлом конфигурации:

PM2 для меня - одно из самых больших преимуществ перехода на полный стек JavaScript. Тем не менее, мы можем использовать его с любым языком, но он не настолько интегрирован.

Настройте свой проект с помощью .env

В наших проектах Phing использовался для трех целей:

  • Настройка проекта
  • Сценарии
  • Хранение полезных команд

В мире JavaScript часть настройки может выполняться с помощью файла .env с замечательной библиотекой DotEnv. Это позволяет нам использовать переменные среды для настройки нашего приложения. Это хорошая практика из методологии Двенадцати факторов приложения, справочник, который мы используем ежедневно.

Часть скриптов Phing больше не нуждалась в инструментах, поскольку все наши скрипты были либо связаны с конфигурациями программного обеспечения за пределами мира PHP, такими как Supervisord, которого у нас больше нет, либо могут быть созданы как независимые скрипты оболочки за несколько минут.

В конце концов, единственная роль, которую мог бы выполнять Финг, - это хранить команды и присваивать им псевдонимы. И с этим прекрасно справляется Yarn (или NPM):

Таким образом, мы могли полностью избавиться от Phing и вызывать наши команды следующим образом:

yarn run db-migrate

Используйте хорошие редакторы с открытым исходным кодом

При разработке на PHP я решил использовать PhpStorm, коммерческую среду IDE, так как бесплатные программы казались медленными и не имели подключаемых модулей.

В JavaScript есть более допустимые варианты. Мы должны были использовать VsCode, редактор, сделанный на JavaScript, который активно поддерживается сообществом и Microsoft.

До сих пор у нас был отличный опыт использования VsCode. Он быстрый, с отличным механизмом автозаполнения и отличным сообществом.

Возможность определять, какие плагины используются в проекте, и делиться их конфигурацией - это потрясающе. Любой может одним щелчком мыши начать кодирование сразу же, предварительно настроив все плагины.

Избавьтесь от ручного линтинга с Prettier

В PHP у нас было что-то классное. ПДО. Эти стандарты действительно полезны для определения того, как должен быть написан код.

Мы настроили наши IDE в соответствии с PSR1 и 2. Поскольку функции автокоррекции не было, каждый должен был ее применить. Это не было большим успехом.

Prettier приходит на помощь JavaScript. Prettier - это самоуверенный форматировщик кода, который удаляет все оригинальные стили и гарантирует, что весь выводимый код соответствует единому стилю при каждом сохранении файла.

Больше никаких споров, никаких тренировок, никакого бесполезного времени, потраченного на слияние модификаций, относящихся только к стилю.

Все в команде использовали его, и он нам очень понравился! Кодировать строгий минимум стиля, позволяя Prettier позаботиться о деталях, было потрясающе.

Заключение

Преимущества:

  • Наш стек проще установить и развернуть
  • Нам больше не нужно переключать контекст между языками
  • Мы больше не полагаемся на сложные сценарии установки

Недостатки:

  • Потребовалось много исследований, чтобы создать стек, соответствующий нашим потребностям.
  • Нам пришлось организовать много тренингов, чтобы научиться программировать на Javascript в 2017 году.

Мы смогли быстро сгенерировать сервер API, как это делали раньше в PHP. Мне не хотелось ничего оставлять во время перехода, все инструменты, на которые мы перешли, были эквивалентны или лучше, чем раньше.

Мы хотим, чтобы вы сделали решительный шаг и преуспели в этом переходе. Не стесняйтесь комментировать эту статью, если вы хотите получить более подробную информацию или у вас возникнут проблемы с какими-либо действиями. Если вы находитесь в районе залива и хотите, чтобы я рассказал об этом на встрече или провел семинар, сообщите мне!

Matters - это стартап-студия, создающая альтернативные продукты завтрашнего дня. Базируется в Париже и Сан-Франциско. Напишите нам в Твиттере @matterstech или отправьте милое письмо на [email protected] для получения более подробной информации.