V из MVC. Views. Templates.

Assets pipeline Webpack

№ урока: 3 Курс: Ruby on Rails

Средства обучения: rvm, ruby, visual studio code

Обзор, цель и назначение урока

В данном уроке подробно рассмотрены различные способы отображения данные. Разобрано

разбиение частей отображения на меньшие повторяющиеся модули, с целью ускорения
процесса разработки. С этой же целью рассмотрены препроцессоры, ускоряющие скорость
написания частей View сокращенным мета языком с большим функционалом. Также
рассмотрены методы оптимизации доступа к внешним библиотекам.

Изучив материал данного занятия, учащийся сможет:

 Передавать данные на View

 Использовать встроенные теги Ruby on Rails
 Грамотно разделять View на partials & layouts
 Использовать Precompilers & HAMS, SCSS, CoffeeScript
 Понимать принципы минимизации, Углификации и Доставки скриптов на Клиент
 Иметь общее понимание Front-End Frameworks

Содержание урока

1. ActionView
2. Data to View
3. Views
4. Render different types
5. Templates
6. Partials
7. Tags
8. Custom tags
9. Sanitize
10. Cache
11. html / Erb / HAML / SLIM
12. JS / CoffeScript
13. CSS / SCSS / SASS
14. AssetsPipeline
15. Precompilation
16. CDN
17. WebPack
18. FrontEnd frameworks

Резюме

 Layout – это часть view, которая является главной оберткой для всех остальных view. Она
содержит импорт необходимых библиотек в порядке, соответствующем их
потребностям. Часто разделяет формы отображения по правам пользователей, которые
пришли на сайт: гость, зарегистрированный пользователь, менеджер и администратор.
 Partials – это мелкие составные части, которые встраиваются в страницу, выполняя
некую функциональную роль. В качестве partial, может выступать меню, форма

Page | 1

CyberBionic Systematics ® 2020 Tel. 0 800 750 312 Title: Ruby on Rails
19 Eugene Sverstyuk Str., 5 floor E-mail: edu@cbsystematics.com Lesson: 3
Kyiv, Ukraine Site: www.edu.cbsystematics.com |
itvdn.com
 (создания и изменения объектов), различные виджеты или главные составные части
страницы – такие как footer или header.
 Tags – это специальные встроенные теги, реализованные через helpers в фреймворке
Ruby on Rails с целью облегчить транскрипцию данных, хранимых на языке руби, в
сложные, составные html теги. Их можно дополнять и изменять, в соответствии с
нуждами проекта.
 AssestPipeline – это механизм, обеспечивающий последовательную precompilation,
minimize и uglification, с целью максимально облегчить процесс разработки и уменьшить
объемы доставляемого кода на клиент.
 Preprocessing – предварительная обработка js, css, html файлов, их объединение и
перевод с метаязыков (haml, slim, sass, scss, coffescript) в общепризнанные стандарты.
 Minimize – это уменьшение файлов ассетов, путем убирания всех символов пробелов и
переносов строки, формируя один файл в одну строчку.
 Uglificatoin – это процесс уменьшения файлов ассетов, путем замены длинных и
осмысленных названий переменных на одно-двух буквенные аналоги – что уменьшает
размер файла и при этом не разрушает целостности функционала. Нивелирует
читабельность данного кода.
 CDN – это внешние библиотеки, хранимые на нескольких географически разных
серверах для наиболее быстрого доступа к ним вне зависимости от геолокации клиента
(нивелирует пинг).

Закрепление материала

 Куда можно вставлять partials?

 Что такое CDN?
 Зачем необходим AssetsPipeline?
 Какую функцию выполняет rails tag?
 Как разделить отображение для разных видов пользователей?
 Чем отличается haml от html?
 Как произвести кеширование страницы?

Дополнительное задание

Задание
Сделать простой landing page portfolio, раздельно проектируя каждый из разделов? (intro,
reviews from client, about, projects, contacts).

Самостоятельная деятельность учащегося

Задание 1
Сделать A|B тестирование 2х разных layout’ов с кратким описанием проекта, считая активность
перехода по главной ссылке. Вести отдельный счётчик для каждого layout’а.

Задание 2
Создать страницу с тремя виджетами, работающими попеременно (в зависимости от времени –
seconds % 3 = 0..2), вывод времени, решение квадратного уравнения с известными X и вывод
одной из 10 шуток, хранимых в виде массива строк.

Задание 3
Используя haml, scss, coffeescript и подключаемый css framework “bootstrap” создать красивый
интерфейс страницы, описывающей стиральный порошок «Ушастый нянь».

Page | 2

CyberBionic Systematics ® 2020 Tel. 0 800 750 312 Title: Ruby on Rails
19 Eugene Sverstyuk Str., 5 floor E-mail: edu@cbsystematics.com Lesson: 3
Kyiv, Ukraine Site: www.edu.cbsystematics.com |
itvdn.com
Рекомендуемые ресурсы

Документация по Haml
http://haml.info/

Документация по Sass
https://sass-lang.com/guide

Описание работы инструмента Webpack

https://habr.com/ru/post/309306/

Описание механизма работы CDN

https://www.cloudflare.com/learning/cdn/what-is-a-cdn/

Русскоязычный ресурс описывающий partials & layouts

http://rusrails.ru/layouts-and-rendering-in-rails

Документация по css framwork’у Bootstrap

https://getbootstrap.com/docs/4.3/getting-started/introduction/

Page | 3

CyberBionic Systematics ® 2020 Tel. 0 800 750 312 Title: Ruby on Rails
19 Eugene Sverstyuk Str., 5 floor E-mail: edu@cbsystematics.com Lesson: 3
Kyiv, Ukraine Site: www.edu.cbsystematics.com |
itvdn.com