Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Веб приложения на javascript

Веб приложения на javascript

Создание программ под ПК стало возможным, после появления библиотек подобных Electron JS. В ходе урока вы создадите полноценную ПК программу используя JS, HTML и CSS.

Приложения в вебе становятся всё мощнее, здесь прогресс на лицо. Тем не менее значительную долю разработки занимают стандартные приложения, которые имеют полный доступ к физическому оборудованию ПК. Уже сегодня есть возможность объединить обе технологии и написать десктопное приложение на известных языках веб-программирования, вроде HTML, JS и Node.js . Это всё можно поместить в исполняемый файл, который можно использовать на Mac OS X, Windows, Linux.

Сейчас есть 2 популярнейших проекта с opensource-кодом, которые могут создавать исполняемые файлы из веб-приложений. Речь идёт о NW JS и Electron. В рамках данного материала поговорим о последнем.

Начало работы с Electron

Приложения, созданные посредством Electron – это обычные веб-сайты, которые запускаются посредством предустановленного веб-обозревателя Chromium. В добавок к классическим стандартам API HTML5, есть возможность применять весь список модулей Node.js и уникальных функций Electron. Модули сервиса как раз и обеспечивают доступ к ОС.

Запуск приложения

Как уже удалось определить, приложение на Electron – это обычная Node.js программа, поэтому ей нужно добавить npm . Благо, это выполняется предельно легко.

Следует запустить терминал и находясь в каталоге целевого проекта выполнить команду:

В результате появится папка с названием node_modules , в которой установлены все нужные зависимости для программы. Дальше стоит ввести ещё одну команду.

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

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

Разработка программы

Разработка программы это создание главного JS файла, а также HTML и CSS файлов содержащих все стили и разметку для страниц программы.

Предлагаем вам просмотреть небольшое видео, в котором наглядно приведено описание и создание полноценного приложение на Electron JS.

Ссылки из видео:

Ниже приведен весь код из видео урока.

JS файл:

HTML код:

Упаковка и дистрибуция

Существует ещё один важный момент, который помогает достичь целевого пользователя. Вам нужно запереть всё содержимое в исполняемый файл, как раз его и можно включить двойным кликом. Важно создать уникальный дистрибутив под каждую ОС: Windows, OS X, Linux. Как раз в этом и пригодится Electron Packager .

Здесь следует уделить внимание тому, что в готовый файл также добавятся ваши ресурсы, это обусловлено платформой Node JS, и обрезанная копия webkit веб-обозревателя. На выходе должен получиться файл весом около 50 Мб. Это весьма большой вес для обычного приложения в несколько строк. Вопрос с весом программы теряет актуальность при разработке крупных приложений со сложными алгоритмами работы.

Веб-приложения и JavaScript

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

Интернет является неотъемлемой частью жизни человека. Каждый день мы прибегаем к помощи всемирной паутины для того, чтобы найти нужную информацию, пообщаться с близкими людьми или коллегами, приобрести интересующий нас товар и многое другое.

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

Так чем же отличается обычный сайт от веб-приложения?

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

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

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

Существует довольно много технологий, с помощью которых реализуются веб-приложения, а наиболее популярными языками программирования являются:

Веб-приложения на JavaScript

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

Главные плюсы JavaScript, за которые он и получил такую распространенность:

  • Полная интеграция с HTML/CSS.
  • По умолчанию поддерживается всеми распространенными браузерами и включен в них.
  • Простая реализация простых задач.

Как работать с JavaScript?

Первым шагом, чтобы облегчить изучение этого языка, стоит ознакомиться с основами веб-разработки. Следует изучить основы HTML и CSS. С этими навыками, а также со знанием других языков программирования станет проще изучать JavaScript. Ведь не смотря на то, что языки имеют разный синтаксис – концепция в большинстве случаев одна.

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

Существует много сред программирования на JavaScript. Разработка веб-приложений может осуществляться при помощи таких фреймворков и библиотек, как:

Многие из них очень громоздкие и не особо удобны. Рассмотрим несколько известных, которые отличаются своей производительностью и способны помочь в JavaScript разработке веб-приложений. Это фреймворк Angular JS и библиотека JQuery.

В последнее время набирает популярность JavaScript-фреймворк Angular JS. Среда обладает очень широким функционал и получила признание за высокую скорость обработки.

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

Благодаря развитому сообществу AngularJS, не составит труда найти разработчиков для поддержки своего проекта. Существует много книг и курсов по этому фреймворку, а так же проходит множество конференций.

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

JQuery – библиотека JavaScript, которая предназначена для взаимодействия JavaScript и HTML. Главное преимущество – объем программного кода намного меньше, чем объем стандартного JavaScript, код более понятен и гибок, что сокращает время на разработку и пр. Существуя с 2006 года, библиотека сильно изменилась в лучшую сторону. Она стала стабильнее и более производительней.

Читать еще:  Java sdk что это

Не обошлась JQuery и без недостатка: скорость работы ниже, чем у чистого JavaScript.

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

Как быстро создать десктопное приложение на HTML, CSS и JavaScript

Можно ли использовать HTML, CSS и JavaScript для создания десктопных приложений?

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

Electron

Electron может быть использован для создания десктопных приложений, также эти приложения будут мультиплатформенными — Windows, Mac, Linux и другие.

Electron объединяет Chromium и Node.js в одну среду исполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в виде десктопного приложения.

Electron Forge

Если Electron используется напрямую, то перед сборкой приложения потребуется определённая ручная настройка. Также, если вы хотите использовать Angular, React, Vue или любой другой фреймворк или библиотеку, вам нужна будет ручная настройка.

Electron Forge значительно упрощает все вышеперечисленное.

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

Также он обеспечивает простоту сборки и упаковки приложения. В нём есть множество других функций, которые можно найти в документации.

Предварительная подготовка

Убедитесь, что у вас установлен Node.js. Если нет, то его можно скачать отсюда. Установите Electron Forge глобально, используя следующую команду:

Начнём с приложения

Используйте следующую команду для создания вашего приложения:

simple-desktop-app-electronicjs — это название приложения.

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

Это должно открыть окно как на скрине ниже:

Разберёмся в структуре и коде

Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.

package.json

Содержит информацию о приложении, которое вы создаете, все зависимости, необходимые для приложения, и несколько скриптов. Некоторые из скриптов уже предварительно настроены, но вы также можете добавлять новые.

Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.

Также в package.json есть «main»: «src/index.js» , который указывает, что src/index.js является входной точкой приложения.

src/index.js

Согласно package.json , index.js является основным скриптом. Процесс, который запускает основной скрипт, называется главным процессом. Таким образом, основной процесс запускает скрипт index.js .

Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки.

Главный процесс и процесс отрисовки

Основное предназначение главного процесса — создание страниц с помощью экземпляра BrowserWindow . Экземпляр BrowserWindow использует процесс отрисовки для запуска каждой страницы.

Любое приложение может иметь только один главный процесс, но много процессов визуализации.

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

abcd.html показан в качестве второй веб-страницы в приведенной выше архитектуре. Но в нашем коде у нас не будет второй веб-страницы.

src/index.html

index.js загружает файл index.html в новый экземпляр BrowserWindow .

Это означает, что index.js создает новое окно GUI и загружает его со страницей index.html . Страница index.html запускается в своем собственном процессе отрисовки.

Код в index.js с пояснениями

Большая часть кода, созданного в index.js , содержит хорошие комментарии, объясняющие, что происходит. Здесь я упомяну несколько ключевых моментов, которые следует отметить в index.js :

Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow . Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:

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

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

Создадим десктопное приложение конвертера температур

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

Сначала давайте установим Bootstrap с помощью следующей команды:

Скопируйте следующий код в src/index.html:

Приведенный выше код выполняет следующие действия:

  1. Создаёт поле ввода текста с id=»celcius» . Всякий раз, когда в это поле что-то вводится, вызывается функция celciusToFahrenheit() .
  2. Создаёт поле ввода текста с id=»fahrenheit» . Всякий раз, когда в это поле что-то вводится, вызывается функция fahrenheitToCelcius() .
  3. Когда в поле ввода «По Цельсию» вводится значение, в поле «По Фаренгейту» показывается та же температура, но в Фаренгейтах.
  4. Когда в поле ввода «По Фаренгейту» вводится значение, в поле «По Цельсию» показывается та же температура, но в Цельсиях.

2 функции, которые выполняют преобразование температуры, будут храниться в renderer.js .

Создайте файл с именем renderer.js внутри src . Скопируйте в него следующий код:

Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».

Функция fahrenheitToCelcius() делает ровно наоборот.

Запускаем приложение

Запустите приложение, используя следующую команду:

Должно открыться следующее окно. Попробуйте ввести разные значения в инпуты.

5 лучших JavaScript-фреймворков для десктопных приложений

Перевод статьи Бианки Плющевской «5 Best JavaScript Frameworks for Desktop Apps».

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

Как всегда, легче сказать, чем сделать. Занимаясь поиском материала, мы заметили, что существует много путаницы относительно того, как на самом деле построены десктопные приложения на JavaScript, и того, как они работают. Также довольно сложно подобрать правильные инструменты для работы над подобным проектом.

В этой статье мы поближе познакомимся с пятью самыми известными JavaScript-фреймворками для десктопных приложений.

#1 Electron

Electron это фреймворк с открытым исходным кодом. Изначально он был создан GitHub для редактора Atom, и произошло это в 2013 году. Эта библиотека позволяет вам создавать GUI десктопных приложений с помощью таких веб-технологий как JavaScript, HTML и CSS.

Читать еще:  Поиск в arraylist java

Десктопные приложения, созданные с помощью Electron, ведут себя, как веб-приложения, но могут читать и записывать данные в файловой системе компьютера. На рынке есть много десктопных приложений, построенных на Electron. Например, Skype для Linux или Slack. Если хотите узнать больше о популярных десктопных приложениях, построенных с помощью Electron, почитайте эту статью.

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

Если вы – JavaScript-разработчик, вам нужно будет изучить совсем немного относительно простых вещей о том, как работает Electron и его API. Скорее всего вы сумеете создать свое первое десктопное приложение всего за несколько дней.

Electron это состоявшаяся технология с растущим сообществом, благодаря чему может считаться отличным рабочим окружением. Благодаря движку Chromium для UI-рендеринга вы получаете доступ к таким инструментам как Developer Tools и Storage Access.

#2 NW.js

Следующим в нашем списке идет NW.js, прежде известный как node-webkit. Он был создан в Центре технологий с открытым исходным кодом компании Intel путем комбинирования фреймворка Node.js и движка Chromium (прежде известного как Webkit).

Благодаря комбинации Node.js и Chromium вы можете создать приложение, которое будет не только загружать локальный вебсайт в окне приложения, но также коннектиться к OS через JavaScript API. Подобное решение позволяет вам контролировать такие параметры как размеры окна, панель инструментов и пункты меню, а также обеспечивает доступ к локальным файлам на компьютере.

NW.js не догматичен; он предоставляет вам свободу выбора фреймворков и библиотек, которые вы хотели бы использовать в своем проекте. Он дает возможность вызывать модули Node.js прямо из DOM, поддерживает все особенности браузера, обеспечивает защиту исходного кода JavaScript. Доступен для Linux, Mac OS и Windows.

#3 AppJS

AppJS это простой, но мощный инструмент. С его помощью можно создавать кросс-платформенные приложения, и для этого вам не придется изучать новые языки. Подобно уже упомянутым библиотекам, для работы с AppJS вам понадобятся только знания HTML, CSS и JavaScript.

Если сравнивать AppJS, Electron и NW.js, то AppJS это старейший Node.js-Chromium фреймворк. Но он даже отдаленно не такой зрелый, как его собратья. И поскольку он «выдохся», то может быть не лучшим выбором для новых проектов.

