Полезное

9 маст-хэв инструментов разработки JavaScript для начинающих

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

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

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

Лучшие инструменты разработки JavaScript

1) Gulp

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

Gulp позволит вам автоматизировать трудоемкие задачи и многое другое. Это довольно мощный инструмент, имеющий широкий реестр плагинов (3634 плагинов на момент написания статьи).

2) Sublime

Программисту нужен хороший текстовый редактор, и вам не нужно больше ничего искать, достаточно взглянуть на Sublime. Многие предыдущие пользователи текстовых редакторов, таких как Notepad ++ и Atom, просто не оглядываются назад, пытаясь использовать Sublime. Его основная привлекательность заключается в том, что он имеет API Python, который позволяет использовать чистые и простые расширения на основе Python.

3) NPM

NodeJS Package Manager — онлайн-репозиторий для проектов, созданных на Node.js, являющегося кросс-платформенной серверной средой с открытым исходным кодом. Таким образом, NPM — это массивная коллекция бесплатного кода, который вы можете использовать в качестве строительных блоков для своих проектов. Это действительно один из самых полезных инструментов разработки JS.

4) ESLint

Действительно фантастический инструмент линтинга (линтинг — это программа, которая анализирует код на возможные ошибки) – ESLint идеально подходит для поиска проблемного кода и шаблонов в JavaScript-коде без выполнения кода, который является основным фактором экономии времени. Основная привлекательность ESLint заключается в том, что он имеет настраиваемые правила линтинга, поэтому вы можете на самом деле настроить правила и руководящие принципы кода/шаблонов, для которых ESLint будет анализировать.

Лучшие инструменты для разработки игр на JavaScript

1) Phaser.js

Идеально подходит для новичков JS, которые хотят создавать браузерные игры в стиле 2D, такие как игра Short Life (мы не уверены, что Short Life была создана с Phaser.js, но наша точка зрения заключается в том, что аналогичные результаты легко достигаются). Phaser.js предлагает обширную библиотеку учебных пособий и примеров для подражания, и в целом инструмент просто быстро и интересно использовать.

Кроме того, он поддерживает рендеринг Canvas и WebGL, поэтому вы можете создавать расширенное освещение и другие спецэффекты в своих играх, так что они не будут выглядеть как ретро-игры Nintendo (если только ретро-игры не являются вашим предпочтением).

2) Babylon.js

Если Phaser.js является идеальной средой Java для создания 2D-игр, то Babylon.js является ее 3D-братом. Это действительно мощная среда, поддерживающая WebGL, HTML5 и Web Audio. Кроме того, она позволяет выполнять обычно сложные задачи (например, рисование 3D-объектов в чистом WebGL) с минимальным количеством кода и разочарованием. Если вы хотите создать браузерные игры, подобные Shell Shockers, но не хотите углубляться в программирование Unity3D / C #, то Babylon.js — отличная отправная точка.

3) Crafty

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

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

1) PhoneGap / Cordova

PhoneGap — это действительно потрясающий инструмент, который позволяет легко создавать гибридные мобильные приложения – наиболее распространенным использованием будет, например, упаковка веб-сайта в Android.APK-файл, чтобы он запускался как родное приложение для Android внутри веб-обертки с дополнительными эффектами JavaScript / HTML5 / CSS, уникальными для гибридного приложения. Это всего лишь небольшой пример, и вы можете сделать гораздо больше с PhoneGap.

2) jQuery Mobile

Обширный и очень популярный сенсорно оптимизированный UI-фреймворк HTML5 для мобильных разработчиков JS, он использует подход «писать меньше, делать больше» для разработки мобильных веб-сайтов. Инструмент предоставляет глубокий API и обширные компоненты пользовательского интерфейса для создания действительно удивительных мобильных веб-страниц, и он может управлять всем окном просмотра, если вы это позволите. Одной из наиболее заметных особенностей JQM является система навигации Ajax, которая позволяет анимировать переходы страниц, что просто добавляет действительно классный эффект на ваши страницы.

Всем успешной работы и творчества!

Источник

  • 461
  • 1 комментарий

    avatar
    Слепое следование авторитетным рекомендациям ещё ни из одного новичка не сделало профессионала. Более того, любое упрощающее работу средство вызывает привыкание, провоцирующее дальнейшие сложности в развитии.
    Ни один редактор с «подсветкой синтаксиса» не сравнится с полномасштабной средой разработки.
    Ни один менеджер пакетов априори не безопасен.
    Ни один фреймворк не является универсальным. Отдельно хотел бы предостеречь от использования «jQuery UI» и «jQuery Mobile»: как там в оригинале, «писать меньше, делать больше»? Это вполне может быть истолковано, как непреднамеренное (или намеренное?) создание ситуации, при которой устройство производит массу громоздких, потребляющих ресурсы процессора и памяти, действий для выполнения какой-либо тривиальной операции, наподобие «плавного перехода между страницами». Это тот случай, когда программисту, возможно, следует всё-таки написать чуть больше, чтобы его продукт заработал на порядок быстрее. При этом многие API потребуют на изучение время, которое новичку следовало бы посвятить освоению самого языка, возможностей, предлагаемых в его новых версиях (search for «ES 2018» if you read this in 2018), а также сопутствующих технологий, без понимания которых (e.g. CSS) пока не удавалось обойтись ни одному «JavaScript-программисту». В этой связи изучение устаревающих фреймворков в известной степени означает трату времени впустую.
    К выбору «своего стэка» следует подходить осознанно. С особой осторожностью стоит относиться к оборотам навроде «незаменимый», «идеальный», «вам не нужно больше ничего искать». В использовании инструментов вообще не следует прекращать поиск лучшего. На смену популярным решениям приходят более популярные, и старые статьи мгновенно забываются. Не выйдет из моды лишь сам язык, с изучения которого и следует начинать новичку.
    К слову, из описанных в статье «маст-хэв?» инструментов, мною в повседневной работе не используется ни один.При этом г-жа Inglekh аккуратно обошла в своей статье инструменты для автоматизированного тестирования, внедрение которых поможет находить ошибки в коде, который успешно проходит проверки синтаксиса, оставаясь при этом нерабочим.
    Также, упомянув уже пять лет как устаревший «jQuery Mobile», почему-то забыли об Angular, React и Vue, давно и прочно вошедших в тренды разработки на ECMAScript — подозреваю, что по личным причинам («на этом кодить я уже умею, значит, должны уметь и вы»). Ребят, либо мы не следуем трендам вовсе, либо руководствуемся наиболее актуальными. Здесь описаны устаревшие.