Инструментарий JavaScript-разработчика — очень практично

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

Как язык сценариев, JavaScript изначально был создан для улучшения возможностей отображения веб-страниц, но сегодня JavaScript используется почти везде, где только можно вообразить. Поскольку технические возможности всей отрасли продолжают улучшаться, JavaScript теперь может работать на стороне сервера, а также компилироваться в код для нативных мобильных приложений. Сегодняшние JavaScript-разработчики являются частью богатой экосистемы, и они могут свободно выбирать из сотен IDE, инструментов и фреймворков. Из-за такого количества вариантов и ресурсов некоторые разработчики могут чувствовать, что не знают, с чего начать обучение. Я рад обсудить и обрисовать ситуацию, с которой сталкиваются современные JavaScript-разработчики. Сначала я кратко представлю историю JavaScript, а затем расскажу о самых популярных фреймворках, инструментах и IDE.

Краткий экскурс в историю

Давайте отправимся в небольшое путешествие. Вернёмся в 1995 год, когда Netscape Navigator и Internet Explorer 1.0 были единственными вариантами среди браузеров. Веб-сайты были полны раздражающего мигающего текста и слишком большого количества GIF-изображений. Загрузка страницы, полной насыщенного контента, через коммутируемое соединение могла занимать до двух полных минут. Затем появился веб-язык, который позволил этим древним сайтам выполнять код на стороне клиента. Этот год стал годом рождения JavaScript.

Эти сайты, созданные 20 лет назад, не особо использовали JavaScript и, конечно, не раскрывали полностью потенциал этого языка. Иногда всплывающее диалоговое окно сообщало какую-то информацию, или новости отображались как прокручивающийся текст в окне, или cookie сохранял ваше имя пользователя, чтобы при возвращении на сайт через несколько месяцев ваше имя отображалось сразу. Естественно, тогда не было должностей, где JavaScript был бы основным языком разработки, и уже было большой удачей написать хоть немного JavaScript на работе. Короче говоря, использование JavaScript на сайтах в то время было просто трюками в DOM.

Сегодня JavaScript можно встретить практически везде. ОтBootstrapдо ReactJS, Angular, вездесущего jQuery и даже Node.js, работающего на стороне сервера, JavaScript стал одним из самых важных и популярных веб-языков.

Фреймворки

Одной из самых больших областей изменений в JavaScript с момента его появления является способ его использования. Дни, когда вызывали неуклюжий метод document.GetElementById и создавали тяжеловесные объекты XmlHttpRequest, прошли. Вместо этого различные вспомогательные библиотеки абстрагируют эти базовые функции, делая JavaScript проще для использования разработчиками. Это одна из главных причин, по которым сегодня JavaScript можно увидеть повсюду.

jQuery

jQuery был выпущен Джоном Резигом в 2006 году, и он предоставляет богатый набор инструментов, которые абстрагируют и упрощают различные неясные и загадочные команды и методы JavaScript. Нет более простого способа продемонстрировать этот инструмент, чем примеры кода.

Создание AJAX-запроса на чистом JavaScript:

function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               alert("success");
           }
           else if(xmlhttp.status == 400) {
              alert("error 400")
           }
           else {
               alert("something broke")
           }
        }
    }

    xmlhttp.open("GET", "test.html", true);
    xmlhttp.send();
}

Источник: Stack Overflow

А создание AJAX-запроса с помощью jQuery:

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

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

AngularJS

AngularJS, который часто также называют «Augular», дебютировал в 2009 году. Это фреймворк, созданный Google с целью упростить создание одностраничных приложений (SPAs). Как и jQuery, его цель — абстрагировать сложные операции в высоко переиспользуемые методы. Он предоставляет для JavaScript архитектуру Model-View-Controller (MVC).

ReactJS

ReactJS, который часто также называют «React», — это новичок, только что вступивший в игру. Он был создан Facebook и впервые выпущен в 2013 году. Facebook считает, что React может служить альтернативой Angular для решения проблем SPA, так что если вы думаете, что Angular и React — конкуренты, вы правы. Однако самое большое отличие от Angular заключается в том, что React — более эффективная, высокопроизводительная и быстрая библиотека. На следующем рисунке показано время, необходимое для отображения списка из 1000 элементов в DOM с использованием React, Angular, Knockout (другой библиотеки, не рассматриваемой в этой статье) и чистого JavaScript:

Источник: The Dapper Developer

Если для вашего приложения производительность имеет большое значение, то React — правильный выбор.

Среда разработки JavaScript

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

Sublime Text

Sublime Text — на самом деле не IDE, а лёгкий, чрезвычайно быстрый текстовый редактор для программирования, предоставляющий подсветку синтаксиса и интуитивно понятные сочетания клавиш. Он кроссплатформенный, что делает его идеальным выбором для разработчиков, которые хотят использовать Mac в среде PC (или наоборот). Почти каждую часть Sublime Text можно настроить, а также он предлагает множество плагинов, добавляющих функции, подобные IDE, такие как интеграция с Git и линтинг кода. Это отличный выбор для энтузиастов JavaScript и начинающих разработчиков. На момент публикации этой статьи каждая лицензия Sublime Text стоит $70.

Источник: Sublime Text

WebStorm

WebStorm — это интеллектуальная IDE, разработанная командой JetBrains и ориентированная в основном на разработку на HTML, CSS и JavaScript. Она взимает лишь символическую плату за лицензию (на момент публикации этой статьи она составляла $49), и она получила широкое признание среди опытных экспертов по JavaScript и уже считается де-факто стандартом, и не без оснований, потому что её встроенные инструменты автодополнения кода и инспекции практически уникальны. WebStorm также предоставляет богатый отладчик JavaScript и интегрируется с различными популярными фреймворками модульного тестирования, такими как Karma test runner и JSDriver, и даже включает Mocha для Node.js.

Одна из лучших функций WebStorm — это возможность Live Edit. Если в Chrome и WebStorm установлен определённый плагин, разработчики могут видеть результаты прямо в браузере во время изменения кода. Разработчики также могут настроить Live Edit, чтобы выделять изменения в окне браузера, что значительно повышает продуктивность отладки и написания кода.

В целом, если JavaScript — ваша работа на полную ставку, IDE WebStorm может стать отличным выбором.

Источник: JetBrains

Скобки

Brackets — это открытая бесплатная IDE, ориентированная на визуальные инструменты. Brackets предлагает функцию Live Edit, аналогичную Web, позволяющую напрямую видеть результаты изменений кода в окне браузера. Она также поддерживает встроенное редактирование, позволяя писать код и сразу видеть результаты, без переключения между разными приложениями или использования всплывающих окон. Одна из самых интересных функций Brackets называется Extract; она может анализировать файлы Photoshop PSD, чтобы получать информацию о шрифтах, цветах и размерах. Благодаря этой функции он очень подходит для разработчиков JavaScript, которые также занимаются дизайном.

(Нажмите на изображение, чтобы увеличить)

Источник: Brackets

Atom

Atom — это открытый многофункциональный текстовый редактор, выпущенный GitHub, и с ним очень легко начать работу. После установки его можно запускать сразу, без необходимости изменять какие-либо конфигурационные файлы, и он «просто работает». Самое интересное в Atom — то, что каждый его аспект можно настроить (GitHub называет это «hackable»). Он построен на веб-ядре, поэтому пользователи могут настраивать его внешний вид, используя стандартные HTML, CSS и JavaScript. Хотите задать Atom другой фон и цвет текста? Просто измените CSS. Или можно скачать и установить различные темы, созданные для Atom. Эта гибкость позволяет Atom выглядеть так, как вы хотите. Для начинающих разработчиков JavaScript и пользователей, любящих кастомизацию, Atom — отличный инструмент.

(Нажмите на изображение, чтобы увеличить)

Источник: Atom

Инструменты сборки и автоматизации

Современные проекты на JavaScript становятся всё сложнее, и количество изменяющихся частей также растёт. Это не означает, что язык или соответствующие инструменты неэффективны, скорее это прямое следствие богатства, интересных возможностей и сложности веб-приложений, создаваемых в настоящее время. При работе над крупными проектами часто приходится выполнять множество повторяющихся задач, будь то перед фиксацией кода в репозитории или сборкой кода для продакшена. Эти задачи могут включать объединение в пакеты, минификацию, компиляцию CSS-файлов LESS или SASS или даже запуск тестов. Выполнение этих задач вручную не только утомительно, но и неэффективно. Лучший подход — автоматизировать эти задачи с помощью инструмента сборки, который их поддерживает.

Объединение в пакеты и минификация

Большая часть JavaScript и CSS, который вы пишете, будет использоваться на нескольких веб-страницах. Поэтому вы, вероятно, поместите это содержимое в отдельные файлы .js и .css, а затем будете ссылаться на эти файлы на веб-страницах. В результате браузеру пользователя, чтобы полностью отобразить вашу веб-страницу, нужно отправить отдельный HTTP-запрос для загрузки каждого из этих файлов (или как минимум проверить, не изменились ли эти файлы).

HTTP-запросы обходятся дорого. В дополнение к размеру самого запроса вы также платите за сетевую задержку, HTTP-заголовки, cookie и так далее. Инструменты объединения в пакеты и минификации предназначены для того, чтобы уменьшить или даже полностью устранить влияние этих запросов.

Объединение в пакеты

Самое простое, что разработчики могут сделать для повышения производительности веб-кода, — это объединить код в пакеты. В процессе объединения несколько файлов JavaScript или CSS сливаются в один файл JavaScript или CSS. Это похоже на соединение нескольких отдельных панорамных фотографий в одну непрерывную фотографию. Объединяя файлы JavaScript и CSS в пакеты, мы можем устранить большую часть накладных расходов на HTTP-запросы.

Минификация

Ещё один способ, которым разработчики JavaScript могут повысить производительность, — минифицировать только что объединённый код. Процесс минификации сжимает код JavaScript и CSS до минимально возможной формы, сохраняя при этом функциональность неизменной. Для JavaScript это означает переименование переменных в бессмысленные имена из одного символа и удаление всех пробельных и форматирующих символов. Для CSS, поскольку оформление страницы зависит от имён переменных, обычно удаляются только форматирование и пробелы. Минификация может значительно улучшить производительность сети, так как уменьшает количество байтов в каждом HTTP-ответе.

Неминифицированный AJAX-код JavaScript (тот же код, что показан выше):

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

Тот же код после минификации:

$.ajax({url:"test.html",statusCode:{200:function() {alert("success");},
400:function(){alert("error 400");}},error:function(){alert("something broke");}});

Обратите внимание: я разделил минифицированный вывод на две строки только для удобства чтения в этой статье; на самом деле минифицированный вывод обычно занимает одну строку.

Когда объединять и минифицировать

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

Файлы карт исходного кода

Иногда определённые ошибки в коде можно воспроизвести только в production. В результате минифицированный код становится проблемой, когда нужно отладить некоторые проблемы. К счастью, JavaScript поддерживает файлы source map, которые могут «сопоставлять» минифицированный код с исходным кодом. Эти файлы source map создаются на этапе минификации некоторыми из упомянутых ниже инструментов сборки. Затем ваш отладчик JavaScript может использовать эти файлы карт, чтобы предоставить вам чистый, читаемый код для отладки. По возможности публикуйте файлы карт вместе с фактическим кодом, чтобы можно было отлаживать код, когда что-то идёт не так.

Линтинг кода

Инструменты линтинга проверяют ваш код на распространённые ошибки и проблемы в соответствии с предопределёнными правилами форматирования. Ошибки, о которых сообщают эти инструменты, обычно похожи на следующие: использование табуляции вместо пробелов, пропуск точек с запятой в конце строк или использование фигурных скобок без операторов if, for или while. Большинство IDE включают инструменты линтинга, а некоторые другие IDE позволяют пользователям самостоятельно устанавливать плагины линтинга.

Два самых популярных инструмента линтинга JavaScript — это JSHint и JSLint. JSLint — это фреймворк линтинга, разработанный Дугласом Крокфордом, а JSHint был ответвлён от JSLint участниками сообщества. Они различаются только некоторыми стандартами форматирования кода. Моя рекомендация — попробовать оба, а затем выбрать тот, который лучше всего подходит вашему стилю кодирования.

Автоматизация задач: Grunt

Несмотря на своё название, Grunt (которое буквально означает «храпеть») — отнюдь не грубый инструмент; это мощный инструмент сборки командной строки, способный выполнять множество определяемых пользователем задач. Настроив простой файл конфигурации, вы можете заставить Grunt выполнять всевозможную работу, например компилировать файлы LESS или SASS, объединять и минифицировать все файлы JavaScript и CSS в определённой папке или даже запускать какой-нибудь инструмент линтинга или тестовый фреймворк. Вы также можете настроить Grunt для запуска в качестве Git-хука, чтобы автоматически минифицировать и объединять ваш код при фиксации изменений в репозитории системы контроля версий.

Grunt поддерживает именованные цели, позволяя задавать разные команды для разных сред. Например, вы можете назначить 'dev' и 'prod' в качестве целей. Это очень полезно в таких сценариях, как объединение и минификация кода в продакшене, при пропуске этого шага в среде разработки для облегчения отладки.

Очень полезная функция в Grunt называется 'grunt watch'; она может отслеживать изменения файлов в каталоге или в наборе файлов. Эту функцию можно интегрировать в IDE, такие как WebStorm и Sublime Text. Используя функцию watch, вы можете запускать события на основе изменений файлов. Компиляция LESS или SASS — практичный пример использования этой функции: вы можете настроить Grunt так, чтобы он отслеживал ваши файлы LESS или SASS и компилировал их сразу при изменении, а скомпилированные файлы затем можно напрямую использовать в среде разработки. Вы также можете заставить Grunt отслеживать изменения и автоматически запускать какой-нибудь инструмент линтинга после изменения каждого файла. Выполнение задач в реальном времени через Grunt watch — отличный способ повысить вашу производительность.

Автоматизация задач: Gulp

Grunt и Gulp — оба инструмента для решения задач автоматизации сборки, и можно сказать, что они прямые конкуренты. Основное различие между ними в том, что Grunt больше ориентирован на конфигурацию, а Gulp — на код. В Gruntfile вы настраиваете задачи сборки через декларативный JSON, а в Gulpfile выполняете ту же функциональность, написав функции JavaScript.

Следующий конфигурационный файл Grunt компилирует файлы SASS в файлы CSS, когда файлы SASS изменяются:

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: "app/styles",
        src: "**/*.scss",
        dest: "../.tmp/styles",
        expand: true,
        ext: ".css"
      }]
    }
  },
  autoprefixer: {
    options: ["last 1 version"],
    dist: {
      files: [{
        expand: true,
        cwd: ".tmp/styles",
        src: "{,*/}*.css",
        dest: "dist/styles"
      }]
    }
  },
  watch: {
    styles: {
      files: ["app/styles/{,*/}*.scss"],
      tasks: ["sass:dist", "autoprefixer:dist"]
    }
  }
});
grunt.registerTask("default", ["styles", "watch"]);

Источник: Grunt vs Gulp – За пределами цифр

Следующий конфигурационный файл Gulp аналогично компилирует файлы SASS в файлы CSS, когда файлы SASS изменяются:

gulp.task("sass", function () {
  gulp.src("app/styles/**/*.scss")
    .pipe(sass())
    .pipe(autoprefixer("last 1 version"))
    .pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
  gulp.run("sass");
  gulp.watch("app/styles/**/*.scss", function() {
    gulp.run("sass");
  });
});

Источник: Grunt vs Gulp – За пределами цифр

Я предлагаю вам свободно выбрать тот, который вам больше нравится. Эти два инструмента обычноnpmзагружаются через менеджер пакетов Node.js.

Итог

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

Разработчики также пережили огромные изменения с 1995 года по настоящее время. Сегодняшние разработчики более охотно используют богатые и надёжные фреймворки, инструменты и IDE для повышения эффективности работы и производительности.

Создание вашего первого современного приложения на JavaScript может быть проще, чем вы думаете! Просто выберите IDE (начинающим я рекомендуюAtom), затем установитеnpmиgrunt. Если позже вы где-то застрянете,Stack Overflow— очень хороший ресурс. Потратив совсем немного времени на изучение основ, вы быстро сможете начать разработку и в конечном итоге опубликовать свое первое современное приложение на JavaScript.

Ресурсы

Руководства:

Учебник по JavaScript

Фреймворки:

IDE：

Инструменты линтинга:

Инструменты сборки и автоматизации

Полезные ресурсы

Stack Overflow

Источник: http://www.infoq.com/cn/articles/modern-javascript-toolbox