Создание первого приложения на Node


Содержание

Краткое руководство. Создание первого веб-приложения Node.js с помощью Visual Studio Quickstart: Use Visual Studio to create your first Node.js app

В рамках этого краткого (на 5–10 минут) знакомства с возможностями интегрированной среды разработки (IDE) Visual Studio вы создадите простое веб-приложение Node.js. In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you’ll create a simple Node.js web application.

Предварительные требования Prerequisites

У вас должна быть установлена среда Visual Studio и должна иметься рабочая нагрузка «Разработка Node.js». You must have Visual Studio installed and the Node.js development workload.

Установите Visual Studio 2020 бесплатно со страницы скачиваемых материалов Visual Studio , если вы еще не сделали этого. If you haven’t already installed Visual Studio 2020, go to the Visual Studio downloads page to install it for free.

Установите Visual Studio 2020 бесплатно со страницы скачиваемых материалов Visual Studio , если вы еще не сделали этого. If you haven’t already installed Visual Studio 2020, go to the Visual Studio downloads page to install it for free.

Если вам нужно установить рабочую нагрузку, но вы уже используете Visual Studio, выберите пункт Средства > Получить средства и компоненты. , после чего запустится Visual Studio Installer. If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features. , which opens the Visual Studio Installer. Выберите рабочую нагрузку Разработка Node.js, а затем элемент Изменить. Choose the Node.js development workload, then choose Modify.

У вас должна быть установлена среда выполнения Node.js. You must have the Node.js runtime installed.

Если она не установлена, установите версию LTS с веб-сайта Node.js. If you don’t have it installed, install the LTS version from the Node.js website. Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js. In general, Visual Studio automatically detects the installed Node.js runtime. Если установленная среда выполнения не обнаружена, вы можете настроить проект так, чтобы он ссылался на установленную среду выполнения, на странице свойств (после создания проекта щелкните его узел правой кнопкой мыши и выберите пункт Свойства). If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node and choose Properties).

Создание проекта Create a project

Сначала вы создадите проект веб-приложения Node.js. First, you’ll create an Node.js web application project.

Если у вас не установлена среда выполнения Node.js, установите версию LTS с веб-сайта Node.js. If you don’t have the Node.js runtime already installed, install the LTS version from the Node.js website.

Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js. In general, Visual Studio automatically detects the installed Node.js runtime. Если установленная среда выполнения не обнаружена, вы можете настроить проект так, чтобы он ссылался на установленную среду выполнения, на странице свойств (после создания проекта щелкните его узел правой кнопкой мыши и выберите пункт Свойства). If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node and choose Properties).

Запустите Visual Studio. Open Visual Studio.

Создайте новый проект. Create a new project.

Нажмите клавишу ESC, чтобы закрыть окно запуска. Press Esc to close the start window. Нажмите CTRL+Q, чтобы открыть поле поиска, введите Node.js и выберите Create new Blank Node.js Web application project (Создать проект: пустое веб-приложение Node.js) (JavaScript). Type Ctrl + Q to open the search box, type Node.js, then choose Create new Blank Node.js Web application project (JavaScript). В появившемся диалоговом окне выберите Создать. In the dialog box that appears, choose Create.

В верхней строке меню выберите Файл > Создать > Проект. From the top menu bar, choose File > New > Project. В левой области диалогового окна Новый проект разверните узел JavaScript и выберите Node.js. In the left pane of the New Project dialog box, expand JavaScript, then choose Node.js. В средней области выберите Пустое веб-приложение Node.js и нажмите кнопку ОК. In the middle pane, choose Blank Node.js Web application, then choose OK.

Если шаблон проекта Пустое веб-приложение Node.js отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. If you don’t see the Blank Node.js Web application project template, you must add the Node.js development workload. Подробные инструкции см. в разделе с предварительными требованиями. For detailed instructions, see the Prerequisites.

Visual Studio создаст решение и откроет проект. Visual Studio creates and the new solution and opens the project. Файл server.js откроется в редакторе в левой области. server.js opens in the editor in the left pane.

Изучение интегрированной среды разработки Explore the IDE

Посмотрите на обозреватель решений в правой области. Take a look at Solution Explorer in the right pane.

Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. Highlighted in bold is your project, using the name you gave in the New Project dialog box. На диске этот проект представлен файлом NJSPROJ в папке проекта. On disk, this project is represented by a .njsproj file in your project folder.

На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта. At the top level is a solution, which by default has the same name as your project. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов. A solution, represented by a .sln file on disk, is a container for one or more related projects.

В узле npm представлены все установленные пакеты npm. The npm node shows any installed npm packages. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна. You can right-click the npm node to search for and install npm packages using a dialog box.

Чтобы установить пакеты npm или команды Node.js из командной строки, щелкните узел проекта правой кнопкой мыши и выберите пункт Открыть командную строку здесь. If you want to install npm packages or Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

В редакторе, в котором открыт файл server.js, выберите http.createServer и нажмите клавишу F12 или выберите пункт Перейти к определению в контекстном меню. In the server.js file in the editor (left pane), choose http.createServer and then press F12 or choose Go To Definition from the context (right-click) menu. Эта команда выполняет переход к определению функции createServer в index.d.ts. This command takes you to the definition of the createServer function in index.d.ts.

Вернитесь к файлу server.js, установите курсор в конце строки кода res.end(‘Hello World\n’); и измените ее следующим образом: Got back to server.js, then put your cursor at the end of the string in this line of code, res.end(‘Hello World\n’); , and modify it so that it looks like this:

res.end(‘Hello World\n’ + res.connection.

При вводе connection. технология IntelliSense предлагает варианты автозавершения. Where you type connection. , IntelliSense provides options to auto-complete the code entry.

Выберите localPort, а затем введите ); , чтобы завершить оператор. Он должен выглядеть следующим образом: Choose localPort, and then type ); to complete the statement so that it looks like this:

res.end(‘Hello World\n’ + res.connection.localPort);

Запуск приложения Run the application

Чтобы запустить приложение, нажмите клавиши CTRL+F5 (или последовательно выберите Отладка > Запуск без отладки). Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. Приложение откроется в браузере. The app opens in a browser.

В окне браузера вы увидите надпись «Hello World» и номер локального порта. In the browser window, you will see «Hello World» plus the local port number.

Закройте веб-браузер. Close the web browser.

Первое десктопное приложение на HTML, JS и Electron

Данный материал является вольным переводом статьи:
Danny Markov Creating Your First Desktop App With HTML, JS and Electron

Материал вычитывал: Михаил Синяков

Веб-приложения становятся все более мощными с каждым годом, но остается еще место для классических приложений, обладающих полным доступом к оборудованию компьютера. Сегодня вы можете создать десктопное приложения при помощи хорошо знакомых вам HTML, JS и Node.js, упаковать его в исполняемый файл и пользоваться им на Windows, OS X и Linux.

Существуют два самых популярных проекта с открытым исходным кодом, позволяющих сделать это. Это NW.js и Electron, последний мы и будем рассматривать сегодня. Мы собираемся переписать версию, которую делали на NW.js, так что вы сможете еще и сравнить их между собой.

Начинаем работу с Electron

Программы, которые создаются при помощи Electron это просто веб сайты, которые открываются во встроенном браузере Chromium. В дополнение к стандартным API HTML5 эти сайты могут использовать полный набор модулей Node.js и специальных модулей Electron, которые позволяют получить доступ к операционной системе.

В этом уроке мы создадим простое приложение, которое получает последние статьи с сайта Tutorialzine через RSS и отображает их в виде карусели. Все исходники, вы можете скачать архивом по ссылке. Распакуйте его содержимое в любую директорию на вашем компьютере.

Глядя на структуру файлов вы никогда бы не догадались что это десктопное приложение, а не просто веб сайт.

Мы рассмотрим наиболее интересные файлы и то как они работают минутой позже, а пока давайте заглянем под капот.

Запуск приложения

Поскольку приложение Electron это просто Node.js приложение, вам нужно установить npm. Сделать это довольно просто.

Откройте терминал и выполните в директории проекта следующую команду:

Это создаст папку node_modules, содержащую все необходимые зависимости для приложения. Затем, введите в терминале следующее:

Приложение должно открыться в новом окне, обратите внимание, что оно имеет только верхнее меню и больше ничего.

Вы наверное обратили внимание,что приложение запускается не слишком удобно для пользователя. Однако это просто способ для разработчика запустить приложение. Когда оно будет упаковано, пользователь будет запускать его как обычно — двойным кликом по иконке.

Как это сделано

Сейчас мы поговорим о наиболее важных файлах, которые используются в любом приложении, написанном при помощи Electron. Давайте начнем с файла package.json, который содержит различную информацию о проекте. Например, версию, список npm зависимостей и другую не менее важную информацию.

package.json

Если вы уже работали с Node.js, то у вас уже имеется представление как это все работает. Важно отметить команду npm start которая запускает приложение. Когда мы вызываем эту команду в консоли, то просим electron запустить файл main.js. Этот файл содержит маленький скрипт, который открывает окно приложения, определяет некоторые параметры и обработчики событий.

main.js

Давайте взглянем на то, что мы делаем в методе ready . Сначала мы определяем окно браузера и устанавливаем его первоначальный размер. Затем мы загружаем в него файл index.html, который работает точно так же, как если бы мы открыли его в браузере.

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

index.html

Здесь у нас html-код, ссылки на необходимые стили, js библиотеки и скрипты. Заметили что jQuery подключен странным способом? См. этот issue, чтобы узнать почему подключение происходит именно так.

Наконец, собственно сам JavaScript код нашего приложения. В нем мы подключаемся к RSS ленте, получаем последние статьи и показываем их. Если мы попытаемся провернуть такую операцию в окружении браузера, то ничего не получится. Канал находится на другом домене и получение данных с него запрещено. Однако в Electron такого ограничения нет, мы можем получить необходимую информацию при помощи AJAX-запроса.

Есть одна классная вещь, в приведенном выше коде, она заключается в том, что в одном файле можно одновременно использовать:

  • JavaScript библиотеки — jQuery и jQuery Flipster для создания карусели.
  • Собственный модули Electron — оболочку, которая предоставляет API для desktop-задач. В нашем случае открытие url в браузере по умолчанию.
  • Node.js модули — Модуль OS для доступа к информации о системе, Pretty Bytes для форматирования.

С их помощью наше приложение готово к работе!

Упаковка и дистрибуция.

Есть еще одна важная вещь, которую нужно сделать чтобы ваше приложение попало к конечному пользователю. Вы должны упаковать его в исполняемый файл, который будут запускать двойным щелчком. Необходимо будет собрать отдельный дистрибутив для каждой из систем: Windows, OS X, Linux. В этом нам поможет Electron Packager.

Создание простого блога на Node.js

В этой статье мы покажем вам, как создать простой блог с помощью Node.js и Cosmic JS. Давайте начнем.

Прим. перев. Также вы можете посмотреть наш материал по созданию простого мессенджера с использованием Node.js.

Начало

Убедитесь, что у вас установлена платформа для разработки Node.js , если нет, то посетите веб-сайт Node.js, чтобы скачать последнюю версию.

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

Потом создайте папку для блога. Выполните в терминале следующие команды:

На следующем этапе создайте файл package.json , чтобы импортировать все зависимости для блога и добавьте в него следующие строки:

В этом файле объявлены зависимости, которые необходимо установить для разработки и запуска блога:

  1. Модуль Cosmic JS Node , чтобы получать данные с Cosmic JS Bucket.
  2. Веб-фреймворк Express .
  3. Пакет Hogan для обработки шаблонов.
  4. Модуль Nodemon для удобства разработки — он автоматически перезагружает приложение, когда в нем произошли изменения.

Выполните следующую команду, чтобы установить зависимости:

Разработка блога

Далее нужно сформировать главную страницу блога. Создайте файл под названием app.js и добавьте в него следующие строки:

Поясним, что происходит здесь:

  1. Производится импорт модулей Express, Cosmic JS и т.д.
  2. Присоединяются верхний и нижний колонтитулы.
  3. При запросе («/») происходит вызов Cosmic JS Bucket для вывода постов и возвращается шаблон index.html .
  4. Добавляются данные на страницу в виде глобального хранилища данных — cosmic . Эта структура данных делает вашу реализацию шаблона интуитивной.

Добавление переменных шаблона домашней страницы

Эта часть процесса является наиболее интересной, потому что она показывает мощь Cosmic JS в сочетании с системой шаблонов Mustache.

Node.js для создания первого приложения

Если мы используем PHP, чтобы написать серверную код, вам нужно Apache или Nginx HTTP-сервер, и сопровождала модули mod_php5 и PHP-CGI.

С этой точки зрения, весь спрос «, чтобы получить HTTP-запросы и предоставлять веб-страницы» PHP не нужно иметь дело.

Но для Node.js, концепция совершенно иная. При использовании Node.js, мы не только в реализации заявки, но и реализовали весь сервер HTTP. На самом деле, наш веб-приложение и соответствующий веб-сервер в основном то же самое.

«Hello, World!» Перед первым применением мы создали Node.js, давайте сначала понять, что Node.js приложение состоит из нескольких частей:

Внедрение необходимых модулей: мы можем использовать инструкции требуют, чтобы загрузить Node.js модули.

Создание сервера: Сервер может прослушивать запросы клиентов, таких как Apache, Nginx и другой сервер HTTP.

Серверполучает запрос и отвечает на запросы очень легко создать, клиент может использовать браузер или терминал отправляет запрос HTTP, сервер получает запрос и возвращает данные ответа.


Создание приложений Node.js

Первый шаг, введение требуемых модулей

Мы используем инструкциитребуют , чтобы загрузить модуль HTTP и HTTP экземпляр , присвоенный переменной HTTP, примеры заключаются в следующем:

Первый шаг, создать сервер

Далее мы используем метод http.createServer (), чтобы создать сервер, и использует метод привязки слушать 8888 порт. Функция по запросу, параметры реагирования для приема и ответа на данные.

Примерами являются следующие, создайте файл с именем server.js в корневом каталоге вашего проекта, и написать следующий код:

Приведенный выше код мы завершили работающий сервер HTTP.

С помощью командыузла , чтобы выполнить приведенный выше код:

Затем откройте браузер для доступа к http://127.0.0.1:8888/

dobj, вы увидите, что говорит страница «Hello World».

Анализ Node.js HTTPсервер:

  • Первая строка запроса (требуется) Node.js поставляется модуль HTTP, и присвоить его переменной HTTP.
  • Далее мы называем функциональный модуль обеспечивает HTTP: createServer. Эта функция возвращает объект, который имеет метод, называемый слушать, этот метод имеет числовой параметр, указывающий HTTP-сервер слушает номер порта.

Примеры Gif демонстрируют

Далее мы покажем вам примеры действиями Gif Изображенный:

Создайте свой первый сайт Node.js. Часть 1

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

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

Оставалась последняя надежда на IBM Bluemix™. Получить пример работающего приложения оказалось легко, но потом пришлось продираться сквозь массу непонятного кода и устанавливать еще больше всяческих инструментов для разработки приложений — нужно ли забивать всем этим голову подростка?

Я зауважала Bluemix лишь тогда, когда обнаружила веб-IDE в составе IBM DevOps Services. Приложение можно отредактировать в IDE, опубликовать в Bluemix и запустить — не устанавливая никакого дополнительного ПО. Конечно, Bluemix можно использовать и с локальной средой разработки, например, Eclipse, или с инструментом командной строки для Bluemix. Но для начала и для целей быстрого ознакомления web-IDE подходит идеально.

И все же я хотела всего лишь создать HTML-страницу, а в Bluemix Node.js Web Starter не оказалось ничего, что напоминало бы старый добрый HTML. Что касается работы с базой данных, то пример приложения ToDo в Bluemix предлагал больше, чем нужно.

Примеры из этой статьи достаточно просты даже для учащихся начальной школы — не совсем юных новичков (которым лучше предложить бестекстовые языки, такие как Scratch), а для подростков, готовых сделать следующий шаг в программировании. Для каждой важной концепции, рассматриваемой в этой статье, в проекте DevOps Services есть папка worksheets, содержащая соответствующие карточки, выполненные согласно инструкциям CoderDojo Sushi Card.

Это побудило меня написать настоящую статью из трех частей, которая начинается с самых азов и позволяет читателю шаг за шагом освоить процесс создания динамического веб-сайта на базе Node.js— ничего не устанавливая. Эта первая часть посвящена введению в сервер Node.js для простой обработки запросов. Я начала с классического примера Hello World и добавила счетчик на стороне сервера. Мы создадим копию приложения для ваших собственных нужд, развернем это приложение в Bluemix, а затем внесем в код некоторые изменения и посмотрим, что получится.

“ Приложение Node.js обрабатывает запросы от разных браузеров и подсчитывает их. ”

Приложение Node.js обрабатывает запросы от разных браузеров и подсчитывает их.

В Части 2 мы добавим инфраструктуру Express, форматирование HTML-страниц и передачу данных из сервера Node.js для отображения на HTML-странице. В Части 3 показано, как использовать базу данных Redis для хранения данных, которые отображает веб-сайт.

Что для этого нужно

Как и было обещано, устанавливать ничего не придется. Вам понадобятся:

Шаг 1. Копирование приложения Node.js

  1. Войдите в Bluemix через свой веб-браузер.
  2. Войдите в DevOps Services из отдельной вкладки браузера.
  3. Нажмите кнопку Получить код в начале этой статьи.
  4. В DevOps Services нажмите кнопку EDIT CODE и кнопку FORK в меню, чтобы создать собственную копию рабочего кода, и сохраните этот проект под каким-нибудь именем.

Шаг 2. Ручное развертывание приложения

В процессе развертывания DevOps Services автоматически выполняет поиск файла manifest.yml. Если выйти из папки проекта верхнего уровня, содержащей файл manifest.yml, а затем нажать кнопку DEPLOY, то вы получите сообщение об ошибке, указывающее на то, что файл manifest.yml не найден. Так что перед началом развертывания лучше выбрать manifest.yml.

Для выполнения этого шага нужно войти в Bluemix.

В процессе развертывания в Bluemix служба DevOps Services использует файл manifest.yml, содержащий все настройки проекта; в этот файл не нужно вносить никаких изменений. Строка runtime: node08 manifest.yml предписывает процессу развертывания использовать среду выполнения Bluemix Node.js. Значение host: , $ , создает уникальный URL-адрес приложения, гарантируя, что при развертывании не будет конфликтов с другими приложениями.

DevOps Services предоставляет ручные, так и автоматические способы развертывания приложений в Bluemix. Мы будем использовать ручной процесс развертывания.

Шаг 3. Управление приложением

Развернутыми Bluemix-приложениями можно управлять из DevOps Services, в том числе запуская и останавливая их.

    Вернитесь к информации по ручному развертыванию на странице корневой папки в DevOps Services. Нажмите на свое приложение, чтобы выделить его, и остановите, нажав на сплошной черный квадрат.

Непосредственно на панели интерфейса Bluemix доступны дополнительные средства управления.

Node.js для начинающих

О проекте

Цель данного документа — помочь вам начать разработку приложений на Node.js и научить всему, что необходимо знать о «продвинутом» JavaScript. Это больше, чем обычный «Hello world»-туториал.

Статус

Вы читаете финальную версию этой книги, в обновлениях исправляются только ошибки или отражаются изменения в новых версиях Node.js. Последнее обновление 12 Февраля 2012.

Код примеров этой книги тестировался на Node.js версии 0.8.8 (проверено по англ. версии —прим.перев.).

Целевая аудитория

Вероятно, документ будет полезен читателям с базовыми знаниями, примерно, как у меня: опыт работы хотя бы с одним объектно-ориентированным языком, таким как Ruby, Python, PHP или Java, небольшой опыт в Javascript и полный новичок в Node.js.

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

Однако, поскольку функции и объекты в JavaScript отличаются от своих аналогов в других языках, они будут описаны достаточно подробно.

Структура учебника

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

Это, конечно, не изменит мир, но мы будем стараться и научимся писать не просто куски кода, которых «достаточно», чтобы сделать это возможным, но и создадим простой, полноценный framework для чистого разделения различных аспектов вашего приложения. Скоро вы увидите, что я имею в виду.

Мы начнём с выяснения того, чем JavaScript в Node.js отличается от JavaScript в браузере.

Далее, мы остановимся на написании традиционного «Hello world»-приложения, которое является наиболее простым примером «что-то делающего» кода Node.js.

Тогда мы обсудим, какое «реальное» приложение мы хотим создать, проанализируем компоненты, которые необходимо реализовать для написания данного приложения, и начнём работать над каждым из них, шаг за шагом.

Илон Маск рекомендует:  Что такое код number_format

Как и было обещано, по пути мы узнаем о некоторых продвинутых понятиях JavaScript, о том как их использовать и посмотрим, почему разумно использовать эти понятия вместо привычных нам в других языках программирования.

Исходный код законченного приложения доступен в the NodeBeginnerBook Github репозитории.

JavaScript и Node.js

JavaScript и Вы

До того как мы поговорим о технических вещах, позвольте занять некоторое время и поговорить о вас и ваших отношениях с JavaScript. Эта глава позволит вам понять, имеет ли смысл читать дальше.

Скорее всего, как и в моем случае, вы начали свой путь в веб-разработке с написания простых статических HTML-документов. Вместе с этим, вы познакомились с веселой штукой, называемой JavaScript, но использовали его исключительно в простых случаях, добавляя интерактивности на ваши веб-странички.

Что вы хотели узнать — так это действительно полезные вещи; вы хотели знать, как создать сложный сайт. Для этого вы изучали PHP, Ruby, Java и начинали писать backend-код.

Тем не менее, вы постоянно следили за JavaScript, вы видели, что с появлениям JQuery, Prototype и других фреймворков этот язык стал больше, чем просто window.open().

Однако, это всё ещё относилось к frontend-разработке. Конечно, jQuery — очень мощный инструмент, но всякий раз, когда вы приправляли ваш сайт разными jQuery-«фишками», в лучшем случае, вы были JavaScript-пользователем нежели JavaScript-разработчиком.

А потом пришел Node.js. JavaScript на сервере: насколько это хорошо?

И вы решили, что пора проверить старый новый JavaScript. Подождите. Написать Node.js приложение — одно дело, а понять, почему оно должно быть написано таким образом, для этого нужно понимать JavaScript. И на этот раз — по-настоящему.

В этом — как раз и проблема. JavaScript живёт двумя, может даже тремя разными жизнями: весёлый маленький DHMTL-помощник из середины 90-х годов, более серьезный frontend-инструмент в лице jQuery и наконец серверный (server-side, backend) JavaScript. По этой причине не так просто найти информацию, которая поможет вам познать правильный JavaScript, пригодный для написания Node.js приложения в манере, дающий ощущение, что вы не просто использовали JavaScript, а действительно разрабатывали на JavaScript.

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

Конечно, существует отличная документация по Node.js, но её зачастую недостаточно. Нужно руководство.

Моя цель заключается в обеспечении вас руководством.

Предупреждение

Существуют действительно отличные специалисты в области JavaScript. Я не из их числа.

Я — действительно, тот парень, о котором написано в предыдущем параграфе. Я знаю кое-что о разработке backend веб-приложений, но я всё ещё новичок в «реальном» JavaScript и всё ещё новичок в Node.js. Я узнал некоторые продвинутые аспекты JavaScript совсем недавно. Я неопытен.

Вот почему эта книга не из разряда «от новичка к эксперту», а скорее «от новичка к продвинутому новичку».

