Основные JavaScript тренды 2018

Jem -

Если вы жили в глуши или были завалены проектами на протяжении 2017 года, эта статья для вас.

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

React vs. Vue.js

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

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

Но Vue делает все, чтобы сделать разработчиков действительно счастливыми:

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

Когда дело доходит до приятной стороны работы, давайте не будем забывать эпичную ошибку этого года от Facebook, связанную с путаницей с лицензиями BSD + Patents, с которой разработчики справились довольно хорошо.

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

Вот отличный пост этого года о React vs. Vue vs. Angular.

Наиболее вероятный исход? Facebook делает то, что он делает лучше всего: копирует новаторов, и мир продолжает использовать React.

Если вы являетесь разработчиком Angular, который просто отказывается изучать React, Vue.js должен быстро стать лучшим вариантом для вашей карьеры, поскольку возможности Ангуляра потихоньку умирают (а Vue имеет синтаксис аналогичный Angular 1).

Каждый разработчик JS все же должен рассмотреть возможность изучения Vue.js, так как он произвел достаточно большой всплеск, и мы уже начинаем видеть запросы вакансий для разработчиков Vue.js, что означает, что вы можете набить себе цену в краткосрочной перспективе как минимум.

Next.js

И вот Next.js, который мы будем называть «страховкой для React».

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

Next также особенно полезен для сервер-сайд рендеринг приложений, созданных с React, что является восходящим трендом.

Кроме того, добавляя Now.js (созданный той же командой), вы получаете супер быстрый способ развертывания приложений React.

По мере продолжения битвы Vue vs. React, ожидается все больше и больше заимствований для Next в паре с React, для того чтобы все в лагере React чувствовали себя более комфортно.

Angular

Несмотря на растущие трудности с удобством работы с Angular , он по-прежнему будет широко используемым фреймворком в 2018 году.

Многие компании приняли Angular 1.0, и поскольку они хотят перейти на что-то лучше в 2018-1919 годах, они скорее будут рассматривать React или Vue.js в качестве более подходящих альтернатив, чем Angular 2.

Остальные сторонники Angular придерживаются позиции, что Angular станет основным энтерпрайз JS фреймворком, но это еще предстоит доказать и вряд ли будет доказано в 2018 году.

Вот вам все, что вам нужно знать о том, что произошло с Angular в 2017 году.

Reason

Всегда стоит обращать внимание на то, что использует Facebook в production.

Facebook теперь использует Reason (их ставка на уже хорошо зарекомендовавший себя OCaml) для веб-версии Facebook Messenger, среди других проектов (WhatsApp, Instagram, Ads и др.).

В 2017 году они также выпустили reason-react, который создает биндинги для React, так что вы действительно можете писать Reason код, который компилируется в идиоматический ReactJS.

Представьте себе, что вам не нужно устанавливать Babel (+ много плагинов), Flow и т. д., а требуется только подключить OCaml + Reason (которая теперь поддерживает биндинги React). Это большой тренд, ожидающий взрыва.

Reason притягивал гораздо больше внимания в этом году в области JS нежели чем другие compile-to-js языки (извини, Elm, мы все равно тебя любим), поэтому это определенно то, за чем стоит следить и играться в 2018 году.

GraphQL

GraphQL - это язык запросов для API (думаю: современный подход к REST).

GraphQL оправдал себя в 2017 году, так как такие крупные компании, как Yelp, Spotify, Github, Walmart, NYTimes и др., теперь имеют API на основе GraphQL.

Некоторые из этих API-интерфейсов даже являются исключительно GraphQL, без возможности выбора REST. Проще говоря: инновационные компании делают свои ставки на GraphQL.

RESTful API, безусловно, далеко от смерти, но, опять же, глядя на тенденции перемещения стартапов, GraphQL является популярным вариантом.

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

Redux, Relay Modern and Apollo

Redux - это популярный проект Дэна Абрамова / Эндрю Кларка, который быстро стал хорошим решением для управления состоянием приложения и получения данных в React.

Но GraphQL действительно перетряс некоторые вещи для Redux, прежде всего говоря о получении данных.

Теперь у нас есть Relay Modern (созданный Facebook) и Apollo, графические оболочки GraphQL, которые позволяют вам получать и передавать данные GraphQL в ваше приложение React более эффективно, чем Redux.

Но, как говорит один разработчик о Relay / Apollo / Redux:

Эти рамки и их преимущества не обязательно должны быть взаимоисключающими. Фактически, использование их вместе может обеспечить хорошее разделение проблем, которые так важны для веб-разработки.

Это означает, что вы все еще можете использовать Redux в тандеме с Relay, используя Redux для локального состояния и некоторого сложного состояния без сервера, а затем Relay для получения данных.

Но сообщество стремится к тому, чтобы упростить это (и пока единственный ответ - Vuex /Vue.js/Apollo или Cashay).

Storybook

Воу, Storybook действительно выстрелил в 2017 году.

Storybook - это среда для определения, разработки и тестирования UI компонентов.

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

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

Вероятно, вы уже сталкиваетесь с проектами с открытым исходным кодом с использованием Storybook, но для того, чтобы увидеть его в действии для себя, посмотрите date picker Storybook для Airbnb.

Если вы хотите выделиться в качестве разработчика в 2018 году, тогда покажите на собеседовании Storybook из вашего последнего проекта.

Бонус: Также зацените react-bluekit, альтернативу Storybook, которую команда разработчиков Netflix использует для своей библиотеки компонентов.

Prettier

Как следует из названия, Prettier - это форматировщик кода, который делает ваш код более читабельным, ну и красивым.

foo (reallyLongArg (), omgSoManyParameters (), IShouldRefactorThis (), isThereSeriouslyAnotherOne ());

становится ...

Foo (
  reallyLongArg (),
  omgSoManyParameters (),
  IShouldRefactorThis (),
  isThereSeriouslyAnotherOne ()
);

Собрал более чем 18 000 звезд в Github и полюбился разработчиками за простоту и ценность.

Он также используется на тоннах других проектов, которые вы, вероятно, уже любите, например, Webpack, React, Next.js, Babel и другие.

Опять же, вы можете просто стать разработчиком Go и вам не потребуется устанавливать его.

Jest и Enzyme

Когда дело доходит до тестирования JavaScript, Jest, безусловно, взял на себя инициативу, а Enzyme стал отличным дополнением особенно для приложений на React.

Как вы увидите здесь, Jest теперь доминирует над Jasmine по скачиваниям.

Функция Snapshots Jest взлетела в 2017 году, что делает ее гораздо менее болезненной для тестирования. Посмотрите это обсуждение с React Conf 2017, чтобы узнать об этом все.

Enzyme, созданный инженерной командой Airbnb, представляет собой библиотеку JavaScript для тестирования компонентов React. Он взлетел до 12 000 звезд в Github с 2016 года.

Snapshots Jest's + Enzyme's супер простой API-интерфейс для тестирования Реакт компонентов создают отличное тестировочное комбо, которое будет продолжать расти в 2018 году.

Webpack

Webpack стал самым популярным сборщиком. У Webpack также был НЕВЕРОЯТНЫЙ год.

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

Затем, к началу года, я написал о том, насколько невероятным было то, что Webpack собрал $ 15 000 за 3 месяца для поддержки проекта. Теперь у них есть сотни тысяч долларов на финансирование.

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

Благодаря Шону Ларкинy, который к счастью, все еще возглавляет движение, не предвидится конца для следующих достижений Webpack.

Из-за того, что этот проект насколько хорошо поддерживается (и насколько они заботятся об своем сообществе), это дает возможность максимально легко прогнозировать его развитие в 2018 году.

Parcel

C каждой новой тенденцией растет усилие недовольных разработчиков.

Parcel, конкурирующий сборщик, набирает обороты довольно быстро, получив 12 000 звезд Github за порогом 2017 года и идет сразу же по пятам Webpack.

Фишка Parcel заключается в том, что все другие связки стали слишком раздутыми, а Parcel работает в два раза быстрее для сборки чем Webpack (в 10 раз быстрее при использовании своего кеша).

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

«Просто укажите точку входа вашего приложения, и он сделает все правильно»

Хотя упрощение конфигурации и улучшение скорости - отличные улучшения, я не удивлюсь, если Webpack не скопирует эти улучшения к первой половине 2018 года.

Подобно Vue vs. React, этот парнишка всегда будет изобретать быстрее, но многое зависит от того будет ли здоровяк вдохновлен этим нововведением и улучшит свои проекты.

Все дебаты можно почитать тут

Gatsby

Gatsby является статическим генератором сайтов для React, созданным Кайлом Мэтьюсом.

С тех пор, как Кайл начал работать в Гэтсби в прошлом году, он действительно начал набирать обороты.

Нет лучшего доказательства этого, чем тот факт, что сам сайт React построен с использованием Gatsby.

Гэтсби используется для производительности и обеспечивает самый быстрый web-experience в React.

Эта диаграмма с их сайта дает вам представление о том, как это работает:

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

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

Для получения дополнительной информации о Гэтсби, прочитайте этот пост.

Babel

На данный момент Babel не нуждается в представлении и по-прежнему остается тенденцией по умолчанию.

В целом, это был хороший год для Babel, в основном сосредоточенный на разработке Babel 7 (надеемся на релиз в начале 2018 года). Самое главное, они написали песню :)

Единственное беспокойство Babel в настоящее время (помимо его экстраординарного сопровождающего, который берет неопределенную паузу с проектом), похоже на то, что Reason становится мейнстримом.

Но на данный момент Babel должен оставаться сильным в течение 2018 года.

Flow & Typescript

Typecript и Flow являются отличными статическими вариантами для JavaScript-разработчиков, которые используют их для улучшения качества кода.

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

Flow, созданный Facebook, является предпочтительным выбором для разработчиков React, поскольку он легко интегрируется с Babel, также широко используется в проектах React.

TypeScript, созданный Microsoft, популярен среди разработчиков Angular 2+, поскольку это основной язык.

2018, вероятно, будет скучным с точки зрения прогресса от этих двух, и реальным вопросом в последующие годы будет замена их обоих на что-то подобное Reason

Immutable.js

Мне нравится, как один redditor описал Immutable.js:

ImmutableJS гарантирует, что разработчики больших команд не делают что-то глупое.

Проще говоря: Immutable.js, еще один проект Facebook, который гарантирует, что состояние не изменяется с помощью неизменяемых (неизменяемых) объектов.

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

Данные, инкапсулированные в объект Immutable.JS, никогда не мутируются. Всегда возвращается новая копия. Это контрастирует с JavaScript, в котором некоторые операции не мутируют ваши данные (например, некоторые методы Array, включая map, filter, concat, forEach и т. д.), но некоторые из них делают это (зop, push, splice и т. д.).

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

В настоящее время с 20 000 звездами в Github, Immutable.js вырос в популярности в 2017 году и, как можно ожидать, продолжит рост в 2018 году, так как разработчики начинают тратить время на понимание концепции и компромиссов.

Popmotion

Popmotion - это motion библиотека JavaScript, быстро набирающая звезды в Github.

Представьте, что Flash встречает jQuery.

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

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

И Popmotion - это действительно лучший опыт со множеством инноваций вокруг веб-анимации, которая только начинает бурлить. Это определенно то, за чем стоит следить в 2018 году.

Загляните на их сайт, чтобы попробовать.

React Native & Electron

React Native позволяет создавать приложения React для мобильных устройств, а Electron позволяет создавать приложения на JavaScript для настольных компьютеров.

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

Некоторые известные приложения, созданные на Electron: Slack, Atom, Github Desktop и Discord.

А популярные приложения, созданные с помощью React Native: Facebook, Instagram, Airbnb и UberEATS.

Теперь вы можете создавать приложения React Native для Windows.

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

Бонус: Web Assembly

Со всеми 4 браузерами, поддерживающими Web Assembly, мы почти на месте. Пока еще слишком рано называть это тенденцией в 2018 году, поэтому мы маякнем вам через 12 месяцев.

Но следите за ним на своем радаре, так как все сейчас очень пристально наблюдают за ним.

2018 Study Materials

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

  • Будь смелым, выучи Vue.js
  • Каждый разработчик React должен изучить Next.js
  • Начните изучать Reason (и ReasonReact) и попробуйте его в стороннем проекте
  • GraphQL является обязательным для вашего списка дел 2018
  • Изучите Relay Modernб, Go-to вариант для извлечения данных в приложениях React + GraphQL
  • Сторибук! Сторибук! Сторибук!
  • Установите Prettier в проект и сделайте код более удобочитаемым
  • Изучите и используйте снепшоты Jest в тандеме с проектом Enzyme on React
  • Изучите Flow (React developers) или TypeScript (все остальные)
  • Рассмотрим Гэтсби для создания чего-то из Markdown -> Статические страницы
  • Создайте мобильное приложение, используя React Native
  • Создайте настольное приложение с помощью Electron
  • Играйте с Popmotion, чтобы создать плавную анимацию

Оригинал статьи The Top JavaScript Trends to Watch in 2018

Присоединяйтесь к нам в Telegram