С AppJS вы получаете:

  • JS, HTML5, CSS, SVG, WebGL от Chromium
  • зрелые http/https-сервера и клиентские API – Node
  • файловую систему, DNS, шифрование, подпроцессы, OS APIs – Node
  • виртуальные машины со средой для изолированного выполнения кода – Node
  • инструменты для отображения встроенных привязок C++ к JavaScript – Node

#4 Meteor

Meteor рекламирует себя как «быстрейший способ создания JavaScript-приложений» и «платформу с открытым кодом для мобильной, десктопной и веб-разработки». Этот кросс-платформенный фреймворк написан на Node.js.

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

Meteor использует MongoDB, протокол распределенных данных (Distributed Data Protocol) и шаблон публикации-подписки для автоматической рассылки изменений без вмешательства разработчика. В нем есть фронтенд- и бэкенд-модули, включая API, инструменты, пакеты Node.js.

#5 Proton Native

Proton Native выпущен недавно. Он стал доступен на GitHub в начале 2018. Proton Native для разработки десктопных приложений делает примерно то же, что React Native сделал для мобильной. Узнать больше о разнице между React.js, React Native и React VR можно здесь.

Это один из лучших JavaScript-фреймворков для десктопных приложений, поскольку позволяет вам управлять состоянием и без заминок строить кросс-платформенные пользовательские интерфейсы. Его работа отличается от работы Electron, который запускает целый браузер Chromium для управления маленьким GUI. Proton Native, в свою очередь, использует собственные инструменты, занимает меньше места и потребляет меньше ресурсов.

У этого решения есть и другие преимущества: Proton Native использует тот же синтаксис, что и React Native, работает с библиотеками React (включая Redux) и совместим с Node.js.

Итоги

В целом, JavaScript-фреймворки для десктопных приложений можно разделить на три категории:

  1. Фреймворки для создания десктопных приложений на базе веб-браузеров – в их основе лежат Node.js и Chromium (Electron, NW.js, AppJS).
  2. Фреймворки, нуждающиеся в дополнительных инструментах типа Cordova (Meteor).
  3. Фреймворки, использующие исключительно собственные инструменты для создания десктопных приложений (Proton Native).

Выбор зависит только от вас и в основном зависит от типа проекта, над которым вы работаете.

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

Веб-приложения на JavaScript, Маккоу А.

Книга “Веб-приложения на JavaScript, Маккоу А.” одна из кних мастхев в библиотеке программиста. Поддержка HTML5 и CSS3 с каждым днем становится все качественнее и полнее, но вам необходимо решить, основываясь на вашей клиентской аудитории, где именно можно использовать данные технологии. Ведь создание на языке JavaScript многофункциональных rich-приложений, которые выполняются на стороне клиента, — непростая задача. Это книга поможет вам изучить все приемы, используемые для создания самых современных JavaScript-приложений, в том числе структуры, использование MVC, фреймы, связь с сервером и кросс-доменные запросы, создание приложений реального времени и многое другое.
Чтобы помочь вам понять концепции разработки JavaScript-приложений, рассмотрена работа реальных приложений.

