Advertisement
  1. Code
  2. Tools

Основные инструменты современной фроентенд разработки

by
Read Time:18 minsLanguages:

Russian (Pусский) translation by Anton L (you can also view the original English article)

Когда вам на ум приходит фраза "современная фронтенд разработка" - это относительно новое понятие! Если сравнивать с конкурирующими индустриями и платформами, веб всё ещё находится на раннем этапе. Стоит вам лишь посмотреть на ленту, посвящённую разработке, в Twitter, или оказаться на соответствующих IRC каналах, как сразу станет ясно насколько быстро наши техники и процессы переходят в эпоху современного фронтенда.

Напишите в ручную немного HTML (заглавными буквами естественно), добавьте инлайном CSS, вставьте ваш любимый GIF, и всё готово!

Забавно вспоминать то время, не так давно, когда процесс создания веб-сайта включал в себя лишь умение пользоваться текстовым редактором (возможно даже блокнотом) и немного понимания HTML и CSS. Не нравится Internet Explorer 7? Что же, в конце девяностых, мы боролись с Internet Explorer 3 и пытались добиться от него нужного результата, можете себе представить! Тем не менее среда разработки на тот момент находилась в зачаточном состоянии, а процесс был многим проще. Напишите в ручную немного HTML (заглавными буквами естественно), добавьте инлайном CSS, вставьте любимый GIF, и всё готово! Загрузите это всё на Geocities и ждите трафика!

Да, это были те ещё деньки. Хотя, к счастью, веб значительно повзрослел с того времени. Будучи сплочённым сообществом, мы - разработчики пришли к согласию касательно множества инструментов и лучших практик. Мы используем системы контроля версий для совместной работы над проектами с открытым исходным кодом. Мы применяем тестирование во время JavaScript разработки (используя инструменты, такие как Mocha и Jasmine). Мы стараемся не "изобретать колесо", вкладывая наши усилия в поддержку проверенных библиотек, таких как jQuery. Мы избавились, освободились от спагетти кода, проповедуя необходимость специально предназначенных для решения определённой задачи фреймворков, к примеру Backbone и Ember. Мы даже начали применять принципы объектно-ориентированного программирования для нашего CSS (OOCSS)! Да, дамы и господа, это отличное время, чтобы быть фронтенд разработчиком!

В океане инструментов, библиотек и фреймворков, что из них следует использовать?

На первый взгляд выбор может показаться огромным и ошеломляющим (не волнуйтесь, так и должно быть; мы все так себя чувствовали в определённый момент времени), каждый пункт в списке ниже представляет из себя необходимые компоненты для создания современных, кросс-браузерных приложений. Единственный вопрос: в океане инструментов, библиотек и фреймворков, что из них следует использовать? Или сформулируем вопрос другим образом, как отделить плохо поддерживаемые проекты и найти среди огромного выбора самые сливки? В данной статье мы поделимся нашим скромным мнением, на то какие инструменты стоит использовать, также как и несколько альтернатив для каждой категории.


Редакторы

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

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

Sublime Text 3

Даже несколько лет назад, с трудом можно было найти разработчика, который знал что такое Sublime Text. На сегодняшний день это пожалуй самый популярный редактор кода в нашей индустрии. Причина по которой это очевидно; в то время, как редакторы - конкуренты, такие как TextMate и Coda, либо остались на обочине, либо разочаровывают своих пользователей бесконечными обновлениями, команда Sublime Text (состоящая из одного человека) фокусируют основную часть своих усилий на самых важных аспектах для оптимизации рабочего процесса во время разработки: скорости. И что же вы хотели, Sublime очень быстрый. Одним нажатием кнопки, вы можете переходить от файла к файлу с такой легкостью и простотой, что через некоторое время, вы будете съёживаться при мысле о переключении файлов вручную с помощью файлового древа, как это приходилось делать раньше.

Как и большинство вещей в нашей жизни, есть причина популярности Sublime. Это лучший редактор на сегодняшний день, однако он не бесплатный.


"Есть причины популярности Sublime."

LightTable

Sublime представляет из себя традиционный редактор кода, в то время как LightTable пытается совершить революцию в процессе написания кода. На данный момент он находится на стадии альфа версии, но прогресс на данный момент выглядит невероятно многообещающим. Представьте себе возможность выполнять JavaScript в реальном времени, не покидая редактор. Такой уровень взаимодействия совершенно беспрецедентен. Соедините скорость и мощь конфигурации Vim, c элегантностью, которую мы ожидаем увидеть в современных приложениях; LightTable предоставляет всё это и даже больше. Может-ли он обогнать Sublime Text в 2013? Следует подождать и убедиться в этом самим! Продолжайте следить за данным редактором.


