Igor Konovalov
JS developer with a passion. Currently working as a senior software engineer at Epam
MV* Frameworks in JAVASCRIPT
Содержание:
-
Зачем?
-
Как?
-
Чем?
-
Статистика
Зачем?
- Компонентный подход
- Комьюнити
- Огромный набор библиотек для решения самых разных задач
- Компоненты в открытом доступе (material design для React и др.)
- Проще структурировать код
- Расширения браузера облегчают дебаг
- Подходят для SPA
самая главная причина ...
синхронизация состояния приложения (модели данных и событий) и его представления
Компонентный подход
MVC
-
Основная цель применения этой концепции состоит в отделении бизнес-логики (модели) от её визуализации (представления, вида).
-
Концепция MVC была описана Трюгве Реенскаугом в 1978 году
-
Стив Бурбек реализовал шаблон в Smalltalk-80
Manipulates
View
Model
Controller
Модель хранит данные и логику
отвечает за отображение данных модели пользователю, реагируя на изменения модели
интерпретирует действия пользователя, оповещая модель о необходимости изменений
User
Sees
Updates
Updates
Module - View - Controller
MVC - фреймворки
-
Spring (Java) - первый релиз 1 Октября 2002;
-
Django (Python) — первый релиз 21 Июля 2005;
-
Ruby on Rails — первый релиз 13 Декабря 2005;
-
Symphony (PHP) — первый релиз 22 Октября 2005;
MVVM
Model - View - ViewModel
View
View Model
Model
привязка данных
команды
получение данных
обновление модели
модель представления связывает модель и представление через механизм привязки данных. Если в модели изменяются значения свойств, идет изменение отображаемых данных в представлении
Фреймворк или библиотека?
ваш код
ваш код
Библиотека
Фреймворк
Node.js — Первая версия 27 Мая 2009
-
Привлекло к JavaScript внимание серьезно настроенной общественности
-
Облегчило разработку сложных продуктов, появились первые сборщики
-
NPM - все пакеты в одном месте и это стало удобно
Историческая справка
JS фреймворки (библиотеки)
Express.js - 16 Ноября 2010
Backbone.js - 12 Октября 2010
AngularJS - 20 Октября 2010
Ember.js - 8 Декабря 2011
React - 29 Мая 2013
Vue - Февраль 2014
Angular - 14 Сентября 2016
(март 2013)
Facebook: проблема с нотификациями
На самом деле facebook не придумал ничего нового, а сделал MVC нормально, назвав по другому
Ключевые особенности
-
Библиотека для создания пользовательских интерфейсов
-
Высокая производительность с Virtual Dom
-
Масштабируемость
-
JSX - (давайте скрестим ужа с ежом?)
-
React Native и Preact
-
Поощряет функциональный паттерн разработки
-
Код разбивается на юниты и легко тестируем
-
Flux архитектура (с/без Redux)
-
Огромная экосистема и комьюнити
-
Применяется на больших production проектах
Virtual DOM
Кто использует React
Пример кода
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const Greeting = ({ greeting }) => (
<div className="App">
<h1>{greeting}</h1>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<Greeting greeting="Hello world!" />, rootElement);
<div id="root">
<div class="App">
<h1>Hello world!</h1>
</div>
</div>- Функциональный подход
- JSX
- CSS in JS
- Экосистема и комьюнити
- Поддержка от Facebook
- Flux архитектура
- Огромное количество библиотек в открытом доступе
- Достаточно легкая миграция на старшую версию c react-codemod
- Компоненты - чистые функции удобно и легко тестировать
- Удобно дебажить ошибки
- Preact и React Native
- Функциональный подход
- JSX
- CSS in JS
- Только View из коробки
- Требует знания webpack, умения найти нужную библиотеку для всего, а потом подружить их друг с другом
- React из которого убрали все что можно убрать - 3 kb вместо 150
- Так же работает с VirtualDom
- Очень быстрый
- Большинство пакетов, которые подходят к React можно использовать и в Preact
- Еще больше проблем с зависимостями и ручной настройкой всего
Усложненный пример кода с Preact
export default class Stars extends Component {
async componentDidMount() {
let stars = await githubStars(this.props.repo);
this.setState({ stars });
}
render({ repo }, { stars=0 }) {
let url = `//github.com/${repo}`;
return (
<a href={url} class="stars">
⭐️ {stars} Stars
</a>
);
}
}import Stars from './stars';
render(<Stars repo="developit/preact" />, document.body);Обычно проблемы с Реактом звучат как что то вроде:
"React же для нас — это сборник хороших идей, но из-за отсутствия многих функций из коробки, зачастую каждый лепит из него своего «монстра» из возможностей, предоставляемых сообществом"
Angular
Не путаем с Angularjs
"Enterprise" фреймворк
M.E.A.N.
-
M - MongoDb
-
E - Express
-
A - Angular
-
N - Node.JS
Знакомое OOP
С TypeScript код начинает выглядеть подозрительно похоже на Java.
В теории облегчает рефакторинг при использовании SOLID
Ключевые особенности
- Библиотека для написания клиентских приложений
- Код как правило пишется на TypeScript, хотя можно писать и на чистом JavaScript (ES6+) - широко использует Class, Template строки
- Использует похожий на HTML язык для шаблонов (ng-...)
- Мощные возможности для двусторонней привязки данных к шаблону
- Angular 2+ полностью переписан с нуля (после проблем с производительностью в AngularJS - магия привязки форм)
- Директивы для изменения стандартного поведения HTML
- Реактивное программирование с RxJS
- Dependency Injection из коробки
- По умолчанию инкапсулирует стили для компонента
Кто использует Angular?
Пример кода
@Component({
selector: 'hello-world'
})
@View({
template: '<div>Hello {{name}}</div>'
})
class HelloComponent({
name: 'World'
})
bootstrap(HelloComponent);html:
<hello-world></hello-world>
=> <div>Hello World</div>- Фреймворк, экосистема из коробки
- Экосистема и комьюнити
- Поддержка от Google
- Стандарты кода из коробки
- Типизация TypeScript
- Гибкая работа с HTML (создание кастомных тегов, изменение поведения существующих)
- RxJs
- Dependency Injection позволяет вмешиваться в поведение почти всего
- Модульность
- Документация не ОК
- Порог входа сложен
- Большое количество кода на выходе
- TypeScript
- Переезд с AngularJS на Angular - это боль
- Dependency Injection из библиотеки усложняет тестирование
- Без настройки билда может весить 600кб
React vs Angular - learning curve
"With angular you learn a lot of Angular stuff and learn to do stuff the “Angular way”, on the other hand, with React, you write a lot of JavaScript and learn JavaScript."
VUE
Прогрессивный фреймворк
поддержку Vue можно добавить в уже существующий проект, благодаря чему его функциональность будет значительно расширена. И это отличает его от других фреймворков
Ключевые особенности
-
Прогрессивность, хорошо подходит для проектов, где нужно рефакторить (JQuery), в целом очень просто интегрируется
-
Создавался одним человеком (Эван Ю) под влиянием Angular - с целью выкинуть все лишнее и взять лучшее
-
20! Кб в минимальной версии
-
Простой в освоении
-
Поддерживает основные актуальные библиотеки в соответствии с ядром
-
Нет большой корпорации, которая бы "прикрывала" разработку - изначально средства были собраны на Patreon
-
Очень хорошо подходит там, где нужно использовать анимацию/svg
Эван Ю:
React kind of attracts a lot of functional oriented programmers. Vue attracts a lot of people who’d prefer the more classic HTML, CSS & JavaScript model of development. And Angular attracts a lot of people coming from a Java or C# enterprise background.
Кто использует Vue?
Usecase
Миграция с jquery (легаси)
Код не требуется переписывать - Vue очень просто ввести постепенно, использую его только там где надо
""
""
""
- Легко интегрировать в уже существующий проект
- Официальные библиотеки
- Достаточно хорошо работает из коробки, не требуя дополнительного вмешательства
- Не поддерживается транснациональной корпорацией
- Нужно изучать достаточно много vue-specific штук
- Маленькое сообщество по сравнению с React или Angular
- Не поддерживается транснациональной корпорацией
- Сложность с переиспользованием и расширением компонент с HOC или миксинами
- Нет очевидных best practices
Polymer
Веб компоненты!
Ключевые особенности
-
Библиотека для создания веб - приложений с использованием технологии Web Components
-
Разрабатывается Google и опенсорс комьюнити
-
композиционные возможности реализованы не с помощью мета-платформы и js-абстракций поверх обычного DOM, а на уровне самого браузера
-
Можно использовать вместе с практически любой библиотекой или фреймворком - можно писать по настоящему переиспользуемый код
Что это за зверь - Web Components?
Сочетание браузерных технологий, позволяющий инкапсулировать часть страницы вместе с логикой в кастомный компонент
-
Custom Elements
-
Shadow DOM
-
ES Modules
-
HTML Template
Кто использует Polymer?
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'
class HelloElement extends PolymerElement {
static get template() { return html`
<style>
/* Local DOM CSS style */
</style>
<!-- Local DOM -->
Hello {{name}}!
`; }
static get is() { return 'hello-element'; }
static get properties() {
return {
name: {
type: String
}
/* Element properties */
}
}
/* Custom methods */
}
window.customElements.define(HelloElement.is, HelloElement);<hello-element name="World"></hello-element>- Реальное переиспользование компонент - как без так и с любой библиотекой/фреймворком
- Опирается на нативное поведение браузера, без дополнительных абстракций
- Shadow DOM и HTML Templates - очень перспективные технологии
- Опирается на до сих пор сырые реализации технологий, отличающихся от браузера к браузеру
- Для IE придется использовать полифилы, и много
- Документация не ок
- Организация больших приложений может вызывать боль без дополнительных библиотек
- Пока непонятно, что с серверным рендером и как робот гугла будет парсить кастомные теги
Honorable mentions
A framework for
ambitious web developers
- Почетный один из первых фреймворков до сих пор поддерживаемый разработчиками
- Ember Data library
- Ember Addons
- Автогенерация тестов
- JQuery все еще активно используется, многие аддоны для Ember - только обертки jquery плагинов
- Очень долгий старт (разработчики в linkedin говорят о 20 минутах)
- Сложный вход
- Сложная кастомизация
Статистика
Количество скачанных пакетов в месяц
Ember и Polymer настолько малы, что не видны на этом графике
Размер (gzipped)
| Ember 2.2.0 | 111K |
| Ember 1.13.8 | 123K |
| Angular 2 | 111K |
| Angular 2 + Rx | 143K |
| Angular 1.4.5 | 51K |
| React 15.3.0 + React DOM | 43K |
| Vue 2.4.2 | 20.9K |
| Inferno 1.2.2 | 20K |
| Preact 7.2.0 | 4kb |
Предложения по работе
Indeed.com - распределение по 60к вакансиям
Март 2018
Stack Overflow trends:
Github
Спасибо за внимание!
MV* Frameworks
By Igor Konovalov
MV* Frameworks
Current state of modern and not-so modern frameworks (2019 Jan)