Если всё удастся, то этот документ станет тем руководством, которое я хотел бы иметь, когда начинал в Node.js.

Server-side JavaScript

Первая инкарнация JavaScript жила в теле браузера. Но это всего лишь контекст. Он определяет, что вы можете делать с языком, но не говорит о том, что язык сам по себе может сделать. JavaScript это «полноценный» язык: вы можете использовать его в различных контекстах и достичь всего того, что можете достичь с другими «полноценными» языками.

Node.js — действительно, просто другой контекст: он позволяет вам запускать JavaScript-код вне браузера.

Чтобы ваш JavaScript код выполнился на вычислительной машине вне браузера (на backend), он должен быть интерпретирован и, конечно же, выполнен. Именно это и делает Node.js. Для этого он использует движок V8 VM от Google — ту же самую среду исполнения для JavaScript, которую использует браузер Google Chrome.

Кроме того, Node.js поставляется со множеством полезных модулей, так что вам не придется писать всё с нуля, как, например, вывод строки в консоль.

Таким образом, Node.js состоит из 2 вещей: среды исполнения и полезных библиотек.

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

«Hello world»

Хорошо, давайте пойдём сразу с места в карьер и напишем наше первое Node.js-приложение: «Hello world».

Откройте ваш любимый редактор и создайте файл под названием helloworld.js. Мы хотим вывести строку «Hello world» в консоль, для этого пишем следующий код:

Сохраняем файл и выполняем его посредством Node.js:

Это должно вывести Hello World на наш терминал.

Ладно, всё это скучно, правда? Давайте напишем что-нибудь полезное.

Полномасштабное веб-приложение с Node.js


Что должно делать наше приложение

Возьмём что-нибудь попроще, но приближенное к реальности:

  • Пользователь должен иметь возможность использовать наше приложение с браузером;
  • Пользователь должен видеть страницу приветствия по адресу http://domain/start;
  • Когда запрашивается http://domain/upload, пользователь должен иметь возможность загрузить картинку со своего компьютера и просмотреть её в своем браузере.

Вполне достаточно. Конечно, вы могли бы достичь этой цели, немного погуглив и поговнокодив. Но это не то, что нам нужно.

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

Задачи

Давайте проанализируем наше приложение. Что нужно, чтобы его реализовать:

  • У нас — онлайн веб-приложение, поэтому нам нужен HTTP-сервер;
  • Нашему серверу необходимо обслуживать различные запросы в зависимости от URL, по которому был сделан запрос. Для этого нам нужен какой-нибудь роутер (маршрутизатор), чтобы иметь возможность направлять запросы определенным обработчикам;
  • Для выполнения запросов, пришедших на сервер и направляемые роутером, нам нужны действующие обработчики запросов;
  • Роутер, вероятно, должен иметь дело с разными входящими POST-данными и передавать их обработчикам запросов в удобной форме. Для этого нам нужен какой-нибудь обработчик входных данных;
  • Мы хотим не только обрабатывать запросы, но и показывать пользователю контент по запрошенным URL-адресам, поэтому нам нужна некая логика отображения для обработчиков запросов, чтобы иметь возможность отправлять контент пользовательскому браузеру;
  • Последнее, но не менее важное — пользователь сможет загружать картинки, поэтому нам нужен какой-нибудь обработчик загрузки, который возьмёт на себя заботу о деталях.

Давайте подумаем о том, как бы мы реализовали это на PHP. Скорее всего, типичное решение будет на HTTP-сервере Apache с установленным mod_php5.
Это относится к первому пункту наших задач, то есть, «принимать HTTP-запросы и отправлять готовые веб-странички пользователю» — вещи, которые PHP сам не делает.

С Node.js — немного иначе. Потому что в Node.js мы не только создаем наше приложение, мы также реализуем полноценный HTTP-сервер. Действительно, наше веб-приложение и веб-сервер — в сущности, одно и тоже.

Может показаться, что это приведет к лишней работе, но сейчас вы увидите, что с Node.js это не так.

Давайте просто начнём реализовывать нашу первую задачу — HTTP-сервер.

Реализация приложения

Простой HTTP-сервер

Когда я подошел к моменту создания своего первого «реального» Node.js-приложения, я задался вопросом, как организовать мой код.
Я должен делать всё в одном файле? Большинство учебных пособий в интернете учат как создавать простой HTTP-сервер в Node.js, сохраняя всю логику в одном месте. Что, если я хочу быть уверенным, что мой код останется читабельным по мере реализации всё большего функционала.

На самом деле, достаточно легко отыскивать проблемные участки вашего кода, который разделён на модули.

Это позволяет вам иметь чистый главный файл, который вы исполняете в Node.js и чистые модули, которые могут использоваться главным файлом и друг другом.

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

Я думаю, это более-менее традиционно назвать главным файлом index.js. А код нашего сервера имеет смысл поместить в файл под названием server.js.

Давайте начнём с модуля сервера. Создайте файл server.js в корневой директории вашего проекта и поместите туда следующий код:

И всё! Вы написали работающий HTTP-сервер. Давайте проверим его, запустив и протестировав. Во-первых, выполните ваш скрипт в Node.js:

Теперь откройте ваш браузер и перейдите по адресу http://localhost:8888/. Должна вывестись веб-страница со строкой «Hello world».

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

Анализ нашего HTTP-сервера

Хорошо, тогда давайте проанализируем, что здесь действительно происходит.

Первая строчка подключает http-модуль, который поставляется вместе с Node.js и делает его доступным через переменную http.

Далее, мы вызываем одну из функций http-модуля createServer. Эта функция возвращает объект, имеющий метод listen, принимающий числовое значение порта нашего HTTP-сервера, который необходимо прослушивать.

Пожалуйста, проигнорируйте функцию, которая определяется внутри скобок http.createServer.

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

Это запустило бы HTTP-сервер прослушивающего порт 8888, который больше ничего не делает (даже не отвечает на входящие запросы).

Действительно интересная (и, если вы привыкли к более консервативным языкам как PHP, довольно странная) часть — это определение функции там, где вы бы ожидали увидеть первый параметр для createServer().

Оказывается, эта определяемая функции и есть первый (и только) параметр, который мы передаём в createServer() при вызове. Потому что в JavaScript функции могут быть переданы как параметр в другую функцию.

Передача функций в качестве параметра

Вы можете в качестве примера сделать что-то подобное:

Разберите пример внимательно! Здесь мы передаём функцию say как первый параметр функции execute. Не значение, которое возвращает функция say, а саму функцию say!

Таким образом, say становится локальной переменной someFunction внутри execute и execute может вызвать функцию в этой переменной вот так: someFunction() (то есть, добавив скобки).

Конечно же, так как say принимает один параметр (word), execute может передать какое-либо значение в качестве этого параметра, когда вызывает someFunction.

Мы можем, что мы и сделали, передать функцию как параметр в другую функцию. Но мы не обязаны применять этот косвенный способ, когда сначала определяется функция, а потом передаётся как параметр. Мы можем определить и передать функцию как параметр в другую функцию прямо на месте:

Мы определяем функцию, которую хотим передать в execute, прямо там, где у execute должен быть первый параметр.

Из-за того, что нам даже не надо давать имя этой функции, её называют анонимная функция.

Это первый проблеск, который я называю «продвинутый» JavaScript, но давайте всё по порядку. А сейчас давайте просто примем то, что в JavaScript мы можем передать функцию как параметр, когда вызываем другую функцию. Мы можем сделать это путём присвоения нашей функции переменной, которую му передаем, или путём определения функции для передачи на месте.

Как анонимная функция делает наш HTTP-сервер рабочим

С этими знаниями давайте вернемся назад к нашему минималистичному HTTP-серверу:

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

Мы можем добиться того же самого через рефакторинг нашего кода:

Может сейчас самое время спросить: Почему мы это делаем так?

Событийно-ориентированные обратные вызовы

Ответ на вопрос a) не так легко дать (по крайней мере для меня), и b) кроется в самой природе работы Node.js — это событийно-ориентированность, то, благодаря чему он работает так быстро.

Возможно, вы захотите занять немного своего времени и почитать отличный пост Felix Geisendörfer Понимание node.js, чтобы прояснить этот момент.

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

Когда вызываем метод http.createServer, мы, конечно, не только хотим иметь сервер, слушающий какой-то порт. Мы также хотим что-нибудь сделать, когда приходит HTTP-запрос на этот сервер.

Проблема состоит в асинхронности: запрос происходит в любой момент времени, в то время как у нас только один процесс, в котором запущен наш сервер.

Когда пишем PHP-приложения, мы не беспокоимся обо всем этом: всякий раз, когда приходит HTTP-запрос, веб-сервер (обычно Apache) ответвляет новый процесс специально для этого запроса и запускает соответствующий PHP-скрипт с нуля, который выполняется от начала до конца.

Когда приходит новый запрос на порт 8888, относительно потоков управления, мы находимся в середине нашей Node.js-программы. Как это понять, чтоб не помешаться?

Это как раз то, где событийно-ориентированный дизайн Node.js/JavaScript на самом деле помогает. Нам надо узнать некоторые новые понятия, чтобы досконально понять всё это.

Мы создаем сервер и передаём функцию в созданный им метод. Всякий раз, когда наш сервер получает запрос, переданная нами функция будет вызываться.

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

Этот принцип называется обратный вызов или callback. Мы передаём в некоторый метод функцию и этот метод исполняет её, когда происходит связанное с методом событие.

По крайней мере для меня, это заняло некоторое время, чтобы понять. Просто почитайте блог Felix Geisendörfer снова, если вы всё ещё не уверены.

Давайте немного поиграем с этим новым понятием. Можем ли мы доказать, что наш код продолжает работать после создания сервера, даже если нет HTTP-запроса и callback-функция, переданная нами, не вызывается? Давайте попробуем:

Обратите внимание, что я использую console.log для вывода текста «Request received.», когда срабатывает функция onRequest (наш callback), а текст «Server has started.» — сразу после запуска HTTP-сервера.

Когда мы запустим этот код (как обычно, node server.js), он тут же выведет в командной строке «Server has started.». Всякий раз, когда мы делаем запрос нашему серверу (через переход по адресу http://localhost:8888/ в нашем браузере), в командной строке выводится сообщение «Request received.».

Объектно-ориентированный асинхронный серверный JavaScript с callback-ми в действии :-)

