Vasiliy Telyatnikov, Senior Fullstack JavaScript Developer at GBooking.ru, tell about MEAN stack

1. What do you MEAN? ?
или введение в Fullstack JavaScript
Vasiliy Telyatnikov
Fullstack JavaScript Developer at
May 2017, Petrozavodsk

3. Node.js
(https://nodejs.org/) V8-
based modular web
platform
MongoDB
(https://www.mongodb.com/)
документо-ориентированная
база данных, BSON-формат,
запросы в стиле JavaScript
Express.js
(http://expressjs.com/)
фреймворк для API
(routing)
Angular.js
(https://angular.io/)
клиентский SPA-
фреймворк

4. The MEAN Stack
User Computer
desktop, mobile
Web Browser
SPA
single-page
web
application
Cloud Server / Docker Container
App
REST
API
MongoDB
Driver
Same Server
/ Docker
Container /
Cluster
MongoDB

6. The Basis: JavaScript + JSON
JavaScript - eдиный язык для backend / frontend
(https://developer.mozilla.org/ru/docs/Web/JavaScript)
JSON (JavaScript Object Notation) - единый формат передачи и хранения
данных (http://json.org/)
* Если кому-то не хватает комментариев в JSON или надоело ставить кавычки - используйте json5

7. What is JavaScript?
- lightweight
- interpreted or JIT-compiled
- with first-class functions
- prototype-based (__proto__)
- multi-paradigm:
- OOP (Object-Oriented) - all is Object
- Imperative (run by parsed)
- FP (Functional Programming)
Best known as the scripting language
for Web pages, but it's used in many
non-browser environments as well.
(https://developer.mozilla.org/en-
US/docs/Web/JavaScript/About_JavaSc
ript)

8. Short About JS
- 1я версия создана Брендоном Эйхом для браузера Netscape в 1995 г.
- Описывается стандартами ECMAScript (https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Language_Resources) в разных редакциях:
- ECMA-262 - Language Specification (весь синтаксис языка), since Jun 1997
- ECMA-402 - Internationalization API Specification (Unicode table, datetime format, timezones,
currency, etc.), since Dec 2012
- Web APIs (https://developer.mozilla.org/en-US/docs/Web/API) - браузерные
API для работы с DOM-деревом
(https://developer.mozilla.org/ru/docs/DOM/DOM_Reference) и множеством
возможностей веб-страниц

9. Top Modern ES6 Features
- Multi-line template literals: console.log(`Hello, ${name}!
${message}
${sign}`);
- Default args: function img(src, width = 100, height = 100) {/*...*/}
- Destructuring: let [first, second] = array; const {width, height} =
options;
- Arrow functions: const map = (data) => data.map(s => s.value);
- class Me extends That { constructor() { super() } method() {} }

10. JavaScript’ом единым...
- Один язык программирования для разработки на backend и frontend
- Возможность использования одних и тех же библиотек на backend и
frontend, как сторонних, так и внутрикорпоративных - переход от
стандартов к shared codebase
- ад при импорте данных в JSON из C#-приложения (Unity3D) в Angular и хранением в
MongoDB
- проблемы при сохранении данных в JSON из Angular.js-приложения в RubyOnRails
backend, работе с ними в RoR и передаче обратно в Angular.js
- Изоморфность (pre- и full-рендеринг на сервере для SEO и better UX)

11. Зависимости, зависимости, зависимости...
- использование сторонних библиотек ускоряет
разработку (jQuery, Angular, custom libraries)
- библиотеки хранятся во внешних репозиториях
(github, CDN) и имеют разные версии (иногда
совершенноневозможноабсолютно несовместимые)
- проблемы с зависимостями эффективно решают
пакетные менеджеры:
- Сomposer in PHP
- Rubygems in Ruby

13. All-in-NPM
NPM (https://npmjs.com/) - пакетный менеджер зависимостей для управления
3rd-party libraries в Node.js:
- Устанавливается обычно вместе с Node.js
- Любой проект описывается в специальном файле package.json
(https://docs.npmjs.com/files/package.json): npm help json
- Пакеты устанавливаются в `./node_modules` или глобально (npm i -g)
- Простая установка модулей и обновление зависимостей
- Поддержка скриптов запуска и хуков: npm start, npm postinstall

14. How to NPM?
1) Инициализация проекта
2) Установка зависимостей
3) Результат

15. NPM Scripts
(https://docs.npmjs.com/misc/scripts)
{ “start”: “node ./app.js”,
“install”: “bower install --allow-root”,
“postinstall”: “node-pre-gyp install --fallback-to-build”,
“test”: “NODE_ENV=test ./node_modules/.bin/mocha”,
“dependencies”: {
“mocha”: “3.4.1”
}}

17. Node.js
- Событийно-ориентированная система (Reactive Programming)
- Основан на Chrome V8 JavaScript engine (https://developers.google.com/v8/)
- Не-блокирующее взаимодействие с устройствами ввода-вывода (I/O over
pipes)
- Поддерживаются addon modules путем сборки в gyp
(https://github.com/nodejs/node-gyp) (например, драйвер к базе данных, C-
библиотека, драйвер к микроконтроллеру)
- Создан в 2009 Райаном Далом, развивается под эгидой Node.js Foundation
(https://nodejs.org/en/foundation/)

18. Example: Node.js vs PHP (Ruby)
(https://habrahabr.ru/post/140066/)

19. Node.js Process Management
- PM2 (http://pm2.keymetrics.io/) - гибкий pm с аналитикой Keymetrics:
pm2 start|stop|reload|kill processes.json
{"apps" : [{
"script": "./api.js", "name": "api",
"instances" : 4, "exec_interpreter": "/home/vasiliy0s/.nvm/versions/node/v0.12.9/bin/node",
"exec_mode" : "cluster", ”watch": true
}]}
- forever (https://www.npmjs.com/package/forever) - простая надежная CLI
- он вам nodemon (https://www.npmjs.com/package/nodemon) - для
development, “simply wraps your code under development”

20. Workers
Проблема любого highload - разделение нагрузки по серверам на задачи:
- sms/email-рассылка
- сервер авторизации
- сервер загрузки объемных файлов
- подсчет статистики, и т.д.
node ./workers/stats-server.js
node ./workers/notifications-server.js
Node.js позволит использовать одну и ту же программную базу (models, libs,

21. Node.js version management
Много проектов - много версий - один рабочий компьютер на всю жизнь
- NVM - Node Version Manager (https://github.com/creationix/nvm)
- ‘n’ package (https://www.npmjs.com/package/n)
- Docker: FROM node:7 https://hub.docker.com/_/node/

23. Express.js
Простой и быстрый HTTP-фреймворк для Node.js (http://expressjs.com/)
- Отвечает за API-роутинг
- Гибкий и расширяется за счет бесчисленных middleware
- Поддерживает разные render engines:
- EJS, Handlebars, Hogan, Jade/Pug (defaults), Twig, Vash - для генерации HTML
- Less, Stylus, Compass, Sass - для генерации CSS
- Высокая производительность (в т.ч. для highload)
- Отлично документирован, много примеров, большое сообщество

24. What Middleware Does?
Приложение Express, по сути, представляет собой серию вызовов функций
промежуточной обработки:
- Выполнение любого кода
- Внесение изменений в объекты запросов (req) и ответов (res)
- Завершение цикла “запрос-ответ” - res.status(200).send(‘OK’)
- Вызов следующей функции промежуточной обработки из стека - next(err)
HTTP request
HTTP response
Express.js App
Matched /route
cookie
parser
body
parser
logger callback
cookie
parser
logger

25. Example: Express.js Regular Middlewares
app.js: routes/index.js:

26. Example:
Express.js Routes
Типовая структура приложений на
Express.js:
- Entrypoint в ./app.js
- Все контроллеры в ./controllers
- Все модели c бизнес-логикой в
./models
- Все шаблоны во ./views

27. Альтернативы Express.js
- Koa (http://koajs.com/)
- Hapi (https://hapijs.com/)
- Strapi (http://strapi.io/)
- Sails (http://sailsjs.com/) (а-ля Ruby on Rails)
- Restify (http://mcavage.me/node-restify/)

29. MongoDB
- NoSQL == несвязанность данных:
- коллекции вместо таблиц
- несвязанные документы вместо строк, schema-less
- базы и коллекции создаются “на лету”
- данные любого типа
- BSON (http://bsonspec.org/) - надмножество JSON + регулярные
выражения, двоичные данные и даты
- индексы, быстрый поиск

30. GridFS
Возможность хранить файлы в базе данных (images, PDFs, XLSXs, etc.)
(https://docs.mongodb.com/manual/core/gridfs/)
- GridFS automatically chunk files (default to 255 kB) - BSON file max size is
16 MB
- Uses two collections to store files:
- file chunks
- metadata
- Storing like regular mongoDB document & allowed for queries (via mongodb-
native-driver or mongofiles CLI tool)

31. MongoDB ODMs
ODM - связывание коллекций и JS-моделей с использованием схемы и
добавлением ООП-методов (ORM в RDBMS)
- Mongoose.js (http://mongoosejs.com/) - schemas, methods, etc.
- Mongorito (http://mongorito.com/) - middlewares, generators instead of
promises: yield post.save();
- others like ‘Mongolia’ (https://www.npmjs.com/package/mongolia) :)

32. - позволяет описать и стандартизировать модели данных через UserSchema
= new mongoose.Schema({/*...*/});
- всегда добавляет _id;
- позволяет хранить логику в модели в виде методов модели и коллекции
- имеет chain interface:
User.find(query).select(‘age’).limit(1).skip(num).then(/**/);
- помогает связывать данные: User.find(query).populate(‘articles
followers likes’);
- схемы для subdocuments: Schema({ likes: [LikeSchema] });
Mongoose

33. Example:
Small
Mongoose
Model “SMS”

34. Нужен GUI? Держи Robomongo!
https://robomongo.org/
сохраняемые запросы;
редактирование JSON;
кроссплатформ;
сохраняемый коннект к
разным базам, ssh
тоннель
100500+ других на
https://docs.mongodb.com/ecosystem/t

36. Angular.js
- Open-Source JS framework, разработан в Google + сообщество
- MVC паттерн, позволяющий разделить бизнес-логику (императивное
программирование) и представление (декларативное
программирование) для более удобного тестирования и поддержки
- Реализовано двустороннее связывание данных (two-way data binding),
синхронизирующий данные в JS-коде (Model) <=> DOM-дереве (View)
- Хорошая поддержка e2e-тестирования из коробки (по сценариям)
- Модульная архитектура (angular.module(‘app’)) + паттерн внедрения
зависимостей (Dependency Injection) делают фреймворк гибким и
расширяемым - легко подключать сторонние модули и шарить код между

37. Angular.js
- Директивы - свои кастомные HTML-компоненты (напр, <calendar />)
- Шаблоны - <h1>Hello, {{ name }}!</h1>
- Много встроенных директив: ngModel, Repeat, ngIf, ngBind…
- Встроенный HTTP-клиент: $http.get(‘/users’).then(/**/)
- Встроенная поддержка <form><input ng-model=”name”/ >…</form>
- Фильтры вывода данных (напр., форматирование)
- Локализация (встроенная - для фильтров)
- Большое коммьюнити, подробная документация, много курсов

38. Angular.js
- Angular 1.x - https://angularjs.org/
- Angular 2.x, 4.x - https://angular.io/ (TypeScript “почти” обязателен)
- Дополнительные официальные модули:
- ngRoute - роутинг c поддержкой HTML5 mode (как обычный веб-сайт)
- ngSanitize - безопасная фильтрация вывода данных: username = “<script src=’...’>”
- ngResource - удобная работа с REST API (редко используется)
- ngAnimate - CSS-анимации
- ngCookies - работа с cookies

39. Dependency Injection
Архитектурный паттерн, предоставляющий возможность внедрять
зависимости в программные компоненты (например, $http-сервис в controller)

40. Попса в Angular 1.x
- Angular Translate (https://angular-translate.github.io/) - комплексная
локализация в PO-файлах (или JSON/JS)
- ng-file-upload (http://angular-file-upload.appspot.com/) - загрузка файлов на
сервер
- AngularUI (https://angular-ui.github.io/) - много разных компонентов, в т.ч.:
- UI-Router (https://ui-router.github.io/) - state machine + вложенные urls
- UI Bootstrap (https://angular-ui.github.io/bootstrap/) - директивы для Bootstrap
- angular-ui-tree (https://angular-ui-tree.github.io/angular-ui-tree/) - UI Tree
implementation

41. Example:
Angular 1.5
App

42. Example:
Angular 2.x App

43. - React.js (https://facebook.github.io/react/):
- библиотека от Facebook, требует много сторонних пакетов (например, для http-
запросов)
- Component-Based, Virtual DOM => быстрый
- State-based (Flux-архитектура): Redux (http://redux.js.org/)
- JSX-синтаксис: render() { return <h1>Hello, {this.state.name}</h1>; }
- Vue.js (https://vuejs.org/) - финансируется Alibaba:
- легкий в освоении и быстродействии
- .vue-файлы как компоненты содержат в себе JS+HTML+CSS
Альтернативы Angular

44. На закуску

45. Server-side Rendering
- Решает проблему SEO для SPA
- Angular Universal for Angular 2+ apps https://universal.angular.io/
Web
Crawler
(Google,
Yandex,
etc.) Render Server
Render App
Phantom.js
SPA
(Angular)
Backend
MongoDB
(Main
Database)
MongoDB
(HTML
Cache
Database)
Node.js
Express
App
API

47. JS everywhere? Yes, babies!
- Desktop
- Electron для приложений (https://electron.atom.io/) под Windows, OS X, Linux
- Mobile
- Adobe PhoneGap (http://phonegap.com/) - упаковка SPA в iOS / Android / WindowsPhone-
приложения, с готовыми модулями ngCordova (http://ngcordova.com/)
- NativeScript (https://www.nativescript.org/) - без web-views (быстрее), любит TypeScript
- IoT
- Espruino - JavaScript Interpreter for Microcontrollers (https://www.espruino.com/)
- Tessel - платформа со своим железом для кодинга на node.js (https://tessel.io/)

48. “Any application that can be written in
JavaScript, will eventually be written in
JavaScript”, Jeff Atwood

49. Fin