Главное достоинство WebStorm – это удобный и умный редактор для JavaSсript, HTML и CSS, который также поддерживает TypeScript, CoffeeScript, Dart, Less, Sass и Stylus и фреймворки, например, Angular, React и Vue.js.

WebStorm, как и другие IDE на платформе IntelliJ IDEA, делает разработку проще и удобней. WebStorm обеспечивая подсветку и автодополнение кода, проверяет его на ошибки, помогает быстро навигироваться по проекту и безопасно вносить изменения с помощью рефакторингов. В WebStorm есть инструменты для отладки кода и интеграция с системами управления версиями.

WebStorm по-настоящему понимает структуру вашего проекта и код, обнаруживает возможные проблемы еще до того, как вы открыли проект в браузере, и предлагает их решение.

Встроенные в IDE инструменты для тестирования помогут в разработке и сделают ее удобней и продуктивней.

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

1. Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.

2. Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые применяются на теги без классов будут работать на все вообще.

Соответственно назначать или переназначать стили у тегов – это примерно то же самое, что править прототипы объектов в JS, чем в свое время печально славился Prototype.js. Эти стили унаследует вообще все объекты и если их потом захочется поменять, то результат будет такой же, как если ты решил в прототипе объекта поменять результаты какого-то метода, который используют все дети этого объекта. Вероятность что-то сломать почти 100%.

3. Вложенные селекторы. Можно написать селекторы .nav .item {...} и .menu .item и .item в зависимости от места вывода будет показываться по-разному. Все хорошо пока тебе не нужно поместить блок menu внутрь блока nav. Тогда сайдэффекты становятся совершенно непредсказуемые. По сути аналог вложенных селекторов из программирования – это функция которая в зависимости от места где её вызывают, выдает разный результат. Например в одном месте sum(2,2) может возвращать 3, а в другом 5.

Зачем нужны методологии

Хорошая методология занимает предотвращением этих проблем. Покажу как это делает БЭМ^એ, но CSS Modules, Polymer или всякие решения с инлайновыми стилями для Реакта тоже решают именно их, только другим способом.

Как именование классов по БЭМ^એу помогает решать эти проблемы:

1. БЭМ^એ запрещает применять стили на теги, максимум ресет. На id тоже нельзя, потому что такие элементы нельзя на странице использовать 2 раза, а сколько раз он тебе понадобится ты не всегда знаешь заранее. Все стили можно применять только к классам.
2. БЭМ^એ создает для всех компонентов глобальный неймспейс – все классы которые относятся к компоненту начинаются с одного префикса. Это позволяет исправить второй пример таким образом: .nav__item, .menu__item. Если один вложить в другой не будет конфликта правил.
3. Под каждый компонент в БЭМ^એ создается своя папка – это защищает тебя от конфликтов в именах компонентов и при правильном использовании дает гарантию, что в глобальном неймспейсе будет только один компонент с таким префиксом.
4. В БЭМ^એ есть только один вид вложенных селекторов: модификатор > элемент. Оба начинаются с одного префикса, оба живут в одном файле, оба никак не влияют на другие компоненты.

Что делает Bootstrap

Bootstrap нарушает КАЖДОЕ из этих правил:

1. Bootstrap переназначает стили тэгов.
2. Bootstrap в куче случаев меняет способ отображения элемента в зависимости от того, кто его родители. Хорошо хоть сейчас делает это через >, а не просто так. Но вот https://github.com/twbs/bootstrap/blob/master/less/button-groups.less такие штуки все равно сильно уменьшают предсказуемость и усложняют редизайн.
3. Bootstrap загрязняет глобальный неймспейс сотнями классов с очень generic именами: .table, .dropdown, .row, .left, и т. д. Которые надо все помнить и ни в коем случае не использовать самому.

При таком подходе отстреливание себе ноги становится только вопросом времени.

Когда Boostrap можно использовать

Чтобы не отстрелить себе ногу Bootstrap’ом и получить от него пользу нужно чтобы проект соответствовал ряду требований:

