What do you MEAN? или введение в Fullstack JavaScript

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

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- фреймворк

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

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

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)

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) и множеством возможностей веб-страниц

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() {} }

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)

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

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

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

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” }}

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/)

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

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”

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

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/

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) - Отлично документирован, много примеров, большое сообщество

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

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

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

Альтернативы 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/)

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

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)

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) :)

- позволяет описать и стандартизировать модели данных через 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

Example: Small Mongoose Model “SMS”

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

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

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

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

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

Попса в 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

- 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

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

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/)

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

What do you MEAN? или введение в Fullstack JavaScript

More Related Content

What's hot

Similar to What do you MEAN? или введение в Fullstack JavaScript

What do you MEAN? или введение в Fullstack JavaScript

Editor's Notes