(Обратите внимание, что наш сервер, возможно, будет выводить «Request received.» в консоль 2 раза при открытии страницы в браузере. Это происходит из-за того, что большинство браузеров будут пытаться загрузить фавикон по адресу http://localhost:8888/favicon.ico при запросе http://localhost:8888/)

Как наш сервер обрабатывает запросы

Хорошо, давайте быстро проанализируем остальной код сервера внутри тела нашей callback-функции onRequest().

Когда callback запускается и наша функция onRequest() срабатывает, в неё передаются 2 параметра: request и response.

Они являются объектами и вы можете использовать их методы для обработки пришедшего HTTP-запроса и ответа на запрос (то есть, просто что-то посылать по проводам обратно в браузер, который запрашивал ваш сервер).

И наш код делает именно это: Всякий раз, когда запрос получен, он использует функцию response.writeHead() для отправки HTTP-статуса 200 и Content-Type в заголовке HTTP-ответа, а функцию Response.Write() для отправки текста «Hello World» в теле HTTP-ответа.

И последнее, мы вызываем response.end() чтобы завершить наш ответ.

На данный момент, мы не заботимся о деталях запроса, поэтому мы не используем объект request полностью.

Выбор места для нашего серверного модуля

Я обещал, что мы вернёмся к организации нашего приложения. У нас есть код очень простого HTTP-сервера в файле server.js и я упоминал, что общепринято иметь главный файл с названием index.js, который используется для начальной загрузки и запуска нашего приложения, путём использования других модулей приложения (таких как наш модуль HTTP-сервера в server.js).

Давайте поговорим о том, как сделать server.js настоящим Node.js-модулем, чтобы его можно было использовать в нашем главном файле index.js.

Как вы могли заметить, мы уже использовали модули в нашем коде:

Где-то внутри Node.js живёт модуль под названием «http» и мы можем использовать его в нашем коде, путём подключения и присвоения его результата локальной переменной.

Это делает нашу локальную переменную объектом, содержащим в себе все публичные методы модуля http.

Общепринитая практика — использовать имя модуля для имени локальной переменной, но мы свободны в своём выборе делать, как нам нравится:

Теперь понятно, как использовать внутренние модули Node.js. А как создать свой собственный модуль и как его использовать?

Давайте выясним это, превратив наш скрипт server.js в настоящий модуль.

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

Сейчас функционал нашего HTTP-сервера надо экспортировать, что довольно просто: скрипты, подключающие наш модуль сервера, просто запускают сервер.

Чтобы сделать это возможным, поместим код нашего сервера в функцию под названием start и будем экспортировать эту функцию:

Теперь мы можем создать наш основной файл index.js, и запускать наш HTTP-сервер там, хотя код для сервера находится всё ещё в файле server.js.

Создаём файл index.js со следующим содержимым:

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

Вот и всё. Сейчас мы можем запустить наше приложение через главный скрипт и он будет делать всё то же самое, что и раньше:

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

До сих пор мы работали только с первой частью нашего приложения: получение HTTP-запроса. Но нам надо что-нибудь с ним делать. В зависимости от URL, запрошенного браузером у нашего сервера, мы должны реагировать по-разному.

В очень простом приложении мы могли бы делать это напрямую внутри callback-функции onRequest(). Но, как я говорил, давайте добавим немного больше абстракции, чтобы сделать наш пример интереснее.

Задание соответствия между разными HTTP-запросами и разными частями нашего кода называется «маршрутизация» («routing», роутинг). Давайте тогда создадим модуль под названием router.

Что необходимо для «роутера»?


Нам нужно иметь возможность скармливать запрошенный URL и возможные добавочные GET- и POST-параметры нашему роутеру и, с учётом этого, роутер должен определять, какой код выполнять (этот код есть третья составляющая нашего приложения: коллекция обработчиков запросов, делающие необходимую работу по определённому запросу).

Итак, нам надо рассматривать HTTP-запрос и извлекать запрошенный URL, а также GET/POST-параметры. Можно поспорить, должен ли этот код быть частью роутера или сервера (или даже своего собственного модуля), но давайте сейчас пока просто сделаем его частью сервера.

Вся необходимая нам информация доступна через объект request, который передается в качестве первого параметра нашей callback-функции onRequest(). Чтобы интерпретировать эту информацию, нам необходимо добавить кое-какие Node.js-модули, а именно url и querystring.

Модуль url поддерживает методы, которые позволяют нам извлекать различные части URL (такие как запрошенный путь (URL path) и строка параметров запроса (query string)), а querystring в свою очередь, используется для парсинга строки параметров запроса (query string):

Конечно, мы также можем использовать querystring для парсинга тела POST-запроса, как мы увидим далее.

Давайте сейчас добавим в нашу функцию onRequest() логику, необходимую для извлечения пути URL (pathname), запрошенного браузером:

Замечательно. Теперь наше приложение может различать запросы на основе запрошенного пути URL. Это позволяет нам направлять запросы нашим обработчикам запросов в зависимости от пути URL, используя наш роутер. Таким образом, мы можем строить наше приложение RESTful-путём, потому что теперь можем реализовать интерфейс, следующий принципам Идентификации ресурсов (смотри статью в википедии REST для справки).

В контексте нашего приложения, это означает, что мы сможем обрабатывать запросы с URL /start и /upload разными частями нашего кода. Скоро мы увидим, как всё соединяется вместе.

Теперь самое время написать наш роутер. Создаём новый файл под названием router.js со следующим содержимым:

Конечно этот код ничего не делает, но сейчас этого достаточно. Давайте сначала посмотрим, как скрепить этот роутер с нашим сервером до того как поместим больше логики в роутер.

Нашему HTTP-серверу необходимо знать о роутере и использовать его. Мы могли бы жёстко прописать эти зависимости в нашем сервере, но, так как мы знаем только сложные способы из нашего опыта в других языках программирования, мы сделаем слабосвязанную зависимость сервера и роутера через внедрение этих зависимостей (можете почитать отличный пост Мартина Фаулера по внедрениям зависимости на английском языке или статью в Википедии на русском языке для дополнительной информации).

Для начала, расширим нашу серверную функцию start(), чтобы дать нам возможность передавать функцию route() как параметр:

Теперь расширим наш index.js соответственно, то есть внедрим функцию route() нашего роутера в сервер:

Мы опять передаём функцию, которая не является чем-то новым для нас.

Если мы сейчас запустим наше приложение (node index.js, как обычно) и запросим какой-нибудь URL, вы сможете увидеть в консоли, что наш HTTP-сервер использует наш роутер и передает ему запрошенный pathname:

(Я опустил слегка надоедливый вывод для запроса /favicon.ico)

Исполнение королевских постановлений в царстве глаголов

Позвольте мне ещё раз побродить вокруг и около и снова поговорить о функциональном программировании.

Передача функций связана не только с техническими соображениями. Относительно разработки программного обеспечения это — почти философия. Просто подумайте: в нашем index-файле мы могли бы передавать объект router в наш сервер и сервер мог бы вызывать функцию route этого объекта.

Этим способом мы бы передавали нечто и сервер использовал бы это нечто, чтобы сделать что-то. Эй, роутер, не могли бы вы показать мне маршрут?

Но серверу не нужно нечто. Ему нужно только получить что-то сделанное, а чтоб получить уже что-то сделанное, вам не нужно нечто совсем, вам необходимо действие. Вам не нужно существительное, вам нужен глагол.

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

Я понял это, когда читал шедевр Стива Йегге Execution in the Kingdom of Nouns (частичный перевод на русский Исполнение королевских постановлений в царстве существительных). Почитайте это обязательно. Это одно из лучших произведений о программировании, которое я когда-либо имел удовольствие встречать.

Роутинг реальных обработчиков запроса

Вернёмся к делу. Наш HTTP-сервер и наш роутер запросов сейчас — лучшие друзья, и общаются друг с другом так, как мы хотели.

Конечно, этого недостаточно. «Роутинг» подразумевает, что мы хотим обрабатывать запросы на разные URL по-разному. Мы хотели бы иметь «бизнес-логику» для запросов к /start в одной функции, а для запросов к /upload в другой.

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

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

Новая часть приложения, новый модуль — здесь никаких сюрпризов. Создадим модуль под названием requestHandlers, добавим болванки функций для каждого обработчика запроса и экспортируем их как методы модуля:

Это позволяет нам связать обработчики запросов с роутером, давая нашему роутеру что-нибудь маршрутизировать.

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

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

Как мы собираемся передать их? Сейчас у нас есть два обработчика, но в реальном приложении это число будет увеличиваться и меняться. И мы уверены, что не хотим возиться с роутером каждый раз, когда добавляется новый URL + обработчик запроса. И какие-нибудь if запрос == x then вызвать обработчик y в роутере будут более чем убоги.

Переменное число элементов и каждому соответствует строка (запрашиваемый URL)? Так, похоже на ассоциативный массив, это наиболее подходящее.

Это решение немного разочаровывает тем фактом, что JavaScript не поддерживает ассоциативные массивы. Или нет? Оказывается в действительности, если нам нужны ассоциативные массивы, мы должны использовать объекты!

Об этом есть хорошее введение http://msdn.microsoft.com/en-us/magazine/cc163419.aspx. Позвольте мне процитировать подходящую часть:

В C++ или C#, когда мы говорим об объектах, мы ссылаемся на экземпляры классов или структуры. Объекты имеют разные свойства и методы, в зависимости от шаблонов (классов), экземплярами которых они являются. Но не в случае с JavaScript-объектами. В JavaScript, объекты — это просто коллекция пар имя/значение — JavaScript-объект — это как словарь со строковыми ключами.

Если JavaScript-объекты это просто коллекции пар имя/значение, как тогда у них могут быть методы? Итак, значения могут быть строками, числами и т.д. или функциями!

Илон Маск рекомендует:  Что такое код socket_recv

Хорошо, наконец-то возвращаемся к нашему коду. Мы решили, что мы хотим передать список из requestHandlers как объект и, для того, чтобы достичь слабое связывание, мы хотим внедрить этот объект в route().

Начнём с добавления объекта в наш главный файл index.js:

Хотя handle — это больше из разряда «нечто» (коллекция обработчиков запроса), я, всё-таки, предлагаю называть его глаголом, потому что в результате это будет функциональное выражение в нашем роутере, как вы скоро увидите.

Как вы можете видеть, это действительно просто — назначать различные URL соответствующему обработчику запроса: просто добавляя пару ключ/значение из «/» и requestHandlers.start, мы можем выразить красивым и аккуратным способом, что не только запросы к «/start», но также и запросы к «/» должны быть обработаны обработчиком start.

После определения объекта мы передали его в сервер как дополнительный параметр. Изменим наш server.js, чтобы использовать его:

Мы добавили параметр handle в функцию start() и передаём объект handle в callback-функцию route() в качестве перового параметра.

Соответственно, изменим функцию route() в нашем файле router.js:

Что мы здесь делаем — мы проверяем, существует ли обработчик запроса для данного пути, и если существует, просто вызываем соответствующую функцию. Из-за того, что мы имеем доступ к нашим функциям обработчиков запроса из нашего объекта просто, как если бы имели доступ к элементу ассоциативного массива, у нас есть это прекрасное выражение handle[pathname]();, о котором говорилось ранее: «Пожалуйста, handle этот pathname».

Хорошо, это всё, что нужно, чтобы связать сервер, роутер и обработчики запроса вместе! При запуске нашего приложения и запроса http://localhost:8888/start в браузере, мы можем убедиться, что надлежащий обработчик запроса действительно был вызван:

Так же открываем http://localhost:8888/ в нашем браузере и убеждаемся, что эти запросы в самом деле обрабатываются обработчиком запросов start:

Создание ответа обработчиков запроса

Замечательно. Вот только если бы обработчики запроса могли отправлять что-нибудь назад браузеру, было бы ещё лучше, правильно?

Вспомните, «Hello World», который выводит ваш браузер в запрошенной странице, всё ещё исходит от функции onRequest в нашем файле server.js.

«Обработка запроса» подразумевает «ответ на запросы» в конце концов, поэтому необходимо дать возможность нашим обработчикам запроса общаться с браузером так же, как это делает функция onRequest.

Как делать не надо

Прямой подход, который мы захотим использовать как разработчики с опытом в PHP или Ruby, на самом деле ложный: он может прекрасно работать, иметь большой смысл, а потом, когда мы этого не ждём, неожиданно всё развалится.

Под «прямым подходом» я подразумеваю использование в обработчиках запроса return «» для контента, который надо показать пользователю, и отправлять этот ответ в функцию onRequest назад пользователю.

Давайте просто сделаем это и тогда увидим, почему это не такая уж и хорошая идея.

Мы начнём с обработчиков запроса и заставим их возвращать то, что хотели бы показать в браузере. Нам надо изменить requestHandlers.js вот так:

Хорошо. Также, роутер должен вернуть серверу то, что обработчики запроса вернули ему. Поэтому надо отредактировать router.js так:

Как видим, возвращается некоторый текст «404 Not found», если запрос не может быть маршрутизирован.

И самое последнее, но не менее важное, нам нужен рефакторинг нашего сервера, чтобы заставить его отвечать браузеру с контентом обработчиков запроса, возвращаемых через роутер. Трансформируем server.js в:

Если запустим наше написаное приложение, всё будет работать замечательно: запрос http://localhost:8888/start выдаст в браузере результат «Hello Start», запрос http://localhost:8888/upload даст нам «Hello Upload», а http://localhost:8888/foo выведет «404 Not found».

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

Подробный ответ займёт немного больше времени.

Блокирование и неблокирование

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

Вместо того, чтобы объяснять, что такое «блокирование» и «неблокирование», давайте продемонстрируем себе, что произойдёт, если мы добавим блокирующую операцию в наши обработчики запроса.

Для этого модифицируем обработчик запроса start так, чтобы он ждал 10 секунд до того как вернёт свою строку «Hello Start». В JavaScript нет такой штуки как sleep(), поэтому мы будем использовать хитрый хак.

Пожалуйста, измените requestHandlers.js как описано далее:

Просто объясню, что этот код делает: когда функция start() вызвана, Node.js ожидает 10 секунд и только тогда возвращает «Hello Start». Когда вызывается upload(), она выполняется немедленно, как и раньше.

(Конечно, вы уже поняли, вместо засыпания на 10 секунд, в start() могут быть реальные блокирующие операции, такие как сложные длительные вычисления.)

Давайте посмотрим, что поменялось.

Как обычно, нам надо перезапустить сервер. На этот раз я попрошу вас следовать немного более сложному «протоколу», чтобы увидеть, что произошло: во-первых, откройте браузер или таб. В первом окне браузера, введите, пожалуйста, http://localhost:8888/start в адресную строку, но не переходите пока по этому адресу!

В адресную строку второго окна браузера введите http://localhost:8888/upload и снова не переходите по адресу.

Теперь сделайте, как описано далее: нажмите клавишу Enter в первом окне («/start»), а затем быстро переключитесь на второе окно («/upload») и нажмите тоже Enter.

Что вы будете наблюдать: URL /start потребуется 10 секунд для загрузки, как мы и ожидали. Но URL /upload так же потребуется 10 секунд на загрузку, хотя в соответствующем обработчике запроса нет sleep()!

Почему? Потому что start() содержит блокирующую операцию. Like in «it’s blocking everything else from working».

И в этом проблема, потому что, как говорят: «В node всё работает параллельно, за исключением вашего кода».

Это значит, что Node.js может обрабатывать одновременно множество вещей, но при этом не разделяет всё на отдельные потоки — Node.js однопоточный. Он делает это, запуская цикл событий, а мы, разработчики, можем использовать это — мы должны избегать блокирующих операций, где это возможно, и использовать неблокирующие операции вместо них.

Но для этого нам надо использовать обратные вызовы, передавая функции внутри тех функций, которые могут сделать то, что занимает некоторое время (как например sleep() на 10 секунд или запрос к базе данных или какое-то дорогостоящее вычисление.)

Таким образом, мы как бы говорим: «Эй, возможноДолгаяФункция(), пожалуйста, сделай вот это, но я, однопотоковый Node.js, не собираюсь ждать здесь, пока ты закончишь, я продолжу выполнение строчек кода ниже тебя, а ты возьми пока вот эту функцию callbackFunction() и вызови её, когда всё сделаешь. Спасибо!»

(Если хотите почитать об этом более подробно, пожалуйста посмотрите пост Mixu на Understanding the node.js event loop.)

И мы сейчас увидим, почему способ, которым мы создали «обработчик запроса обрабатывающий ответ» в нашем приложении не позволит правильно использовать неблокирующие операции.

Ещё раз давайте попробуем испытать проблему на своей шкуре, модифицировав наше приложение.

Мы снова используем наш обработчик запроса start. Пожалуйста, измените его следующим образом (файл requestHandlers.js)

Как можно видеть, мы просто внедрили новый модуль Node.js child_process. Мы сделали так, потому что это позволит нам использовать очень простую, но полезную неблокирующую операцию: exec().

Что делает exec() — она выполняет shell-команду внутри Node.js. В этом примере мы собираемся использовать её, чтобы получить список всех файлов в текущей директории («ls -lah»), позволяя нам отобразить этот список в браузере пользователя, запросившего URL /start.

Что делает этот код: создает новую переменную content (с начальным значением «empty»), выполняет «ls -lah», заполняет переменную результатом и возвращает её.

Как обычно, запустим наше приложение и посетим http://localhost:8888/start.

Которая загрузит нам красивую страничку со строкой «empty». Что тут не так?

Ну, как вы уже догадались, exec() делает свою магию в неблокирующий манере. Это хорошая штука, потому что таким образом мы можем выполнять очень дорогостоящие shell-операции (как, например, копирование больших файлов или что-то подобное), не заставляя наше приложение полностью останавливаться, пока блокирующая sleep-операция не выполнится.

Если хотите удостовериться, замените «ls -lah» на более дорогостоящую операцию «find /»).

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

