Я только начал экспериментировать с Aptana Jaxer на стороне сервера javascript для моего следующего проекта. И у меня мало вопросов о том, что

Используя сервер JS на стороне сервера, мы можем реализовать все веб-приложение без использования каких-либо серверных языков (например, С#, java и т.д.). Или серверная сторона JS находится между веб-сервером и другим стеком langauge.

Это действительно лучший подход?

Каковы преимущества и неудобства?

Как это хорошо работает с точки зрения производительности?

Есть ли какая-либо реализация в реальном времени (общедоступные веб-сайты) только с использованием JS на стороне сервера (никаких других языков)?

Каковы альтернативы, доступные для Aptana jaxer (с открытым исходным кодом)?

Насколько хорошо мы можем реализовать транзакции и транзакции maitain db? можем ли мы сделать это на серверах JS..?

Можно ли создавать службы RESTFul и SOAP на серверах JS..?

Я знаю, что это слишком долго (и наивные вопросы). Я просто надеюсь, что кто-то уже наткнулся на все это при внедрении serveride JS.

вот что я намерен спросить.

Действительно ли это лучший подход, чем использование серверных языков (предположим С#), как мы можем сравнить это с реализацией С# на веб-сайте (производительность, языковые функции)? И какой из них лучше подходит, используя только JS на серверах или JS в среднем слое между другим языковым стеком и веб-сервером?

3 ответов

Инструменты . Статически типизированные языки, такие как С# и Java, имеют отличные инструменты для разработки и разработки. Динамические языки, такие как JS, пока не имеют поддержки инструмента. Лично я считаю, что для этого важно значительное сокращение кода шаблона и суетливого типа, но это все еще большой недостаток, если вы много занимались разработкой в ​​среде IDE. Если вы используете IDE, рассмотрите возможность использования jedit для динамических языков

Зрелость/стандартизация : Serverside JS по-прежнему является новой парадигмой, и есть много игроков и нет четких победителей. ECMA не имеет стандартов для серверных JS. Как упоминалось в ответе Брэндона, группа CommonJS пытается сформировать стандартное JS-серверы, а Myna имеет экспериментальную поддержку CommonJS через Narwhal

В исходной вычислительной скорости несколько динамических языков могут соответствовать статически типизированным скомпилированным языкам, таким как С# и Java. Сказав это, это действительно не имеет значения. Любая часть вашего приложения, интенсивно использующая вычислительные ресурсы, должна, вероятно, быть написана на Java или использовать существующую библиотеку Java. Я бы не предложил, чтобы кто-нибудь написал базу данных в JS, например. Для реальных веб-приложений/SOA-сервисов основной причиной замедлений является не сырая вычислительная скорость, это неэффективный код, особенно доступ к базе данных. Myna помогает в этом, делая такие вещи, как:

• внутреннее кэширование скомпилированных JS-скриптов
• Внутреннее использование кэшированных подготовленных операторов транзакций базы данных
• Кэширование фрагментов запроса и вывода
• Пул соединений с базами данных
• Автоматическая поддержка хэша ETag
• Инструменты профилирования

Если вы подразумеваете транзакцию, как в "наборе операторов SQL, которые могут быть отменены или зафиксированы", то Myna еще не поддерживает транзакции. Я открыт для реализации этого, если есть достаточный интерес.

Если вы имеете в виду "какая поддержка базы данных имеет серверная сторона JS?" то ответ зависит от платформы. Платформа Myna предоставляет следующие функции базы данных:

• Приложение для веб-администрирования, где вы можете определить "источники данных", то есть информацию о подключении к базе данных. Затем вы можете запросить эти источники данных по имени. Myna включает драйверы JDBC для H2, MySQL, Microsoft SQL Server и Postgresql, но можно использовать любой источник данных JDBC или ODBC
• Myna.Database и Myna.Table обеспечить доступ к базе данных без метаданных, а также создание и изменение таблиц.
• Myna Query объект поддерживает maxRows, пейджинг, параметры SQL, настраиваемые обработчики строк, запрос запроса, кеширование и многое другое
• Myna DataManager объект поддерживает создание объекта ORM.

возможно создание служб RESTFul и SOAP на серверах JS..

Поддержка REST и SOAP - это специфичные для платформы функции. Myna WebService поддерживает следующие протоколы:

• XML-RPC
• JSON-RPC
• Ext Direct
• JSON-Майна (простой протокол, который использует обычные сообщения в форме и возвращает JSON. Прост в использовании из браузера)

Myna также понимает методы запроса PUT и DELETE и предоставляет доступ к содержимому тела запроса как в текстовой, так и в двоичной форме, так что можно обрабатывать эти методы RESTful специальным образом.

Отладка

Традиционная отладка точек останова - это реальный вызов serveride. Хотя Rhino поддерживает отладчик-крючки, использование этих средств из веб-приложения без состояния будет довольно привлекательным. Лично я даже не использую отладчики точки останова, даже когда они доступны (например, firebug). Вместо этого я предпочитаю вести журнал.

Myna.log(type,label,detail)

создаст поток с низким приоритетом для записи сообщения журнала HTML в базу данных регистрации Myna. Затем эти журналы можно найти через администратора Myna. Журналы также записывают временные метки и истекшие миллисекунды для профилирования. Myna.dump(obj) также может использоваться для представления представления таблицы HTML любого объекта. Myna также регистрирует все не обработанные исключения со стековыми трассировками, контекстом исходного кода и запросами. Между dump(), log() и обработчиком ошибок по умолчанию у меня не так много проблем с отладкой Myna code

Используя JS на стороне сервера, мы можем реализовать все веб-приложение без использования каких-либо серверных языков (например, С#, java и т.д.).

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

Действительно ли это лучший подход?

Я не думаю, что JavaScript (как язык) действительно лучший или худший вариант, чем традиционные серверные языки. Он имеет преимущества (наряду с другими динамическими языками, такими как Ruby и Python), такими как гибкость, быстрое прототипирование (не предназначенные для каламбур), гибкость и т.д. С другой стороны, у него нет поддержки библиотеки, которую имеют Java и С#, или статической типизации (Я не буду вдаваться в дискуссию о том, что здесь лучше, мне нравятся оба по разным причинам).

Если вы хотите получить лучшее из того и другого, вы можете использовать JavaScript как язык сценариев, встроенный в ваше приложение. Rhino для Java и JScript.NET упрощают манипулирование "родными" объектами в JavaScript. Например, вы можете написать свои классы домена в Java или С# и script с помощью JavaScript, где вы хотите больше гибкости. Если вам достаточно удобно работать с JavaScript, писать на одном языке может быть проще, но.

Я никогда не писал "реальное" серверное приложение с использованием JavaScript, поэтому я не могу судить о том, лучше ли он или хуже.NET(я также никогда не использовал JScript.NET). Я играл с несколькими фреймворками для удовольствия, хотя и сейчас я переписываю свой личный сайт с помощью Helma NG. До сих пор это был хороший опыт (намного лучше, чем PHP, который мне никогда не нравился).

Каковы преимущества и недостатки?

• Для серверного и клиентского программирования требуется только один язык.
• Возможность для общего кода для таких вещей, как проверка формы. Jaxer позволяет запускать сценарии на клиенте, сервере или и то, и другое.
• Вы получаете программу на JavaScript (предполагая, что вам нравится язык).

Недостатки:

• Многие фреймворки являются экспериментальными/не очень зрелыми.
• Вам нужно программировать на JavaScript (если вам не нравится этот язык).

как это работает с точки зрения производительности?

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

Существует ли реализация реального времени (общедоступные веб-сайты) только с использованием JS на стороне сервера (нет других языков)?

Я не знаю каких-либо крупных сайтов с использованием JavaScript, но может быть и некоторые.

какие альтернативы доступны для Aptana jaxer (с открытым исходным кодом)

В качестве предисловия я использую SSJS на моей дневной работе. Мы запускаем достаточно большой (с точки зрения сложности, а также просмотра страниц) веб-сайт на SpiderMonkey. Я добавлю к Матфею отличный ответ, где у меня есть опыт.

Действительно ли это лучший подход, чем использование серверных языков (предположим С#)

"Лучше" действительно зависит от того, что вы хотите с ним делать. Сам JavaScript обладает некоторыми замечательными функциями, а также довольно ужасными. Если вы серьезно относитесь к разработке JS (клиент или сервер), я не могу рекомендовать достаточно высоко, чтобы вы смотрели презентацию Дугласа Крокфорда, Javascript: The Good Parts если вы еще этого не сделали. Он проделал фантастическую работу по сортировке крутизны, и он отличный оратор для загрузки.

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

Тем не менее, обратите внимание на группу CommonJS . Они работают над определением этих точных вещей. Кроме того, в документации Jaxer Api перечислены встроенные модули, которые включены в эту структуру.

как это работает с точки зрения производительности?

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

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

насколько хорошо мы можем внедрять и поддерживать транзакции db? можем ли мы сделать это на сервере JS..?

У Jaxer есть API-интерфейсы баз данных MySQL и SQLite. Как отметил Матфей, ​​если вы используете Rhino, вы можете использовать JDBC api.

Веб-разработка

Vue.JS: особенности, преимущества и недостатки

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

Введение

Реализация web UI сталкивается со все более сложными задачами, требующими использования все более сложных инструментов. Добавим сюда тренд ухода от MVC архитектуры приложений и получим довольно интересную тенденцию. Современные разработчики стремятся использовать отдельные библиотеки под каждый слой задач. На фоне этих изменений появился и стал завоевывать популярность фреймворк Vue.JS.

Чисто теоретически он является альтернативой jQuery. Но в реальности Vue.JS довольно успешно конкурирует с React.JS — очевидным лидером в области View. Из современных популярных технологий, решающих схожие задачи можно также выделить Angular и Ember. У каждой из них есть свои преимущества и недостатки. Однако все эти фреймворки можно привести к одному общему знаменателю — относительная сложность освоения.

Особенности Vue.JS

Vue.JS создавался с оглядкой на лучшие практики перечисленных технологий. Из React.JS команда Vue позаимствовала идею виртуального DOM. Этот подход исключает прямое взаимодействие с узлами интерфейса. Изначальная работа ведется с его легковесной копией (virtual DOM). И только после этого изменения применяются к реальным узлам интерфейса. Параллельно происходит сравнение реального DOM дерева и его виртуальной копии. Таким образом выявляется разница и перерисовывается только то, что претерпело изменения.

Из Angular Vue.JS позаимствовал two-way data binding. Это позволяет проектировать интерфейсы: во-первых, декларативно; во-вторых, с использованием Vue в шаблонизаторах. Таких как Haml или Pug. Правда, отметим, что такой подход практиковался и раньше. Например, во фреймворке Knockout.JS.

Ядро Vue.JS, подобно React, содержит лишь необходимый функционал для работы с интерфейсом. Поэтому оно компактно, легко интегрируется с другими технологиями, в том числе с jQuery и даже может использоваться вместо него (для разработки простых интерфейсов).

Кроме того, Vue доступен ряд подключаемых модулей, реализующих современный подход к разработке веб-приложений. О чем речь? К примеру, практически все React приложения проектируются в тандеме с технологией контроля состояний Redux, которая является отдельной библиотекой и реализует flux-архитектуру. Подход, практикуемый библиотекой Redux оказался довольно удобным и успешным. Поэтому для Vue.JS была разработана своя технология контроля состояния приложения — Vuex. Vuex полностью заимствует идеи Redux, но степень интеграции этой библиотеки с Vue гораздо выше, чем в случае React и Redux. А это трансформируется в быстродействие и удобство.

Не стоит забывать и о том, что успешность технологии напрямую зависит от активности ее пользователей. То есть — сообщества разработчиков. Так React, являясь, пожалуй, самой популярной технологией, имеет огромное количество расширений основного функционала. Они создаются участниками сообщества, и у React разработчиков имеется инструментарий на все случаи жизни. У Vue.JS в этом плане дела не так хороши. Во всяком случае — пока. Впрочем, эта технология набирает обороты и уже имеет множество полезных библиотек, решающих большинство насущных проблем разработчиков.

Опыт использования на реальном проекте

Перед нами стояла задача разработки интерфейса, содержащего на одной странице карту, фильтры, результаты фильтрации и ряд элементов взаимодействия. Мы прекрасно понимали, что использование простого Vanilla JavaScript или jQuery может обернуться сложностями в разработке. Почему не React.js? Потому что Vue.JS проще и легковеснее. Зачем связываться с более “тяжелым” фреймворком для разработки одного-единственного интерфейса?

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

Вот небольшой пример инициализации Vue приложения.

В app.js создается переменная app как Vue объект. Конструктор проходится по шаблону template.haml и производит необходимые связывания.

Декларативность в Vue настолько проста, что это позволило нам интегрировать его в монолитное веб-приложение, использующее шаблонизатор Haml.

Здесь в зависимости от правдивости флага ‘filtersOpen’ к элементу добавляется или удаляется класс ‘rentbuy__filters—open’

Vue.JS помимо того, что реализует все современные подходы в разработке web UI, является невероятно легким в освоении, гибким и высоко интегрируемым со сторонними технологиями фреймворком. Шаблонизация Vue дала нам возможность связать элементы полей фильтра с полями одного-единственного объекта. А это позволило всегда иметь под рукой актуальные опции выбора, облегчило валидацию и очистку фильтра.

Здесь значения полей ввода привязываются к полям объекта ‘data’ с помощью двустороннего связывания. Это приводит к изменению поля объекта при изменении значения в поле ввода и наоборот.

Благодаря реактивности Vue.JS, мы избавились от дублирования кода. Как это произошло? В целом ряде случаев набор полей фильтра частично совпадал (в зависимости от состояния приложения). Возникла реальная угроза массового дублирования кода. Однако с помощью простых предикатов, определенных в шаблоне, можно быстро и удобно переключаться между наборами полей.

Здесь блок с полем для ввода виден на странице, когда выполняется условие

Также благодаря гибкости Vue.JS, нам удалось использовать преимущества компонентной разработки в элементах списка результатов фильтрации. Как вы помните, наш фреймворк практикует технологию виртуального DOM. Соответственно, с приходом новых результатов актуальные компоненты просто не перерисовываются. Что выливается в быстродействие и комфорт для пользователей.

Элементы из массива ‘properties’ рендерятся в виде Vue компонента ‘proposal’. Набор элементов на странице изменяется автоматически, согласно изменениям в массиве. Компонент ‘proposal’ представляет собой обыкновенный HTML шаблон, код которого заключен в тег script с типом ‘text/x-template’

Еще отметим, что Vue отслеживает жизненный цикл компонентов. То есть к ним можно применять какие-либо методы (изменение, удаление и т.д.) после инициализации и присоединения к DOM дереву. В частности, мы можем легко инициализировать приложение при загрузке страницы в браузере. Например, запросить начальную выборку элементов, в зависимости от текущего размера карты на странице пользователя.

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

Преимущества Vue.JS

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

• Библиотека довольно проста и функциональна. Для того чтобы разобраться в ней, нужен минимальный багаж знаний.
• Требования к стеку отсутствуют, поэтому Vue.JS можно использовать на любом проекте.
• Фреймворк совсем немного весит. Мы экономим время загрузки страниц и получаем целую кучу плюшек: плюс к конверсии, плюс к UX, плюс к поисковому ранжированию и т.д.
• Довольно высокая скорость разработки. Благодаря использованию любых шаблонов и доступности документации, большинство возникающих проблем решаются довольно быстро. В том числе по сравнению с React, так как в большинстве приложений, не имеющих сложных интерфейсов, вся мощь этого фреймворка является немного избыточной.
• Возможность найти и подключить к проекту практически любого разработчика, кто хоть немного знаком с фронтенд разработкой. Низкий порог вхождения позволяет работать с фреймворком, как фронтендщикам, так и бэкэндщикам.

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

Недостатки Vue.JS

Есть и минусы. В частности, по сравнению с React.JS.

• Работа над состоянием приложения происходит “под капотом”. В масштабных проектах это может вылиться в неочевидность работы компонентов, что зачастую создает проблемы с отладкой и эффективной разработкой.
• Компонентный подход во Vue.JS не так гибок и очевиден, как в React.
• Система рендеринга React более функциональна. Она предоставляет больше возможностей для отладки.
• Шаблонизация React значительно гибче (JS vs DSL).

Вывод

Vue.JS реализует все современные подходы к разработке web UI и является легким в освоении, гибким и высоко интегрируемым со сторонними технологиями фреймворком. Безусловно, в плане создания сложных интерфейсов (например, для корпоративных сайтов) React его превосходит. Но для решения относительно простых задач использование Vue выглядит не только оправданным, но и предпочтительным.

Статью подготовил

Отдел веб-разработки

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

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

Но язык не лишен недостатков. Наиболее значимые из них:

1. Язык компилируется в момент исполнения кода. Каждый раз, когда вы открываете сайт, javascript код начинает компилироваться. Как минимум увеличивается время выполнения программы.
2. Отсутствует типизация данных. Проблема всех скриптовых языков. Пока выполнение кода не дойдет до нужной строчки, не узнаешь работает ли она. А ведь значительную часть по поиску ошибок мог бы взять на себя компилятор, если бы знал типы данных, с которыми он работает. Да и по скорости выполнения, типизированный код быстрее.
3. Не привычная для многих программистов объектная модель. Классы и наследование классов присутствует, но оно сильно отличается от привычной многим реализаций в языках программирования C++/C#/Java.

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

Какие есть пути решения? Отказаться от использолвания javascript? Google, например, уже придумала замену - язык google dart. А как быть с уже написанным кодом? Годы полезной работы наших замечательных программистов?

Не все так печально.

1. Проблему с типизаций позволяет решить удивительное ПО от google - closure compiler. Необходимо в коде рядом с переменными, функциями и параметрами функций добавлять специальным образом оформленные комментарии - аннотации, в которых указаны типы данных. И умное ПО от google подскажет вам, где вы совершили ошибку.
2. Компилировать код на данный момент нельзя. Но можно уменьшить объем кода, сжав его как логически (переименовав переменные, убрав лишние пробелы, преобразовав код и т.д.), так и при помощи алгоритмов сжатия (например, gzip). Здесь же есть простор для браузеров. Браузеры могут компилировать код только при первой загрузку с сайта, и уже откомпилированный код запоминать. И при следующем запуске использовать уже откомпилированный код. Производительность железа тоже не отстает, сейчас уже даже телефон может не уступать по производительности простенькому настольным компьютеру.
3. Избавиться от «корявой» объектной модели позволяет сам язык javascript. Имеются замечательные инструменты:

   Описание классов внешне приближается к описанию классов на языке C++/C#/Java. Это действительно удобно как для понимания, так и для сопровождения кода. Второй инструмент привносит полноценные public, protected и private методы, добавляет полноценные свойства классов. Все просто и изящно.

Все недостатки языка javascript устранимы. Его смело можно использовать в масштабных проектах. Замена языку пока не нужна.

Теги: javascript, javascript framework

Язык PHP применяется для разработки веб-приложений очень активно, и сегодня на нем работают три из пяти сайтов. Однако обязательно стоит обратить внимание и на возможные альтернативы. Одной из них является Node.js.

Преимущества Node.js

Количество поклонников этой программной платформы стремительно увеличивается, ведь во многих ситуациях она имеет неоспоримые преимущества перед PHP. Javascript, на котором пишется серверный код на Node.js — это мощный и гибкий язык. Он имеет свои особенности и даже странности, однако после того, как вы поймете его концепцию, работа на нем наверняка вас затянет. Javascript допускает программирование в разных стилях и предоставляет разработчику большие возможности.

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

По умолчанию Node.js укомплектована удобным и функциональным менеджером пакетов — npm. Он делает управление модулями и зависимостями простым и комфортным. А благодаря встроенным библиотекам для обработки запросов и ответов с Нодой вы не будете зависеть от сторонних серверов. Также эта платформа в некоторых ситуациях обеспечивает лучшую производительность.

И, наконец, Node.js имеет большое количество положительных отзывов от разработчиков. Немногие из тех, кто пишут на PHP, увлечены этим языком, но с Javascript ситуация совсем иная.

Недостатки

Однако надо иметь в виду, что Node не лишена недостатков:

• она сложнее в изучении, и начать работать с использованием этой технологии будет не так легко, особенно в том случае, если вы новичок в веб-программировании, в то время как создать сайт на PHP гораздо проще;
• технология Node относительно молода, поэтому информации по ней гораздо меньше, чем по PHP;
• для PHP подойдет любой хостинг, а вот подходящую площадку для Node придется еще поискать;

Таким образом, однозначного ответа на вопрос о том, что лучше — PHP или Node.js — нет. Однако нужно иметь в виду, что последняя стремительно набирает популярность. Сегодня ее используют Microsoft, PayPal, LinkedIn, Yahoo и множество других крупных компаний.

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

Аннотация: В лекции рассматривается недостатки, достоинства JavaScript. Обычные применения языка. . Современные применения JavaScript.

Введение

Теперь, после знакомства с сущностью основных концепций программирования, надо сделать шаг назад от деталей и попытаться получить общее представление о том, что в действительности можно делать с помощью JavaScript - зачем нужно тратить время на изучение такого сложного предмета и использовать его на Web -страницах?

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

Давайте двинемся вперед - эта лекция имеет следующую структуру:

• Как я полюбил JavaScript
• Недостатки JavaScript
• Что может делать JavaScript
• Обычные применения JavaScript
  • Введение в создание сценариев DOM
• Заключение

Как я полюбил JavaScript

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

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

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

Недостатки JavaScript

Даже при всех улучшениях последнего времени по-прежнему существует ловушка : JavaScript является непредсказуемым. Не сам язык, а среда, в которой он реализуется. Невозможно предсказать, какой компьютер имеется у запрашивающего Web -страницу пользователя, невозможно знать, как загружен компьютер другими задачами, и невозможно знать, что какой-то другой сценарий JavaScript, открытый на другой вкладке браузера, приводит к полной остановке. Пока браузеры вообще не начнут выделять отдельные вычислительные ресурсы для различных вкладок и окон (известных как потоки), это по-прежнему будет оставаться проблемой. Мультипоточность стала, впрочем, доступной в некоторой степени в HTML5 с помощью Web workers , и имеет определенную поддержку в браузерах.

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

Что может делать JavaScript

Давайте вернемся на шаг назад и перечислим достоинства JavaScript:

• JavaScript очень легко реализовать. Необходимо только поместить код в документ HTML и сообщить браузеру, что это JavaScript.
• JavaScript работает на компьютерах пользователей web - даже когда они не в сети!
• JavaScript позволяет создавать быстродействующие интерфейсы, которые улучшают восприятие пользователя и предоставляют динамические функции, не требуя ожидания реакции сервера и вывода другой страницы.
• JavaScript может загружать контент в документ, когда и если это требуется пользователю, без перезагрузки всей страницы - что обычно называют Ajax .
• JavaScript может проверить, что можно выполнить в браузере и реагировать соответственным образом - это называется Принципами ненавязчивого JavaScript (см. "Принципы ненавязчивого JavaScript") или иногда безопасным созданием сценариев.
• JavaScript может помочь исправить проблемы браузера или закрыть пробелы в поддержке браузера - например, исправить в некоторых браузерах проблемы компоновки CSS.

Это уже много для языка, который еще недавно подвергался насмешкам со стороны программистов, приверженцев "языков программирования более высокого уровня". Одна из причин возрождения JavaScript в том, что сегодня создаются все более сложные приложения Web , и высокая интерактивность требует использования Flash (или других плагинов ) или создания сценариев. JavaScript является, возможно, лучшим способом, так как он является стандартным для Web , поддерживается изначально различными браузерами (более или менее - некоторые вещи различаются в разных браузерах, и эти различия рассматриваются в подходящих местах в последующих лекциях), и он совместим с другими открытыми стандартами Web .

Обычные применения JavaScript

Область применения JavaScript изменилась за те годы, что он использовался. Сначала взаимодействие JavaScript с сайтом было в основном ограничено взаимодействием с формами, предоставляя пользователю обратную связь , и слежения, когда они делали определенные вещи. Использовались функции alert() для уведомления пользователя о чем-то (см. рисунок 2.1), confirm () , чтобы спросить разрешение для выполнения какого-то действия, и prompt() или поле формы, чтобы получить ввод пользователя.

Рис. 2.1.

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

Кроме того, использовалась функция document.write() для добавления контента в документ. Работали также с всплывающими окнами и фреймами и потратили много нервов и выдрали много волос в попытках заставить их общаться друг с другом. Только мысли о большинстве этих технологий должны заставить любого разработчика с отвращением пробормотать "пусть они исчезнут", поэтому давайте не будем останавливаться на таких вещах - существуют лучшие способы использования JavaScript!

Введение в создание сценариев DOM

Когда браузеры начали поддерживать и реализовывать Объектную модель документа - DOM (http://www.w3.org/DOM/), которая позволяет иметь значительно более развитое взаимодействие со страницами Web, JavaScript стал становиться более интересным.

DOM является объектным представлением документа. Предыдущий параграф, например, на языке DOM будет узлом элемента, имя узла nodeName которого будет p . Он содержит три узла потомка - текстовый узел, содержащий "Когда браузеры начали поддерживать и реализовывать" и его значение узла nodeValue , узел элемента с nodeName равным a , и еще один текстовый узел с nodeValue равным "которая позволяет иметь значительно более развитое взаимодействие со страницами Web, JavaScript стал становиться более интересным.". Узел потомок a также имеет узел атрибут, называемый href со значением "http://www.w3.org/DOM/ " и узел потомок, который является текстовым узлом с nodeValue равным " Объектную модель документа - DOM ".

Этот параграф можно представить также визуально, используя древовидную диаграмму, представленную на рисунке 2.2 .

На человеческом языке можно сказать, что DOM объясняет типы, значения и иерархию всего документа - на данный момент больше ничего знать не требуется. DOM будет подробнее рассмотрен в "Перемещение в DOM" , Общее знакомство с DOM , данного курса.

С помощью DOM можно:

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

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

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

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

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

События подробно рассматриваются в "Обработка событий с помощью JavaScript" , Обработка событий в JavaScript, далее в этом курсе.

Другие современные применения JavaScript

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

• Регистрационная форма может проверять при вводе, что имя пользователя доступно, позволяя избежать неприятного разочарования при перезагрузке страницы.
• Поле поиска может предлагать на выбор какие-то варианты, пока происходит ввод, на основе того, что уже было введено (например, ввод "bi" может вызвать на выбор варианты слов, содержащих эту строку, такие как "bird", "big" и "bicycle"). Такая модель использования называется автозаполнением.
• Информация, которая постоянно изменяется, может загружаться периодически, без необходимости взаимодействия с пользователем, например, результаты спортивного матча или котировки фондовой биржи.
• Информация, которую хорошо бы иметь, и есть риск, что она будет избыточна для некоторых пользователей, может загружаться, когда и если пользователь решает к ней обратиться. Например, навигационное меню на сайте может иметь 6 ссылок, но выводит ссылки на более глубоко расположенные страницы по запросу, когда пользователь активирует пункт меню.
• JavaScript может исправлять проблемы компоновки. С помощью JavaScript можно найти положение и площадь любого элемента на странице, а также размеры окна браузера. Используя эту информацию можно предотвратить перекрытие элементов и другие подобные проблемы. Предположим, например, что имеется меню с несколькими уровнями, проверяя перед выводом, что имеется пространство для представления подменю, можно избежать появления полос прокрутки или перекрытия пунктов меню.
• JavaScript может улучшать интерфейсы, которые предоставляет HTML. Хотя иметь текстовое поле ввода и удобно, но еще лучше иметь поле ввода, позволяющее выбрать из списка предварительно заданных значений или ввести свое собственное. Используя JavaScript можно соответственно усовершенствовать обычное поле ввода.
• JavaScript можно использовать для анимирования элементов на странице - например, чтобы показывать и скрывать информацию, или выделять определенные разделы страницы - это можно сделать для получения еще более удобного и развитого интерфейса пользователя. Дополнительная информация о таких возможностях представлена в "Анимация в JavaScript" , Анимация JavaScript, далее в этом курсе.

Использование JavaScript благоразумно и ответственно

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

• JavaScript может быть недоступен - это легко проверить, поэтому не является проблемой. Однако вещи, которые зависят от JavaScript, должны создаваться с учетом этого фактора, и необходимо быть осторожным, чтобы сайт не перестал работать (т.е. основная функциональность не стала бы недоступна), если JavaScript будет недоступен.
• Если использование JavaScript не помогает пользователю в достижении его цели более быстро и эффективно, то, вероятно, он используется неправильно.
• Использование JavaScript часто нарушает соглашения, которые люди привыкли использовать за годы использования Web (например, щелчок на ссылке для перехода на другую страницу, и небольшая пиктограмма корзины, означающая "корзина для покупок"). Хотя эти шаблоны использования могут быть устаревшими и неэффективными, их изменение, тем не менее, заставляет пользователя изменить свои привычки - и это вызывает у людей чувство беспокойства. Мы любим все держать под контролем, и когда поняли что-то, порой бывает трудно иметь дело с изменениями. Решения JavaScript должны восприниматься естественно лучше, чем предыдущее взаимодействие, но не настолько отлично, что пользователь не сможет воспринять его через свой предыдущий опыт. Если вы сможете заставить посетителя сайта сказать: - "ага - это значит, я не должен ждать" или "Отлично - теперь я не должен делать этот дополнительный раздражающий шаг"- вы нашли отличное применение для JavaScript.
CSS . С помощью подходящих дополнительных модулей браузера (таких как Google Gears или Yahoo Browser Plus) можно даже использовать JavaScript, чтобы сделать онлайновые системы доступными в автономном режиме и синхронизироваться автоматически, когда компьютер подключается к сети.

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

Об авторе

Крис Хайлман работает Web -разработчиком уже десять лет, с тех пор как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода внешнего представления для Европы и Азии.

Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".

Фото с разрешения: Bluesmoon (