"Может-ли LightTable обогнать Sublime Text в 2013? Следует подождать и убедиться в этом самим!"

WebStorm

Действительно, в последнее время разработчики стали уходить от использования полноценных IDE, тем не менее, многие продолжают использовать все их преимущества. К нашему счастью, есть большой набор, из которого можно выбрать. В частности, команда JetBrains проделала отличную работу за последние годы, поддерживая различные IDE специфичные для какой-либо платформы, включая WebStorm, PHPStorm и RubyMine.

Если вы тот кто предпочитает подобные IDE, добавьте предложение JetBrains в ваш список приложений, с которыми вы планируете ознакомиться в будущем. Вы точно не будете разочарованы.


"Если вы тот кто предпочитает подобные IDE, добавьте предложение JetBrains в ваш список приложений, с которыми вы планируете ознакомиться в будущем."

Vim

Возможно вы думаете про себя, "Почему Vim был добавлен в список современных приложений?". Несмотря на то что Vim, изначально Vi, был создан десятилетия назад, правда всё равно заключается в том, что это современный редактор, который на сегодняшний день остается в активной разработке. Когда дело касается расширяемости и скорости, трудно обойти Vim. Однако, стоит обратить внимание, если дадите шанс этому редактору, вам стоит распланировать время на обучение на месяцы вперёд. Данный редактор изначально довольно сложно использовать. Тем не менее, как только вы запомните горячие клавиши, вас не остановить!


"Vim изначально довольно сложно использовать."

Brackets

Brackets уникален тем, что он является редактором с открытым исходным кодом разработанный Adobe, который на полную использует HTML, CSS и JavaScript: создан благодаря данному набору технологий! В результате, если у вас есть понимание основ JavaScript, вы уже обладаете необходимыми инструментами для расширения и модификации редактора под свои нужды. По факту, фронтенд разработчики делают это каждый день.

Редактор всё ещё нужно немного отполировать, Brackets на данный момент находится в стадии активной разработки. Следует ожидать, что в этом году Brackets отберёт у Sublime Text определённое количество потенциальных покупателей!


"Следует ожидать, что в этом году Brackets отберёт у Sublime Text определённое количество потенциальных покупателей!"


JavaScript фреймворки

Так как наша индустрия продолжает эволюционировать, можно наблюдать широкое распространение новых методологий, которые предоставляют гибкий опыт работы во время веб-разработки SPA или одностраничных веб-приложений (single page applications). В прошлом, усилия, которые потребовались бы для воплощения подобных амбиций, требовали существенного количества кода, к счастью, благодаря различным фреймворкам, процесс стал гораздо проще! Следующие инструменты помогут вам начать.

Backbone

На данный момент чемпион среди JavaScript фреймворков (по крайней мере по популярности), Backbone предоставляет структуру для неряшливого jQuery спагетти кода!

Несмотря на то что потребуется переосмысление идей клиентского MVC (или MV*) фреймворка (особенно если вы знакомы с фреймворками для разработки на стороне сервера, такими как Rails или Laravel), поняв основы, вы начнёте писать чистый, модульный и элегантный код.

Хотите найти интенсивный курс по Backbone? Обратите внимание на Tuts+ Premium и CodeSchool; они подготовят вас в рекордное время.


"Backbone предоставляет структуру для неряшливого jQuery спагетти кода!"

Ember.js

Ember - идейный наследник SproutCore, мощного JavaScript фреймворка портирующего Cocoa UI для веб. Причина изменения, связанна с тем фактом, что кодовая база была полностью переписана с нуля, пытаясь избавиться от значительного количества устаревшего кода, также как от некоторых неисправностей и способах мышления.

Как заявляет команда Ember, успех Backbone доказал им, что сообщество разработчиков в самом деле нуждается в создании адаптивных приложений на стороне клиента, однако, у них также за спиной года опыта создания и улучшения кастомных элементов интерфейса с использованием HTML и CSS. SproutCore пыталась использовать похожие на Cocoa элементы UI, что оказалось ошибкой.

После этой ошибки и появился Ember - новый фреймворк, который полюбился сообществом разработчиков, за рекордное время. Если вас не устраивает Backbone, обратите внимание на Ember.


"Если вас не устраивает Backbone, обратите внимание на Ember."

AngularJS

Angular - разработан Google, пошёл другим путём, предоставляет необходимые инструменты для расширения HTML лексикона ваших приложений. В то время как некоторые считают, что это грязная привязка данных, а не разделение кода, другие считают, что это чемпион гибкости и простаты разработки.