Давайте тогда пофиксим это. Давайте попытаемся понять, почему текущая архитектура не работает.

Проблемой является то, что exec(), чтобы работать без блокирования, использует callback-функцию.


В нашем примере это анонимная функция, которая передаётся как второй параметр в функцию exec():

И здесь лежит корень нашей проблемы: наш собственный код исполняется синхронно, что означает, что сразу после вызова exec(), Node.js продолжит выполнять return content;. К этому моменту content ещё «empty», из-за того, что callback-функция, переданная в exec(), до сих пор не вызвана — потому что операция exec() асинхронная.

Теперь «ls -lah» — очень недорогая и быстрая операция (если только в директории не миллион файлов). Именно поэтому callback вызывается относительно оперативно — но это, всё же, происходит асинхронно.

Использование более дорогостоящих команд делает это более очевидным: «find /» занимает около 1 минуты на моей машине, но если я заменяю «ls -lah» на «find /» в обработчике запроса, то я всё ещё немедленно получаю HTTP-ответ, когда открываю URL /start. Ясно, что exec() делает что-то в фоновом режиме, пока Node.js продолжает исполнять приложение и мы можем предположить, что callback-функция, которую мы передали в exec(), будет вызвана только когда команда «find /» закончит выполняться.

Но как нам достичь нашей цели, то есть, показать пользователю список файлов в текущей директории?

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

Ответ обработчиков запроса с неблокирующими операциями.

Я употребил фразу «правильный способ». Опасная вещь. Довольно часто не существует единого «правильного способа».

Но одним из возможных решений для этого является, как это часто бывает с Node.js, передача функции внутри. Давайте рассмотрим это.

Сейчас наше приложение способно транспортировать контент (который обработчики запроса хотели бы показать пользователю) от обработчиков запроса к HTTP-серверу, возвращая его через слои приложения (обработчик запроса -> роутер -> сервер).

Наш новый подход заключается в следующем: вместо доставки контента серверу мы будем сервер доставлять к контенту. Чтобы быть более точным, мы будем внедрять объект response (из серверной callback-функции onRequest()) через роутер в обработчики запроса. Обработчики смогут тогда использовать функции этого объекта для ответа на сами запросы.

Достаточно разъяснений. Вот — пошаговый рецепт изменения нашего приложения.

Начнём с нашего server.js:

Вместо ожидания возврата значения от функции route(), мы передаём наш объект response в качестве третьего параметра. Кроме того, мы удалили всякие вызовы методов response из обработчика onRequest(), потому что мы рассчитываем, что route позаботится об этом.

Далее идёт router.js:

Та же схема: вместо ожидания возврата значения от наших обработчиков события, мы передаём объект response.

Если обработчик запроса не может быть использован, мы заботимся об ответе с надлежащим заголовком «404» и телом ответа.

И последнее, но не менее важное, мы модифицируем requestHandlers.js:

Наши функции-обработчики должны принять параметр response и использовать его, чтобы ответить на запрос напрямую.

Обработчик start будет отвечать изнутри анонимного обратного вызова exec(), а обработчик upload будет всё ещё выдавать «Hello Upload», но теперь посредством объекта response.

Если вы запустили наше приложение снова (node index.js), всё должно работать как и ожидалось.

Если хотите убедиться, что дорогостоящая операция в /start больше не будет блокировать запросы на /upload, модифицируйте ваш requestHandlers.js как показано далее:

Благодаря этому, HTTP-запросы к http://localhost:8888/start будут занимать не менее 10 секунд, но запросы к http://localhost:8888/upload будут получать ответ немедленно, даже если /start всё ещё занят вычислениями.

Сделаем что-нибудь полезное

До сих пор мы делали всё прекрасно и изысканно, но мы не создали ничего значимого для клиентов нашего супер-сайта.

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

OK, давайте шаг за шагом, но с разъяснением больших техник и принципов JavaScript, и в то же время, давайте немного ускоримся. Автору слишком нравится слушать самого себя.

Здесь «шаг за шагом» означает примерно 2 шага: сначала мы посмотрим как обрабатывать входящие POST-запросы (но не загрузку файла), и на втором шаге мы используем внешний модуль Node.js для обработки загрузки файла. Я выбирал этот подход по двум причинам.

Во-первых, обрабатывать базовые POST-запросы относительно просто в Node.js, но для обучения это — достаточно стоящее упражнение.
Во-вторых, обработка загрузки файла (к примеру, multipart POST-запросы) это не так просто в Node.js, поэтому выходит за рамки этого учебника, но пример использования для этого внешнего модуля имеет смысл включить в учебник для начинающих.

Обработка POST-запросов

Давайте сделаем попроще: предоставим текcтовое поле, которое может быть заполнено пользователем и отправлено на сервер в POST-запросе. После получения и обработки этого запроса мы отобразим содержимое текстового поля.

HTML-код для формы текстового поля должен формировать наш обработчик запроса /start, так давайте сразу же добавим его в файл requestHandlers.js:

Если теперь этот код не выиграет Webby Awards, то я не знаю, какой сможет. Вы должны увидеть эту очень простую форму, когда запросите http://localhost:8888/start в вашем браузере. Если это не так — возможно, вы не перезагрузили приложение.

Я уже слышу вас: помещать содержимое представления прямо в обработчик запроса некрасиво. Тем не менее, я решил не включать этот дополнительный уровень абстракции (то есть, разделение представления и логики) в наш учебник, потому что, я думаю, что это не научит нас чему-нибудь стоящему в контексте JavaScript или Node.js.

Давайте лучше использовать появившееся окно для более интересных проблем, то есть, обработки POST-запроса в нашем обработчике запроса /upload при отправке этой формы пользователем.

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

Это имеет смысл, потому что POST-запросы могут быть потенциально очень большими — ничто не мешает пользователю ввести текст размером в несколько мегабайтов. Обработка всего массива данных за один раз может привести к блокирующей операции.

Чтобы сделать весь процесс неблокирующим, Node.js обслуживает POST-данные небольшими порциями, а callback-функции вызываются при определённых событиях. Эти события — data (когда приходит новая порция POST-данных) и end (когда все части данных были получены).

Надо сообщить Node.js, какие функции вызывать, когда эти события произойдут. Это делается путём добавления слушателей (listeners) в объект request, который передаётся в нашу callback-функцию onRequest, когда HTTP-запрос получен.

В основном, это выглядит так:

Возникает вопрос, где реализовать эту логику. В настоящее время мы можем получить доступ к объекту request только в нашем сервере — мы не передаём его в роутер и в обработчики запроса, как делаем это с объектом response.

На мой взгляд, это работа HTTP-сервера — предоставлять приложению все данные из запросов. Поэтому я предлагаю обрабатывать POST-данные прямо в сервере и передавать конечные данные в роутер и обработчики запроса, которые сами решат, что с ними делать.

Таким образом, идея — в том, чтобы поместить обратные вызовы событий data и end в сервер, собирать все куски POST-данных в data и вызывать роутер при получении события end, пока идёт передача собранных порций данных в роутер, который в свою очередь передаёт их в обработчики запроса.

Начинаем с server.js:

Здесь, в основном, мы сделали три вещи: во-первых, определили, что ожидаем полученные данные в кодировке UTF-8, затем добавили слушатель для события «data», который шаг за шагом заполняет нашу новую переменную postData всякий раз, когда прибывает новая порция POST-данных, и далее — переходим к вызову нашего роутера в обратном вызове события end, чтобы убедиться, что вызов происходит, когда все POST-данные собраны. Мы также передаём POST-данные в роутере, потому что они нам понадобятся в обработчиках запроса.

Добавление логирования в консоли для каждой порции полученных данных — возможно, плохая идея для конечного кода (мегабайты POST-данных, помните?), но это имеет смысл, чтобы посмотреть, что происходит.

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

Давайте добавим ещё больше крутизны в наше приложение. На странице /upload мы будем показывать принятый контент. Чтобы сделать это возможным, нам необходимо передавать postData в обработчики запроса. В router.js:

И в requestHandlers.js мы включаем эти данные в нашем ответе обработчика запроса upload:

Вот и всё, теперь мы можем получить POST-данные и использовать их в наших обработчиках запроса.

И последнее по этой теме: то, что мы передаём в роутер и обработчики запроса, является полным телом нашего POST-запроса. Мы, вероятно, захотим использовать индивидуальные поля, составляющие POST-данные, в нашем случае значение поля text.

Мы уже читали про модуль querystring, который поможет нам с этим:

Это всё, что можно сказать про обработку POST-данных в рамках учебника для начинающих.

Обработка загрузки файлов

Давайте примемся за последний пункт нашего списка задач. Мы планировали дать возможность пользователям загружать файлы картинок и отображать загруженные картинки в браузере.

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

Внешний модуль, который мы собираемся использовать, node-formidable от Felix Geisendörfer. Этот модуль поможет нам абстрагироваться от мерзких деталей парсинга входящих файловых данных. В конце концов, обработка входящих файлов это не что иное, как «просто» обработка POST-данных, но, в действительности, дьявол кроется в деталях, поэтому в нашем случае имеет смысл использовать готовое решение.

Чтобы использовать код Феликса, соответствующий модуль Node.js должен быть инсталлирован. На борту Node.js есть собственный менеджер пакетов, называемый NPM. Он позволяет нам инсталировать внешние модули Node.js в очень удобной форме. С учетом установленного Node.js, всё сводится к

в нашей командной строке. Если вы в конце увидели следующее:

. это значит — всё хорошо.

Модуль formidable теперь доступен в нашем коде — всё, что нужно, это просто запросить его как один из тех модулей, которые мы использовали ранее:

По сути, formidable делает форму, отправленную через HTTP POST, доступной для парсинга в Node.js. Всё, что нам надо — это создать новый экземпляр объекта IncomingForm, который является абстракцией отправленной формы и может быть использован для парсинга объекта request нашего HTTP-сервера, для полей и файлов, отправленных через эту форму.

Пример кода со страницы проекта node-formidable показывает, как разные части сочетаются друг с другом:

Если вы поместите этот код в файл и исполните его посредством node, вы сможете отправлять простые формы, включая загрузку фото, и увидите, как организован объект files, который передавался в callback, определенном в вызове form.parse.

Чтобы выполнить последний пункт нашей задачи, мы должны включить логику парсинга форм модуля formidable в структуру нашего кода, плюс ко всему, надо разобраться, как отдавать контент загруженного файла (который сохранен в директории /tmp) браузеру.

Давайте сначала решим последнюю задачу: если имеется файл картинки на вашем локальном диске, что сделать, чтобы передать его браузеру?

Мы, очевидно, собираемся считать содержимое этого файла в наш Node.js-сервер, и неудивительно, что для этого имеется соответствующий модуль под названием fs.

Давайте добавим ещё один обработчик запроса для URL /show, который будет «захардкоженно» показывать содержимое файла /tmp/test.png. Конечно же, имеет смысл в первую очередь поместить реальную png-картинку в этот каталог.

Мы собираемся изменить requestHandlers.js, как показано далее:

Также, надо преобразовать новый обработчик запроса в URL вида /show в файле index.js:

Перезапускаем сервер, открываем http://localhost:8888/show в браузере и видим картинку /tmp/test.png.

Хорошо. Всё, что нам надо теперь — это:

  • добавить поле для загрузки файлов в форму, находящуюся по адресу /start,
  • интегрировать node-formidable в обработчик запроса upload, чтобы сохранять загруженные файлы в /tmp/test.png,
  • внедрить загруженную картинку в HTML, отдаваемый по URL /upload.

Первый шаг — простой. Нам надо добавить тип кодировки multipart/form-data в нашу HTML-форму, удалить текстовое поле, добавить поле загрузки файла и поменять текст кнопки отправки формы на «Upload file». Давайте просто сделаем это в файле requestHandlers.js:

Замечательно. Следующий шаг — немного более сложный, конечно. Первая проблема следующая: мы хотим обрабатывать загрузку файлов в нашем обработчике запроса upload, и тут надо будет передать объект request при вызове form.parse модуля node-formidable.

Но всё, что у нас есть — это объект response и массив postData. Грустно. Похоже, что придётся передавать каждый раз объект request из сервера в роутер и обработчик запроса. Может быть, имеется более элегантное решение, но этот способ может делать работу уже сейчас.

Давайте полностью удалим всё, что касается postData в нашем сервере и обработчиках запроса — он нам не нужен для обработки загрузки файла и, мало того, — даже создает проблему: мы уже «поглотили» события data объекта request в сервере, а следовательно, form.parse, которому так же надо поглащать эти события, не сможет получить больше данных (потому что Node.js не буферизирует данные).

Начнём с server.js — удалим обработку postData и строку с request.setEncoding (node-formidable сам всё сделает) и передадим request в роутер:

Следующий — router.js — мы больше не передаём postData, а вместо этого передаём request:

Теперь объект request может быть использован в функции обработчика запроса upload. node-formidable будет заниматься сохранением загруженного файла в локальный файл /tmp, но, конечно, мы сами должны сделать, чтобы этот файл переименовывался в /tmp/test.png. Да, мы придерживаемся действительно простых вещей и принимаем, что могут загружаться только PNG-картинки.

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

Давайте добавим в requestHandlers.js код управления загрузкой файла и переименованием:

Вот и всё. Перезапускаем сервер, и последний пункт нашей задачи реализован. Выбираем локальную PNG-картинку с диска, загружаем на сервер и видим её на нашей веб-страничке.

Выводы и перспективы

Поздравляю, наша миссия выполнена! Мы написали простое, уже полностью готовое web-приложение на Node.js. Мы поговорили о server-side JavaScript, функциональном программировании, блокирующих и неблокирующих операциях, callback-ах, событиях, обычаях, внутренних и внешних модулях и о многом другом.

Конечно, имеется много вещей, которые мы не обсудили: как общаться с базой данных, как писать unit-тесты, как создавать внешние модули, с возможностью инсталяции через NPM или даже что-нибудь простое, например, как обрабатывать GET-запросы.

Но это судьба каждого учебника, предназначенного для начинающих — нельзя расказать о всех аспектах во всех деталях.

Node.js — Создание вашего первого приложения

Дата публикации: 2020-12-15

От автора: перед тем как вы начнете осваивать создание приложений Node js с первого «Hello, World!», давайте рассмотрим необходимые компоненты. Приложение Node.js состоит из следующих трех важных компонентов.

Импорт необходимых модулей. Мы используем директиву require для загрузки модулей Node.js.

Создание сервера — сервер будет прослушивать запросы клиента, подобно Apache HTTP Server.

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


Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Создание приложения Node.js

Шаг 1 – Импорт необходимых модулей

Для загрузки модуля http и сохранения возвращенного экземпляра HTTP в переменную http используется директива require:

10 самых популярных сайтов и мобильных приложений, созданных с помощью Node.JS

Перевод статьи Пареша Сагара «Most Popular 10 Websites and Mobile Apps Built with Node.JS».

Вам любопытно, какие сайты и мобильные приложения используют Node.JS? Хотите погрузиться в последние тенденции разработки приложений на Node.JS?

С вашего согласия я представлю 10 самых популярных сайтов и мобильных приложений, построенных с его помощью.

Сегодня многие мобильные и веб-приложения создаются с использованием фреймворков Node JS. Я расскажу о 10 самых крупных сайтах и мобильных приложениях, созданных с их помощью. Начиная с 2012 года среда NodeJS достигла огромных успехов. Она пользуется самой большой популярностью при созданииприложений, действующих в режиме реального времени, и быстро масштабируемых мобильных и веб-приложений.

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

Прежде чем мы приступим к рассмотрению списка самых известных сайтов и мобильных приложений, построенных на Node.JS, позвольте рассказать вам немного о самом фреймворке.

Илон Маск рекомендует:  API склонения слов, получения рода(мужской, женский), падежа, склонения и других характеристик

Что такое Node.JS?

Говоря простыми словами, Node.JS это среда для запуска приложений. Node JS это бэкенд-платформа, используемая Node.JS-разработчиками для создания серверных и сетевых приложений. Это популярная open source платформа для разработки серверных и сетевых приложений с возможностью запуска на распределенных устройствах. Платформа построена на движке JavaScript V8 от Google Chrome.

Проекты Node.JS делают возможным построение ваших собственных приложений с помощью всего лишь одного языка, JavaScript. Раньше над этим работали разные команды, использовавшие разные языки для фронтенда и бэкенда.

Каковы преимущества использования Node.JS?

Большинство современных стартапов верят в методологию «бережливого стартапа». Они нацелены на уменьшение цикла разработки продукта с помощью новых экспериментальных технологий. Поэтому Node.JS является прекрасным выбором для таких компаний. Разработка на Node.JS дает пользователям целый ряд преимуществ:

  • Node.JS использует один и тот же язык для серверной и клиентской части, что уменьшает необходимое число разработчиков по сравнению с платформами, использовавшимися ранее.
  • С использованием Node.JS приложения, работающие в режиме реального времени (например, чаты, сервисы заказов и транзакций), поднимаются на новую высоту.
  • Для стартапа изменение направления может стать неизбежностью. Многие известные имена среди стартапов достигли успеха благодаря изменению первоначальной бизнес-модели. С помощью Node.JS внесение изменений в ваше приложение проходит более гладко.

Если вам нужно больше информации о преимуществах использования Node.JS и о том, как нанимать разработчиков на Node.JS, посетите эту страницу.

Netflix

Netflix в настоящее время является самой крупной мировой платформой потокового видео для фильмов и сериалов. Им пользуются 125 млн. пользователей из почти 200 стран, причем 56 млн. пользователей приходится только на США. (Источник — Statista)

Обслуживание такого ошеломляющего числа персонализированных потоков является огромной операцией, выполняемой фреймворком Node.JS.

Согласно Кристоферу Бакстеру, Node.JS улучшил время загрузки Netflix на 70%.

Разработчики Netflix для оценки улучшений используют показатель TTI (time to interact – «время до взаимодействия»). Это время между запуском приложения и моментом, когда пользователь может начать с ним взаимодействовать.

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

Это самый большой транспортный стартап в мире, имеющий 40 миллионов активных пользователей ежемесячно и 5,5 млн. поездок в день. Он нуждался в платформе, которая обеспечивала бы отслеживание в реальном времени и навигацию для этих ежедневных 5,5 млн. поездок. Для выполнения этой задачи Uber выбрал платформу для разработки приложений Node.JS. (Источник – BusinessofApps).

Uber увидел три главных преимущества, которые приложение на Node.JS может обеспечить их начинаниям в будущем:

  • Высокая вычислительная мощность, которая может помочь быстро получить доступ к большому количеству информации.
  • Большая оптимизация вследствие участия многих open source сообществ Node.JS.
  • Ошибки могут быть устранены без прерывания работы серверов.

Имея в своем арсенале Node.JS, Uber теперь может управлять 2 миллионами удаленных вызовов процедур (RPC) в секунду.

Paypal

