От автора: От инструментов командной строки и Webpack до TypeScript, Flow и далее. Поговорим о том, как использовать JavaScript 2018. В прошлом году многие, в том числе и я, говорили об усталости от JavaScript. Способов написания JS приложения не стало меньше, НО благодаря большому количеству инструментов командной строки, выполняющих тяжелую работу, транспиллинг стал не так важен, а TypeScript старается минимизировать опечатки. Поэтому можно немного расслабиться.
Инструменты командной строки
Инструмент командной строки присутствует в большинстве библиотек и фреймворков. Такой инструмент одной командой способен создать скелет проекта, чтобы мы могли приступить к тому, чего наше сердце пожелает. Зачастую с ним идут старт скрипт (иногда с автоматической перезагрузкой), билд скрипты, тестовые структуры и т.д. Эти инструменты спасают нас от ненужной работы по созданию файлов. Давайте посмотрим, от чего нас еще освобождают инструменты командной строки.
Настройки Webpack
Настройка процесса создания билда в Webpack и осознание того, что мы делаем – это было главное, чему нужно было научиться в 2017. К счастью, у нас был один из главных участников Sean Larkin, который колесил по миру и проводил замечательные выступления и по-настоящему веселые и полезные уроки.
Сейчас множество фреймворков не только создают конфиг файлы Webpack, но и заполняют их так, что вам не придется их открывать. Даже у VueCLI есть webpack шаблон со всеми настройками Webpack. Чтобы вы поняли, что дают нам инструменты командной строки, ниже представлен список того, что дает нам шаблон Vue CLI прямо из репозитория:
npm run dev: первый в своем классе опыт разработки
Webpack + vue-loader для Vue компонентов из одного файла
Горячая перезагрузка с сохранением состояния
Наложение ошибки компиляции с сохранением состояния
Линтинг при сохранении с ESLint
Исходные карты
npm run build: продакшн билд
Минификация JS с помощью UglifyJS v3
Минификация HTML с помощью html-minifier
CSS во всех компонентах, извлеченный в один файл и минифицированный через cssnano
Статические файлы, скомпилированные с хэшированием версий для эффективного долгосрочного кэширования, а также автоматическая генерация продакшн index.html с правильными URL под сгенерированные файлы
Используйте npm run build –report для создания билда с аналитикой размера пакета
npm run unit: запуск юнит тестов в JSDOM с Jest или в PhantomJS с Karma + Mocha + karma-webpack
Поддержка ES2015+ в тестовых файлах
Легкая имитация
npm run e2e: комплексные тесты с Nightwatch
Запускайте тесты в нескольких браузерах параллельно
Работайте одной командой прямо из коробки
Selenium и chromedriver подключены автоматически
Автоматический запуск сервера Selenium
С другой же стороны, preact-cli заботится о стандартной функциональности Webpack. Если потом понадобится изменить настройки Webpack, просто создайте файл preact.config.js, который экспортирует функцию, которая вносит изменения в Webpack. Так много инструментов, столько помощи: разработчики помогают разработчикам.
Babel on или off
Поняли шутку? Звучит как Вавилон хD. Это очень смешно. Я не связываю Babel с древним городом Вавилоном, но ранее велись разговоры о возможном отказе от транспиллинга. Babel стал популярен несколько лет назад, потому что мы хотели иметь все крутые функции ECMAScript, но не хотели ждать, пока в браузерах появится поддержка. ECMAScript переходит на небольшие ежегодные релизы, теперь браузеры, может быть, будут успевать выпускать поддержку. И какой же это был пост о JS без таблиц совместимости kangax.
Изображения ниже невозможно прочитать, потому что я просто хотел показать, сколько зеленого на графиках! Подробности можете посмотреть, перейдя по ссылкам под изображениями.
Совместимость для es6
Совместимость для 2016+
На первом графике красные участки слева – это компиляторы (es-6 shim, Closure и т.д.) и старые браузеры (Kong 4.14 и IE 11). 5 красных колонок справа – это серверы/компиляторы PJS, JXA, Node 4, DUK 1.8 и DUK 2.2. На нижнем графике красная область в виде плохого рисунка собаки, смотрящей на неправильный восклицательный знак – это серверы/runtime, а зеленые полоски наблюдаются только на Node 6.5+. Красная область слева – компиляторы/полифилы и IE11. Но что важнее, посмотрите на эту огромную зеленую область! Почти во всех популярных браузерах у нас зеленый свет. Красный цвет на функциях 2017 года только в Firefox 52 ESR для Shared Memory и Atomics.
Чтобы оценить перспективу, ниже представлены данные об использовании браузеров в процентах из Wikipedia.
Отключение Babel может занять много времени, потому что мы хотим приложить максимальные усилия, чтобы инструмент стал доступен как можно большему количеству пользователей. Интересно то, что мы можем избавиться от этого дополнительного шага. Ну, как раньше, когда мы не использовали транспиллеры.
Разговор про TypeScript
Если мы говорим о том, как писать JS, мы должны сказать о TypeScript. TypeScript вышел из офиса Microsoft 5 лет назад, но стал популярен в 2017. Почти на всех конференциях были выступления «почему мы любим TypeScript». Это новый предмет обожания разработчиков. Не будем писать сонеты TypeScript, поговорим о том, почему разработчики влюбились в него.
Всем, кто хотел типы в JS, TypeScript предлагает строгое синтаксическое надмножество JS с необязательной статической типизацией. Довольно круто, если вы с этим работаете. Если взглянуть на последние результаты опроса от State of JavaScript, кажется, что много людей знают об этом.
Цитата от Brian Terlson: «Я тот, кто предложил типы для JS в 2014: я и не думал, что типы появятся в ближайшем будущем. Это слишком сложная проблема с точки зрения стандартов. Использование TypeScript в качестве стандарта это замечательно для пользователей TypeScript, но есть и другие типизированные JS надмножества с довольно большим использованием, в том числе closure compiler и flow. Все эти инструменты ведут себя по-разному, и даже непонятно, есть ли у них общее поле для работы. Я даже точно не знаю, как выглядит стандарт для типов, и я и другие будем продолжать работу, так как это может быть очень полезно, но не ждите чего-то в ближайшее время — HashNode AMA с Brian Terlson»
TypeScript любит Flow
В 2017 вы, скорее всего, видели много постов о связке TypeScript + Flow. Flow – это чекер статических типов для JS. У Flow, как видно из графика State of JavaScript выше, заинтересованных также много, как и не интересующихся. Интереснее количество незнающих о Flow. По мере изучения Flow в 2018 люди, может, поймут его преимущества, как это понял Minko Gechev.
Angular любит TypeScript
Можно заметить, что все примеры кода в документации к Angular написаны на TypeScript. В какой-то момент у вас могла возникнуть ситуация, когда вы решили пройти уроки по JS или TypeScript. TypeScript тронул сердце Angular. Глядя на диаграмму ниже, связывающую Angular с JS, видно, что на самом деле не так много пользователей связывают Angular с ES6 (TypeScript: 3777, ES6: 3997). Посмотрим, что изменится в 2018.
Посмотрите эту работу, чтобы получить экспертное мнение о том, как подобрать правильный JS фреймворк под следующее приложение.
Способ написания JS изменится в 2018, в этом сомнений нет. Как разработчики, мы любим делать и использовать инструменты, которые делают наши жизнь легче. К сожалению, иногда это приводит к еще большему хаосу и дополнительным вариантам выбора. К счастью, CLI избавляют нас от такой работы, а в TypeScript есть типы для тех, кто устал от ошибок с типами.
Автор: Tara Z. Manicsic
Источник: https://www.telerik.com/
Редакция: Команда webformyself.