Как утверждает команда Angular, HTML не был создан для динамических представлений. И Angular заполнил данную нишу. Какое у вас мнение?


"HTML не был создан для динамических представлений. И Angular заполнил данную нишу."

Knockout.js

Один из оригинальных JavaScript фреймворков, Knockout, предшествовал Angular, также предлагает подход привязки данных, для создания адаптивных приложений, с минимальным количеством кода.

Опять же, множество разработчиков оспаривают подобный подход, не стоит отрицать, что в этом есть какой-то смысл. То что потребует сотен строк кода в Backbone, может быть достигнуто несколькими строками кода основанного на Knockout. Единственный вопрос: сможете-ли вы спать по ночам, зная обо всех привязанных данных в вашем HTML? На данный вопрос нет ответа. Зависит только от ваших предпочтений.


"То что потребует сотен строк кода в Backbone, может быть достигнуто несколькими строками кода основанного на Knockout."

Meteor

Meteor - новый full-stack JavaScript, основанный на Node.js. Однозначно является революцией в написании отзывчивых и динамичных веб-приложений.

Представьте себе что всё приложение написано исключительно на JavaScript; не только клиентская часть, но также уровень хранения (persistence layer)! Всё API приложения создано на одном языке, представьте удобство и гибкость данного решения!

В то время как данный фреймворк ещё не достиг 1.0 версии, его поддержка и разработка остаётся довольно активной, вам неприменно стоит изучить данный, новый подход создания приложений.


"Представьте себе что всё приложение написано исключительно на JavaScript."

Mocha

Как упоминалось ранее, мир фронтенда значительно повзрослел за последнюю половину десятилетия. На данный момент, сообщество разработчиков съёживается от одной мысли о том, что им приходится писать хотя бы одну строку JavaScript кода. На сегодняшний день, существует не только бесконечное множество JavaScript фреймворков и библиотек, но также в нашем распоряжении есть инструменты для тестирования (даже TDD).

Есть множество фреймворков для тестирования из которых можно выбрать, включая Jasmine и QUnit, по мнению автора, стоит поэксперементировать с Mocha, для начала, который был создан человеком ответственным за появления Stylus и фреймворка Express: TJ Holowaychuk.


"Mocha был создан человеком ответственным за появления Stylus и фреймворка Express: TJ Holowaychuk."


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

Годами фронтенд сообщество спорило о необходимости препроцессоров. Язык довольно прост, зачем его ещё и компилировать? К счастью, со временем, веб технологии повзрослели и большинство фронтенд разработчиков пришли к умозаключению, что по куда сам язык немного не повзрослеет, препроцессоры нужны для создания большей части веб-сайтов, кроме пожалуй самых простых и тривиальных. Не беспокойтесь: большинство этих препроцессоров настолько удобны и органично смотрятся в связке с самим языком, что на их изучение потребуется совсем немного времени.

Sass

Как утверждается на веб-сайте Sass, c Sass вам снова будет интересно писать CSS (Sass makes CSS fun again). Переменные, вложение, миксины...В Sass всё это есть. Важно заметить, если вы поставили перед собой цель - изучить самый популярный препроцессор, также как и множество фреймворков созданных с его помощью, таких как, к примеру Compass, в таком случае Sass - ваш выбор.

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

Вероятнее всего, когда вы присоединитесь, в будущем, к команде разработчиков, шансы высоки, что они будут работать с Sass и вам необходимо будет его изучать.


"С Sass вам снова будет интересно писать CSS."

LESS

В большинстве случаев, самые популярные препроцессоры - Sass, LESS и Stylus довольно похожи друг на друга. Они отличаются разве что синтаксисом. В прошлом, веб-дизайнеры больше отдавали своё предпочтение LESS, так как он предоставляет читабельный синтаксис похожий на CSS (это то чего изначально не хватало Sass). В качестве бонуса, всего лишь достаточно импортировать единственный JavaScript файл и наслаждаться всей гибкостью динамичных таблиц стилей.


"Обычно веб-дизайнеры отдают предпочтение LESS нежели Sass."

Stylus

Относительно новая технология, Stylus пожалуй предоставляет больше всего гибкости по сравнению с другими препроцессорами в этом списке. Предпочитаете точки с запятой? Пожалуйста, используйте их. Не любите разделять двоеточиями свойства и значения? Убирайте их! Ключевая особенность Stylus - тот факт, что у вас есть возможность кастомизировать таблицы стилей, согласно своему вкусу. Конфигурируемость в лучшем виде!

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


