Яндекс

Какие есть типы в JS?

• Number
• String
• Boolean
• Undefined
• Null
• Object
• Symbol

Что возвращает typeof?

• Number → number
• String → string
• Boolean → boolean
• Undefined → undefined
• Null → object
• Symbol → symbol
• Object → object
• Function → function

Как проверить тип переменной t?

• Number, String, Boolean → typeof t
• undefined, null → t === undefined, null
• Массив → Array.isArray(t)
• Объект → typeof t, Object(t) === t

Что будет в консоли?

var i = 10;
var array = [];

while (i--) {
    array.push(function() {
        return i + i;
    });
}

console.log([
     array[0](),
     array[1](),
])

[-2, -2]

Как вывести yandex вызвав функцию fn

var obj = {x: 'yandex'}
function fn() { console.log(this.x); }

fn.call(obj);

fn.apply(obj);

fn.bind(obj)();

Зачем нужны паттерны?

• Не нужны для маленького приложения
• Эффективно решать однотипные проблемы
• Для быстрого понимания кода

Состав компонент

• Model
• View
• Клей (Controller, Presenter, Router)

Серверный рендеринг

• Только сервер генерит html
• Быстрая шаблонизация и кэширование
• Отсутствие динамики
• Актуальная серверная модель
• Сокрытие бизнес-логики

Клиентский рендеринг

• Долгая первоначальная отрисовка страницы
• Не рабочий сайт при отключенном JS
• Интерактивность
• Открытая бизнес-логика
• Синхронизация модели

Клиент-серверный рендеринг

• Быстрая первоначальная загрузка
• Работает при отключении JS
• Интерктивность
• Сокрытие нужной части бизнес-логики
• Синхронизация модели

Домашнее задание

• Написать собственный MVC
• Написать TodoMVC

Что такое представление?

• HTML
• Биндинги
• Состояние
• Перерисовка

Задача

• Отрендерить шаблон / подвязаться к html
• Обновление представления новыми данными
• Подписка на пользовательские события

Анализ альтернатив

• Низкая или высокая интерактивность
• Сервер поставляет разметку или данные
• Первичность модели или разметки (чтение из DOM)
• Гранулярность обновления (представление, элемент, строка)
• CSS или собственные селекторы биндингов

Состав

Задача

• Хранить состояние приложения
• Получать / обновлять состояние на сервере
• Не допускать дублирования сущностей
• Генерировать событие при изменении (альтернативы?)
• Изменение вложенных моделей

Задача

• Роутинг приложения
• Стейт приложения (онлайн, офлайн)
• Связь модели и представления

MVC, MVP, MVVM

MV*

С чего начать

• Модульность → CommonJS модули + browserify
• Событийная модель → EventEmitter + listenTo
• Шаблонизация → ES6 шаблоны
• Работа с API → абстракция над LocalStorage
• Клиентский роутинг → historyAPI
• Выделение компонентов и определение ответственности

SPA Без части implementing

TodoMVC

TodoMVC template