Последние полгода много пишут о неоправданной сложности клиентского JavaScript. Недавняя статья How it feels to learn JavaScript in 2016 и ее перевод на хабре вызвали много внимания, критика во многом справедливая, но...

Усложнять просто, упрощать сложно. (Один из законов Мерфи)

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

Как пример используется приложение для работы с коллекцией фильмов. Фильмы отображаются в списке с постраничной выборкой, поиском, сортировкой, редактированием и удалением.

Использованный стек: create-react-app как сборщик для клиента, React, bootstrap, API с json-server или json-заглушки.

Работающее демо здесь: Movies List.

Нет, это не очередной пост, говорящий вам, что вы хуже. Я здесь не для того, чтобы рассказать вам то, чего вы не знаете о веб-разработке.

Я здесь для того, чтобы спросить вас… Откуда вам знать то, чего вы не знаете о веб-разработке?

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

То же самое и с веб-разработкой: чем больше вы знаете, тем утомительней будет найти оставшиеся крупицы информации. Это и проблема.

Эту проблему стоит попытаться решить.

tl;dr

С node-direct можно заливать серверные .js файлы и обращаться к ним так же, как к .php скриптам: example.com/foo.srv.js.

1. Установка.

   
   

   npm install -g node-direct

   
   

2. Конфигурация nginx.

   
   

   location ~ \.srv\.js$ {
           root <path_to_website_files>;
           proxy_pass http://localhost:<port>;
           proxy_set_header X-Requested-File-Path $document_root$uri;
   }

   
   

3. Запуск.

   
   

   node-direct --port=<port>

   
   

4. Скрипт foo.srv.js, где req и res созданы сервером express.

   
   

   module.exports = function(req, res) {
           const someModule = require('some-module');
           res.send('Hello world!');
   }

   
   

Введение

Когда NodeJS стал более-менее популярным, мне было нелегко осознать, что с ним всё не так просто, как с PHP. Используя последний, можно было создать .php файл, залить его на сервер, обратиться по адресу example.com/путь/имяфайла.php и радоваться. Такая простота развертывания скриптов служила одной из причин, почему "пых" стал таким популярным.

В свою очередь, NodeJS, независимо от сложности приложения, заставляет очень многие вещи делать руками.

• Гоняй каждое приложение на собственном порту
• Определи роуты самостоятельно
• Настрой деплой
• Убедись, что приложение работает и после перезагрузки сервера
• Не забудь сделать так, чтоб при изменении файлов, NodeJS сервер перезагружался