"Конфигурируемость в лучшем виде!"

CoffeeScript

CoffeeScript, как многие могут заявить, делает JavaScript более управляемым. Начнём с того, что он убирает неприятные особенности языка. Точки с запятой? Их больше нет. Угловые скобки? Их тоже нет. Круглые скобки? В случае с CoffeeScript они опциональны. Далее данный препроцессор предоставляет нам новые особенности, которые в свою очередь представляют из себя синтаксический сахар. Лексическая область видимости, splats, понятность массивов (array comprehension), в CoffeeScript это всё есть и в конечном итоге язык будет скомпилирован в привычный JavaScript.

Благодаря с каждым днём увеличивающейся адаптации и различным улучшениям, включая source maps, большинство недостатков использования данного препроцессора быстро сходят на нет. Если необходимость использования очередного препроцессора вызывает у вас вопросы, не стоит об этом беспокоиться; также как и Sass, большинство нововведений CoffeeScript в конечном итоге будут реализованы в будущих версиях ECMAScript.


"CoffeeScript делает JavaScript более управляемым."

TypeScript

Для тех кого не устраивает Ruby-подобный синтаксис CoffeeScript'а, TypeScript будет отличной альтернативой. Вы сможете всё также писать код на стандартном диалекте JavaScript, в то время, как в вашем распоряжении будут дополнительные возможности ECMAScript 6. Также как и CoffeeScript, в конечном итоге код будет скомпилирован в обычный JavaScript, который будет запускаться в браузере.


"TypeScript позволяет писать код на стандартном диалекте JavaScript, в то время, как в вашем распоряжении будут дополнительные возможности ECMAScript 6."

CodeKit

CodeKit - созданный Bryan Jones, произвёл огромное впечатление на мир фронтенда в 2012 году, и на данный момент используется такими сайтами, как BarackObama.com и Engadget. Как стероиды для веб-разработчика, он объединяет несколько компиляторов, минификаторов и различные способы по оптимизации в одно удобное приложение для Mac. Если терминал представляет из себя нечто вроде тёмной коробки, препятствуя использованию возможностей ранее упомянутых препроцессоров, тогда CodeKit решение для вас.


"CodeKit произвёл огромное впечатление на мир фронтенда в 2012 году."

LiveReload

LiveReload во многом похож на CodeKit. По факту, не обращая внимания на различия в интерфейсе и некоторых уникальных возможностей CodeKit, оба приложения в равной степени позволят вам дойти от точки A до точки Z, если можно так выразиться.

Таже как и CodeKit, LiveReload позволяет отслеживать изменения файлов и в ответ производит необходимую компиляцию и работу препроцессора. Кроме этого браузер будет обновлять страницу, во время сохранения каждого файла.

Тем не менее, в отличии от CodeKit, LiveReload доступен, как для Mac, так и для Windows. Проще говоря, если вы пользователь Windows, LiveReload по умолчанию будет вашим выбором. Не волнуйтесь, это отличное приложение! 


"LiveReload доступен, как для Mac, так и для Windows." 


Библиотеки

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

jQuery

Что ещё можно сказать о jQuery, чего ещё никто не говорил? jQuery сделал JavaScript более доступным и взрастил новое поколение разработчиков полных энтузиазма к написанию кода для клиентской части приложений. Пожалуй это самый большой комплимент, который можно адресовать библиотеке. Конечно же, jQuery не даёт нам ответы на все вопросы и проблемы, однако, когда дело касается взаимодействию с DOM, вы не найдёте лучшего инструмента.


"Когда дело касается взаимодействию с DOM, вы не найдёте лучшего инструмента."

Underscore

Вам когда-либо казалось, что в JavaScript отсутствует множество нативных функций, к примеру, поиск (find), сборка (pluck) или переборка (shuffle)? Если так, вы не первый, кото задался этим вопросом. К счастью для нас, популярная библиотека Underscore предоставляет недостающий функционал. Представьте пояс с инструментами, который содержит дюжину полезных функций, которые в противном случая пришлось бы писать самому для каждого проекта.

Если вам доводилось использовать Backbone, вы скорее всего знакомы с Underscore, так как это неотъемлемая зависимость данного фреймворка.


"Вам когда-либо казалось, что в JavaScript отсутствует множество нативных функций?"

D3

d3js.org
D3 - потрясающая библиотека для визуализации основанная на JavaScript, позволяет вам привязывать данные к DOM и совершать трансформации с документом. Чтобы узнать больше, ознакомьтесь с репозиторием на GitHub, взгляните на большую галерею примеров визуализации различных наборов данных.