Глава 1
Глава начинается с рассмотрения истории JavaScript и затрагивает основы
языка, оказывающие влияние на текущую реализацию и на круг его пользователей.
Затем дается введение в архитектуру MVC, исследуются имеющиеся
в JavaScript функции-конструкторы, прототипное наследование и способы создания
собственной библиотеки классов.
В главе 2 “Веб-приложения на JavaScript, Маккоу А.”
Здесь речь пойдет об обработке событий в браузерах, включая историю, API
и поведение. Рассматриваются вопросы привязки событий с помощью jQuery,
использования делегирования и создания собственных событий. Также исследуется
использование событий, не имеющих отношения к DOM-модели, с применением
схемы PubSub.
Глава 3
В этой главе приведен порядок использования MVC-моделей в приложении,
а также порядок загрузки удаленных данных и работы с ними. Объясняется
важность MVC и организации пространства имен, а затем создается собственная
ORM-библиотека для работы с данными модели. Затем рассматриваются
способы загрузки удаленных данных и использованием JSONP и кроссдоменной технологии Ajax. И наконец, даются сведения о сохранении данных модели
с помощью локального хранилища HTML5 и их отправке на сервер, отвечающий
требованиям RESTful.
Глава 4
В этой главе показываются способы использования схемы контроллера для сохранения
состояния на стороне клиента. Рассматриваются вопросы использования
модулей для инкапсуляции логики и предотвращения засорения глобального пространства
имен, затем рассматривается вопрос аккуратного связывания контроллеров
с представлениями, прослушивания событий и работы с DOM. И наконец,
рассматриваются вопросы маршрутизации, сначала с использованием фрагмента
URL, начинающегося с символа решетки, а затем с использованием нового API
истории HTML5. Мы стремимся объяснить все «за» и «против» обоих подходов.
Глава 5
Здесь рассматриваются представления и работа с шаблонами с помощью
JavaScript. Рассматриваются разные способы динамического вывода представлений,
а также различные библиотеки работы с шаблонами и места хранения
шаблонов (в составе страниц, в s c rip t-тегах или удаленное хранение с загруз

Читать еще:  Javascript try catch

кой). Затем рассматривается привязка данных — подключение контроллеров
моделей и представления к динамически синхронизируемым данным модели
и данным представления.
В главе 6 “Веб-приложения на JavaScript, Маккоу А.”
В этой главе рассматриваются подробности управления JavaScript-зависимос-
тями с использованием модулей CommonJS. Изучается история и рассуждения,
положенные в основу механизма CommonJS, способы создания CommonJS-
модулей в браузере и различные вспомогательные библиотеки загрузки модулей,
такие как Yabble и RequireJS. Затем рассматриваются способы автоматической
изоляции модулей на стороне сервера, повышения производительности
и экономии времени. И наконец, рассматриваются разные альтернативы
CommonJS, такие как Sprockets и LABjs.
Глава 7
Здесь изучается преимущество, предоставляемое HTML5: API для работы
с файлами. Рассматривается браузерная поддержка, множественная отправка
файлов на сервер, получение файлов, перетаскиваемых в окно браузера, и файлов
от событий клавиатуры. Затем объясняется чтение файлов с использованием
блобов и слайсов (частей) и вывод результатов в браузер. Рассматриваются
вопросы отправки файлов на сервер в фоновом режиме с использованием новой
спецификации XMLHttpRequest Level и, наконец, показывается способ предоставления
пользователям индикатора выполнения операции отправки файла
и способ объединения отправки файлов с имеющимся в j Query Ajax API.
Глава 8
Здесь рассматриваются некоторые весьма увлекательные вопросы разработки
приложений реального времени и технология WebSockets. Сначала в главе
рассматривается довольно бурная история развития технологии реального
времени и ее текущая поддержка в браузерах. Затем изучаются подробности
WebSockets и высокоуровневой реализации этой технологии, браузерной поддержки
и API JavaScript. После этого демонстрируется простой RPC-сервер,
использующий WebSockets для соединения серверов и клиентов. Затем уделяется
внимание Socket. IО и изучается вопрос вписывания технологий реального
времени в архитектуру приложения и в пользовательское восприятие.
Глава 9
В этой главе рассматриваются тестирование и отладка, являющиеся очень
важной частью разработки веб-приложений на JavaScript. Изучаются вопросы,
касающиеся кроссбраузерного тестирования, на каких браузерах следует
проводить тестирование, вопросы блочного тестирования и рассматриваются
библиотеки для тестирования, такие как QUnit и Jasmine. Затем обращается
внимание на автоматизированное тестирование и на постоянно работающие
объединительные сервера, такие как Selenium. Затем осуществляется переход
к вопросам отладки, исследуются веб-инспекторы Firefox и WebKit, консоль
и вопросы использования отладчика JavaScript.

В главе 10 “Веб-приложения на JavaScript, Маккоу А.”
В этой главе рассматривается еще одна важная, но часто недооцениваемая часть
работы с веб-приложением JavaScript: его развертывание. Упор делается главным
образом на производительность и на способы использования кэширования,
минификации, gzip-сжатия и других технологий, сокращающих начальное
время загрузки вашего приложения. В конце главы кратко рассматриваются
вопросы использования сети доставки контента (CDN) для обслуживания статического
содержимого в ваших интересах и вопросы использования встроенного
в браузер механизма аудита, который может быть чрезвычайно полезен
для повышения производительности вашего сайта.
Глава 11
Следующие три главы являются введением в некоторые популярные JavaScript-
библиотеки, предназначенные для разработки приложений. Spine является
весьма небольшой по объему МVC-совместимой библиотекой, использующей
множество концепций, рассмотренных в данной книге. В главе рассматриваются
основные части этой библиотеки: классы, события, модели и контроллеры.
В конце главы создается пример приложения, являющегося диспетчером контактов,
в котором демонстрируется все, изученное в данной главе.
В главе 12 “Веб-приложения на JavaScript, Маккоу А.”
В главе дается полноценное введение в имеющую огромную популярность библиотеку
Backbone, предназначенную для создания JavaScript-приложений.
Рассматриваются основные понятия и классы Backbone, такие как модели,
коллекции, контроллеры и представления. Затем исследуются вопросы синхронизации
данных модели с данными на сервере с помощью RESTful JSON-
запросов и вопросы составления подходящих для Backbone ответов со стороны
сервера. В конце главы создается приложение для ведения списка текущих дел,
в котором демонстрируется работа основной части библиотеки.
Глава 13
В этой главе исследуется библиотека JavaScriptMVC, являющаяся популярной
средой разработки, основанной на использовании библиотеки j Query и применяемой
для создания веб-приложений на JavaScript. Изучаются все основные
компоненты JavaScriptMVC, такие как классы, модели и контроллеры, а также
использование шаблонов на стороне клиента с целью визуализации представлений.
В конце главы дается практический пример списка, реагирующего на CRUD-
операции, который демонстрирует простоту создания абстрактных, многократно
используемых, не засоряющих память виджетов с помощью JavaScriptMVC.

Приложения книги “Веб-приложения на JavaScript, Маккоу А.”
Приложение А
Это приложение предоставляет краткое введение в j Query, которое пригодится,
если вы почувствуете необходимость освежить свое представление об этой
библиотеке. Библиотека j Query используется в большинстве примеров этой книги,
поэтому знакомство с ней играет весьма важную роль. Здесь рассматривается
основная часть API, например обход элементов DOM, работа с DOM, а также
привязка событий, их инициирование и делегирование. Затем более пристально

рассматривается имеющийся в jQuery Ajax API, отправка GET и POST JSON-
запросов. После этого рассматриваются расширения jQuery и порядок использования
инкапсуляции для обеспечения этой библиотекой роли законопослушной
веб-гражданки. В конце приложения рассматривается практический пример:
создание дополнительного модуля jQuery под названием Growl.
Приложение Б
В Приложении Б рассматривается Less, надстройка над CSS, расширяющая
синтаксис каскадных таблиц стилей с помощью переменных, миксинов, операций
и вложенных правил. Less способна существенно сократить объем набираемого
кода CSS, особенно когда дело касается специфических для производителей
браузеров CSSS-правил. В этом приложении рассматриваются
основные улучшения синтаксиса, присущие Less, а также вопросы использования
инструментов командной строки и библиотеки JavaScript для компиляции
Less-файлов в обычный код CSS.
Приложение В
Последнее приложение является справочником по CSS3. В нем предоставляются
основы CSS3, объясняются префиксы производителей браузеров, а затем
просматриваются основные добавления к спецификации. Среди других
свойств CSS3 в этом приложении рассматриваются скругленные углы, rgba-
цвета, отбрасываемые тени, градиенты, переходы и преобразования. В конце
приложения рассматривается так называемая постепенная деградация с использованием
библиотеки Modernizr и практический пример использования
новой спецификации box-sizing.

Ссылка на основную публикацию
Adblock
detector