JavaScript Academy

Webpack: сборка JS-модулей

2020-04-11T11:26:41.733Z

Всем привет! Как и обещали, выпускаем небольшую вводную статью по сборке JS-проекта с помощью Webpack.

Что такое Webpack

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

Пример удобства Webpack

Создадим простой проект с незамысловатой структурой.

Допустим, мы хотим создать класс Card, который будет иметь некоторые поля и пару удобных методов, а далее мы будем использовать его в main.js . Безусловно, создадим мы файл с этим классом в папке js .

Ниже представлено то, как выглядит этот файл:

Вот так выглядит index.html:

Содержимое файла main.js:

В index.css пропишем следующие стили:

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

Так выглядит само сообщение об ошибке:

Ошибка заключается в том, что класс Card, который мы используем в файле main.js, находится в файле card.js, который мы добавляем в тэге script позже. Собственно из-за того, что мы используем ещё не определённый класс Card в main.js и происходит ошибка. Если мы поменяем местами импорты этих файлов, то всё заработает.

А теперь просто вдумайтесь, насколько же трудно было бы следить за порядком файлов в реальном проекте, даже представить трудно, не так ли?

Теперь посмотрим, как Webpack подходит к процессу сборки JS-проектов.

Для начала, необходимо проинициализировать node package manager в корневой директории проекта. Для этого достаточно ввести следующую команду в командной строке npm init -y.

Далее необходимо ввести такую команду: npm i webpack webpack-cli -D . Отлично, у нас всё готово для продолжения работы.

Теперь необходимо создать файл-конфигурацию для Webpack, создать её нужно также в корневой директории проекта. ВАЖНО!!! Он обязательно должен иметь название webpack.config.js . Ниже можете видеть его содержимое, сейчас мы кратко пройдёмся по тому, за что отвечает каждый ключ в объекте конфигурации.

Во-первых, path – модуль из среды исполнения JS на сервере, Node.js. Он нужен для работы с файловой системой. Ключ entry , как можно догадаться по названию, обозначает путь до входного файла, то есть до файла, с которого Webpack начнёт сборку проекта.

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

Посмотрим, как нам теперь нужно модифицировать наши JS-файлы, чтобы это всё отлично работало со сборщиком.

Добавились какие-то странные ключевые слова import и export , заметили? Они пришли к нам вместе с возможностью сборки наших JS-файлов в один финальный бандл. Ключевое слово export даёт возможность использовать нам переменную или функцию в другом файле.

Что же нам нужно, чтобы использовать их в другом файле? Нам нужно импортировать то, что мы хотим, в этот файл с помощью ключевого слова import. По умолчанию, из каждого экспорта какого-либо файла создаётся объект, где каждому ключу соответствует название переменной или функции, экспортируемой с помощью ключевого слова export.

Далее создадим новый npm-скрипт в файле package.json.

Отлично, сделав все эти шаги, необходимо ввести в терминал команду npm run build.

После выполнения этой команды в корне проекта должна была быть создана папка distributive, в которой находится файл main.js .

В index.html нужно прописать в тэге скрипт путь до бандла, который нам построил Webpack.

Теперь открываем наш файл в браузере и УРА, всё работает!

Резюмируя это всё, мы только что поняли, каким образом работает Webpack, увидели разницу между двумя подходами и осознали, насколько же удобен и лёгок для применения Webpack.

Статья подготовлена образовательной организацией JavaScript Academy

Какой JS-фреймворк выбрать в 2020?

2020-03-25T11:28:02.080Z

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

Что такое фреймворк

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

Какие JS-фреймворки есть

По сути, существует только один настоящий фреймворк для JS, это Angular. Однако так повелось, что библиотеки Vue и React тоже стали называть фреймворками. Сложно сказать почему так, но мы тоже не будем нарушать традиции :)

React, Vue и Angular и являются самыми современными и популярными технологиями для написания пользовательских интерфейсов. Безусловно, появляются различные конкуренты, например, Ember или Svelte, которые тоже находят своих поклонников, однако сегодня мы разберём только вышеназванные (по ним больше вакансий).

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

React

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

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

Пример кода, написанного c помощью React, из моего пет-проекта:

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

React – мой личный выбор из всех этих трёх технологий. Он мне ближе по многим аспектам, в том числе по его модульности и расширяемости, также мне очень нравится стиль, в котором описывается отображение компонентов (JSX-синтаксис)

Совсем скоро выйдет первая статья, в которой мы рассмотрим понятие компонента в React.

Angular

Фреймворк, который разработан небезызвестной компанией Google, обладает несхожим подходом по сравнения с React-ом, он не даёт столько свободы в написании кода, что во многих случаях является преимуществом, так как каждый проект, написанный на Angular, практически не отличается от другого. В отличии от модульного подхода React-а он включает в себя всё сразу "из коробки". Хочешь сделать анимации? Тебе не нужно дополнительно ничего устанавливать. Хочешь валидировать ввод пользователя в форму? Без паники – всё уже есть.

Однако одним из ключевых моментов для многих будет являться тот факт, что Angular использует не JavaScript, a TypeScript. Для тех, кто знает TypeScript, это несомненно плюс. А вот для тех, кто сталкивается с ним впервые, – сомневаюсь.

Также можете видеть пример кода, написанного с использованием Angular:

Безусловно, если ваше приложение действительно большое, то Angular – отличная опция.

Vue

Vue – относительно новый игрок на рынке JS-фреймворков, однако он очень активно набирает популярность, а с выходом 3-й версии вполне может обогнать React.

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

Vue был первым фреймворком на JS, который я использовал, и скажу честно, мне нравилась его магия и возможность объединять JS, HTML и CSS в едином файле с расширением .vue.

Ниже можете посмотреть типичный vue-файл:

Vue, как мне кажется, может понравиться многим куда больше, чем React или Angular, однако, к сожалению, он пока что плохо подходит для более или менее крупных проектов.

Вывод

Итак, мы очень кратко ознакомились с React, Angular и Vue.

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

React: https://ru.reactjs.org/docs/getting-started.html
Angular: https://angular.io/docs
Vue: https://ru.vuejs.org/index.html

Статья подготовлена образовательной организацией JavaScript Academy

Почему именно JavaScript?

2020-03-09T17:04:28.431Z

Preview

Всем привет! Сегодня мы поговорим с вами о том, почему JavaScript – это прекрасный выбор с заделом на будущее.

Рынок труда

JavaScript – язык программирования, который активно используется в коммерческой разработке. Практически каждая уважающая себя и своих клиентов компания имеет собственный сайт, а JavaScript используется более, чем на 90% сайтов, соответственно такой компании нужно либо заказывать разработку сайта у другой компании, либо создавать свой IT-отдел. Многие так и поступают, именно поэтому вакансий по JavaScript на сегодняшний день такое большое количество.

Например, вакансий по Java существует около 7000, тогда как JavaScript более востребован у работодателей почти на 36% (9600 вакансий), что в реалиях рынка труда является очень впечатляющим показателем.

Примеры базируются на количестве заявок по вакансиям, оставленных на платформе для поиска работы HeadHunter.

Говоря о зарплатах, то будучи Junior разработчиком, вряд-ли можно рассчитывать на какие-то космические деньги (в среднем вилка составляет от 40 до 80 тысяч рублей в зависимости от компании), однако, поднимаясь на уровень выше, вы уже с лёгкостью можете претендовать на зарплату от 100 тысяч рублей и выше.

Что можно написать на JS

Коротко говоря, ВСЁ.

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

JavaScript – современный высокоуровневый интерпретируемый язык программирования. На нём можно написать достаточно сложные вещи в очень приятном и понятном для человека декларативном стиле.

Благодаря платформе Node.js, сегодня JS может выполнятся не только в браузере, но и на сервере, что значительно расширило области применения этого замечательного языка программирования.

Мобильная разработка

Если вам захочется, вы сможете написать высокопроизводительное мобильное приложение, которое будет одновременно работать на iOS и Android. Это реализуется с помощью совершенно удивительной разработки команды Facebook React Native. В будущем на канале будут обучающие посты и статьи по этой технологии.

Backend разработка

Любите разработку серверной части мобильных приложений или сайтов? Тоже не вопрос, существует платформа Node.js. Напишите свой API, который будет делать то, что вам только заблагорассудится.

Frontend разработка

Может быть вы UI или UX дизайнер, и ваше призвание – это создавать пользовательские интерфейсы? Отлично, почему бы не освоить JS и не начать претворять свои фантазии в жизнь. Этой теме в большинстве своём и посвящён наш канал.

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

Итог

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

Только вот многие говорят, что JS – это плохой выбор для новичка, что лучше начать с изучения чего-то более строгого и классического.

Я так не считаю, при правильном подходе в изучении, вы быстро увидите свои первые результаты и сможете писать первые реальные проекты, брать заказы на фриланс платформах.

Наш канал – прекрасная возможность погрузиться в JS и всё, что с ним связано.

Статья подготовлена образовательной организацией JavaScript Academy