Как создавать быстрые веб-приложения с использованием JavaScript в 2018 году с кодом Wix онлайн урок.


Почему код Wix использует JavaScript

Код Wix дает вам возможность добавить свой собственный код на сайт Wix.Мы выбрали JavaScript как язык, который мы поддерживаем как в интерфейсе, так и в бэкэнд, а также как язык наших API .

JavaScript в интерфейсе

«Любое приложение, котороеможетбыть написано на JavaScript,будетв конечном итоге написано на JavaScript».



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


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

более быстрый ответ на их ввод.

JavaScript в бэкэнд с Node.js

«Node.js позволяет использовать JavaScript для серверного скриптинга». Следовательно, Node.js стал одним из основополагающих элементов парадигмы «JavaScript везде», позволяя разработке веб-приложений объединяться вокруг одного языка программирования, а не полагаться на другой язык для написания сценариев на стороне сервера ».


Википедия


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

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

Работа с JavaScript в коде Wix

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

Встроенная IDE
Wix Code IDE


Код Wix включает встроенную интегрированную IDE


, которая упрощает добавление код на ваш сайт с нулевой настройкой. Эта IDE работает для ваших интерфейсных файлов и позволяет добавлять код или код страницы, который вы хотите запустить на своем сайте. Вы также можете использовать IDE для добавления кода в файлы резервных копий, таких как привязки данных, настраиваемые маршрутизаторы, веб-модули и функции HTTP, или любые другие файлы, которые вам нужны.

IDE упрощает кодирование, потому что весь ваш код автоматически интегрируется с вашим сайтом. IDE также включает профессиональные инструменты для упрощения кодирования, такие как завершение кода для элементов и их свойств или методов (введите Ctrl + пробел после нашего селектора $ или после выбранного элемента). По пути IDE также обеспечивает обратную связь JSLint, чтобы помочь вам составить код, используя лучшие практики.

Чтобы упростить отладку, все сообщения, которые вы регистрируете на консоли в интерфейсе, отображаются при предварительном просмотре вашего сайта в консоли разработчика в режиме предварительного просмотра Wix. Журналы бэкэнд-кода можно увидеть и в консоли разработчика. Встроенный Бэкэнд


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

wix-data API

.

Самое главное, мы даем вам веб-модули: простой способ позволить вашему внешнему коду вызвать ваш внутренний код.

Веб-модули


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


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


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


Если вам интересно, вот что происходит за кулисами. Когда вы импортируете веб-модуль на стороне клиента, вы получаете функцию прокси-сервера для функции веб-модуля. Эта функция прокси использует XMLHttpRequest для вызова функции в бэкэнд. Время выполнения прослушивает эти вызовы и вызывает соответствующую функцию. Аргументы и возвращаемое значение сериализуются с использованием JSON.

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

Имя файла: aModule.jsw (веб-модули должны иметь расширение *.jsw *)

функция экспорта умножить (factor1, factor2) {

& nbsp; & nbsp; & nbsp; коэффициент возврата1 * factor2;


}

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

import {multiply} из 'backend aModule';

умножить (4,5). then (function (product) {

& nbsp; & nbsp; & nbsp; & nbsp; console.log (продукт);

});

Журналы: 20 Поддержка стандартов JavaScript

  • Код Wix поддерживает запись кода с использованием последних стандартов JavaScript. Вы можете написать код, используя

  • как в бэкэнд, так и в интерфейсе, в том числе:

    Обещания
  • для работы с обещаниями

  • Поддержка новых модулей

    Функции стрелок

Назначения деструктурирования

и

constобъявления

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

Код Wix также поддерживает исходные карты, поэтому, несмотря на то, что браузер запускает переданный код ES5, вы можете отлаживать исходный код ES2015 в инструментах разработчика вашего браузера. Оптимизация Код Wix также обеспечивает эффективную доставку вашего кода в браузер. Ваш код минимизируется, а исходные файлы объединяются (в комплекте) без необходимости настройки чего-либо.Примеры кода

Код Wix предлагает несколько

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

Используется

$ w API

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

onClickдля кнопки. Обработчик показывает или скрывает изображение, основанное на текущем состоянии изображения. Он также соответствующим образом меняет метку кнопки.

$ w.onReady (() = & gt; {
& nbsp; $ w ("# showHideButton"). onClick ((event, $ w) = & gt; {
& nbsp; & nbsp; & nbsp; if ($ w ("# myImage"). hidden) {
& nbsp; & nbsp; & nbsp; & nbsp; $ w ("# myImage"). show ();

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; event.target.label = "Скрыть";

& nbsp; & nbsp; & nbsp;}

& nbsp; & nbsp; & nbsp; else {

& nbsp; & nbsp; & nbsp; & nbsp; $ w ("# myImage"). hide ();

& nbsp; & nbsp; & nbsp; & nbsp; event.target.label = "Показать";

& nbsp; & nbsp; & nbsp;} & nbsp;});

});

API

wix-fetch
используется для отправки HTTP-запросов сторонним службам. Например, здесь у нас есть бэкэнд-функция, которая получает название города. Он отправляет запрос API погоды для получения погоды в этом городе. Когда получен ответ, функция возвращает текущую температуру вызывающей функции.

импорт {fetch} из 'wix-fetch'; & NBSP;

функция экспорта getCurrentTemp (город) {
& nbsp; const url = 'https: api.openweathermap.org data 2.5 weather? q =';
& nbsp; const key = '& lt; api key placeholder & gt;';
& nbsp; & nbsp; & nbsp;
& nbsp; позволить fullUrl = url + city + '& amp; appid =' + key + '& amp; units = imperial';
& nbsp;
& nbsp; return fetch (fullUrl, {method: 'get'})


& nbsp; & nbsp;.then (response = & gt; response.json ())

& nbsp; & nbsp; & nbsp;; then (json = & gt; json.main.temp);


} Подробнее

Возможность добавления JavaScript на ваш внешний или внутренний сервер означает,