"D3 - потрясающая библиотека для визуализации основанная на JavaScript."


Инструменты и утилиты

Как только вы оптимизируете рабочий процесс, вам скорее всего придёт в голову, что стоит воспользоваться дополнительными инструментами и функционалом. Данные инструменты включают в себя всё, начиная от загрузчика модулей, заканчивая инструментами для тестирования.

RequireJS

В один прекрасный момент, вам покажется странной идея добавления всего JavaScript кода, в единственный файл. Когда настанет этот день, пожалуй вы наткнётесь на RequireJS, который представляет из себя загрузчик файлов/модулей. К сожалению переход к модульному подходу написания JavaScript гораздо сложнее, чем может показаться на первый взгляд. После того, как вы разберётесь с концепцией AMD, вам предстоит понять логистику: как настроить RequireJS? Что насчёт не AMD библиотек? Что по поводу управления зависимостями? Как обстоят дела с конфигурацией и оптимизацией? Да это правда, существует некая кривая обучения данному инструменту, но это стоит того.


"RequireJS пожалуй самый популярный загрузчик модулей на сегодняшний день."

Testem

Существенный барьер перед началом написания тестов - факт, что иногда настройка необходимого инструмента может потребовать значительное количество времени. Чем больше времени данный процесс занимает, тем вероятнее шанс, что разработчик бросит эту затею. Поэтому Testem и является таким потрясающим инструментом; вы затрачиваете минимум усилий на написание тестов и создание тестов приносит веселье!

Grunt

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

Normalize

Нам всем приходилось испытывать подобное - веб-сайт выглядит хорошо в Chrome и Firefox, но, потом, мы открываем его в Internet Explorer, и понимаем тот факт, что нам придётся потратить несколько часов на то, чтобы решить проблемы совместимости браузеров.

Normalize позволяет браузерам отображать страницы одинаково, насколько это возможно. Вам когда-либо приходилось отлаживать проблему разной (три пикселя) высоты полей ввода, которая разница от браузера к браузеру? С Normalize можно забыть об этом!


"Normalize позволяет браузерам отображать страницы одинаково, насколько это возможно."

HTML5 Boilerplate

HTML5 Boilerplate продукт многолетнего опыта разработки и настройки. Он отлично подойдёт во время начала нового проекта и используется такими компаниями, как Google, Microsoft, и NASA. Даже если вы не планируете полностью использовать данный инструмент, он послужит отличным ресурсом, можно копировать и использовать интересующие вас части.


"Продукт многолетнего опыта разработки и настройки."

Twitter Bootstrap

В то время как разработчики постоянно говорят о необходимости написания кода, который можно повторно использовать, правда заключается в том, что когда дело касается CSS, данный совет часто игнорируется. Как часто вам приходилось писать стили для блог поста или какого-либо сообщения? Если бы только в нашем распоряжении была библиотека с компонентами, которые можно повторно использовать в каждом проекте, мы могли бы создавать приложение с невероятной быстротой!

Познакомьтесь с Bootstrap. Разработанный командой Twitter, Bootstrap предоставляет нам множество компонентов и классов (как CSS так и JavaScript), тем самым позволяет минимизировать количество кода, который приходится писать в каждом новом проекте. Данный фреймворк включает в себя всё, начиная от сброса стилей и привлекательных кнопок, заканчивая модальными окнами, которые активируются JavaScript. Особенно данный инструмент будет интересен тем кто плохо знаком с дизайном - Bootstrap будет замечательным выбором.


"Особенно данный инструмент будет интересен тем кто плохо знаком с дизайном - Bootstrap будет замечательным выбором."

Foundation 4

Если Twitter Bootstrap кажется вам недостаточно модным, в этом случае стоит обратить внимание на Foundation 4, от ребят из Zurb. Также как и Bootstrap, Foundation предлагает нам гибкую сетку, JavaScript плагины и различные CSS компоненты для быстрого прототипирования проекта. Правда заключается в том, что вы не ошибётесь при любом выборе, буть то Bootstrap или Foundation. В конечном итоге всё сводится к персональным предпочтениям. Что вам больше нравится?


"Если Twitter Bootstrap кажется вам недостаточно модным, в этом случае стоит обратить внимание на Foundation 4."


Заключение

Правда в том: наша экосистема с каждым днём взрослеет и нам приходится постоянно обучаться и экспериментировать с последними инструментами и фреймворками. Но, эй, это то на что мы подписались; так что не стоит жаловаться! У нес есть уникальная возможность быть в самом сердце удивительного мира революций и инноваций под названием - интернет.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.