Портал магистров
Резюме Биография Реферат Библиотека Ссылки Отчет о поиске Индивидуальный раздел
Резюме Биография Реферат Библиотека Ссылки Отчет о поиске Индивидуальный раздел
ДонНТУ  

MERN stack при разработке современных web приложений

Введение

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

Если есть что-то, что связывает эти технологии вместе, это JavaScript и его преемники (ES6, TypeScript, JSX и т. д.) вместе с форматом данных JSON. Дни, когда роль JavaScript была ограничена добавлением визуальных эффектов, таких как мигающие заголовки или всплывающие окна, прошли. Разработчики теперь используют JavaScript для реализации пользовательского интерфейса, а также логики приложения и даже для доступа к базе данных. Существует два доминирующих стека web приложений на JavaScript: MEAN (MongoDB, Express, Angular, Node.js) и MERN (MongoDB, Express, React, Node.js). В этом разделе я хочу рассказать именно о втором из них.

Mern stack

Рисунок 1 – Mern stack

В конце раздела будет преведен код Todo приложения, написанного с использованием MERN стека.

1. Определение. Сферы применения

Сразу скажу, что большая часть того, что здесь написано применима и к MEAN стеку (просто замените React на Angular). MERN - это набор компонентов с открытым исходным кодом, которые вместе обеспечивают сквозную структуру для создания динамических веб-приложений; начиная с верхней части (код, выполняемый в браузере) до нижней части (база данных). Стек состоит из:

Общей вещью в стеке MERN является JavaScript – каждая строка кода, которую вы пишете, может быть на одном языке. Вы даже получаете доступ к базе данных с помощью собственного идиоматического JavaScript/Node драйвера. Что подразумевается под идиоматическим? Использование драйвера кажется естественным для разработчика JavaScript, поскольку все взаимодействие выполняется с использованием знакомых понятий, таких как объекты JavaScript и асинхронное выполнение с использованием функций обратного вызова или обещаний.

1.1 MongoDB

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

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

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

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

1.2 Express JS

Express-это фреймворк, который выполняет JavaScript код серверной части вашего приложения. Экспресс подключается как модуль в среде Node JS. Express может обрабатывать маршрутизацию запросов к разным частям вашего приложения (или к различным приложениям, работающим в одной среде). Вы можете запустить полную бизнес-логику приложения в Express и даже создать окончательный HTML, который будет отображаться браузером пользователя. С другой стороны, Express можно использовать для простого предоставления REST API вашему интерфейсу приложению, то есть доступа к необходимым ресурсам, например к базе данных.

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

1.3 React

Альтернативой Angular js является React (иногда называемый ReactJS) - библиотека JavaScript, разработанная Facebook для создания интерактивных/реактивных пользовательских интерфейсов. Как и Angular, React разбивает интерфейсное приложение на компоненты. Каждый компонент может содержать свое собственное состояние, а родитель может передавать свое состояние вниз к своим дочерним компонентам, и эти компоненты могут передавать изменения обратно к родителю с помощью функций обратного вызова.

Компоненты React обычно реализуются с помощью JSX-расширения JavaScript, которое позволяет встроить в код синтаксис HTML:

JSX syntax

Рисунок 2 – Пример синтаксиса JSX

React чаще всего выполняется в браузере, но он также может быть запущен на внутреннем сервере в Node.js, или как мобильное приложение с помощью React Native. Так что вы должны использовать Angular 2 или React для вашего нового веб-приложения? Быстрый поиск Google найдет вам некоторые довольно глубокие сравнения двух технологий, но в целом, Angular 2 немного более мощный, в то время как React легче для разработчиков, что позволяет быстрее освоиться и начать его использовать. В течение нескольких последних лет React быстро набирает обороты.

1.4 Node JS

Node js-это среда выполнения JavaScript, которая запускает ваше серверное приложение (через Express). Node js основан на движке JavaScript V8 от Google, который используется в браузерах Chrome. Он также включает в себя ряд модулей, которые обеспечивают функции, необходимые для реализации веб – приложений, включая сетевые протоколы, такие как HTTP. Сторонние модули, включая драйвер MongoDB, могут быть установлены с помощью инструмента npm.

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

2. Разработка приложения

В данном подразделе я хочу поделиться собственным опытом разработки, а также создать небольшое Todo приложение, используя MERN stack. Web Разработкой я занимаюсь около двух лет. Как и все веб разработчики, я начинал с HTML и CSS, затем стал осваивать JavaScript. Мое профессиональное становление как JavaScript разработчика началось полтора года назад. Мне приходилось создавать, дорабатывать веб сайты, писать новый интерфейс и различные плагины к ним. Все это время я использовал базовые технологии, и довольно успешно. Но в настоящее время они достаточно быстро развиваются и хороший разработчик должен развиваться вместе с ними. Я понял, что необходимо двигаться дальше и изучать backend. К счастью, JavaScript сейчас позволяет создавать комплексные продукты, не задействую при этом другие языки программирования, такие как PHP, для написания серверной части веб приложения. Именно поэтому я выбрал MERN стек для дальнейшего изучения этой сферы.

Ну а теперь перейдем к созданию самого приложения. Сразу оговорюсь, что будут продемонстрированы только основные блоки кода, чтобы показать принцип без углубления в технологии. Как я писал ранее, в качестве базы данных будем использовать MongoDB. Серверную часть мы напишем на Node Js с использованием Express.

Server code

Рисунок 3 – Серверная часть

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

Клиентская часть на React будет выглядить следующим образом.

Client code

Рисунок 4 – Клиентская часть

В начале также импортируются стандартные компоненты для работы с React. Затем мы импортируем наши собственные компоненты, которые рендерят отдельные страницы нашего приложения. Используя React Router, мы отображаем пользователю необходимые компоненты при переходе на соответствующие url.

Сразу оговорюсь, что приложение сделано в демонстративных целях, поэтому валидация вводимых данных не предусмотрена.
Протестировать приложение можно по данной ссылке: https://mern-stack-todo-app.herokuapp.com/

3. Обзор аналогичных разделов

Мною были проанализированы аналогичные разделы выпускников магистратуры предыдущих лет. Студенты описывали свой опыт веб разработки, создание приложения на React или с использованием другого языка и фрейворка, к примеру Python Django. Ниже приведен список наиболее интересных работ магистров:

4. Список источников