20 свежих инструментов для разработчиков Javascript

Оглавление (нажмите, чтобы открыть):

5 самых популярных фреймворков для JavaScript

AngularJS

Один из самых популярных инструментов JS-разработчика увидел свет в 2009 году. Благодаря широкой функциональности (хоть и не дотягивающей до Full-stack) и поддержке своего могущественного создателя, Angular быстро взобрался на вершину рейтинга лучших JS-фреймворков, и слезать оттуда не намерен.

Что касается свежих релизов, то в конце марта официально был представлен Angular 4.0.0 (несмотря на то, что 2.0.0 выпустили всего год назад). Такая скорость обновления связана не с «сыростью» выпускаемых продуктов, а в том, что первая версия содержала много упрощений, которые в неумелых руках приводили к ошибкам, а в опытных к существенным потерям в производительности, вторая является компромиссным переходом, третью пропустили, а четвертая — это актуальный продукт, доработанный по итогам всех замечаний. Правда, есть подозрение, что еще не до конца.

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

Во-вторых, Google постоянно выпускает всё новые и новые качественные библиотеки и плагины.

В-третьих, в Angular взаимодействие с HTML не подменяется DOM-моделью (HTML-код не смешивается со скриптами), что в конечном счете сказывается на удобстве чтения и тестирования кода. Кроме того, возможности Angular чуть шире, чем у большинства популярных JS-фреймворков.

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

ReactJS

Данный фреймворк был создан в 2013 году Джорданом Волком из Facebook. Низкий порог входа и простота использования сделали из ReactJS популярный продукт среди корпоративных разработчиков, найдя отклики в сердцах офисов таких компаний, как Airbnb, Netflix Walmart и т.д. Более того, именно React сегодня считается основным инструментом JS-разработчика, ну просто потому, что Angular — это немного сложно и избыточно.

Всё дело в том, что отличии от Angular, React сильно ограничен в функциональности. Более того, некоторые хардкорные разработчики всерьез и не считают ReactJS фреймворком, предлагая более понятное, но не совсем правильное определение «ограниченная библиотека для лентяев».

Зато основные плюсы работы с этим фреймворком такое описание раскрывает достаточно точно. Здесь вы оперируете шаблонами и готовыми callback-функциями, создавая собственный front-end. Для новичка всё достаточно удобно и понятно, но, справедливости ради, в Angular дела с этим обстоят ничуть не хуже.

Главное удобство и вместе с тем основная претензия к React — JSX компоненты. Это как раз тот случай, когда скрипты плотно смешиваются с HTML-кодом, стирая границы между представлением и функциональностью компонента. Ничего страшного в этом нет, но понимание работы и «правильность» страдают. Короче говоря, с React вы экономите время и нервы, а именно это зачастую играет ключевую роль в выборе, но теряете немного самоуважения.

Основным минусом, помимо самой ограниченности подхода, считается не самая лучшая официальная документация. Но то ли её серьёзно переработали, то ли ожидания критиков изначально были сильно завышены, но я не увидел ничего принципиально отличного от тех туториалов, что обычно предлагают своим клиентам Microsoft или Google.

Vue.js

Первая версия Vue.js строилась на тех же принципах, что и React, но исключая использование JSX-компонентов. Это была неплохая альтернатива, но до появления версии 2.0 это была довольно сырая библиотека. А потом понеслось. Просто взгляните на статистику: сумасшедший рост популярности на GitHub, Google Trends и в предпочтениях разработчиков.

Если говорить просто, то Vue.js — это некий компромисс между React и Angular. Front-end код легко создать, но вместе с тем читать и править. При этом это абсолютно никак не сказывается на конечном быстродействии, точнее сказывается, но только в положительную сторону.

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

Кроме того, востребованность Vue.js концентрируется в основном в районе Китая, поэтому о развитости сообществ тоже говорить не приходится. Во-вторых, ещё одна проблемы роста — большое количество runtime ошибок в шаблонах. Со временем всё исправляется, но данный факт пока относится к серьёзным проблемам, а не редких недоразумениям.

Ember.js

Ещё одна вариация на тему «Больше шаблонов — больше пользы разработчику». В сущности, вы не увидите здесь чего-то революционного, Ember, по сути — упрощённый Angular. Основное сходство обеспечивают двухсторонний биндинг и возможности, лежащие за гранью создания внешнего интерфейса.

Здесь реализуется модель MVC. реализуется по строгим конфигурациям. С точки зрения освоения инструмента новичком и обеспечения быстродействия разработки — почти идеальное решение. А вот когда решите с этой проторенной разработчиками дорожки, то сразу же обнаружите все острые подводные камни. Это и сложности кастомизации, и слишком частые кардинальные изменения версии, и связанный с этим быстро устаревающий типовой FAQ на форумах и в сообществах.

Meteor

Meteor — далеко не самый популярный фреймворк, но он обладает массой преимуществ, которыми обделены ранее перечисленные претенденты. Во-первых, это настоящий Full-stack инструмент разработчика. Во-вторых, писать здесь можно на чистом JavaScript. Третье — интеграция хоть с Angular, хоть с React. Четвертое — почти идеальная реализация механизма создания веб-ресурсов реального времени (примеры — онлайн-конфигураторы Mazda и Ikea). Более того, всё это сдобрено отличной официальной документацией, в том числе и обучающей, и большим сообществом разработчиков

Минусы при этом не слишком существенны: использование Mongo в качестве БД или других, но через Mongo Queries (в Angular, например, таких ограничений нет), да вызывающая сомнения безопасность полученного продукта, что для такой функциональности вполне естественно.

При этом Meteor относительно прост для изучения новичком, а опытному разработчику хватит и одного-двух дней. Однако, к сожалению, ни это, ни усилия разработчиков, постоянно дорабатывающих свой продукт, не позволяют обогнать других сегодняшних претендентов просто потому, что full-stack для многих — всё ещё очень сложно. Но, возможно, это лишь потому, что они не пробовали на вкус Meteor.

А какими фреймворками пользуетесь вы?

Пару недель назад мы писали про 5 самых популярных фреймворков для Java, сегодня речь пойдёт о JavaScript.

AngularJS

Один из самых популярных инструментов JS-разработчика увидел свет в 2009 году. Благодаря широкой функциональности (хоть и не дотягивающей до Full-stack) и поддержке своего могущественного создателя, Angular быстро взобрался на вершину рейтинга лучших JS-фреймворков, и слезать оттуда не намерен.

Что касается свежих релизов, то в конце марта официально был представлен Angular 4.0.0 (несмотря на то, что 2.0.0 выпустили всего год назад). Такая скорость обновления связана не с «сыростью» выпускаемых продуктов, а в том, что первая версия содержала много упрощений, которые в неумелых руках приводили к ошибкам, а в опытных к существенным потерям в производительности, вторая является компромиссным переходом, третью пропустили, а четвертая — это актуальный продукт, доработанный по итогам всех замечаний. Правда, есть подозрение, что еще не до конца.

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

Во-вторых, Google постоянно выпускает всё новые и новые качественные библиотеки и плагины.

В-третьих, в Angular взаимодействие с HTML не подменяется DOM-моделью (HTML-код не смешивается со скриптами), что в конечном счете сказывается на удобстве чтения и тестирования кода. Кроме того, возможности Angular чуть шире, чем у большинства популярных JS-фреймворков.

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

ReactJS

Данный фреймворк был создан в 2013 году Джорданом Волком из Facebook. Низкий порог входа и простота использования сделали из ReactJS популярный продукт среди корпоративных разработчиков, найдя отклики в сердцах офисов таких компаний, как Airbnb, Netflix Walmart и т.д. Более того, именно React сегодня считается основным инструментом JS-разработчика, ну просто потому, что Angular — это немного сложно и избыточно.

Всё дело в том, что отличии от Angular, React сильно ограничен в функциональности. Более того, некоторые хардкорные разработчики всерьез и не считают ReactJS фреймворком, предлагая более понятное, но не совсем правильное определение «ограниченная библиотека для лентяев».

