Frontend

part 1

Было бы неплохо записать

Сложно

Общая информация

 Глава

Возможно вам это не нужно

Желтый текст - это ссылки

v2

Ссылка на эту презинтацию

Кто я такой

  • Занимаюсь разработкой > 5 лет
  • Ведущий разработчиком
  • Верстаю и пишу JS
  • Организую в Томске митапы

Как я стал разработчиком

  • Закончил Факультет психологии
  • Много читал

Где меня можно найти

Андреев Сергей

vk: dragorWW

tw: dragorWW

fb: dragorWW

Про что будем говорить

Глава 1

Про фронтенд в целом

Фронт-энд разработчик

это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере.

Главная задача фронт-энд разработчика — сделать максимально удобным взаимодействие пользователей с сайтом или веб-приложением.

Чем отличается от backend разработки

  • Много сред исполнения
  • Размер экрана
  • Способом ввода
    • мышь
    • клавиатура
    • жесты
    • стилус
  • Контекстом использования

Особенности фронтенд

  • Интерфейс !== набору макетов
  • Интерфейс объединяет работу всей команды: 
    • Дизайнеров
    • Менеджеров
    • Аналитиков
    • UI/UX проектировщиков
    • архитекторов
    • программистов

Интерфейс !== набору макетов

  • Состояния
  • Размеры экрана
  • Способы ввода
  • Анимации
  • Деградация

Фронтенд больше чем фронтенд

цикл зрелости технологий

Глава 2

О разработчиках

Это не frontend

Нужно быть

  • Дизайнером
  • Менеджером
  • Аналитиком
  • UI/UX проектировщиком
  • архитектором
  • программистом
  • тим лидом
  • ...

Ограниченность восприятия

Чему можно учить

Важно то что не устареет через год

  • Паттерны
  • Технологии в стадии плато
  • Идеям а не реализациям

Глава 3

плохие практики

w3c валидатор

Валидатор формата (от англ. validator) — компьютерная программа, которая проверяет соответствие документа, определённому формату, проверяет синтаксическую корректность.

pixel perfect

  • Нельзя использовать для макета
  • Можно использовать для проверки компонентов

По мимо прочего из за контентных данных пользователя

Использование "bootstrap"

  • Глобальные стили
  • Каждый дизайн уникальный
  • Лишний код

Глава 4

Хорошие практики

Поддержка браузеров

graceful degradation

постепенная деградация — подход, при котором интерфейс сайта деградирует для старых браузеров, где не поддерживаются какие-то из используемых технологий.

При этом ущерб для пользователя по возможности смягчается.

 

Например: цвет подложки вместо градиента, растровая графика вместо векторной, проигрывание видео с помощью плагина. Встречается также более буквальный перевод «изящная деградация».

progressive enhancement

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

Например: градиенты, векторная графика, воспроизведение видео.

BEM

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки.

Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

БЭМ используется в Яндексе для разработки фронтенда

<!-- index.html --/>
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>

    <div class="block__elem3"></div>
</div>

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form 
    class="search-form search-form_focused"
>
    <input class="search-form__input">

    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button 
        class="
            search-form__button
            search-form__button_disabled
        "
    >
        Найти
    </button>
</form>
/* index.css */
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Когда создавать блок, когда — элемент?

Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте блок

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

Создавайте элемент

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Модификатор

Возможности БЭМ

  • Простая поддержка структуры кода при росте проекта.
  • Повторное использование кода.
  • Точечные изменения с минимальными затратами:
    • обновление дизайна
    • добавление функциональных элементов
    • т. д.

Препроцессоры

 препроце́ссор (preprocessor) -  инструмент, преобразующий код из одного синтаксиса в другой

Список препроцессоров:

Список препроцессоров:

// style.css
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
// style.less
@import "library"; // library.less
@import "typo.css";

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

#header {
  color: @light-blue;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

node + npm

Вкратце, пакетом в Node.js называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент.
npm (аббр. node package manager) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js.

Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное.

Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет, даже если вы не собираетесь публиковать его.

package.json

$ npm install canvas-chart
{
  "name": "canvas-project",
  "version": "0.1.0",
  "devDependencies": {
    "canvas-chart": "~1.3.0"
  }
}
  • webpack
  • live reload
  • hot reload
  • gulp

Оценка времени исполнения работы

Глава 5

контроль качества

регрессионное тестирование

HTMLint

stylelint

одиннадцатиклассница

var a,w=
document.createTreeWalker(document,NodeFilter.SHOW_TEXT);
while(a=w.nextNode()){
if(a.textContent.trim().length)
a.textContent='Одиннадцатиклассница пошла посмотреть на достопримечательность, она шла долго, несколько строчек, пока не пришла'
}

Глава 6

Выводы

Без JS нельзя

Сверстать кнопку

Давайте посчитаем

  • 4 размера
  • 6 состояний
  • 3 позиции иконки
  • div, a, span, button
  • итого 288

 

  • 4 браузера              
  • итого 1152 

svg

Советы для студентов

Проходить собеседования

Вопросы

Полезные ссылки

Frontend part 1

By Sergey Andreev

Frontend part 1

  • 1,457
Loading comments...

More from Sergey Andreev