tomasevich/frontend-developer.md

## frontend-developer.md

      
    Raw
  

              frontend-developer.md
            
          
    Лучшие практики, инструменты, библиотеки и фреймворки

Все что необходимо знать о Фронтэнд разработке
ПО


Node.js - программная платформа, основанная на движке V8, превращающая JavaScript из узкоспециализированного языка в язык общего назначения.


Браузеры


Текстовые редакторы


Хранилища


Аналогия: магазины с инструментами и материалами


NPM - это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js. Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.


Bower, Yarn - аналогия NPM.


GitHub - крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. Аналог BitBucket


CSS Фрэймворки


Аналогия: мастерские с полками и шкафчиками, хранящие в себе инструменты


Bootstrap - свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.


Foundation - это отзывчивый интерфейс. Foundation предоставляет чувствительную сетку и компоненты HTML, CSS UI, шаблоны и фрагменты кода, включая типографику, формы, кнопки, навигацию и другие элементы интерфейса, а также дополнительные функции, предоставляемые расширениями JavaScript.


Materialize - это современный адаптивный CSS-фреймворк, основанный на Material Design от Google.


Стилизация

Методологии наименования


Аналогия: справочники и пособия


БЭМ - Методология БЭМ создана в Яндексе. Она позволяет создавать расширяемые и повторно используемые компоненты интерфейса. Логически и функционально независимый компонент страницы, аналог компонента в Web Components. Блок инкапсулирует в себе поведение (JavaScript), шаблоны, стили (CSS) и другие технологии реализации. Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.

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


Аналогия: инструменты (молоток, отвертка и т.п.)


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


Sass - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.


Less - это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS.


Линты


Аналогия: инструменты (молоток, отвертка и т.п.)


Stylelint - Мощный, современный линтер, который поможет вам избежать ошибок и обеспечить соблюдение правил в ваших стилях.

Программирование

JS Библиотеки


Аналогия: инструменты (молоток, отвертка и т.п.)


JQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.


Lodash - это библиотека JavaScript, которая предоставляет вспомогательные функции для общих задач программирования с использованием парадигмы функционального программирования. Аналог UnderscoreJS.


React - JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций. React может использоваться для разработки одностраничных и мобильных приложений.


Установка и настройка

Таск-раннеры


Аналогия: инструменты (молоток, отвертка и т.п.)


Gulp - это таск-менеджер для автоматического выполнения часто используемых задач, написанный на языке программирования JavaScript. Программное обеспечение использует командную строку для запуска задач, определённых в файле Gulpfile. Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики.

Сборщики пакетов


Аналогия: набор инструментов (перфоратор, электродрель и т.п.)


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

Линтеры и транспортеры


Аналогия: инструменты (молоток, отвертка и т.п.)


Babel - это набор инструментов, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в существующих и старых браузерах или средах.


ESLint - это инструмент, который позволяет проводить анализ качества вашего кода, написанного на любом выбранном стандарте JavaScript. Он приводит код к более-менее единому стилю, помогает избежать глупых ошибок, умеет автоматически исправлять их. Аналог JSLint.


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


Аналогия: инструменты (линейка, рулетка и т.п.)


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


Jest - аналогично Mocha, но со своими фишками и плюшками.


Instabul - это инструмент для проверки качества покрытия приложения тестами.


JS Фрэймворки


Аналогия: мастерские с полками и шкафчиками, хранящие в себе наборы инструментов


Vue - JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.


Angular - это открытая и свободная платформа для разработки веб-приложений, написанная на языке TypeScript, разрабатываемая командой из компании Google, а также сообществом разработчиков из различных компаний. Angular — это полностью переписанный фреймворк от той же команды, которая написала AngularJS.