1. На проекте много страниц.
2. Страницы собираются из простых базовых элементов. Базовый – это кнопка или таблица. Сложный – это пост в фейсбуке или комментарий к нему, они состоят из нескольких тегов и их нужно переносить и реиспользовать все вместе.
3. Нет мест, где изменение и эксперименты с дизайном могут сильно повышать/понижать конверсию или другие важные метрики. Как корзина или страница товара в интернет магазине.
4. Никогда не будет глобального редизайна.
5. Типизация страниц окупается скоростью их внедрения.

Еще можно для прототипов и быстрого старта, чтобы потом выкинуть. Для остальных случаев это боль скорее.

Примеры ситуаций когда Bootstrap НЕ подходит

1. Большие интернет-магазины и новостные сайты

У интернет-магазина есть главный KPI – конверсия в покупки. Покупки очень сильно зависят от дизайна страницы товара и корзины/процесса оформления заказа. Изменение конверсии во многом зависят от дизайна, прибавка на полпроцента может тебе позволить удвоить размер команды фронтендеров.

Тут ты дизайнера не запинаешь в гайды. Наоборот ему нужно давать максимум возможностей для экспериментов и изменений, брать эти варианты и гонять 50 сплит-тестов одновременно. С разными отступами, размерами шрифтов, кастомными элементами и прочим.

Если делать такое на Бутстрапе без использования какой-нибудь методологии, то очень просто незаметно сломать что-то в какой-то невидимой сейчас части сайта или в каком-то редком состоянии текущей страницы. Ну и процесс подгонки по большей части будет состоять из борьбы с Бутстрапом и его локальными переназначениями.

Примеры:

http://www.amazon.com/ – тысячи страниц, сотни сплиттестов, постоянный ползучий редизайн.
http://www.gog.com/ – мало стандартных элементов и много кастомных под этот сайт.
http://www.nytimes.com/ – очень много сложных компонентов и исключений. Несколько ключевых экранов от дизайна которых зависят KPI. Сюда же большинство сайтов больших СМИ.
http://arzamas.academy/ – так, до кучи.

2. Сайты со сложными реиспользуемыми в разных местах компонентами

Довольно часто компоненты которые тебе надо реиспользовать – это не кнопки и формы, а что-нибудь сильно больше по размеру. Например пост на Фейсбуке или лента с комментариями оттуда же. Бутстрап тебе никак не поможет тебе выделить этот компонент и защитить его от сайдэффектов. Тебе все равно придется использовать какую-нибудь методологию.

А вот вызвать проблемы, когда ты вставляешь этот элемент в какое-то новое место можно довольно легко.

Самый простой вариант взять сложный компонент в котором используется .form-control или label и поместить его в какую-нибудь форму с модификаторами. Куча разнообразный сайдэффектов обеспечена: https://github.com/twbs/bootstrap/blob/master/less/forms.less

Также много интересного можно получить если ты хочешь сделать выпадающий компонент (как непрочитанные сообщения в фейсбуке) и разместить его в закрытом состоянии в шапке, рядом с кнопкой которая его открывает: https://github.com/twbs/bootstrap/blob/master/less/navbar.less

Примеры:

https://mail.yandex.ru/ – мало стандартных контролов, куча кастумных контролов, много исключений, поддержка легаси.
http://trello.com/ – много сложных компонентов, не очень много стандартных бутстраповских. Для http://try.discourse.org/ польза тоже весьма относительная будет.

3. Сайты с большим количеством типов страниц, которым может потребоваться редизайн

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

Допустим ты решил поменять кегль у заголовков на каком-нибудь http://www.e1.ru . Ты переназначил стили h1 и h2. Ну ой, теперь тебе надо протыкаться по 100+ типам страниц и убедиться что у тебя не сломалось ничего: Ничего не вылазит за границы блоков.

При этом помня что еще https://github.com/twbs/bootstrap/blob/master/less/jumbotron.less и другие переназначатели и что изменения базовых стилей их скорее всего поломает.

Постепенно (постранично или даже по частям страниц) переводить сайт на новый дизайн при этом продолжая использовать стандартные бутстраповские элементы не получится.

Примеры:

https://www.kickstarter.com/ – за последние пару лет сайт как минимум дважды глобально передизайнивали, не считаю отдельных локальных экспериментов.

4. Промосайты и лэндинги

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

Как пример: http://um.mos.ru/promo/gosudarstvennyy_istoricheskiy_muzey/

5. Игры в браузерах

No comments.

Резюме

Да, у Бутстрапа есть своя зона применения. Но она точно не 80% сайтов. К 20-30% он подходит хорошо. Еще на столько же его можно натянуть, с весьма вероятными потенциальными проблемами. В остальных случаях сразу нет.

ну и надо всегда помнить, что проект обычно начинается как что-то простое и предсказуемое, а потом в процессе мутирует во что-то совсем другое. В случае с Bootstrap это будет большой проблемой, в случае с BEM или CSS Modules оно будет просто работать.

Сотни инспекций заботятся о верификации кода, анализируя проект целиком во время разработки. Поддержка PHPDoc, code (re)arranger, форматтера кода с конфигурацией стиля кода и другие возможности помогают разработчикам писать опрятный и легко-поддерживаемый код.
Поддерживаются передовые технологии веб-разработки, включая HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, шаблоны Jade, Zen Coding, Emmet, и, конечно же, JavaScript.PhpStorm включает в себя всю функциональность WebStorm (HTML/CSS редактор, JavaScript редактор) и добавляет полнофункциональную поддержку PHP и баз данных / SQL.

Подписка PHPStorm от JetBrains
Чтобы использовать данную IDE, необходимо иметь платную подписку на сайте разработчиков. Стоимость подписки 19.90 USD в месяц или 199 USD в первый год. При продлении на второй год подписка обойдется в 159 USD. При продлении на третий и далее, стоимость за год будет 119 USD.
Однако, для студентов, преподавателей, разработчиков Open Source проектов существует бесплатная лицензия (так же как и у других продуктов), для получения которой необходимо обратиться в JetBrains.
Так же для простого тестирования можно воспользоваться пробной лицензией, которая предоставляется на 30 дней.

Ключевые возможности

• Интеллектуальный редактор PHP кода с подсветкой синтаксиса, автодополнением кода, расширенными настройками форматирования кода, предотвращением ошибок налету
• Поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3, генераторы, сопрограммы и все синтаксические улучшения
• PHP рефакторинги, code (re)arranger, детектор дублируемого кода
• Поддержка Vagrant, Composer, встроенный REST клиент, Command Line Tools, SSH консоль
• Поддержка фреймворков (MVC view для Symfony2, Yii) и специализированные плагины для ведущих PHP фреймворков (Symfony, Magento, Drupal, Yii, CakePHP и многие другие)
• Визуальный отладчик для PHP приложений, валидация конфигурации отладчика, PHPUnit с покрытием кода (поддержка PHPUnit 5), а также интеграция с профилировщиком
• HTML, CSS, JavaScript редактор. Отладка и модульное тестирование для JS. Поддержка HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, Emmet и других передовых технологий веб-разработки
• Полный набор инструментов для фронтенд-разработки
• Поддержка стилей кода, встроенные стили PSR1/PSR2, Symfony2, Zend, Drupal и другие
• Интеграция с системами управления версиями, включая унифицированный интерфейс
• Удаленное развертывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS и др.
• Live Edit: изменения в коде можно мгновенно просмотреть в браузере без перезагрузки страницы.
• PHP UML
• Интеграция с баг-трекерами
• Инструменты работы с базами данных,SQL редактор
• Кросс-платформенность (Windows, Mac OS X, Linux)

Системные требования

Создание и настройка проекта

Все процессы описаны для версии PhpStorm 2016.1.2

Для создания нового проекта в окне приветствия PhpStorm необходимо выбрать пункт Create New Project.

Если нужно открыть готовый преокт, выбираем Open и указываем путь до папки с проектом.
В появившемся окне указываем параметры создаваемого проекта. В поле location можно указать путь, по которому будет храниться создаваемый проект.
Далее выбирается версия PHP и интерпретатор.

В зависимости от требований к Вашему приложению можно выбрать следующие типы проектов:

App Engine — служба хостинга сайтов и web-приложений на серверах Google с бесплатным именем <имя_сайта>.appspot.com, либо с собственным именем, задействованным с помощью служб Google.Composer — это пакетный менеджер уровня приложений для языка программирования PHP, который предоставляет средства по управлению зависимостями в PHP-приложении.
Drupal Module — система управления содержимым, используемая также как каркас для веб-приложений (CMF), написанная на языке PHP и использующая в качестве хранилища данных реляционную базу данных (поддерживаются MySQL, PostgreSQL и другие).
Joomla — система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие стандартные промышленные реляционные СУБД.
WordPress — система управления содержимым сайта с открытым исходным кодом. Написана на PHP. Сервер базы данных — MySQL.
AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC шаблона, а также упрощение тестирования и разработки.
Foundation — фреймворк от компании Zurb, альтернатива Twitter Bootsrap.
HTML5 Boilerplate – «это HTML/CSS/JS шаблон для всех веб-мастеров, пишущих быстрые, неглючные и ориентированные на будущее сайты.»
Node.js — программная платформа, превращающая JavaScript из узкоспециализированного языка в язык общего назначения.
React Starter Kit — является шаблоном для веб-разработки. Построен на Node.js, Express, GraphQL и React.
Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
Web Starter Kits — Набор шаблонов и редакторов позволяет вести разработку многоэкранных веб-приложений, существенно ускорив и упростив процессы.

Проект создан, можно начинать писать код. Для этого добавим PHP файл в проект. Правая кнопка мыши на названии проекта, NEW — PHP FILE.

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

После чего, файл появится в менеджере проекта.

Интерфейс и выполнение проекта

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

Для примера приведен код, который увеличивает значения элементов заданного массива на 2.

Чтобы выполнить проект, в меню Run необходимо выбрать пункт Run или воспользоваться сочетанием клавиш Alt+Shift+F10

После выполнения результат можно увидеть на вкладке вывода.

Если код программы предусматривает пользовательский ввод, то консоль вывода может служить консолью ввода данных.

Результат работы программы.

Отладка проекта

Для отладки своего приложения можно пользоваться «брейкпоинтами» (преднамеренное прерывание выполнения программы). Для того чтобы поставить breakpoint нужно нажать левую кнопку мыши слева от строки кода, на которой нужно остановить программу.

После чего выбрать пункт Debug во вкладке Run.

Программа остановит свое выполнение на указаном месте, после чего на вкладке Debugger в области Variables(зеленая область на рисунке) можно отслеживать знаечния всех переменных. Также значения перемнных можно увидеть непосредственно в окне с кодом программы.

Фиолетовая область служит для быстрого доступа к необходимым функциям при отладке(от верхней к нижней кнопки): перезапуск проекта, выполнить программу до следующей точки прерывания, пауза(не активна в данный момент), принудительное завершение программы, просмотр выставленных «брейкпоинтов», игнорировать «брейкпоинты»(программа будет выполняться до конца).
Желтая область служит для переключения между вкладками дебагера и консолью вывода, также в ней находятся кнопки для отладки: шаг с заходом, шаг с обходом, шаг с выходом.
Панель Frames (красная область) позволяет получить доступ к списку потоков вашего приложения. Для каждого потока, вы можете просматривать структуру стека, изучить кадры, перемещаться между кадрами, и автоматически переходить к исходному коду в редакторе.
Если нужно отследить значение определенной переменной, можно воспользоваться окном Watches. Чтобы добавить интересующую Вас переменную необходимо нажать на зеленый плюс и вписать название переменной из кода программы.
Аналогично можно добавить любую другую переменную. Например, чтобы добавить массив, так же нужно указать его имя, после чего во вкладке watches появятся значения элементов массива.

Для перехода к следующему шагу программы можно нажать кнопку Resume program или воспользоваться клавишей F9.

Таким образом, можно контролировать ход выполнения программы. Если значение переменной больше отслеживать не требуется, то можно удалить ее из списка переменных. Для удаления используется значок красного минуса.

Оригинал: PhpStorm