Рендер страницы в JavaScript

Постановка задачи. Переход от классического серверного рендеринга HTML-страниц на построение DOM через JavaScript. Отделение данных от представления. Побочные эффекты и чистые функции.

  • 00:00:36 - Вопрос работы с фронтендом
  • 00:01:57 - Статическая страница
  • 00:04:16 - Корневой элемент
  • 00:04:53 - Создание логотипа в JavaScript
  • 00:07:31 - Генерация шапки сайта
  • 00:08:10 - Вывод текущего времени
  • 00:09:26 - Группировка состояния страницы
  • 00:10:56 - Вывод лотов
  • 00:14:03 - Проблема неструктурированного кода
  • 00:14:36 - Декомпозиция на компоненты
  • 00:16:13 - Всплытие определений в JavaScript
  • 00:17:12 - Концепция чистой функции
  • 00:21:15 - Группировка аргументов функции
  • 00:23:37 - Раздельный вывод лотов
  • 00:25:30 - Компонент приложения
  • 00:25:58 - Процедура рендерига
Скрытый контент
Комментарии (13)
Анатолий

Простой урок, но при этом полезная тема про распаковку структур. Очень ждал что-нибудь про React или vue

Ответить
Руслан

Спасибо!

Ответить
Yevhenii Lykholai

Спасибо.

Ответить
Григорий

Отличный материал, давно задавался вопросом от чего отталкиваться при работе с фронтендом, и очень помогла проведённая аналогия бекендом. Спасибо!

Ответить
Кирилл

За временнЫе метки - респект!

Ответить
Paul

Спасибо, очень интересно!

Возник вопрос, почему в современном js так любят использовать const вместо переменных? Разве это не противоречит самой сути констант?

Ответить
Дмитрий Елисеев

Вместо var теперь рекомендуется использовать let для переопределяемых значений и const для привязанных навсегда.

Константу const a=5 или const b={amount:3} нельзя позже переопределить на новое значение a=6 или b={amount:7}. В константе будет постоянно храниться указатель на первоначальный объект. Но на сам объект при этом никакое ограничение не накладывается, поэтому можно поменять любое его поле напрямую через b.amount=7.

Это противоречит сути констант из классических компилируемых языков, в которых константе можно присвоить только скалярное значение и потом компилятор везде в код подставляет напрямую это значение вместо константы.

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

Ответить
Paul

Дмитрий, спасибо за ответ!

Ответить
Александр Кулик

Супер. Очень доходчиво

Ответить
Aёct'ann

Материал на высшем уровне!

Ответить
Tema Ovchinnikov

Спасибо, очень интересно! Если использовать history api то получается если взять к примеру вк. Левая часть (меню) статическая, а правая динамическая. Это получается на сервере возвращается json и на основе этого рендерится новостная лента список друзей мета информация страницы и тд?

Таким образом при воспроизведении музыки спокойно можно кликать на разные вкладки меню без перезагрузки страницы? Если вместо json фрагмент html отправить site.local/api/news это будет не быстрее чем на клиенте рендерить?

Ответить
Дмитрий Елисеев

Левая часть (меню) статическая, а правая динамическая.

Да, все фронтенд-приложения Single Page Application (SPA) используют History API вместо реальной смены адреса с переоткрытием страницы. То есть навешиваются на onCLick всех ссылок и просто меняют адрес. И в зависимости от текущего пути уже выводят разные компоненты внутри шаблона. Например, у нас мы можем внутри 'App' под вызовом Header() вызывать некую функцию вроде:

function Content ({ path }) {
  if (path === '/') {
      return Home()
  } else if (path === '/lots') {
      return Lots()
  }
}

в которую передавать window.location.pathname. Она будет работать как маршрутизатор и в итоге на странице будет заменяться только контент.

И каждый компонент-страница вроде Lots уже будет запрашивать нужный ему JSON по API.

Ответить
Дмитрий Елисеев

Если вместо json фрагмент html отправить /api/news это будет не быстрее чем на клиенте рендерить?

Браузеру почти нет разницы, откуда он всё берёт. Хоть с HTML, хоть из JS. Всё равно он сначала парсит тэги из HTML в дерево элементов и только после этого их рендерит.

Как раз в следующем эпизоде мы добавим динамическую загрузку и подгрузку данных. И там увидим, что основное неудобство будет не в первой загрузке данных, а в последующем обновлении. И там уже на JavaScript будет удобнее манипулировать элементами.

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий