Инструменты фронтенд разработчика. Workflow и инструменты frontend-разработки. Тестирование и отладка
Библиотека поддержки DNS Lookup.
Также понадобятся файлы от MSVC++ 6.0 (только для пользователей MSVC++ 5.0)
- OLE - положить в VC\include. Необходимы для СОМ поддержки.
- HTTP - переименовать имеющиеся в *.hold, а новые положить в VC\include. Необходимы для сборки ISAPI фильтра.
ИНСТАЛЯЦИЯ
Инсталируем пакет CYGWIN, например в каталог C:\Program Files\Cygnus, в NT надо завести переменную среды CYGWIN со значением %SystemDrive%\Program Files\cygnus\cygwin-b20
Делается это так: Идем в Start->Settings->Control Pannel запускаем ярлык System, выбираем карточку Environment на ней щелкаемся на окно System variables внизу две строки Variable и Value, в строке Variable пишем CYGWIN а в строке Value %SystemDrive%\Program Files\cygnus\cygwin-b20 И жмем Set а потом Apply.
Cоздаем от корня каталог Tmp на системном диске и точно так же добавляем переменную TMP со значением %SystemDrive%\Tmp. Добавляем в переменную path путь %SystemDrive%\Tmp
Жмем Apply и OK. После этого необходимо перегрузиться.
Разворачиваем архив win32build.zip в каталог, например C:\Win32build
Запускаем среду MSVC++ 5.0 идем в Tools->Options на карточку Directory и добавляем в разделы
- Include
- Libraries
следующие пути соответственно:
- C:\Program Files\cygnus\cygwin-b20\H-i586-cygwin32\bin
- С:\Win32Build\include
- C:\Win32Build\lib
Разворачиваем Bindlib_w32.zip в каталог, например C:\Bindlib, ищем в нем файл проекта bindlib.dsp и собираем его из среды MSVC. В каталоге C:\Bindlib\Debug появится resolve.lib, ее надо переписать в каталог C:\Win32Build\Lib поверх старой.
СБОРКА
Топаем в каталог C:\Php4\Tsrm и собираем TSRM.dsp, после сборки в каталоге C:\Php4\Tsrm\Debug появится Tsrm.lib, скопировать ее в каталог C:\Win32Build\Lib.
Переходим в каталог C:\Php4\Zend, открываем проект ZendTS.dsp и собираем его, после сборки в каталоге C:\Php4\Zend\Debug появится библиотека ZendTS.lib, копируем ее в каталог C:\Win32Build\Lib.
Переходим в каталог C:\Php4 и открываем проект php4ts.dsp. В нем 4 проекта сначала собираем php4ts (не забудьте установить активный проект Project->Set Active Project->php4ts).
После сборки в каталоге C:\Php4\Debug появится файл php4ts.lib, php4ts.dll, php.exe. Php4ts.lib опять копируем в C:\Win32Build\Lib. Эта библиотека нужна для сборки внешних модулей php, например для модуля поддержки mssql.
Делаем активным проект php4isapi и собираем его. В каталоге C:\php4\sapi\isapi\debug будет лежать php4isapi.dll – фильтр для IIS.
Известные баги, которые шибко мешают работать и пути их лечения
1. Через элеметы формы не постятся данные размером более 4К, не аплоадятся файлы размером больше 4К. php4.exe процесс подвисает и снимается только рестартом IISа. (Отписал в репорт баг, но когда исправят непонятно, попытаюсь поправить сам).Решение: Обходится использованием php 3.12-3.14 для обработки файлов реакции форм. Медленнее, зато работает.
2. При выполнении динамического кода в котором происходит использование сериализованных переменных парсер выдает оштбку. Например:
Result: parser error on line 5 …..
Происходит это из-за того, что в четвертой версии символы {} используются для инкапсуляции переменных в строку, например $a=”Такой вот элемент {$NotSer}”;
Но сериализованное представление массива тоже содержит символы {}.
В примере, описанном выше парсер пытается инкапсулировать выражение, которое на самом деле выражением то и не является и естественно валится с ошибкой.
Решение: Надо поправить в файле \php4\ext\standard\var.c код, заменив { на [ и } на ]. Ищем в файле подстроку %d:{ и заменяем ее на %d:[ (будет две замены), и меняем { на [, В строке if (**p != ":" || *((*p) + 1) != "{") замена { на [, для строк for ((*p) += 2; **p && **p != "}" && i > 0; i--) и return *((*p)++) == "}"; меняем } на ]. Потом пересобираем php4ts.dsp. После этого все нормально отрабатывает.
Сборка модуля Php 4.03 betta для MS SQL 6.5 (mssql.dll)
Распаковать mssql.zip. *.lib забрасываем в C:\Win32Build\Lib, а *.h в C:\Win32Build\Include.
Фундаментальными технологиями являются HTML (для создания структуры страницы), CSS (для стилизации) и JavaScript (для интерактивности). По этой причине базовые знания в вышеупомянутых областях непременно вам необходимы. Однако, в 2019 году необходимо знать, что такое фреймворки, системы контроля версий и многие другие вещи, упрощающие жизнь современному разработчику. Давайте подробней остановимся на каждой из них.
HTML (Hyper Text Markup Language) и CSS (Cascading Style Sheets) являются основой веб-разработки. Без этих двух технологий вы не сможете создавать веб-дизайн и получите на выходе простой текст на экране. Вы даже не сможете добавить изображение на страницу без HTML!
Прежде чем начать карьеру веб-разработчика, вы должны стать специалистом в HTML и CSS. Хорошая новость, уверенное знание этих технологий можно получить всего за несколько недель изучения. У нас вы можете пройти !
JavaScript позволяет добавить огромный функционал вашей веб-странице. Вы можете создавать довольно функциональные веб-приложения используя только HTML, CSS и JavaScript (сокращенно JS). На самом базовом уровне, JS позволяет вам добавить интерактивности. Вы можете использовать его для создания карты, которая обновляется в реальном времени, интерактивных элементов и онлайн-игр. Такие сайты, как Pinterest используют JavaScript по полной для создания дружелюбного пользовательского интерфейса.
К тому же, это самый популярный язык программирования в мире, поэтому даже несмотря на ваши планы в карьере, это супер полезный язык для изучения.
JQuery это библиотека JavaScript: набор плагинов и расширений, которые делают разработку с помощью JavaScript быстрее и проще. Вместо того, чтобы писать все с нуля, JQuery позволяет вам добавить готовые элементы в проект, которые можно затем изменять под ваши нужды (одна из причин, почему так важно знать JavaScript). JQuery используют, когда на страницу необходимо добавить таймер отсчета, форму поиска с автозаполнением, или даже таблицу, которая автоматически перестраивается и изменяет размер в соответствии с содержимым.
JavaScript фреймворки
JS фреймворки (включая AngularJS, Backbone, Ember и ReactJS) предоставляют готовую структуру вашего JavaScript кода. Существуют различные типы фреймворков под разнообразные нужды, однако четыре вышеупомянутых являются самыми популярными в списке требований при приеме на работу в 2019 году. Фреймворки действительно ускоряют процесс разработки, предоставляя вам ускоренный старт, и могут использоваться в связке с библиотеками вроде JQuery для минимизации временных затрат на написание типовых блоков.
Frontend фреймворки
CSS и Frontend фреймворки (самым популярным является Bootstrap) делают для CSS то же, что и JS фреймворки для JavaScript: они ускоряют разработку, предоставляя отправную точку с готовой стартовой структурой проекта. Поскольку от проекта к проекту базовые CSS блоки повторяются, фреймворк, определяющий все за вас, является очень полезным. Большинство работодателей требуют знание того, что такое frontend фреймворки и как с ними работать.
RESTful сервисы и API
Не вдаваясь в технические подробности, REST расшифровывается, как Representational State Transfer, что означает “передача состояния представления”. В общих чертах, это технология, упрощающая связь компонентов в сети. И RESTful сервисы и API - это сервисы архитектуры REST. Почитать об этом подробнее вы можете здесь.
Предположим, вы решили написать приложение, которое отсортирует всех ваших друзей в социальной сети по дате добавления. Вы можете сделать запрос к RESTful API ВКонтакте для получения списка ваших друзей. То же самое возможно и с Twitter, и с Facebook, которые также используют RESTful API.
Системы управления контентом и платформы E-commerce
Практически каждый веб-сайт построен на системе управления контентом (CMS). Платформы E-commerce являются одной из разновидностей CMS. Самая популярная в мире CMS - это WordPress, которая находится за занавесом миллионов сайтов, почти 60% всех сайтов, использующих CMS, построены на WordPress. Другие популярные CMS это Joomla, Drupal и Magento. Даже поверхностные знания этих систем дадут вам преимущество при устройстве на работу.
Тестирование и отладка
Ошибки случаются - это общепризнанный факт. Быть знакомым с процессами тестирования и отладки жизненно необходимо.
Unit-тесты - это процесс тестирования отдельных блоков исходного кода и специализированный фреймворки для подобного рода тестирования предоставляют достаточно удобный функционал. Существуют разные фреймворки для разных языков программирования.
Другой тип тестирования - это UI-тесты, также известные как функциональные тесты. Здесь проверяется общее поведение веб-сайта при взаимодействии с ним пользователя.
Отладка - это процесс устранения всех ошибок (багов), найденных в процессе тестирования. Разные компании используют различные подходы в тестировании и отладке, но если вы когда-либо это делали, вам не трудно будет приспособиться.
Git и системы контроля версий
Системы контроля версий позволяют вам отслеживать изменения, вносимые в код со временем. Они также позволяют легко возвращаться к предыдущим версиям кода, если вы что-либо испортите. Git - это наиболее распространенная система контроля версий. Знание Git для разработчика является необходимым требованием практически в каждой компании. У нас вы можете изучить .
Что должен знать профессиональный фронтенд-разработчик сегодня
В последние несколько лет React, одна из библиотек JavaScript, становится стандартом frontend разработки - и это на руку кроссплатформенным разработчикам, с такими преимуществами React Native, как:
- простая и интуитивно понятная философия объявления представлений (views) и состояний (state), делающая код чистым, читаемым и легкоотлаживаемым;
- умный и эффективный рендеринг, который перерисовывает компоненты только в случае необходимости, при изменении состояния.
Говоря простым языком, React связывает вместе HTML и JavaScript.
Что же касается CSS, никто больше не пишет на чистом CSS в наши дни, поэтому знание таких препроцессорных языков, как Sass или Less является, так скажем, необходимостью для фронтенд-разработчика в 2019 году.
Учитывая вездесущность множества форм-фактором различных устройств (мобильные телефоны, планшеты, десктопные ПК), мы бы также рекомендовали к изучению способы построения адаптивных web-страниц. Существует большое разнообразие библиотек JavaScript и CSS, которые прекрасно справляются с этой задачей. Многие из них основаны на рекомендациях Google’s Material Design.
Существует множество смежных тем и библиотек, достойных внимания и того, чтобы потратить свое время на их изучение. Например:
- Webpack для модульной сборки (хотя опыт Webpack довольно ужасен и выбор сообщества в области сборки меняется каждые 1-2 года);
- JSON Web Token для авторизации (своего рода, замена куки, которые ранее были стандартом);
- Relay/GraphQL или Redux или Flux, в зависимости от того, насколько глубоко вы хотите погружаться в потоки и выборки данных;
А также большое разнообразие библиотек для отладки, оптимизации производительности, тестирования, управления проектами и т.п.
Таким образом, в наши дни, чтобы быть востребованным разработчиком, необходимо знать не только фундаментальные основы, но и уметь использовать существующие наработки коллег в виде различных библиотек и фреймворков, значительно ускоряющих процессы разработки.
Наш совет: если вы ещё только начинаете знакомство с frontend-разработкой, пройдите наш .
Итак, друзья, вы решили встать на путь программирования? Жму руку, это решение изменит вашу жизнь. Это всегда интересная и востребованная работа на стыке интеллекта и творчества, работа о том, как принести пользу людям, сделать мир чуточку лучше. Возможности реализации в ней бесконечны.
В программировании много разных областей: веб-разработка, мобильная, десктопные приложения, разработка ОС, драйверов для железа. Веб-разработка - одна из самых интересных и востребованных областей. К её плюсам можно отнести то, что ваш продукт лежит в Интернете, и чтобы его увидеть, достаточно набрать адрес в браузере любого устройства, не нужно ничего качать и устанавливать. К тому же, с помощью современных инструментов, зная веб, можно разрабатывать сразу и мобильные, и десктопные приложения. Веб состоит из frontend (то, что видит клиент в браузере) и backend (серверная часть, занимается хранением, обработкой и выдачей данных). Я предлагаю начать знакомство с вебом именно с фронтенда.
Да, кстати, меня зовут Роман Латкин, я почти 10 лет варюсь в веб-разработке. Когда я начинал, всё было одновременно просто и сложно. Просто, потому что для построения приложения много знать было не нужно: вот HTML, немного CSS, чуть-чуть JavaScript - и готово. Сложно, потому что разработка велась через боль. Сейчас множество этой боли вылечено с помощью громадной экосистемы инструментов, но она очень пугает новичков, они не знают, как подступиться к фронтенду, с какой стороны подойти. Мне повезло, я наблюдал развитие фронтенда почти с начала, и у меня в голове всё неплохо уложилось. И я хочу в помощь начинающим разработчикам передать это понимание. Надеюсь, после прочтения этой статьи, вы будете чётко знать, каким путём идти, куда копать и по какому плану развиваться.
Три составляющих фронтенда
Весь фронтенд состоит из трёх составляющих: HTML (содержание и разметка), JavaScript (логика) и CSS (внешний вид, позиционирование). HTML описывает содержание страницы и выглядит примерно так:
Если вам придётся как-нибудь вручную использовать эти средства, чтобы сделать более-менее сложный проект, то вам предстоит испытать много боли. К счастью, мир развивается, сложные вещи упрощаются, люди придумывают всё новые и новые инструменты и технологии, которые делают этот созидательный процесс более приятным и быстрым.
Любой процесс познания можно представить в виде буквы «Т», где горизонтальная линия - широкое понимание, вертикальная - глубокое. У идеального специалиста буква Т большая и красивая, равномерная. Если она вытянута в одну сторону, она некрасива, уродлива; такой специалист мало полезен в боевых делах. Он может либо глубоко разбираться в чём-то одном, но чуть шаг в сторону, и он непригоден; либо поверхностно разбираться во всём, но при этом ничего не уметь. В первую очередь необходимо максимально развить широкую составляющую, чем мы сейчас и займёмся - постараемся максимально широко охватить все аспекты фронтенда, не углубляясь. А потом вы займётесь углублением, которое останется вам на самостоятельную работу.
Чтобы хорошо представлять причины текущего положения вещей, нужно хотя бы чуть-чуть знать историю пути развития фронтенда, да и вообще веб-приложений в целом. Инструментов сейчас столько, что не только новичок, сам чёрт ногу сломит. Поэтому, чтобы в этом всём хорошо ориентироваться, начнём именно с истории, с короткой экскурсии, как всё начиналось, а затем плавно перейдём к современным подходам.
Первые сайты
Вначале люди писали на чистом HTML, рисовали внешний вид на чистом CSS, делали логику на чистом JavaScript. Типичное старомодное приложение - это когда серверная логика генерирует HTML (отвечая на запрос посетителя, сервер берёт данные из базы данных и вставляет их в HTML) и отдаёт его вместе со статическими файлами стилей и клиентской логики на JavaScript, которой в то время (около 10 лет назад) было немного. При совершении перехода на другую страницу весь этот процесс повторялся. То есть раньше как такового разделения на фронтенд и бэкенд не было, было одно цельное приложение, которое одновременно и работало с базой данных, и генерировало HTML.
jQuery
Писать на чистом JavaScript надоедало и появился хороший инструмент - jQuery , который с помощью удобного синтаксиса позволял обращаться к элементам страницы и выполнять с ними какие-то действия. Появлялись различные плагины, готовые решения, стало проще и интереснее.
Но приложения развивались, объём клиентской логики рос, и постепенно всё это превращалось в большую лапшу. Чтобы её распутать, нужна была какая-то форма, архитектура.
MVC
Умные Парни попробовали перенести на фронтенд архитектурный шаблон с серверной части - MVC (модель-представление-контроллер). Этот шаблон диктует правило, что есть модель, которая описывает данные. Например, модель пользователя, модель фильма, модель отзыва. Есть контроллер, который обрабатывает запросы, например «показать по такому-то адресу страницу со списком фильмов». И есть представление, которое отвечает за отображение данных в HTML, в которое контроллер передаёт готовые данные, полученные из базы данных/API.
Здесь началась история single page application, SPA - приложений, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за данными по API. Этот подход называется AJAX . Вместо того, чтобы генерировать HTML на стороне сервера, сервер отдаёт клиентскую логику приложения один раз. Переходя на другую страницу, например с главной страницы на страницу поиска отелей, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию об отелях), без тегов HTML (как правило в формате JSON), и самостоятельно генерирует представление.
Шаблон MVC на фронтенде был хорош, прекрасно работал, но было излишне сложно. Angular , Backbone - представители этой вехи истории. Они, к слову, живут и сейчас, но я в них глубоко не разбирался.
Процессоры и сборщики
Приложения начали расти в размере, и тут пришло время рассказать о сборщиках, препроцессорах и пакетных менеджерах. Постараюсь вкратце по ним пробежаться, несмотря на то, что они заслуживают отдельной статьи.
В вебе важна скорость, поэтому нельзя просто так отдавать посетителю большие файлы, они будут идти по сети слишком долго. Поэтому все ресурсы сжимаются с помощью разных минификаторов. JavaScript чаще всего с помощью uglify (он удаляет пробелы, делает названия переменных короче и ещё много чего интересного). В CSS удаляются пробелы и могут ещё объединяться некоторые свойства. И всё это собирается в один или несколько файлов вместо 10-20, один файл скачать гораздо быстрее, и на сервер нагрузка меньше.
CSS
Что касается CSS, появлялись так называемые препроцессоры . Они расширяют синтаксис CSS, добавляют туда кучу разных возможностей - вложенные блоки, переменные, циклы. Даже просто отсутствие точек с запятой очень помогает и ускоряет написание кода?.
Препроцессор - это такая программа, которая запускается и компилирует этот сахарный синтаксис в чистый CSS. Использование препроцессоров позволяет избежать повторного использования кода, выстраивает архитектуру, и по сути превращает язык описания стилей в язык программирования. Изучите какой-либо инструмент, и вы поймете. Я для себя сейчас выбрал Stylus ; есть ещё несколько, например - LESS , SASS .
React , хоть он и обрёл большую популярность и развитую экосистему, на практике оказался слишком голый, сложный, многословный. Для того, чтобы сделать простую форму, нужно много-много лишнего кода написать и кучу дополнений поставить. Для того, чтобы создать простое приложение, нужно ещё много чего установить, и вариантов для простых вещей очень много, легко можно потеряться - экосистема хоть и огромная, но в ней сложно ориентироваться; внешне одинаковые приложения могут быть совсем по-разному устроены внутри. А концепция JSX - переплетение кода и разметки, выглядит не столь удачно, сложно потом понимать, что же такое хотел сказать автор кода, сложно менять разметку.
Vue.js
Тут появился Vue.js - гибкий, эффективный и простой в освоении веб-фреймворк, который несёт в себе всё те же концепции, но они в нём выглядят гораздо удачнее. Он объединил в себе всё лучшее из Angular и React, более чётко ответил на вопрос «что есть что». Из коробки Vue содержит уже большое количество инструментов и возможностей, которые в несколько строк позволяют писать объёмную логику. Разработка значительно упростилась.
Vue принёс ещё несколько интересных концепций, как, например, однофайловые компоненты - файлы, которые содержат в себе сразу логику, разметку и стили, и они там не переплетаются, как в случае с React и JSX. Vue из коробки позволяет использовать любые препроцессоры, которые очень органично вписываются в однофайловые компоненты. И имеет множество готовых встроенных решений, даже свою имплементацию Flux. Vue обладает отличной документацией на русском языке, которая научит вас лучшей практике во фронтенде, от сборки приложения до автотестов.
Изоморфные приложения, SSR
В разговоре об одностраничных приложениях мы упустили одну важную деталь: когда поисковый робот обращается к одностраничному приложению, он ничего не видит - только пустую страницу с тегами body без контента. В старомодных приложениях сервер обратился бы к базе данных, сгенерировал представление и отдал бы готовый HTML с текстом страницы. В случае с одностраничным приложением сервер отдаёт пустую страницу, которая лишь после инициализации подтягивает данные и показывает представление, чего конечно же поисковый робот не сделает. Таким образом, использовать одностраничные приложения для сайтов, ориентированных на контент, SEO, недопустимо.
Это недопущение обходилось множеством хаков и костылей, пока не появилась концепция SSR - Server-Side Rendering . Умные Парни научили весь JavaScript, который работал в браузере, выполняться на сервере с помощью NodeJS (технология создания серверных приложений с помощью браузерного языка JavaScript). Это, конечно, ввело свои ограничения, но жить стало легче. Теперь можно было написать логику один раз на одном языке, и она сразу же работала и на сервере (при первом обращении посетителя/робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.
Схема простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и отрисовывает их в HTML, возвращая посетителю. Дальше уже приложение живёт в браузере, при последующих переходах по страницам оно напрямую обращается к API-серверу за данными и уже непосредственно в браузере отрисовывает представление.
В React имплементация этой схемы делается разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js . В документации Vue есть целый раздел , посвященный SSR. Там указан фреймворк Nuxt - Vue + SSR. С его помощью можно довольно легко писать такие универсальные приложения.
CSS-фреймворки, адаптивность
Теперь мы сменим тему на попроще и поговорим о вёрстке.
Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы . Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка . Положение блоков устанавливалось с помощью свойства позиционирования float: right/left .
В настоящее время всё упрощается, уже почти все браузеры поддерживают Flexbox и CSS Grid - современные удобные способы верстать сетку страницы. Их умелое сочетание позволяет в несколько свойств добиваться таких положений контейнеров, над которыми пришлось бы старыми методами изрядно попотеть, позволяя с лёгкостью выполнить практически любые дизайнерские изыски.
Это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов - блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.
Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана - достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный - конечно же Bootstrap , сейчас уже 4-я версия. Есть ещё Bulma , тоже довольно хороший. И ещё множество менее популярных. Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки. Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.
Кроссбраузерность
Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы - списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик -
Рано или поздно любой разработчик сталкивается с вопросом, какие инструменты лучше всего подходят для его работы. Выбор хороших инструментов позволит существенно увеличить производительность разработки и повысить качество кода. В данной статье мы рассмотрим используемые нами средства при разработке frontend-части наших проектов, также организации самого процесса.
Инструменты.
Профессионала своего дела отличает не только качество его работы, но и выбор инструментов, которые он использует.
Текстовый редактор
Стоит начать с текстового редактора. Большинство людей не пользуют его и на 50% от возможностей. Скорее всего, если вы пользуетесь чем-то лучшим блокнота, то вам могут быть доступны такие возможности как:
- Zen Coding
Позволит вам быстро создавать html-разметку. Экономит время и позволят постигнуть особый дзен. (Прочитать про то, что это такое, можно на этой странице).
- Live Templates
Нам часто приходится набивать одни и теже конструкции: объявление функций, объектов, конструкций языка. Live Templates позволит автоматизировать рутинный набор шаблонных кусков кода и сконцентрировать внимание на более важных кусках приложения. Ко всему прочему вы можете легко расширить набор шаблонов, создав их для фреймворков, которые чаще всего используете.
- File Templates
Шаблоны файлов позволят вам быстро разворачивать новые модули проекта. И также, как и в случае с Live Templates обычно можно расширять набор шаблонов необходимыми.
- Live Edit
Наличие такой функции у редактора позволит не обновлять браузер при верстке макета после каждой правки — это действие автоматизируется!
Отличный текстовый редактор, который можно рекомендовать — Sublime Text 2 . Поддержка плагинов на все случаи жизни, подсветка кода, кроссплатформенность — все это делает его отличным редактором для использования. К тому же он бесплатный.
Но для действительно крупных проектов мы используем PHPStorm /WebStorm от JetBrains. Эти продукты обеспечивают разработчика всем необходимым функционалом, особенностями, описанными выше, а также отсвечиванием кода и зависимостей между всеми файлами проекта.
Как SublimeText, так и PHPStorm поддерживают множество комбинаций клавиш, зная которые можно ускорить и упростить редактирование текста. Изучить комбинации можно используя сервис Shortcut Foo . Обучение проходит в игровой форме, так что это отличный способ совместить приятное с полезным.
Технологии
Используйте те технологии, которые позволят писать меньше кода для достижения того же результата. Однако помните, что поддержка получаемого кода должна выходить как можно дешевле.
К примеру хорошей практикой является использование sass/less, которые расширяют привычные нам css добавляя такие удобные механизмы, как переменные. После того, как ваши файлы стилей готовы, достаточно запустить программу-процессор, которая переведет sass/less в обычный css.
Использование БЭМ-методологии поможет крупным поектам не погрязнуть в коде верстке. Четкие разделение стилей на отдельные файлы и структуризаия их внутри каталогов позволит тратить меньше времени на поддержку кода. Основные принципы БЭМа можно прочитать . Также существует набор инструментов под названием bem-tools , который позвоялет быстро разворачивать файлы стилей.
Workflow
Отлаженный процесс разработки кода повышает скорость работы и ее качество.
Для обеспечения праллельной работы команды разработчиков используются стоит использовать стандартные средства, такие как git (про успешный git workfow можно прочить ). Для координации выполнения задач применяется система багтреккинга, к примеру Jira и Redmine .
Деплой проекта
Для разворачивания готового приложения на боевой среде мы используем Jenkins . Его задача — забрать из репозитория актуальную версию, и после окончания процесса сборки и подготовки файлов она должна вылить результаты на серверы. Для обеспечения этих процессов используется phing .
Остался открытым вопрос подготовки проекта к выливке. Для фронтенда на локальной среде разработки это обычно:
- Транслирование sass/less в css
- Контроль зависимостей
- Конкатенация файлов
- Проведение автотестов
Для продакшен-версии подготовка также включает в себя:
- Минификацию файлов
- Обфускация кода
- Оптимизацию изображений
Автоматизация всех этих действий — первостепенная задача, которую необходимо решить для организации оптимального процесса разработки.
Для выполнения данных задач мы используем проект Yeoman . Данный инструмент позволяет построить на своей основе весь процесс workflow frontend-разработки. Он реализует все указанные выше пункты.
Разработка с помощью Yeoman
Также Yeoman позволяет на своей основе построить весь процесс разработки фронтенда. С его помощью можно быстро развернуть структуру папок для типовых проектов. Для этого достаточно в папке проекта ввести команду:
yeoman init
Запустится диалог, после ответов на вопросы которого в каталоге развернутся служебные папки и файлы.
Помимо этого Yeoman позволяет указывать тип проекта. В таком случае он подготовит дерево папок и файлов для указанного фреймворка.
Выше было указано про такой удобный инструмент, как Live Edit. Так вот, Yeoman запускает веб-сервер для Ваших приложений с реализацией Live Edit. Для этого нужно вызвать команду:
yeoman server
Через пару секунд откроется окно браузера с запущенным приложением. Теперь любые изменения в html, css или js-файлах будут сразу же отображаться в браузере. Ваши sass-файлы также будут компилироваться в css после каждого их сохранения.