Зато основные плюсы работы с этим фреймворком такое описание раскрывает достаточно точно. Здесь вы оперируете шаблонами и готовыми callback-функциями, создавая собственный front-end. Для новичка всё достаточно удобно и понятно, но, справедливости ради, в Angular дела с этим обстоят ничуть не хуже.

Главное удобство и вместе с тем основная претензия к React — JSX компоненты. Это как раз тот случай, когда скрипты плотно смешиваются с HTML-кодом, стирая границы между представлением и функциональностью компонента. Ничего страшного в этом нет, но понимание работы и «правильность» страдают. Короче говоря, с React вы экономите время и нервы, а именно это зачастую играет ключевую роль в выборе, но теряете немного самоуважения.

Основным минусом, помимо самой ограниченности подхода, считается не самая лучшая официальная документация. Но то ли её серьёзно переработали, то ли ожидания критиков изначально были сильно завышены, но я не увидел ничего принципиально отличного от тех туториалов, что обычно предлагают своим клиентам Microsoft или Google.

Vue.js

Первая версия Vue.js строилась на тех же принципах, что и React, но исключая использование JSX-компонентов. Это была неплохая альтернатива, но до появления версии 2.0 это была довольно сырая библиотека. А потом понеслось. Просто взгляните на статистику: сумасшедший рост популярности на GitHub, Google Trends и в предпочтениях разработчиков.

Если говорить просто, то Vue.js — это некий компромисс между React и Angular. Front-end код легко создать, но вместе с тем читать и править. При этом это абсолютно никак не сказывается на конечном быстродействии, точнее сказывается, но только в положительную сторону.

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

Кроме того, востребованность Vue.js концентрируется в основном в районе Китая, поэтому о развитости сообществ тоже говорить не приходится. Во-вторых, ещё одна проблемы роста — большое количество runtime ошибок в шаблонах. Со временем всё исправляется, но данный факт пока относится к серьёзным проблемам, а не редких недоразумениям.

Ember.js

Ещё одна вариация на тему «Больше шаблонов — больше пользы разработчику». В сущности, вы не увидите здесь чего-то революционного, Ember, по сути — упрощённый Angular. Основное сходство обеспечивают двухсторонний биндинг и возможности, лежащие за гранью создания внешнего интерфейса.

Здесь реализуется модель MVC. реализуется по строгим конфигурациям. С точки зрения освоения инструмента новичком и обеспечения быстродействия разработки — почти идеальное решение. А вот когда решите с этой проторенной разработчиками дорожки, то сразу же обнаружите все острые подводные камни. Это и сложности кастомизации, и слишком частые кардинальные изменения версии, и связанный с этим быстро устаревающий типовой FAQ на форумах и в сообществах.

Meteor

Meteor — далеко не самый популярный фреймворк, но он обладает массой преимуществ, которыми обделены ранее перечисленные претенденты. Во-первых, это настоящий Full-stack инструмент разработчика. Во-вторых, писать здесь можно на чистом JavaScript. Третье — интеграция хоть с Angular, хоть с React. Четвертое — почти идеальная реализация механизма создания веб-ресурсов реального времени (примеры — онлайн-конфигураторы Mazda и Ikea). Более того, всё это сдобрено отличной официальной документацией, в том числе и обучающей, и большим сообществом разработчиков

Минусы при этом не слишком существенны: использование Mongo в качестве БД или других, но через Mongo Queries (в Angular, например, таких ограничений нет), да вызывающая сомнения безопасность полученного продукта, что для такой функциональности вполне естественно.

При этом Meteor относительно прост для изучения новичком, а опытному разработчику хватит и одного-двух дней. Однако, к сожалению, ни это, ни усилия разработчиков, постоянно дорабатывающих свой продукт, не позволяют обогнать других сегодняшних претендентов просто потому, что full-stack для многих — всё ещё очень сложно. Но, возможно, это лишь потому, что они не пробовали на вкус Meteor.

Полезные ресурсы и инструменты для разработчика. Часть 2

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

11. The Responsinator

Очень полезная утилита, позволяющая дизайнерам почти мгновенно оценить внешний вид создаваемого responsive сайта на большинстве популярных мобильных устройств.

12. Timeline JS

Как понятно из названия, Timeline позволяет создавать интуитивные и простые в использовании хронологические ленты. Существует возможность добавлять содержимое из различных источников, а по умолчанию уже присутствует поддержка Twitter, YouTube, Flickr, Vimeo, Google Maps и SoundCloud.

13. CSSO

Аббревиатура инструмента расшифровывается как CSS Optimizer, что абсолютно точно отражает его функционал: CSSO оптимизирует и минимизирует созданный вами CSS код.

14. Graphene

Graphene представляет из себя панель и утилиту для отображения графиков в режиме реального времени, работающую на D3 и Backbone.

15. Crossfilter

Croosfilter — это JavaScript библиотека для быстрого анализа больших объёмов данных непосредственно в браузере.

16. CanJS

JavaScript фреймворк, который значительно упрощает создание веб-приложений. В инструмент включена поддержка jQuery, Zepto, Dojo, YUI и Mootools.

17. Fixie

Интерпретируя HTML5 теги Fixie автоматически добавляет нужный тип содержимого в нужные места.

18. Foresight.js

Foresight.js позволяет определять возможность устройства пользователя просматривать картинки высокого разрешения до момента запроса изображения с сервера.

19. Webshims Library

Для модернизации браузеров за счёт HTML5 решений и обеспечения в них поддержки недоступных функций могут используются » полимерные заполнители» . Webshims Library — это JavaScript библиотека для автоматизации запуска таких полимерных заполнителей.

20. dhtmlxSpreadsheet

Опенсорсный виджет, написанный на JavaScript и PHP, с возможностью использования в качестве плагина для WordPress, Joomla и нескольких других популярных систем. С помощью него вы сможете легко добавлять редактируемые таблицы в стиле Excel на страницы сайта.

Ниже указаны ссылки на другие подборки полезных инструментов для разработчика:

20 свежих инструментов для разработчиков Javascript

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

Themify.me Ultra

С первого дня создания CMS WordPress разработчики интернет-ресурсов и веб-дизайнеры постоянно ищут возможности упрощения и ускорения процедуры создания нового ресурса. Сегодня многие инструменты способны упростить разработку сайта, но Themify Ultra является самым продвинутым среди всех аналогов. С данным инструментом запуск нового ресурса стал максимально простым, ещё никогда он не был настолько простым. По сути это самая динамичная из существующих тем на WP.

Тема вмещает в себе более 60 установленных форматов, в них есть решения для самых распространённых вопросов. С динамической темой легко создать как одностраничный сайт, так и корпоративный ресурс или интернет-магазин. Все темы подгружаются практически в 1 клик.

Themify Ultra – это платный инструмент, но обладает демо-версией ко всем форматам, это позволяет убедиться в высоком качестве, работоспособности и стабильности дизайна. Некоторые из представленных форматов поставляются абсолютно бесплатно. Создатели гарантируют, что после оплаты клиент получит именно тот продукт, который он опробовал в демо-версии. В случае покупки подписки, клиент дополнительно получает 1 год техподдержки и регулярное обновление, допиливание нововведений.

DesignBombs

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

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

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

IMCreator

Активно развивающийся ресурс, который претендует на лидера привлечению пользователей. IMCreatop – это мощнейшая платформа для быстрого и беспроблемного создания сайтов самых разнообразных тематик и предназначений. Уже сегодня аудитория проекта превышает 11 млн. человек, а количество подписчиков растёт всё быстрее.

Мастер Йода рекомендует:  21 урок из курса по глубокому машинному обучению от Andrew Ng

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

Лёгкость использования не даётся бесплатно, здесь практикуется покупка PRO-подписки за $350 в год , но не накладывается никаких ограничений на число созданных ресурсов. Клиенты получают уникальный сайт с лейблом, собственным доменом и место на хостинге с загруженным и установленным ресурсом.

wpDataTables.com

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

Важное достоинство продукта – с плагином можно взаимодействовать в режиме реального времени. После любых корректив, изменения появятся на диаграмме. Уже сегодня плагин стоит на вооружении более 9 тысяч компаний в мире

Codester.com

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

Что здесь можно купить:

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

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

Преимуществом подобного магазина является возможность сравнить цены и качество товара, определиться с функционалом, а только затем купить наиболее выгодное решение для текущего проекта. Если сравнивать с остальными маркетплейсами в Codester относительно низкие цены, крайне редко свежие продукты стоят дороже $15 за загрузку.

BugHerd

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

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

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

Изначально предлагается пробная версия, позволяющая оценить способность и функциональность сервиса, а в будущем придётся ежемесячно платить $29 .

EverSign

Фрилансер направлены на работу с любым рынком, на котором есть спрос и присутствует высокая покупательская способность. Обычно это заказчики с Европы и США, но с ними появляется проблема юридического оформления сделки. Часто процесс требует массу времени, является напряжённым и затруднительным из-за массы деталей, он ещё усложняется при необходимости подписания бумажной версии договора. Сервис EverSign помогает избежать перечисленных трудностей.

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

Начать работу лучше с бесплатного плана, который обеспечивает утверждение до 5 документов в месяц. Если лимит быстро исчерпывается и требуется больше возможностей, покупается базовая подписка за $99 с неограниченным количеством подписей, тремя шаблонами на выбор и поддержкой 24/7 .

ActiTIME

Является крайне удобным и невероятно мощным инструментом, позволяющим эффективно управлять временем персонала. Функционала достаточно для организации работы команд над проектами и последующего контроля за сроками выполнения поставленных задач. Помогает предотвратить хаос, а благодаря отладке командной работы и чёткой постановке задач, проекты удаётся выполнять значительно быстрее.

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

CSS Design House

Ресурс не является очередным сборником визуально привлекательных сайтов. CSS Design House является лучшим интернет-агрегатором, помогающим отбирать продукты от ведущих дизайнерских компаний. Здесь размещены самые современные, качественные и профессиональные дизайнерские идеи с различных направлений веба.

На витрине сайта размещены современные, лучшие идеи как для частных лиц, так и крупных, коммерческих проектов. С помощью ресурса упрощается поиск исполнителя для реализации замысла.

LuckyOrange

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

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

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

Salesmate

Это гибкая CRM-система, направленная на малый бизнес. Концепция ресурса обеспечивает минимальную сложность и удобство использования инструмента. Стартапы и проектные команды через Salesmate быстрее заключают договора с клиентами. Уже сегодня количество пользователей превысило 1200 компаний с разных стран. Цена услуг демократичная — $15 ежемесячно. С инструментом удаётся автоматизировать процессы ввода данных, и прослеживать эффективность продаж.

Основные библиотеки, инструменты и фреймворки JavaScript, которые вы должны знать

JavaScript существует уже более 20 лет, и это один из тех языков, который не перестает развиваться. Язык переживал быстрый рост в последнее время, что заставляет задуматься, будут ли современные интерфейсные технологии JavaScript, которые хорошо известны сегодня, актуальны через пару лет.

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

Введение

Среда JavaScript стала просто огромной. Она имеет собственную экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются до JavaScript. Интересно, что NPM, который является де-факто менеджером пакетов для JavaScript, также является крупнейшим в мире реестром программного обеспечения. Вот выдержка из публикации, опубликованной на Linux.com еще в январе 2020 года.

С более чем 350 000 пакетами, реестр NPM содержит более чем вдвое пакетов по сравнению с другими наиболее популярными реестрами пакетов (одним их которых является хранилище Apache Maven). Фактически, в настоящее время это самый крупный реестр пакетов в мире.

Теперь давайте промотаем время вперед на восемь месяцев, и в настоящее время в реестре NPM имеется около 500 000 пакетов. Это огромный рост по сравнению с другими хранилищами пакетов.

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

Библиотеки

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

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

React — это библиотека JavaScript, созданная разработчиками Facebook и Instagram. React была признана самой любимой технологией среди разработчиков, согласно опросу Stack Overflow Survey 2020. React также является самым популярным проектом JavaScript, основываясь на подсчете звезд GitHub.

Так почему React привлекает столько внимания? С помощью React можно создать интерактивный интерфейс с использованием декларативного подхода, в котором вы можете контролировать состояние приложения, говоря «картинка должна выглядеть так». Он использует компонентную модель, в которой компоненты являются многократно используемыми элементами пользовательского интерфейса, и каждый компонент имеет свое собственное состояние.

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

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

Однако все изменилось, и среда JavaScript постоянно развивается. Некоторые функции jQuery были включены в новую спецификацию ECMAScript. Более того, новые библиотеки и фреймворки, используемые сегодня, имеют собственный способ связывания DOM, и поэтому простые методы манипуляции с DOM больше не требуются. Популярность jQuery находится на спаде, но я не думаю, что он исчезнет в ближайшее время.

D3 (или D3.js) — мощная библиотека JavaScript для создания интерактивных визуализаций с использованием веб-стандартов, таких как SVG, HTML и CSS. В отличие от других библиотек визуализации, D3 предлагает лучший контроль над окончательным визуальным результатом.

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

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

Фреймворки

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

Он часто включает в себя множество библиотек и имеет более высокий уровень абстракции. Функциональность, такая как обработка событий, создание вызовов AJAX, привязка шаблонов и данных и тестирование, встроены во фреймворк.

AngularJS когда-то была самой популярной технологией JavaScript среди разработчиков интерфейсов. Она был поддержана Google и сообществом частных лиц и корпораций. Несмотря на популярность, у AngularJS была своя доля недостатков. Команда провела два года работы над новой версией Angular, которая была, наконец, выпущена в сентябре 2020 года.

Выпуск Angular 2 был переделкой AngularJS. Некоторые из функций Angular 2 включают:

  • TypeScript поверх JavaScript как язык по умолчанию
  • компонентная архитектура
  • улучшенная производительность как на мобильных, так и на веб-платформах
  • лучшие инструменты и варианты скаффолдинга

Тем не менее, модернизация от Angular 1.x до Angular 2 является дорогостоящей, потому что Angular 2 — совершенно другой зверь. Это одна из причин, почему у Angular 2 не было такой же скорости принятия, как у ее предшественника. Но Angular и AngularJS по-прежнему относятся к числу наиболее часто используемых технологий в соответствии с Stack Overflow (2020). Проект имеет около 28 000 звезд в GitHub.

Vue.js — это легкая инфраструктура JavaScript, которая в этом году была в тренде. Это самый популярный фреймворк JavaScript на GitHub с точки зрения звезд GitHub. Синтаксис шаблона на основе HTML связывает предоставленный DOM с данными экземпляра.

Фреймворк предлагает опыт, похожий на React, с его виртуальными DOM и компонентами многократного использования, которые можно использовать для создания как виджетов, так и целых веб-приложений. Кроме того, вы также можете использовать синтаксис JSX для непосредственного написания функций рендеринга. Когда состояние изменяется, Vue.js использует систему реактивности, чтобы определить, что изменилось и перераспределяет минимальное количество компонентов. Vue.js также поддерживает интеграцию других библиотек во фремворк без особых хлопот.

Ember.js является интерфейсом на основе шаблона Model-View-ViewModel (MVVM). Он следует за стандартным подходом к настройке, который популярен среди сторонних фреймворков, таких как Ruby on Rails и Laravel. Ember.js включает в себя общие идиомы и лучшие практики фреймворков, чтобы вы могли создать приложение без особых усилий.

Стек Ember обычно включает:

  • Ember CLI: предоставляет основные варианты скаффолдинга и поддерживает сотни надстроек.
  • Ember Data: библиотека сохранения данных, которая может быть настроена для работы с любым сервером.
  • Ember Inspector: расширение доступно для Chrome и Firefox.
  • Liqu >Инструменты

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

Инструменты: универсальные исполнители задач

Универсальные исполнители задачи — это инструменты, используемые для автоматизации определенных повторяющихся задач. В число популярных исполнителей задач входят:

Gulp — это инструментарий JavaScript, который используется как исполнитель задач и как система сборки в веб-разработке. Компиляция, минимизация кода, оптимизация изображения, модульное тестирование, листинг и т.д. — это повторяющиеся задачи, которые должны быть автоматизированы. Gulp упрощает процесс написания задач даже для людей, которые менее знакомы с JavaScript.

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

Grunt — это исполнитель задач и инструмент автоматизации JavaScript. Grunt имеет интерфейс командной строки, который позволяет запускать настраиваемые задачи, определенные в файле, называемом Gruntfile. У Grunt есть тысячи плагинов на выбор, которые должны охватывать большинство обычных повторяющихся задач, с которыми вы столкнулись. С помощью Grunt вы можете запускать все задачи под одной командой, что упрощает вашу жизнь.

Gulp и Grunt требуют, чтобы вы потратили время на изучение и освоение нового инструмента, что займет у вас так же время. Ввода дополнительных зависимостей в ваш проект можно избежать, выбирая альтернативу, которая уже связана с Node.js. Хотя npm больше известен как менеджер пакетов, сценарии npm можно использовать для выполнения основной части вышеупомянутых задач.

Инструменты: тестирование

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

Jest — это относительно новая платформа тестирования, созданная Facebook и хорошо принятая сообществом React. Существует распространенное заблуждение, что Jest специально разработан для работы с React; однако, согласно документации Jest:

Несмотря на то, что Jest можно рассматривать как тест, специфичный для React, на самом деле это универсальная платформа тестирования, способная адаптироваться к любой библиотеке или фреймворку JavaScript. Вы можете использовать Jest для проверки кода JavaScript.

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

Jest имеет функцию под названием «snapshot testing», которая позволяет гарантировать, что пользовательский интерфейс приложения не изменится неожиданно. Разработчики из Facebook и другие участники вложили много работы в этот проект, поэтому не удивительно, что Jest окажется самой популярной платформой для тестирования JavaScript в ближайшие годы.

Mocha — это платформа тестирования JavaScript, которая имеет поддержку браузера, поддержку асинхронного обслуживания, включая перспективы, отчеты об охвате тестирования и JavaScript API для запуска тестов. Mocha часто соединяется с библиотекой утверждений, такой как Chai, should.js, expect.js, потому что у нее нет собственной библиотеки утверждений.

Jasmine — это ориентированный на поведение фреймворк JavaScript. Жасмин стремится стать браузером, платформой и независимым от фреймворка набором тестов. У Jasmine есть своя собственная библиотека утверждений, называемая matchers, которая дает инструменту чистый и легко читаемый синтаксис. Jasmine не имеет встроенного тестового исполнителя, и вам, возможно, придется использовать общий тестовый исполнитель, например, Karma.

В заключении

JavaScript остался актуальным со времен его создания еще в 1995 году. Вероятно, он останется таким же, пока браузеры не решат отказаться от него ради другого языка. Несмотря на то, что существует множество других языков, которые компилируются с использованием JavaScript, нет другого языка сценариев, который заменит JavaScript в обозримом будущем. Почему? Потому что JavaScript стал слишком популярным, чтобы его можно было заменить.

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

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

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

Подборка приятных полезностей для разработчиков

Содержание статьи

Мы живем в прекрасном мире, где программисты не стесняются выкладывать различные вкусности в паблик — нужно лишь знать, где их искать. Достаточно побродить по GitHub и другим площадкам для размещения кода, и ты найдешь решение для любой проблемы. Даже для той, которой у тебя до этого момента и не было.

Миссия этой рубрики — познакомить тебя с интересными и набирающими популярность проектами. Мы не ставим перед собой задачу в паре абзацев детально рассмотреть тот или иной инструмент — это, разумеется, нереально, а лишь обращаем твое внимание на ключевые особенности. За подробностями — велкам на гитхаб :).

Webhook

Webhook — это не просто система управления контентом, это платформа для создания сайтов — качественная смесь CMS и генератора статических сайтов. Проект ожил благодаря краудфандингу и успешно завершил кампанию на Kickstarter. Под капотом Node.js, Ember, Firebase, Grunt и «Django-like templating» благодаря SwigJS. А теперь остановимся на принципах работы Webhook. Сначала в панели администратора ты формируешь тип контента, определяешь, будет ли это шаблон или самостоятельная страница, и добавляешь блоки, которых целое множество: WYSIWYG- и Markdown-редакторы, изображения, галереи, аудиофайлы, все типы форм и прочее. А результатом будут сгенерированные HTML’ки, с понятным шаблонизатором, очень продуманной структурой и роутингом. Важно упомянуть, что проект платный — 25 долларов, но есть двухнедельный пробный период.

October

Просто великолепная CMS, основанная на фреймворке Laravel, которая реально позволяет разработчикам выразить себя. Очень гибкая архитектура, более чем содержательная документация, понятная система плагинов, AJAX framework, который позволяет абсолютно весь проект сделать динамичным. На данный момент под October написано несколько десятков плагинов, и, думаю, их число будет только расти, потому что это одна из немногих CMS, внутри которой мегапопулярный среди PHP разработчиков Laravel. Отличительной фичей является возможность установки плагинов прямо с официального сайта. При создании проекта ему присваивается 52-значный ключ, после чего этот ключик указывается в системе и все добавленные плагины синхронизируются и автоматом устанавливаются. Очень «современная» идея.

Cockpit

Простая и гибкая CMS на PHP. Cockpit будет отличным выбором при создании небольшого проекта, вроде визитки с портфолио или блога. Система состоит всего из пяти модулей: Regions (блоки), Collections, Mediamanager (тяни-таскай файловая система), Forms и Galleries. Важный момент, который не оставили без внимания разработчики, — это понятный API для разработки на стороне клиента.

Вот так выглядят запросы:

А еще есть полноценный REST:

Правда, на официальном полностью асинхронном сайте есть грубый баг в роутинге: перейти по ссылке, открыв ее в новой вкладке, нет возможности. Хотя если скопировать ссылку и перейти по ней, то все будет работать правильно.

Widgy

Начну, пожалуй, с того, что эта CMS написана на Python и Django. В Widgy тебя обязательно порадует обилие всевозможных модулей и простота подключения Django Apps. Весь функционал грамотно представлен в удобном drag and drop интерфейсе. Ну и здесь очень круто реализован визуальный редактор, который построен на основе CKEditor. Это совсем не типичный WYSIWYG, поскольку больше напоминает полноценный site-builder с конструктором страниц. Разработчики уделили много внимания API и назвали его django-widgy. С их слов, django-widgy — это гетерогенный древовидный редактор для Django, где каждый узел — самостоятельная единица.

Keystone

CMS и Web App Framework, написанная на Node.js с использованием Express и Mongoose. Система создавалась как инструмент для построения сложных веб-проектов, поэтому обеспечивает качественную структуру роутинга, шаблонов и моделей. А за счет этого функционирует автоматически генерируемый интерфейс администратора. Keystone — это действительно краеугольный камень.

Docpad

Docpad — это статический генератор сайтов. Со слов разработчиков, Docpad снимает ограничения между новичками и профессионалами, а также заставляет взглянуть на веб-разработку совсем с другого ракурса. На самом деле очень круто наблюдать, как твой фронтенд (Markdown, Jade, Coffee…) оживает на глазах. Огромным плюсом является множество плагинов и подробная документация, а точнее, даже ряд видеоуроков.

Все элементарно просто — принцип работы основывается на взаимодействии файлов шаблона с расширением .html.eco и файлов для рендеринга:

Breach

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

приложениями и взаимодействуют друг с другом с помощью специального API, основанного на Chromium Content API и Simple View Model.

Inbox

«Email-платформа нового поколения», Inbox по своей сути является широким набором инструментов для разработки приложений и сервисов, основанных на взаимодействии с электронной почтой. Написано это все на Python и включает в себя продуманный RESTful API, который возвращает данные в формате JSON и Unicode-объекты.

Chart.js

Потрясающие адаптивные и интерактивные HTML5-чарты, реализуемые с помощью элемента . Шесть способов визуализации данных с качественно проработанными анимациями. Все типы графиков являются миниатюрными модулями, размером всего в 11 Кб. Хочу также обратить твое внимание на то, что у проекта более 10 тысяч звезд на GitHub.

Basket.js

Однажды среди западных разработчиков возник разговор на тему, что экономнее — кешировать CSS- и JS-файлы в браузере или сохранять их в локальном хранилище. Тесты Google и Bing доказали большую эффективность при использовании HTML5 localStorage. А уже после этого появился замечательный Basket.js от известнейшего разработчика Эдди Османи (Addy Osmani), который связывает все подключаемые скрипты и стили, подобно Require.js, c локальным хранилищем браузера.

jsPDF

jsPDF — отличная JavaScript-библиотека для генерации PDF. Модуль поддерживает огромное количество опций, которые позволяют настроить буквально все, что поддерживает данный формат: все свойства шрифта, изображения, произвольные фигуры и даже рендеринг любого DOM-узла. Работа поддерживается в большинстве браузеров: IE6+*, Firefox 3+, Chrome, Safari 3+, Opera. Правда, для IE9 и ниже потребуется специальный Flash-хак. Выглядит все вполне хьюмэн ридэбл:

Dense

В интернете описано огромное множество всяких методов и хаков по теме корректного отображения адаптивных изображений. Звания самого хитрого и шедеврального способа удостоился маленький jQuery-плагин Dense. Если сайт показывается на Retina-диcплее или размер изображения больше его фактического, то скрипт автоматически добавляет эффект размытия (blur) ко всем картинкам и все будет выглядеть, как будто так и надо. Все очень просто:

Chroma.js

Многофункциональная библиотека для работы с цветом. Позволяет производить всевозможные операции с палитрой: всячески преобразовывать, изменять цветовые режимы, варьировать яркость, контрастность, насыщенность, определять диапазоны и прочее.

JavaScript-фреймворки наиболее востребованные в 2020 году

Дата публикации: 2020-01-09

От автора: отчет «Состояние JS» за 2020 год — какие фреймворки будут определяющими в 2020 году? В этом посте мы рассмотрим и проанализируем отчет о состоянии JavaScript в 2020 году, чтобы пролить свет на то, какие JavaScript фреймворки будут в центре внимания в 2020 году.

StateOfJS

По мере того, как 2020 год подходит к концу, давайте уделим некоторое время, чтобы взглянуть на удивительный путь, который прошел JavaScript, о чем свидетельствуют мнения более 20 000 разработчиков со всего мира, использующих идеи stateofjs и подкрепляющих его более глубоким обзором из Отчета о состоянии экосистемы разработчиков Jetbrains.

TL; DR: в этой статье мы возьмем для примера по 3 наиболее востребованных javascript-фреймворка для веб-интерфейса, уровня данных и серверной веб-разработки и рассмотрим их на основе визуализации из StateOfJS.

Что такое StateOfJS

State of JS — это, в основном, ежегодный обзор всего JavaScript, где собраны и визуализированы мнения разработчиков, которые принимают участие в опросе, чтобы показать идеи, которые отображают состояние JavaScript в этом году.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Данный обзор охватывает передовые фреймворки, базы данных, управление состоянием, взаимосвязи между платформами, простоту использования, языки, которые компилируются в JavaScript, мобильные платформы, инструменты сборки, инструменты тестирования JavaScript и многое другое. Это очень всесторонний опрос, который был впервые проведен в 2020 году Сашей Грайфом и несколькими другими людьми, и теперь в последнем его выпуске содержится более 20 000 отзывов разработчиков.

Почему State?

Да, State of JS на самом деле является самым первым опросом разработчиков только по JavaScript, который пользуется всеобщим уважением. Существуют и другие очень популярные опросы, такие как «Опрос разработчиков полного стека» с участием более 100 000 респондентов и даже «Отчет о состоянии экосистемы разработки Jetbrain» с более чем 6000 респондентами, однако сегодня мы поговорим о состоянии js.

Кроме того, вы больше ни на одной платформе не увидите такой красивой анимации, как на stateofjs.

Часть 1: Основы Front-end веб-разработки

Это эпоха компонентов, и данное утверждение касается не только Front-end. Мы рассмотрим наиболее востребованные среды разработки интерфейсов в порядке наибольшей значимости, определяемой такими факторами, как удовлетворенность пользователей, проявляемый интерес, простота использования и охват. Заглядывая вперед, похоже, это только начало.

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

1. React

React с более чем 110 000 звездами на github — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов от команды Facebook. Создавать интерактивные пользовательские интерфейсы с его помощью действительно очень просто, фреймворк поддерживает создание ориентированных на компоненты приложений. Еще одним важным фактором является обратная совместимость. Вы можете легко заметить на приведенной выше диаграмме, что за последние несколько лет все больше людей узнают о React, и это отличная точка для начала вашего пути развития.

Разработчики React — стали одними из самых высокооплачиваемых разработчиков Javascript в 2020 году

Вы можете создать новое приложение React с помощью набора инструментов create-react-app. Для начала запустите их через терминал в папке проекта:

Как стать javascript разработчиком?

Добрый день!
Я программист 1С, 10 лет опыта, 32 года
Проработав 10 лет в 1С достиг некоторого потолка по з/п. Трудоемкость профессии и ее оплата стали не устраивать. Есть желание сменить язык, область работы, попробовать новое. Погуглил что во фронтэнде нехватка спецов, а зарплаты в очень широком диапазоне. Я в Мск.
1. Как устроиться джуном? Приведите пример вакансии с хх.ру на которое можно было бы послать свое резюме. Нужен пример для понимания, что искать на хх, чтобы взяли на работу.
2. Есть мнение что лучше сразу устроиться в компанию имея минимальные знания по языку. Изучать все и вся по книжкам — окажется пустой тратой времени. Так ли это? Каков минимальный порог входа по знаниям на з/п 80к?
3. Не очень люблю верстку, но многие пишут что это часть фронтэнда, и найти работу где 90% времени будет чистый JS будет сложно, так и есть?
4. Перейти рубеж в 120к за какое время реально при условии адекватного работодателя? Фултайм в Мск.

Буду рад советам от действующих JS прогов и фронтэндеров, и тех кто решил сменить кардинально профессию в таком возрасте. Я человек семейный поэтому стараюсь объективно взвесить все плюсы и минусы подобного шага.

  • Вопрос задан 21 окт.
  • 913 просмотров

Пожалуй, Вы сделали разумный выбор, уйдя из 1С. Веб предоставляет больше возможностей и интересных задач.

По поводу трудоустройства. Вы хотите устроиться junior’ом в Frontend-разработке. А есть ли у Вас хотя бы какие-то навыки и хотя бы какой-то минимальный опыт в этой сфере? База фронтентда — это HTML, CSS и javaScript. Владеете ли Вы этими языками? Опыт (хотя бы какой-то, хотя бы любительский из нескольких проектов) обязателен, без него в подавляющем большинстве случаев Вас просто проигнорируют. Трудоустроиться с минимальными знаниями можно, но всё же шансов получить работу будет больше если к тому, что я перечислил Выше, добавить react js/vue js, какой-нибудь сборщик, шаблонизатор и git.

Вёрстку Вам придётся полюбить. Это неотъемлемая часть frontend’a. Увы. Да, занятие, пардон, геморойное. Уделите внимание качественной вёрстке. Больше практикуйтесь. Учитесь верстать адаптивно и кроссбраузерно. Без этого никак. Это основа основ frontend’a. Со временем Вы даже войдёте во вкус. На самом деле, это интересное занятие. Меня на начальных порах тоже бесила вёрстка: хотелось уйти в более серьёзное программирование, а не блоки расставлять. Но со времеем стало интересно. Мне нравится из нарисованного макета делать полноценный функциональный сайт.

Рубеж в 120 тысяч преодолеть возможно. Но сразу советую снять по этому поводу розовые очки. Если Вы думаете, что изучите несколько технологий и через годик выйдите на такую зарплату, то это не так. Такие деньги платят за умение решать сложные задачи оптимальным путём и за колоссальный опыт. Не видел ни одного человека, который быстро вышел бы на такую сумму во Frontend’е.

В заключение хочу пожелать Вам удачи и никогда не останавливаться. Самое главное — устроиться на работу и как можно скорее преодолеть уровень джуна — стать миддлом. Там будет интереснее и полегче.

Один чел на форуме мисты писал следующее, цитаты:
На форуме миста в теме валить ли в web пользователь legj пишет Я свалил сначала в фуллстэк на ноде, но вскоре перешёл в чистый фронт.
Два-три года назад. Чувствую себя очень хорошо. Работа гораздо приятнее, стресса ноль. Денег больше. Зарплату, что была на 1с, догнал через полгода. Сейчас 200+.

Спрос на фронт всё такой же бешеный, не ослабевает. Расти до сеньора полтора года.
Особо никак не готовился к переходу, одну книжку прочёл, практики ноль. Просто пошёл сначала на джуниорскую зп.
Такая зарплата я как понимаю в москве?`
Да, в Москве.

`Фронтендеры в обычных миллионниках сколько могут получать?`
Не знаю. Думаю, не намного меньше. Но там гораздо меньше вакансий, это не такой массовый рынок, как 1с, что в каждом райцентре есть вакансии. Решается удалёнкой (после первичного освоения профессии).

`Что нужно изучить чтобы быть фронтендером?`
Если имеешь опыт коммерческой разработки на чём угодно, включая 1с, можно ничего не изучать, возьмут и так.

`Какие технологии и на каком уровне?`
Если уже так хочется, то учить стоит только сам JavaScript и ничего более.

`Какие фреймворки сейчас в тренде?`
React, Vue, Angualar. Но учить их заранее плохая идея.

`Легко ли найти джуниорскую вакансию?`
Я легко нашёл. Даже и не искал толком, меня нашли, hh.

`И правда что технологии во фронте так быстро меняются с бешеной скоростью, что это получается бесконечным обучением и переобучением? Что нужно учиться на работе, после работы и выходные в ущерб семье, чтобы хоть что-то успеть?`
Неправда. JavaScript, написанный 20 лет назад по-прежнему будет исполнятся в современных браузерах. Базовые технологии меняются исключительно инкрементально, с сохранением обратной совместимости. Специально учить ничего не требуется, только в процессе выполнения рабочих задач.

`И опишите преимущества фронта относительно 1с, в чем преимущества и недостатки, что легче выучить и кем проще работать?`
О, их очень много. Работаешь исключительно с open source, многие навыки переносимы между языками и платформами (git, IDE, unit-тестирование, html / css). Сами инструменты гораздо качественнее, не надо ждать пять минут сохранения конфигурации и обновления БД. Специализация гораздо уже. Это меньше стресса и быстрее прирастает value как специалиста. Одинэсники в большинстве своём аналитики, дизайнеры, бэкендеры и фронтэндеры в одном лице.
Изучить 1с на экспертном уровне гораздо сложнее, на это нужно лет десять. При этом зарплата такая же или чуть выше, чем у имеющих опыт 3 года. Во фронте особо нет потолка, з/п растёт вместе со скиллами, с очень небольшим отставанием по времени.
Чувствуешь себя спокойнее и увереннее в долгосрочной перспективе, потому что нет жёсткой привязки к экономике СНГ и деревянному рублю.
Сейчас на реакте, до этого был вью. Это не принципиально.

Да, верстать, конечно, нужно. Но это 10% работы. И старые IE умерли, остался только 11-й, с ним вполне можно жить, он умеет flexbox. И даже с ним приходится работать уже немногим. CSS modules либо css-in-js решают проблему глобального css. Вёрстка нынче не проблема.
100 т.р. для человека, который уже умеет, конечно, это совсем просто, даже на удаленку. Можно рассчитывать на существенно больше. По моим ощущениям, нигде так карьера молниеносно не делается, как во фронте. В бэке нужны годы до сеньора. Во фронте год / полтора. Я бы советовал разместить резюме, и всё узнаете сами, за это денег не берут.
О да. я же тоже перешел в веб. еще в 2014 году. Так что сейчас уже явно не джун. И ни разу не жалею. 1с — это не спокойная работа. Нервничать приходится. И сами 1с программисты злее веб-программистов. Вот вы какой добрый человек — сразу видно уже не 1с-ник
Спасибо. Но единственное крутое, что я сделал, это то, что решился, что перешёл в веб.

Нет, Java сама как язык отвратительна по сравнению с JavaScript / Typescript.
Да, там есть Scala, но через джаву все равно пройти придётся и постоянно иметь с ней дело.
И там просто нет такой движухи, такого спроса, гораздо дольше джунить придётся до нормальных зарплат.

Отдел разработки сам по себе ничем не поможет. Возможности учиться и совершенствоваться есть на любом проекте. Помогает выход за пределы зоны комфорта, заставлять себя использовать не только привычные инструменты и приёмы, но и новые.
Реакт или Вью — разницы особой нет, и по деньгам тоже. Тем более, что во многих случаях разработчик сам выбирает на чем делать фронт.

Коллекция бесплатных и полезных инструментов для разработчиков Javascript

В наши дни javascript занимает лидирующие позиции, если речь идет о клиентской части программных продуктов и используется профессиональными программистами и веб-разработчиками по всему миру. javascript – это мощный язык программирования с множеством расширенных функциональных возможностей и инфраструктурами вроде jQuery, YUI, SproutCore и Cappuccino. Но у него есть определенные недостатки, например, javascript в разных браузерах работает по-разному и может ограничивать доступ к веб-сайту и его удобство для пользователя. Но эти факторы не должны ограничивать возможности этого чудесного языка.

Для многих программистов работа с javascript может показаться немного сложной, но у нас есть множество инструментов для разработчиков javascript, которые не только просты в использовании, но и показывают отличные результаты в считанные минуты. Имея знания в javascript, вы можете выполнять любые задачи – написание документации, редактирование, тестирование, отладку и др.

Инструменты по работе с документацией

jGrouseDoc – это инструмент, позволяющий генерировать документацию API из комментариев в исходном коде (программы) и документировать, таким образом, все необходимые концепции, функции, переменные, классы, интерфейсы, пространства имен и др., что производит в результате отличный настраиваемый продукт.

JSDoc Toolkit – это приложение, написанное с помощью javascript для автоматической генерации форматов шаблонов и многоязычной HTML-документации из комментируемого исходного кода javascript.

JSCompress – это он-лайн компрессор javascript, который сжимает файлы javascript, используя алгоритмы сжатия вроде JSMin и Packer, а сжатые файлы javascript просто идеальны для рабочей среды, так как их размер уменьшается на 30%–90%.

YUI Compressor – это уменьшитель javascript, созданный для того, чтобы получить более высокую степень сжатия, чем могут дать другие инструменты. Начиная с версии 2.0 YUI Compressor сжимает файлы CSS, используя порт на базе обычного выражения Isaac Schluter.

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

Scriptalizer – это онлайновый инструмент для уменьшения ваших Java и CSS скриптов, который позволяет вам сэкономить место на жестком диске благодаря уменьшению размера кода. Он также удаляет лишние пробелы, символы табуляции и пустые строки, символы новых строк и комментарии, а также блокирует ограничители.

JSbeautifier – это онлайновый инструмент, который переформатирует и меняет отступы букмарклетов (от слов bookmark и applet), «неопрятные» фрагменты кода javascript и распаковывает скрипты, а также «распутывает» сложные фрагменты скриптов. Просто вставьте свой код и нажмите кнопку «Украсить».

Редакторы и инструментарий для IDE

Aptana Studio – это рабочая среда веб-разработки от ведущей компании в своей области, которая объединяет в себе мощные программные продукты для работы с HTML, CSS и javascript. Aptana RadRails – это полностью завершенная среда разработки для построения профессиональных приложений с богатым расширением кода на Ruby & Rails, javascript, CSS и HTML.

Spket IDE – это мощный набор инструментов для разработок в javascript и XML, а также для javascript, XUL/XBL и Yahoo Widget. Предоставляет такие функции, как расширение кода, выделение синтаксиса и план контента.

Komodo Edit – это бесплатный многоязычный редактор с открытым кодом для более легкого написания качественного кода. Он поддерживает PHP, Python, Ruby, Perl и Tcl, а также javascript, CSS, HTML и такие языки шаблонов, как RHTML, Template-Toolkit, HTML-Smarty и Django.

Инструменты для отладки

Firebug – наиболее мощный инструмент для веб-разработок, который используется для проверки HTML и модификации стиля и макета в режиме реального времени, точного анализа использования сети и производительности. Наладчик javascript можно использовать с любым браузером.

Blackbird – это проект с открытым программным кодом, который предлагает простой способ протоколирования сообщений на javascript и привлекательную консоль для их просмотра и фильтрации, таким образом, минимизируя или полностью устраняя использование функции alert().

Faux Console – это javascript, который можно вставлять в документ, чтобы получить базовую консоль наладки в IE, и вы можете использовать файлы YUI или файл console.log ( ) для протоколирования информации между браузерами.

JS Bin – это веб-приложение, которое помогает javascript и фрагментам CSS-кода тестироваться в определенном контексте и совместно налаживать код. Позволяет редактировать и тестировать javascript и HTML.

JSON – это формат данных, который в наши дни завоевывает популярность и широко используется во многих Web 2.0 сайтах с AJAX. Многие сайты, которые предлагают API, возвращают данные в формате JSON. Зачастую в предоставленных JSON данных пробелы сжимаются для того, чтобы уменьшить объем передаваемых данных. Этот сайт предоставляет вам быстрый и простой способ форматирования JSON таким образом, чтобы вы могли его прочитать.

Клиент Eclipse Marketplace (MPC) – это богатый клиентский интерфейс для просмотра и установки решений, основанных на Eclipse. MPC предоставляет сильную интеграцию инсталляции между рабочей средой Eclipse и Eclipse Marketplace, плюс распечатки решений третьей стороны.

Venkman – это наладчик javascript для Mozilla, основанный на таких браузерах, как Firefox 3.x, Netscape 7.x, Seamonkey 1.x и Mozilla Seamonkey 2.x. Наладчик также доступен как расширительный пакет в формате XPI.

JS.Class – это набор инструментов для создания объектно-ориентированных программ на javascript, основанных на Ruby. Также предлагает мощный пакетный менеджер, целью которого является помощь в загрузке ваших приложений и поддержка всех основных веб-браузеров, включая Rhino, Node.Js и Narhwal.

Инструменты для тестирования

Sugartest облегчает написание тестов для javascript, он работает поверх JsUnitTest, как DSL, у которой есть установка, удаление, вложенный контент, нет никаких зависимостей, и работа производится посредством простого и в то же время выразительного синтаксиса.

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

Созданный Джоном Резигом (John Resig) и Яном Одварко (Jan Odvarko), FireUnit представляет простой javascript API для проведения простого теста по его протоколированию и просмотру в новой вкладке Firebug.

JsUnit – это модуль, который тестирует структуру клиентской стороны javascript, которая выступает портом JUnit, а также включает в себя платформу для автоматизации проведения тестирования в различных браузерах и компьютерах под управлением различных ОС.

YUI Test – это среда для тестирования для решений javascript на базе браузеров, в которой вы можете легко добавлять в решения для javascript тестирование модулей. YUI Test также предоставляет функцию усовершенствованного определения ошибок для тех методов, которые перемещают ошибки, асинхронных тестов для проверки событий, коммуникации на основе Ajax и многое другое.

JSpec – это очень маленькая, но очень мощная среда для тестирования, которая использует собственную грамматику и препроцессор, и включает в себя много буквенных сокращений, читабельный синтаксис, поддержку Async и Rhino, вложенное описание, общий образ действия, поддержку аксессуаров, имитацию Ajax и многое другое.

JSLitmus – это легкий инструмент для создания узкоспециальных контрольных задач в javascript, который работает со всеми наиболее распространенными браузерами. У него открытый исходник, лицензия MIT-style, адаптивные циклы тестов и его также можно разместить на существующих веб-страницах или приложениях.

Выдающийся javascript Checker используется для отслеживания на веб-странице элементов a;;, а когда он находит элемент HTML с встроенными событиями, он выделяет этот участок красной рамкой, а ссылки javascript: – малиновой.

Другие полезные инструменты

PrettyPink – это переменный javascript дампер (dumper), встроенный в браузер, который дает вам возможность печатать объекты любого типа для просмотра во время сеансов наладки в формате таблицы. Он не требует никаких таблиц стилей или изображений, он может работать с бесконечным количеством вложенных объектов, защищает от круговых/повторяющихся ссылок и полностью совместима с JSLint.

Firediff – это расширение для Firebug, предназначенное для отслеживания изменений в DOM и CSS, то есть он осуществляет контроль изменений, который предоставляет возможность понять функциональность приложения, а также ведет запись произведенных изменений и подстраивает отображение страницы.

JS charts – это генератор графиков javascript, который позволяет вам создавать графики с помощью различных шаблонов, например, гистограммы и простые линейные графики.

PageSpeed – это дополнение Firefox/Firebug с открытым исходником, которое используется для оценки производительности веб-страниц и получения рекомендаций по их улучшению. Оно также ускоряет работу вашего сайта, уменьшает использование пропускной способности линии и стоимости хостинга.

В Rockstar Web Profiler или Razor входит три компонента, а именно, RockStar Profiler Server для анализа сетевых подключений и производительности сервера, RockStar Profiler Probe для анализа производительности клиентской стороны и RockStar Profiler Console, который представляет собой информацию для проведения анализа собранных данных по производительности.

Мобильная (под Safari) структура javascript в уменьшенном виде весит менее 8 Кб, обращается к лаборатории Sizzle в iPhone, поддерживает переходы CSS и анимацию, является объектно-ориентированным и легко расширяется.

php.js – проект с открытым исходником для того, чтобы перенести высокоуровневые PHP-функции в низкоуровневые платформы javascript, например, веб-браузеры, расширения для браузеров, движки AIR и SSJS, например, V8, Rhino и SpiderMonkey.

JSSpec – это javascript «BehaviorDrivenDevelopment»-структура, которая показывает разницу между ожидаемыми и реальными значениями, четко показывает линию повреждений, поддерживает условное выполнение поддержки для IE 6 или IE 7, FireFox 2 и Safari 3.

MochaUI – это библиотека пользовательских интерфейсов в виде веб-приложения, построенного на базе Mootools javascript, использованной в веб-приложениях, веб-элементах на рабочем столе, веб-сайтах, виджетах и отдельных диалоговых окнах.

Highlight.js выделяет синтаксис в примере кода в блогах, на форумах и, в общем, на любой веб-странице. Автоматически находит блоки кода, определяет язык и выделяет его.

Библиотеки утилит и компонентов для javascript

Uploadify – это плагин для jQuery, который позволяет легко интегрировать несколько загрузок на ваш сайт и который требует Flash или любой другой внутренний язык разработки. Основная реализация довольно проста и предлагает огромные возможности для модификации для опытных пользователей.

Burst – это пример характерной анимации с использованием технологий javascript и HTML5 и без какого-либо использования технологии Flash. Файл SVG создается с помощью Inkscape. Burst синтаксически схож с jQuery.

JSTestDriver строит тестовую машину на javascript, которую можно легко интегрировать в непрерывные системы билдов; она позволяет быстро запускать тесты на различных браузерах, чтобы облегчить разработку TDD-стилей и предоставляет быстрое выполнение теста, полностью контролированный DOM, управление с командной строки и так далее.

Booklaylet – это код упаковщика-букмарклет, запрограммированный загружать любое содержимое другой страницы внутрь открытого окна с использованием слоев div и iframe. Работает с браузерами Firefox, Safari и Opera, но не работает с Internet Explorer.

javascriptools – это набор компонентов, функций и классов javascript, в которых функции выполняют основные операции с объектами, строками, массивами данных, полями форм и так далее. У набора имеется динамическая таблица, которая поддерживает страничную подкачку файлов, их сортировку и редактирование и является полностью настраиваемой с помощью CSS.

liteAJAX является доказательством концепции легких классов AJAX.

JSPDF – это библиотека для генерации PDF-документации с использованием javascript и открытыми исподниками. Она может использоваться в расширениях Firefox, серверной стороны javascript с URL-данных в некоторых браузерах.

Narwhal – это кросс-платформенная, мультиинтерпретационные среда разработки javascript, которая строит приложения javascript и структуры, такие как Nitro. Включает в себя менеджер пакета, систему модулей и стандартную библиотеку для нескольких интерпретаторов javascript.

Полезные библиотеки javascript и другие инструменты

Tablecloth – это легкий и ненавязчивый способ добавить стиль и образ действия в своих таблицах html-элементов. Имеет функцию назначения четных/нечетных имен классов альтернативным строкам, добавляет имена классов для положения мыши над и за пределами конкретной области.

Moousture – это библиотека перемещений мыши, написанная только на javascript и обладающая способностями и гибкостью, чтобы сворачиваться для вас. Библиотека написана на Mootools, которая следует объектно-ориентированным стандартам. Её цель – начать работу над будущей структурой движений мыши в любом браузере, включая современные мобильные устройства.

jQuery Tools – это коллекция наиболее важных компонентов пользовательского интерфейса для современных сайтов, где все инструменты можно использовать вместе, расширяя, конфигурируя и утилизированные. Она используется крупными сайтами по всему миру.

Tipimage используется для создания и управления tooltips над изображениями, создает квадратные части изображений и прилагает к каждой описание, которое показывается в виде облака подсказки. Также поддерживает использование специальной функции обратного вызова.

qGallery – это маленькая программа в виде командной строки, которая обрабатывает изображения в формате jpeg и специально переименовывает файлы в некоторых структурах папок, чтобы сформировать статическую галерею HTML для публикаций, автоматически создает индексы изображений для предварительного просмотра, комментариев для каждого изображения, а дополнительные изображения и HTML можно добавить позже.

LivePipe UI – это набор высококачественных виджетов и элементов управления для приложений WEB 2.0, использующих Prototype javascript Framework, где каждый элемент управления хорошо испытан, полностью открыт, задокументирован и гибко заменяется более упрощенным вариантом в браузерах без включенного javascript.

javascript Virtual keyboard – это система многократного использования для добавления интерфейса графической клавиатуры в тестовые поля, поля для ввода пароля и полей для текста. Она также предоставляет легкий доступ к специальным символам.

Unobtrusive Table Actions Script может расчертить таблицу полосками, поддерживает перемещение курсора над горизонтальной и вертикальной полосой меню и эффекты для перемещения курсора над отдельными ячейками может работать с rowSpans и ColSpans, а также быстро работает в Internet Explorer.

Glassbox – легкий пользовательский интерфейс javascript, который использует Prototype и Script.aculo.us для достижения некоторых эффектов. GlassBox позволяет вам легко построить яркие светящиеся рамки, цветные схемы и эффекты «под» Flash.

Конвертер HTML-в-javascript берет разметку и преобразует ее в серию формулировок document.write( ), а результаты генерируются в виде формулировок document.write, упакованных в функцию или создается строчная функция в формулировке document.write.

Glimmer – это интерактивный инструмент для дизайна или приложение Windows, которое может легко создать анимацию и ощущение взаимодействия, а также другие эффекты. Он также генерирует jQuery, XHTML и CSS.

Bookmarklets используется для выполнения полезных функций, Bookmarklet позволяет вам создать URL из javascript и занести его в Избранное. Введите свой код javascript, а Bookmarklets сделает все остальное.

Google Playground позволяет вам редактировать код API и тут же увидеть результаты, Translate – переводить все вместе или определять язык или делать транслитерацию. В программе также имеется виртуальная клавиатура.

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

javascript Regex Generator генерирует правильные относительно базовых выражения, в которые вы должны только ввести данные для тестирования и отметить части, которые Regex должен сравнить. Бета-версия инструмента позволяет вам добавить семь групп.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

116 инструментов для разработчиков

Не обязательно становиться рок-звездой для того, чтобы зарабатывать много денег и быть популярным. Новые рок-звёзды — программисты. Ниже вы найдёте более сотни инструментов, которые облегчат работу разработчику.

Оригинальный пост был опубликован на портале DailyTekk. И хотя появился он достаточно давно, список по-прежнему актуален. Инструменты разделены на разные категории: платформы для разработки, обучение программированию, багтрекинг, API и прочее. Не все инструменты бесплатные, но за удобство и новые функции приходится платить. Надеемся, вы найдёте что-то полезное для себя.

Полезные ресурсы и инструменты для разработчика. Часть 2

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

11. The Responsinator

Очень полезная утилита, позволяющая дизайнерам почти мгновенно оценить внешний вид создаваемого responsive сайта на большинстве популярных мобильных устройств.

12. Timeline JS

Как понятно из названия, Timeline позволяет создавать интуитивные и простые в использовании хронологические ленты. Существует возможность добавлять содержимое из различных источников, а по умолчанию уже присутствует поддержка Twitter, YouTube, Flickr, Vimeo, Google Maps и SoundCloud.

13. CSSO

Аббревиатура инструмента расшифровывается как CSS Optimizer, что абсолютно точно отражает его функционал: CSSO оптимизирует и минимизирует созданный вами CSS код.

14. Graphene

Graphene представляет из себя панель и утилиту для отображения графиков в режиме реального времени, работающую на D3 и Backbone.

15. Crossfilter

Croosfilter — это JavaScript библиотека для быстрого анализа больших объёмов данных непосредственно в браузере.

16. CanJS

JavaScript фреймворк, который значительно упрощает создание веб-приложений. В инструмент включена поддержка jQuery, Zepto, Dojo, YUI и Mootools.

17. Fixie

Интерпретируя HTML5 теги Fixie автоматически добавляет нужный тип содержимого в нужные места.

18. Foresight.js

Foresight.js позволяет определять возможность устройства пользователя просматривать картинки высокого разрешения до момента запроса изображения с сервера.

19. Webshims Library

Для модернизации браузеров за счёт HTML5 решений и обеспечения в них поддержки недоступных функций могут используются » полимерные заполнители» . Webshims Library — это JavaScript библиотека для автоматизации запуска таких полимерных заполнителей.

20. dhtmlxSpreadsheet

Опенсорсный виджет, написанный на JavaScript и PHP, с возможностью использования в качестве плагина для WordPress, Joomla и нескольких других популярных систем. С помощью него вы сможете легко добавлять редактируемые таблицы в стиле Excel на страницы сайта.

Ниже указаны ссылки на другие подборки полезных инструментов для разработчика:

Мастер Йода рекомендует:  WordPress 5.2 – что нового (здоровье сайта и защита от ошибок PHP)
Добавить комментарий