Paypal это одна из самых больших компаний, использующих Node.JS. У него 227 миллионов активных пользовательских аккаунтов в больше чем 200 странах (по состоянию на 2020 год). Это делает Paypal одним из самых популярных сайтов, построенных с помощью приложения Node.JS. Node.JS использовался для создания клиентского веб-приложения Node.JS.

Создание приложения с помощью Node.JS заняло всего половину времени, которое ранее требовалось для создания приложений на основе Java. Создание целого Node.JS-приложения потребовало на 33% меньше строк кода и на 40% меньше файлов.

Джефф Харрел, старший директор по платежным продуктам и инженерной части в PayPal, высказался в пользу веб-приложения на Node.JS:

«Node.JS помогает нам решать проблему связи между браузером и сервером. Это стало возможно благодаря тому, что как браузерная, так и серверная часть приложения написаны на JavaScript. Это объединяет наших специалистов-инженеров в одну команду, что позволяет нам понимать и реагировать на нужды наших пользователей на каждом уровне технологического стека».

eBay это один из самых известных сайтов, управляемых Node.JS. Он имеет 170 миллионов пользователей по всему миру, включая пользовательские и продуктовые компании. Он предлагает торговую платформу e-commerce для сделок типа потребитель-потребитель и бизнес-потребитель. (Источник – Statista)

eBay столкнулся с необходимостью сделать свой сайт более отзывчивым в режиме реального времени. Здесь и вышел на сцену Node JS, поскольку это было единственное надежное решение, которому eBay мог доверить свой огромный e-commerce трафик.

Красота Node.JS-приложения, созданного eBay, в том, что они следовали принципу «Создай один раз, разворачивай везде и автоматизируй остальные модули». Это сделало eBay одним из величайших примеров применения Node.JS в приложениях.

Сентил Падманабхан, главный веб-инженер eBay, сказал: «У нас было два основных требования к проекту. Первое заключалось в том, чтобы сделать приложение как можно более подходящим для работы в реальном времени и при этом обслуживать живые соединения на сервере. Второе касалось организации огромного количества сервисов eBay, отображающих информацию на странице».

GoDaddy

У GoDaddy в управлении больше 55 миллионов доменов с примерно 150 тыс. доменных транзакций в день. Это делает GoDaddy крупнейшим мировым регистраром. И то, что это одна из компаний, использующих Node.JS, создает прекрасную репутацию это платформе. (Источник – GoDaddy)

Для поддержания своего высокого положения им нужно постоянно обновляться. Node.JS дает возможность выпускать новые функции с помощью качественного приложения и простых интеграционных тестов. Node.JS делает возможным для GoDaddy выполнять ту же загрузку с помощью всего 10% используемых ранее аппаратных средств.

Антонио Сильвера, вице-президент GoDaddy, заявил:

«Мы сейчас используем практически в 10 раз меньше серверов для размещения сайтов наших пользователей. Мы существенно снизили показатель TTFB (Time-To-First Byte – время от HTTP-запроса до получения первого байта страницы клиентским браузером) с примерно 60 до 12 миллисекунд. Производительность это ключевое различие, если мы говорим о веб-приложениях, включая лучшую позицию в результатах поиска Google».

Благодаря применению Node.JS сервера GoDaddy были заметно сокращены — с 15 до 4, при удваивании пропускной способности. Приложение Node.JS работает в 10 раз быстрее на стороне клиента.

LinkedIn

LinkedIn это бизнес-ориентированный сайт-социальная сеть с 467 млн. пользователей из больше чем 200 стран. Сайт был основан в 2002 году и недавно приобретен Microsoft за $26 млрд. Приложение сайта доступно на 24 языках.

LinkedIn использовал Node.JS для улучшения серверной части своего мобильного приложения. Благодаря этому приложение стало работать в 20 раз быстрее и задействовать лишь часть ресурсов по сравнению в показателями, которые были при применении Ruby on Rails. (Источник – Statista)

По словам Кирана Прасада, заведующего мобильной разработкой в LinkedIn, «Одной из причин был масштаб. Во-вторых, если вы посмотрите на Node, он лучший во взаимодействии с другими сервисами».

LinkedIn, возможно, является наилучшим примером как сайта, так и приложения, созданного с использованием Node.JS разработки.

Walmart

Walmart, самая большая мировая сеть розничной торговли, занялась онлайн-продажами для расширения свих горизонтов. Они выбрали Node.JS для создания своего онлайн-приложения для торговли, поскольку поверили в его потенциал. В Node.JS Walmart заинтересовал его асинхронный ввод/вывод и однопоточная модель цикла, способная обрабатывать конкурентные запросы.

Node.JS был гигантским прыжком для Walmart, который обернулся для них хорошей экономией ресурсов.

Yahoo

Американская технологическая компания, предлагающая множество сервисов, таких как поисковик, веб-портал и многие другие. Все сервисы Yahoo дают ему в общей сложности 1 млрд. пользователей, причем 225 млн приходится только на почту. Приложение на Node.JS изменило всю культуру фронтенд-разработки в Yahoo. (Источник – DMR).

Эрик Ферраиуоло, главный инженер ПО в Yahoo, поясняет:

«Вы можете сделать его масштабируемым, он очень эффективен, и каждое свойство, которое мы переместили в стек Node.js, показало рост производительности».

Node.js уже стоит за многими сайтами Yahoo, а вскоре будет заправлять всем.

Groupon

Как и eBay, Groupon это один из сайтов, построенных с помощью Node.JS. Это мировая e-commerce платформа, где пользователи могут связываться с местными частными продавцами товаров и услуг. Groupon обслуживает 49,5 млн пользователей по всему миру. В июне 2015 года он перешел с Ruby on Rails к созданию приложений на Node.JS. (Источник – Statista).

Node.JS приложение и веб-страницы Groupon стали на 50% быстрее даже при обслуживании большего трафика, чем при использовании Ruby on Rails.

Адам Гейтгей из Groupon заметил:

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

Mozilla

Mozilla это сообщество, созданное членами Netscape и занимающееся бесплатным программным обеспечением, в частности, инструментами навигации и веб-браузером. Эти инструменты поддерживают больше 80 языков и работают на разных ОС: Windows, Linux, OS X, Firefox OS. Это все еще второй по популярности веб-браузер в мире, несмотря на то что на него припадает только 15% использования. Mozilla это один из лучших примеров веб-приложений, использующих Node.JS.

Марк Майо, главный инженер в Mozilla, сказал:

«Мы сделали уверенный выбор в пользу Node по двум причинам. Одна из них – объем занимаемой памяти, а вторая – возможность использовать один и тот же язык для бэкенда и фронтенда. Это очень помогло всей команде».

Создание MEVN-приложения (Часть 1/2)

Создание full-stack приложения на основе Vue.js и Express.js (+MongoDB)

Мы в нашей CloudFactory всегда стремимся идти в ногу со временем. И даже не смотря на тот факт, что наша фирма является в первую очередь Ruby-компанией, мы любим инвестировать в изучение новых технологий.

У нас стояла задача выбрать фронтенд-фреймворк для будущего full-stack проекта. Выбор стоял между MEAN и MERN, и поскольку фреймворк Vue.js — это что-то новое и интересное, то мы захотели его попробовать и дали зеленый свет MEVN.

Акроним MEVN означает — MongoDB + Express.js + Vue.js + Node.js. Цель этой статьи — показать, как можно создать базовое MEVN-приложение на стеке технологий MongoDB/Express.js/Vue.js/Node.js.

Необходимые требования

— Базовые знания JavaScript
— Концепции REST и CRUD
— Установленные Node.js и NVM
— Установленная MongoDB

Что ожидается получить

— Full-stack приложение MEVN
— CRUD-операции при помощи Express.js
— Подключение к MongoDB (мы будем использовать Mongoose)

В данном руководстве используются следующие версии пакетов:

— MongoDB v3.0.5
— Express.js v4.15.4
— Vue.js v2.4.2
— Node.js v8.5.0

В статье будет описан процесс создания каркаса приложения на стеке MEVN. Работа с базой данных MongoDB будет описана во второй части данного руководства. Исходный код создаваемого приложения расположен в репозитории — MEVN-boilerplate.

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

Развертывание проекта

Для начала создадим директорию с будущим приложением:

В директорию с проектом необходимо создать поддиректорию для фронтенд-части приложения. Для этого воспользуемся консольной утилитой vue-cli фреймворка Vue.js.

Эта утилита устанавливается глобально в систему, через менеджер пакетов npm:

Сгенерируем директорию client при помощи команды:

При запуске данная команда задаст серию вопросов о будущем приложении — имя проекта, имя автора проекта, описание проекта, использование eslint, использование тестов и так далее. При желании можно выбрать значения по-умолчанию путем нажатия клавиши Enter.

Примерный вид процесса выполнения команды vue-cli представлен на изображении ниже:

Примечание переводчика: в моем приложении mevn-application не установлена поддержка unit и e2e тестирования, так как это значительно утяжеляет размер проекта; к тому же возможности тестирования не будут использоваться в данном руководстве.

Теперь необходимо перейти в готовую директорию client и запустить внутри нее команду npm install для установки всех зависимостей проекта, перечисленных в файле client/package.json.

Примечание переводчика: в проекте mevn-application мною использовался менеджер пакетов yarn; это является личным предпочтением и не более того:

Последняя команда yarn run dev запускает локальный сервер по адресу http://localhost:8080/#/ и автоматически запускает браузер по-умолчанию по этому же адресу. В результате в окне браузера будет отображена стартовая страница проекта на Vue.js:

Базовая заготовка фронтенд-части будущего приложения готова. Теперь нужно вернуться немного назад и создать бэкенд-часть приложения на основе Express.js:

Выполним инициализацию серверной части проекта путем запуска команды yarn init. Будет также задана серия вопросов о проекте и в результате сформируется файл package.json.


Также давайте создадим директорию src, внутри которой будут находиться все файлы будущего сервера. В частности, создадим в папке src файл index.js, который будет главным файлом сервера:

Добавим поддержку автоматической перезагрузки сервера при каждом изменении файлов проекта. Для этого воспользуемся популярным пакетом nodemon и добавим его как зависимость для разработки:

В файле server/package.json добавим секцию scripts и пропишем туда команду для nodemon, которая заставит этот пакет отслеживать изменения всех файлов проекта с расширением js внутри директории src:

В результате файл package.json будет выглядеть таким образом:

Теперь проверим работу серверной части приложения — для этого добавим в файле index.js строку console.log(“Hello World”) и запустим файл server/src/index.js командой:

Примечание переводчика: автор оригинальной статьи использует команду npm start, что ничего не меняет.

Если все было сделано правильно, то пакет nodemon успешно запустится и в консоли будет выведено сообщение из файла:

Настройка серверной части

Теперь настало время приступить к настройке сервера. Для этого установим пакет express.js как зависимость проекта:

Затем установим дополнительные пакеты для разработки сервера. Пакет morgan для ведения логов, пакет body-parser для парсинга приходящих со стороны клиента данных, пакет cors для задействования CORS:

В результате файл package.json примет такой вид:

В файле src/index.js выполним подключение установленных пакетов, а также запустим их на выполнение как middleware:

В конце файла src/index.js запустим сервер express на локальном порту 8081. Для этого предварительно создадим в директории src поддиректорию config с файлом конфигурации config.js внутри. Этот файл будет содержать все необходимые переменные и константы для сервера; в частности — номер локального порта:

Содержание файла config/config.js:

Подключим конфигурационный файл config/config.js в главный файл сервера src/index.js:

… и наконец “включим” сервер express:

В итоге на данном этапе разработки сервер express будет выглядеть таким образом:

Серверная часть приложения запущена на порту 8081 (localhost:8081). Фронтенд-часть приложения запущена на порту 8080 (localhost:8080).

Создание первого маршрута

