Библиотеки JavaScript и WordPress: что нужно знать

Опубликовано: 2017-10-24

Я уже говорил об этом раньше и скажу еще раз: если вы пользователь WordPress, вам необходимо познакомиться с JavaScript. Это просто способ Интернета. Таким образом, настоящая проблема - это огромное количество библиотек JavaScript, которые вам нужно перебирать.

Есть Ember, React, Angular. Vue и Preact. И не забывайте об Ionic, Express или Node. Также заслуживают упоминания jQuery, Meteor и Bootstrap. О, а как насчет…

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

Если вам нужны манипуляции с DOM, инфраструктура MVC, вызовы AJAX или что-то еще, скорее всего, есть библиотека, из которой вы можете извлечь, чтобы помочь вам на своем пути.

Как пользователь WordPress, это должно быть музыкой для ваших ушей, и вот почему.

Что такое библиотеки JavaScript?

Просто: готовый код buncha. Ничего фантастического. Тем не менее, вы можете делать с ними кучу причудливых вещей. Вот почему они классные.

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

Это нормально.

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

Первые дела в первую очередь

Как пользователь WordPress, у вас есть доступ к множеству библиотек JavaScript и их зависимостей, уже имеющихся в Core. Ознакомьтесь с Кодексом для получения полного списка и того, как использовать wp_enqueue_script со встроенным и внешним JS.

Библиотеки JavaScript… Для чего они нужны?

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

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

Фреймворки можно разбить на несколько категорий: фреймворки внешнего интерфейса, внутренние фреймворки и фреймворки полного стека. Если вы не знакомы с терминами, интерфейс - это то, с чем взаимодействует пользователь, бэкэнд - это то, что решает проблемы на стороне сервера, а полный стек обрабатывает как интерфейс, так и серверную часть.

Вы, наверное, слышали о нескольких наиболее распространенных / популярных фреймворках:

  • Угловой
  • Node.js
  • Vue.js
  • Реагировать
  • Ember

Как все это работает в WordPress?

Некоторые из этих библиотек этого не делают. В этом весь смысл, который я хочу подчеркнуть: вам не нужна внутренняя структура (и, в этом смысле, структура полного стека), если вы работаете с WordPress. Наше восхитительное ядро ​​уже обрабатывает этот уровень структуры за нас. (Обратите внимание, что это спорный вопрос, если вы разработчик, который вносит конкретный вклад в Core и / или самостоятельно выполняет тонну настройки.)

Что вам действительно нужно научиться использовать (или хотя бы понять), так это интерфейсные фреймворки и библиотеки для работы с DOM. Они используются гораздо чаще, чем любые другие библиотеки JavaScript.

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

Некоторые плагины, такие как NinjaForms, хотя и написаны на PHP - потому что WordPress так говорит, - используют библиотеки JavaScript, чтобы предоставить пользователю лучший опыт и гораздо большую функциональность, чем это было возможно в противном случае. Для этого WPNinjas использовал библиотеки Backbone и Marionette.

Черт возьми, даже здесь, в Elegant Themes, Divi 3.0 (который потрясающий, и вы должны полностью присоединиться к использованию на всех своих сайтах) написан на React.

Так же как и грядущий редактор Gutenberg (по крайней мере, на данный момент) и админ-панель WordPress.com под названием Calypso (а также Jetpack). Черт возьми, почти все, что вы делаете на панели инструментов .org, работает на JavaScript, пока что-то не изменится. на сервере и его нужно сохранить.

Но даже это может скоро измениться… благодаря WP REST API.

WP REST API + библиотеки JavaScript = BFF

Вы, наверное, уже слышали о WP REST API. Короче говоря, он вдохнул жизнь в разработку WordPress на JavaScript, потому что вам не нужно делать запросы к серверу через JavaScript вместо того, чтобы полагаться на PHP.

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

С JS и REST можно сделать так много, что даже подумать об этом страшно. Когда вы используете React (и, в частности, React Native), вы можете использовать базу данных WordPress в качестве серверной части для своего мобильного приложения, даже не касаясь PHP. Вы можете напрямую взаимодействовать с MySQL через JSON через REST API.

В некотором смысле, это взаимодействие заставляет WordPress работать так же, как внутренние JavaScript-фреймворки, о которых мы говорили выше, обеспечивая структуру приложения и управление базой данных без какого-либо промежуточного PHP. В WP нет ничего нового в такой работе - в конце концов, именно это и делает CMS, - но реализация и интеграция с библиотеками JavaScript и JSON

Хотя React Native может делать это специально для мобильных приложений, вы также можете использовать любой интерфейсный фреймворк или библиотеку, чтобы сделать то же самое - Vue.js и Ember и обычный старый React (или Preact, если вам неприятно).

И если вы действительно противны, вы можете взять одну из этих библиотек, создать свой сайт и использовать достаточно Swift of Java, чтобы обернуть его в веб-представление и выбросить в App Store благодаря REST API. Это немного некрасиво, но должно работать.

Будущее WordPress

В прошлом году Мэтт сказал, что все разработчики WordPress должны «глубоко изучить JavaScript».

Думаю, нам всем пора прислушаться. Честно говоря, не имеет значения, какую библиотеку или библиотеки JavaScript вы выберете для изучения в первую очередь. Когда вы ознакомитесь с тем, как один или два из них работают и взаимодействуют с WordPress, вы на правильном пути к тому, чтобы стать частью экосистемы JS и, в свою очередь, будущего WP.

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

Миниатюра статьи Творческие мысли / shutterstock.com