JS-проекты на подъеме в 2017 году

Всего слов 4741. Чтение занимает 8 минут, а скорочтение — 2 минуты. Мне посчастливилось участвовать в переводе и корректуре части китайской версии этого проекта, спасибоSacha Grief,Micheal RamberuСтатистическое сопоставление , иFrank XuПеревод работает, полную версию хлопайте пожалуйстачитать оригинал.

Как и в 2016 году, пришло время рассмотреть развитие и изменения в области Javascript в 2017 году. Сравнивая количество новых звезд, добавленных каждым проектом на GitHub за последние 12 месяцев, чтобы оценить его внимание в 2017 году, а затем выбрать проекты-звезды, которые поднялись в области JavaScript в 2017 году.

На приведенной ниже диаграмме сравнивается количество звезд, добавленных каждым проектом на Github за последние 12 месяцев. Источником данных для анализа являетсяbestof.js.orgСайт, подборка отличных проектов в сфере WEB. Более подробную информацию можно просмотреть, нажав на элемент.

Самые популярные товары

Ниже представлен список самых популярных Javascript-проектов 2017 года по категориям, поэтому, если у вас мало времени, посмотрите этот раздел.

Vue.js занимает первое место

Vue.jsВновь заняв первое место в ежегодном рейтинге, в этом году на GitHub было добавлено более 40 000 звезд. По сравнению с 2016 годом (26 000 звезд) Vue.js лидирует в таблице лидеров на втором месте в этом году (React) имеет большее преимущество.

Итак, что же делает Vue.js таким замечательным?

• Во-первых, он имеет несложную кривую обучения, используя тот жеReactСхема компонентов с похожим синтаксисом, более знакомая веб-разработчикам;
• Развитая экосистема, в сообществе де-факто появилась официальная стандартная библиотека: маршрутизацияvue-router, Библиотека управления статусом:Vuex;
• Объедините шаблоны, логику и стили в один.vueКонцепция однофайлового проектирования компонентов в файле очень удобна сегодня, когда модульность — это то, что нужно;
• Популярный PHP-фреймворкLaravelВыбран в качестве механизма просмотра по умолчанию;
• дляEvan YouЛично поддерживаемые проекты с открытым исходным кодом, поддерживаемые краудфандингом, в которых не доминируют интернет-гиганты, такие как Facebook или Google.

Возможно, из-за последнего пункта выше у Vue.js большое количество поклонников в Китае. Его использует не только Alibaba, крупнейшая платформа электронной коммерции в Китае, но и такие компании, как GitLab и Adobe.

React снова занявший второе место

React2 место, как и в 2016 году, в 2017 году он получил более 27 тысяч звезд на GitHub (еще раз для ясности, здесь мы анализируем этот годновыйколичество звезд вместовсеколичество звезд).

Create React App, занимает третье место в таблице лидеров и стало предпочтительным способом создания новых проектов React. Его большой успех привел к тому, что многие React Boilerplates постепенно исчезли с исторической сцены.

Dan Abramov(ReduxАвтор, теперь на Facebook) СозданоCreate React AppДействительно делает потрясающую работу, он обеспечивает аккуратный баланс между функциональностью и простотой, например, он не объединяет причудливые решения по стилю (только чистый CSS) и рендеринг на стороне сервера, но имеет правильный пакет, это создает хорошую разработку опыт.

Axios

AxiosБиблиотеки являются наиболее широко используемыми HTTP-клиентами. Его можно использовать как на стороне клиента (где запросы Ajax выполняются на стороне клиента), так и на стороне сервера (в среде Node.js).

Успех Axios может быть во многом связан с Vue.js, потому что многие учебные пособия по Vue.js используют его для выполнения запросов API для получения данных.

Puppeteer

PuppeteerЭто одно из главных событий этого года: браузер Chrome без интерфейса, разработанный командой Google Chrome, то есть браузер, который работает в фоновом режиме и может управляться и контролироваться кодом.

Его можно использовать для следующих целей:

• Автоматизированное тестирование пользовательского интерфейса в реальных браузерах;
• Рендеринг на стороне сервера достигается за счет создания моментальных снимков страниц;
• Используйте функцию Google Chrome «Сохранить как PDF» для создания PDF-файлов;

внешний фреймворк

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

Vue, React, Angular — три кита

Нет никаких сомнений в том, что в настоящее время приняты три основных фреймворка пользовательского интерфейса.Vue.js,Reactа такжеAngular.

Мы привыкли называть их _frames_, но если быть точным, то толькоAngularэто _framework_,Vue.jsа такжеReactДолжен классифицироваться как _library_.

В предыдущей статье мы проанализировалиVue.jsфакторы успеха и схема его интеграции.

Соответствует Vue.js,ReactС точки зрения аспектов, он все еще находится в состоянии фрагментации, разработчикам необходимо делать технические выборы в зависимости от ситуации с собственными проектами:

• Маршрутизация переключения между страницами;
• как получить данные;
• Как привязать данные к форме;
• Как хранить статус приложения;

Напротив,AngularЭкосистема становится более контролируемой и стабильной. Существует передовая практика под названием _Angular Guidelines_, которая направляет разработку.

это может датьAngularБолее дружелюбное впечатление для нескольких людей, работающих вместе. Кроме того, с поддержкой статически типизированныхTypeScriptПрисоединяйся,AngularЕго обязательно будут смотреть и поддерживать больше бэкенд-разработчиков, знакомых с C# или Java.

меньше - больше

После большой тройки очень интересно найти четвертое местоPreact.

PreactЯвляетсяReactНебольшое альтернативное решение для: имеет тот же API, но имеет размер всего 3 КБ.

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

Фреймворк Node.js

JavaScript не ограничивается только внешними веб-приложениями, но все больше и больше людей используют его для разработки серверных приложений. Влиятельный в сообществе Node.jsMikeal RogersГотовоNode.js превзойдет Java в течение годаПрогноз.

В отличие от других языков, имеющих де-факто стандартные фреймворки (например, Ruby on Rails для Ruby, Django для Python и Laravel для PHP), в настоящее время не существует стандартного фреймворка для написания серверных программ на основе Node.js.

ExpressВ конце концов, это не победитель в категории фреймворков Node.js 2017 года, проект существует уже много лет, но он превратился в основополагающий компонент многих фреймворков и CMS, включаяFeathers,Keystoneа такжеNest.

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

По сравнению с прошлым годом в этом году в ТОП-10 в категории фреймворков node.js вошли 3 новых лица:

• Fastifyявляется предметомHapiВдохновленный универсальной веб-платформой, также подходит для использования в качестве сервера JSON HTTP API;
• Server.jsОриентация на «нестандартный» опыт разработки;
• NestЭто фреймворк, написанный на TypeScript, а его модульность и комбинированная архитектура контроллера делают пользователей Angular очень дружелюбными.

Реагировать на экосистему

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

Create React AppБлагодаря интеграции и отличной предварительной упаковке, чтобы решить проблему громоздкой и сложной настройки, когда новое приложение React. В этом году Facebook также поддерживает часто обновляемый ритм, что делает его самым активным в настоящее время экологическим проектом React.

так какCreate React AppОдна из историй успеха, на которую мы можем обратить вниманиеStackBlitz, который является онлайновой IDE, черезCreate React App, что позволит вам создать приложение в браузере за считанные секунды.

хотяCreate React AppНовый инструментарий по умолчанию настроен на React, у разработчиков все еще могут быть другие варианты, такие какReact boilerplate, который также является очень интересным проектом, унаследовавшим множество полезных функций, таких как GraphQL.

Ant Design,Ant Design Proа такжеMaterial UIНабор инструментов стилизации для компонентов React, они помогают программистам запускать новые приложения, не беспокоясь о стилизации.

10-йRecomposeПопулярность React также доказывает, почему разработчики любят React: его «функциональная» природа, все является функцией.RecomposeПредоставляется полный набор функций, которые помогут вам двигаться дальше.

Экосистема Vue.js

Штатный писатель:Evan You, хотя мы ценим Vue.js, мы должны признать, что мы не очень хорошо знакомы с его экосистемой. С этой целью мы попросили эксперта прокомментировать развитие Vue.js в этом году, так кто еще более знаком, чем автор Vue.js?

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

Elementа такжеiView— это два самых популярных набора инструментов для компонентов пользовательского интерфейса, ориентированных на быструю разработку интерфейсов пользовательского интерфейса для настольных компьютеров. а такжеMint UIа такжеvuxНаоборот, это самый популярный набор пользовательского интерфейса для мобильных устройств.

VuetifyЭто наиболее полная структура компонентов Material Design, которую можно применять как к мобильным, так и к настольным компьютерам.Он имеет встроенные функции, включая рендеринг на стороне сервера, PWA, поддержку шаблонов CLI и многие другие функции.

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

WeexЭто разработка мобильного настольного приложения, которое может использовать синтаксис и API Vue.js для собственного рендеринга. Он был разработан Alibaba и использовался в некоторых из наиболее часто используемых мобильных приложений в мире с упором на оптимизацию производительности.

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

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

В этой категории мы нашли соответствующие решения для 3 основных интерфейсных фреймворков:

• React: React Native
• вид:Weexа такжеQuasar
• Угловой:Ionicа такжеNativeScript

Как и в 2016 г.,React NativeВторой год подряд это приложение номер один, которое позволяет нам компилировать JavaScript в собственные приложения, которые могут работать на iOS, Android и даже Windows.

как видеоКроссплатформенная компиляция приложений с помощью React NativeВ частности, обещание «Пиши одно, беги везде» стало реальностью.

Компилятор: Компиляторы

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

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

• Хотите немедленно использовать новейшие функции языка JavaScript и применить их к как можно большему количеству браузеров, такой спрос заставляетBabelОн оказался успешным, и от него зависят многие проекты;
• хотите добавить в язык новые функции, такие как «проверка типов»;

Популярный вопрос для классификации программистов Javascript: используете ли вы типы или нет?

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

Если вам нужен тип, есть два основных варианта:TypeScriptи FacebookFlow(Facebook в собственном основном проектеReact,React Native,Jestиспользуются в)

ты можешь начатьJames KyleСтатья, чтобы почувствовать разницу между ними:A Comparison Between Adopting Flow or TypeScript.

Инструменты построения: инструменты сборки

Чемпион рейтинга в категории «Инструменты для сборки»Parcel, это может стать самым большим сюрпризом этого года, так как новый проект, выпущенный на GitHub в августе, привлек внимание 14 тысяч звезд.

ParcelНе только предоставляет различные функции, необходимые для современной фронтенд-разработки, но и имеет сокрушительное преимущество: нулевая конфигурация! В этом разница между ним и полагающимися на большое количество "загрузчиков"Webpackсамая большая разница.

Пожалуйста, не путайте цифры,WebpackПо-прежнему самое популярное приложение для сборки, у него 35 тысяч звезд и более 500 участников на GitHub. В настоящее время его используют многие проекты, в том числе два самых популярных в этом году:Create React Appа такжеGatsby.

WebpackПостоянно обновляемая версия 2.0 позволяет разработчикам легко реализовать функцию «разделения кода» посредством динамической загрузки.

Webpackа такжеParcelориентируясь на сборкувеб приложение,а такжеRollupнаходится вбиблиотека, в котором основное внимание уделяется повышению производительности модулей ES6.

RollupИспользуется некоторыми основными библиотеками, стоит отметить, чтоReactКоманда также изменила свою систему сборки сBrowserifyпереключился наRollup.

существуетРеагировать Блогупоминается в

Rollup можно предварительно скомпилировать и интегрировать в приложения, и он отлично работает с подобными библиотеками, такими как React.

Poiа такжеParcelУ него та же цель: современный инструмент для создания веб-приложений, который по умолчанию имеет нулевую конфигурацию, но вы можете расширить его, используя предустановки.

тестовая среда

как мыв прошлом годуКак и ожидалось (это наш первый успешный прогноз!),JestСтаньте королем категории тестовых фреймворков этого года.

JestПервоначально разработанный Facebook для тестирования компонентов React, революционные изменения версий за последние месяцы (было выпущено 22 основные версии) теперь позволяют тестировать как внешний, так и внутренний код.

JestЕсть несколько важных моментов:

• Никакой настройки не требуется, настройки по умолчанию соответствуют обычным требованиям;
• Мощный опыт разработчика (режим смарт-часов, интуитивно понятное сообщение об ошибках);
• И синтаксисMochaочень близкий, знакомый многим программистамdescribeа такжеitтакие ключевые слова;
• Никаких дополнительных библиотек для создания утверждений не требуется, все они встроены;
• Уникальный режим «моментального снимка» можно использовать в качестве эталона для сравнения при повторном запуске тестов;

AVA, прошлогодний номер 1, по-прежнему имеет много привлекательных особенностей.

этот проектSindre SorhusСозданный и используемый во всех его проектах, сокурсники, которые знают его, знают, что это значит!

В сравнении сJest,AVAОн больше ориентирован на скорость параллельного тестирования, легче и ближе к стандарту тестирования, который синтаксически похож на среду тестирования.Tapeоколо.

IDE и редакторы

Здесь мы говорим о редакторе с открытым исходным кодом, созданном с использованием веб-технологий (извините, поклонники Sublime!).

доминирует Microsoft в 2016 г.VS CodeДоминирует с GitHubAtomидут рука об руку в этой категории. Они по-прежнему лидируют в этом году, но в конкурентной борьбеVS CodeОн значительно опережает своих соперников.

каждый месяцVS CodeБудут выпущены новые версии с более практичными функциями IDE без существенной потери производительности. Даже без установки каких-либо плагинов у вас есть целый набор функций из коробки:

• возможности интеграции с Git;
• Автозаполнение: синтаксис JavaScript, завершение пути к файлу, имя пакета NPM и так далее;
• интеграция синтаксиса React и т.д.;

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

CSS in JavaScript

В сообществе React до сих пор нет единого мнения о том, как эффективно управлять стилями компонентов, т.е. нет стандартного решения.

Если вам не нужно много пользовательских стандартных стилей, вы можете использоватьMaterial UIилиAnt DesignТакие готовые комплекты компонентов. Если вам нужна более гибкая настройка, вы все равно можете использовать традиционные способы: используйте одно изображениеBootstrapилиBulmaТакой глобальный стиль CSS, путем измененияclassNameсвойства для достижения цели. Недостатком этого является то, что компоненты не могут управлять своими собственными стилями, поскольку стили распространяются в отдельных файлах.

Концепция CSS в JavaScript появилась для решения вышеуказанных проблем.

Сама концепция проста: поскольку у нас уже есть доступ к JavaScript в Reactв то же времяЛогика управления и часть шаблона, почему бы не пойти дальше и даже управлять стилями вместе?

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

CSS Modules, занявший второе место в этой категории, использует гибридное решение. Это позволяет разработчикам выбирать свои собственные стили, такие как стандартный CSS, SASS, NO slug Less, NO slug Stylus и т. д., а затем записывать стили в виде файлов.импортв компонент.

Mark Dalgleish,CSS ModulesАвтор , написал интересную статью, объясняющую решение CSS-in-JavaScript:A Unified Styling Language. Если вы все еще скептически относитесь к решениям CSS-In-JavaScript, эта статья не должна быть пропущена.

генератор статических сайтов

Генератор статических сайтов (SSG, Static Site Generator) относится к инструменту, который может генерировать кучу файлов HTML, CSS и JS, что удобно для быстрого развертывания на веб-сервере без установки и настройки базы данных.

Статические веб-сайты быстрые, стабильные и простые в обслуживании. Заняв второе место в 2016 г.,GatsbyВ этом году успешно выделил первый приз. Он добавляет множество новых функций, которые помогут вам оптимизировать ваш статический веб-сайт:

• Быстрый просмотр и скорость экспорта;
• Активная функция предварительной загрузки;
• Умная декомпозиция кода (шаблон + данные веб-страницы);

GatsbyиспользоватьReactЧтобы сделать слой представления (View Layer), при построении используйте GraphQL для запроса содержимого. у него сильное сообщество иРеагировать на официальный сайтТакже построен с Гэтсби.

React Staticновое лицо этой категории. это изCreate React AppВдохновение в проекте направлено на создание легкогоGatsbyАльтернатива, ориентированная на производительность и краткость.

Кроме того, стоит упомянуть, чтоNext.jsМожет также использоваться в качестве генератора статических веб-сайтов.

GraphQL

Если оглянуться на историю GraphQL в будущем, 2017 год, вероятно, станет поворотным моментом.

картинаthe New York TimesТакие крупные компании начинают использовать GraphQL,Relayа такжеApollo(Два основных клиентских фреймворка GraphQL) в этом году также выпустили два основных обновления версий.

За этими двумя библиотеками, напримерGraphcoolТакие компании также предоставляют большое количество инструментов и библиотек, при этомVulcanТакие фреймворки с полным стеком также начинают использовать GraphQL.

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

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

Суммировать

Мы надеемся, что наш обзор ландшафта JavaScript в этом году вдохновил вас.

можно увидеть,Vue.jsДва года подряд и не собирается останавливаться.

ReactЭкосистема также наконец решила проблему с сертификатами и продолжает процветать.

Но если бы мы проголосовали за _звезду проекта 2017_, это точно было быPrettier. С ним нам больше не нужно беспокоиться о форматировании при написании кода!

State of JavaScript 2017 surveyБыл собран и проанализирован опрос 23 000 разработчиков, чтобы помочь вам интерпретировать направление эволюции сообщества с другой точки зрения.

Как вы думаете, кто станет финалистом 2018 года на этот раз в следующем году?Звездный проект JavaScript?

• на основеGraphQLновый фреймворк?
• Библиотека, которая в полной мере использует стандарт WebAssembly для создания нового и необычного интерфейса в браузере?

Пожалуйста, сообщите нам свое мнение! Наконец, благодарим вас за чтение этой статьи и добро пожаловать на ее свободное распространение. Любые вопросы или отзывы, пожалуйста, обращайтесьGitHubСвяжитесь с нами!