Теперь начинается самое интересное — давайте создадим для сервера первый маршрут (endpoint) и пусть это будет путь до страницы со всеми записями (posts). Для начала мы просто протестируем, правильно ли сервер отвечает на наши запросы:

Если теперь мы “постучимся” на сервер по адресу http://localhost:8081/posts из Postman или из браузера, то в ответ должны получить сообщение:

Отлично — сервер express работает и правильно отвечает на наши запросы!

Настройка связи между frontend- и backend частями

Настало время “связать” обе части нашего приложения. Сделать так, чтобы фронтенд-часть (client) смогла посылать запросы на бэкенд-часть (server) и получать от сервера ответы.

Для этого воспользуемся популярным пакетом axios. Перейдем в клиентскую часть приложения (client) и выполним там установку этого пакета как зависимость проекта:

В директории client/src создадим поддиректорию services с файлом api.js внутри. В этом файле мы подключим библиотеку axios, а затем экспортируем ее из этого файла как функцию с предустановленной настройкой — базовым адресом запроса по-умолчанию. Теперь каждый раз, как axios будет “стучаться” на сервер, он будет “идти” по этому адресу:

В директории services создадим еще один файл PostsService.js, в котором подключим файл api.js как модуль. В итоге внутри модуля PostsService.js мы можем пользоваться готовым заранее настроенным axios. Экспортируем модуль PostsService.js как объект, у которого будет целый ряд методов — каждый метод для определенного случая.

Одним из таких случаев на данный момент у нас является факт получения записей (posts) с сервера. Для этого создадим метод fetchPosts:

На первый взгляд функция fetchPosts может показаться непонятной и обескураживающей. Но на самом деле здесь все просто.

api() — это вызов на исполнение возвращаемой модулем api функции. Эта запись равносильна записи axios.get(“posts”). Передача аргумента “posts” также может вызвать вопрос, но дело в том, что axios умеет “склеивать” адреса, поэтому в итоге получим такой адрес — http://localhost:8081/posts.

В файле клиентских маршрутов src/routes/index.js добавим маршрут для страницы (компонента) PostsPage, на которой будут отображаться все записи (posts), полученные с сервера express:

… и подключим созданный маршрут в индексный файл src/router/index.js маршрутизатора router клиента:

Нам осталось создать сам компонент PostsPage.vue по пути components/pages/PostsPage.vue. Но предварительно мы установим еще один пакет — bootstrap для быстрой и правильной стилизации Vue-компонентов:

Подключать данный плагин будем через систему плагинов. Создадим поддиректорию src/plugins и в ней файл bootstrap.js, отвечающий за настройку самого Bootstrap. В нашем случае ничего настраивать не будем, а просто импортируем установленный bootstrap:

… и затем подключим его в src/main.js:

Примечание переводчика: данная система подключения плагинов была подмечена мною здесь — vue-2-boilerplate.

Осталось создать сам компонент PostsPage.vue ( переводчик данной статьи большой поклонник шаблонизатора Pug , поэтому при создании Vue-компонентов везде и всюду будет такая “экзотическая” разметка):

Что здесь происходит? Во-первых, в шаблоне template компонента определяем две секции — одну section.panel.panel-success для отображения записей (posts,) если они есть (“пришли” с сервера); другую — section.panel.panel-danger, если записей нет.

В скриптах script компонента PostsPage.vue мы подключаем модуль PostsService, чтобы воспользоваться методом fetchPosts:

Затем в компоненте создаем метод getPosts, который через async/await вызовет на исполнение метод fetchPosts объекта PostsService. Результат будет записан в массив this.posts. И наконец мы повесим метод getPosts на хук mounted, чтобы он вызывался на исполнение каждый раз, как компонент PostsPage.vue будет смонтирован в DOM.

Ну и в секции section.panel.panel-success данные из массива this.posts будут “разбрасываться” по таблице через директиву v-for.

Напоследок стоит обратить внимание на использование директивы v-if. В официальной документации демонстрируется сочетание двух директив — v-if + v-else.

Однако, в моем коде прописано другое сочетание — v-if=”posts.length” + !v-if=”posts.length”.

Теперь, если запустить клиентскую часть yarn run dev и перейти в браузере по адресу http://localhost:8080/posts, то мы должны получить такой результат:

Все хорошо — на странице записей нет, потому что мы их не получили с сервера, так и должно быть. Сервер не вернул записи (posts), так как он не подключен к базе данных MongoDB и не может получить их оттуда.

Подключением к базе данных MongoDB и операциями CRUD мы займемся в следующей части данного руководства.

Интеграция платформы Node.js в мобильное приложение iOS

Рубрика: 1. Информатика и кибернетика

Дата публикации: 24.10.2020

Статья просмотрена: 697 раз

Библиографическое описание:

Бушев Ю. В. Интеграция платформы Node.js в мобильное приложение iOS [Текст] // Технические науки в России и за рубежом: материалы VII Междунар. науч. конф. (г. Москва, ноябрь 2020 г.). — М.: Буки-Веди, 2020. — С. 2-5. — URL https://moluch.ru/conf/tech/archive/286/13136/ (дата обращения: 11.11.2020).

Популярность и быстрый рост количества разработчиков на платформе Node.js поставили её в один ряд с самыми популярными языками и WEB фреймворками, такими как PHP и Python. Node.js изначально была разработана как серверная платформа с допущениями, которые не всегда соответствуют модели приложения и уникальным задачам мобильных операционных систем. Несмотря на это, интеграция платформы Node.js в мобильное приложение открывает широкие возможности для JavaScript разработчиков.

В статье мы рассмотрим успешный опыт компании Janea Systems по адаптации JavaScript движка ChakraCore от Microsoft. А также его практическое применение для выполнения Node.js приложений на платформах iOS и Android.

Node или Node.js — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. [1]

Одна из проблем, которая полностью блокирующая любые попытки заставить классический Node.js работать в iOS: Apple не разрешает компиляцию Just-In-Time на iOS (за исключением своего собственного механизма JavaScriptCore). Механизм JavaScript, который поддерживает Node — V8 компании Google, полагается на компиляцию JIT для выполнения JavaScript (даже с добавлением интерпретатора Ignition, V8 все равно должен генерировать код во время выполнения, что не соответствует ограничению iOS).

К счастью, Microsoft опубликовала Node-ChakraCore, форк Node.js, который добавляет поддержку для использования движка ChakraCore вместо V8. Вместо того, чтобы модифицировать исходный код Node.js, чтобы использовать другой движок, как это сделал JXcore, они написали адаптацию поверх ChakraCore, которая по существу имитирует V8 API. Благодаря такому подходу форк намного проще синхронизировать с родительским проектом.

Node-ChakraCore открывает возможность для Node.js и iOS, потому что ChakraCore имеет хорошо оптимизированный, 100 % -ный режим без интерпретатора JIT.

Для демонстрации рассмотрим интеграцию Node.js и React Native приложения. React Native позволяет разработчикам писать мобильные приложения, в первую очередь, с использованием JavaScript, при этом есть возможность простой интеграции нативного исходного кода (iOS и Android). [2]

Предполагая, что у вас установлен Node.js на рабочем компьютере, используем npm для установки утилиты командной строки модуля create-react-native-app, Рис. 1.

Рис. 1. Установка cli утилиты

Команды, изображенные на Рис. 2, создадут каталог с именем AwesomeProject внутри текущего рабочего каталога. Внутри AwesomeProject будет создана исходная структуру проекта и установлены требуемые NPM зависимости.

Рис. 2. Создание нового проекта, при помощи cli утилиты

При помощи команды: “react-native run-ios” мы можем запустить наше приложение в эмуляторе iOS. Далее, добавим NPM модуль “nodejs-mobile-react-native” в зависимости проекта и установим его нативные библиотеки (Рис. 3).

Рис. 3. Интеграция с модулем Node.js

После установки “nodejs-mobile-react-native” NPM, внутри приложения будет создан каталог: “nodejs-assets/nodejs-project”. Эта директория будет упакована вместе с вашим приложением. Фоновый проект будет запущен со входной точкой — main.js. По умолчанию директория содержит файлы sample-main.js и sample-package.json содержащие образец проекта (echo client-server). Для теста необходимо переименовать sample-main.js в main.js и sample-package.json в пакет package.json.

В итоге файл main.js будет выглядеть следующим образом (Рис. 4):

Рис. 4. Пример простого приложения (эхо сервера) на Node.js

На стороне React Native приложения, изменим файл App.js, как показано на Рис. 5. Непосредственно после загрузки основного компонента приложения, будет создан дополнительный поток для выполнения Node.js. Также, добавим кнопку, по клику на которую будет происходить отправка сообщения через канал, реализованный в библиотеке. Для получения ответа от Node.js приложения, установим обработчик событий на “nodejs.channel”.

Рис. 5. App.js — основной файл мобильного приложения

После запуска приложения, нажмем на кнопку “Message Node”, в ответ мы получим и выведем на экран телефона сообщение “Hi there!”, а также версии стандартных модулей платформы Node.js. Результат выполнения приложения представлен на Рис. 6.

Рис. 6. Демонстрация выполнения приложения в iOS эмуляторе

Конечно, Node.js также можно добавить в любое обычное приложение iOS, написанное в Objective-C или Swift. Для этого нужно слинковать проект с библиотекой Node.js и добавить исходный код JavaScript в XCode проект. В приложении, при старте, нужно создать поток и запустить Node.js. Теперь у вас есть возможность использовать встроенные модули Node.js и экосистему NPM.

  1. Node.js. // Википедия. URL: https://ru.wikipedia.org/wiki/Node.js (дата обращения: 21.10.2020).
  2. React Native. // Facebook: A framework for building native apps using React. URL: https://facebook.github.io/react-native (дата обращения: 21.10.2020)

Похожие статьи

Проектирование мобильных приложений и облачных сервисов

Основные термины (генерируются автоматически): NPM, JIT, приложение, API, PHP, WEB, исходный код, мобильное приложение.

CSS стили; JAVASCRIPT коды; флеш приложения. Разработка мобильного приложения для таксатора.

Автоматизированная среда оценки усвоения студентом учебного.

Основные термины (генерируются автоматически): NPM, JIT, приложение, API, PHP, WEB, исходный код, мобильное приложение.

Интеграция платформы Node.js в мобильное приложение iOS. По умолчанию директория содержит файлы sample-main.js и.

Opinion monitoring and analysis in social networks | Статья в журнале.

NPM, JIT, приложение, API, PHP, WEB, исходный код, мобильное приложение. Интеграция информационных систем на основе стандартов XML.

Облачные интегрированные среды веб-разработки

Основные термины (генерируются автоматически): NPM, JIT, приложение, API, PHP, WEB.

Интеграция платформы Node.js в мобильное приложение iOS. Для этого нужно слинковать проект с библиотекой Node.js и добавить исходный код JavaScript в XCode проект.

Внедрение системы мониторинга метрик в серверное приложение.

Рис. 4. Фрагмент исходного кода для отправки данных на Zabbix сервер.

Рис. 4. Схема взаимодействия мобильного приложения с корпоративной информационной системой.

Подходы к архитектурному проектированию вебприложений

Далее приведён пример кода простого приложения с монолитной архитектурой, который располагается на сервере, который выводит ту или иную страницу в зависимости от пришедшего на сервер запроса. require_once(«./utils/get_server_params.php«)

Обзор основных технологий контент-менеджмент системы Adobe.

Архитектура Jackrabbit состоит из слоя контент приложения, API и слоя реализации контент репозитория.

Маркетинг и публикация мобильных приложений на примере.

Joomla! — это бесплатная, с открытым исходным кодом система управления контентом для создания.

Разработка Android фреймворка для аспектно-ориентированного.

Исходные коды фреймворка опубликованы в открытом репозитории GitHub.

Сорока В. Г., Сабурова В. И., Фатеев Д. С. Современные подходы к разработке мобильных приложений для платформы Android.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL