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

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

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

Скрипты на стороне клиента встроены в код разметки HTML на веб-сайте, который размещается на сервере на языке совместимым с браузером или скомпилированным для связи с ним. Это и есть клиентский язык программирования. Браузер загружает этот код, а затем обрабатывает его. Если ему требуется запросить дополнительную информацию в ответ на клики пользователей, мыши и т.д. (называемые «событиями»), ещё один запрос отправляется обратно на сервер.

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

Скрипты внедряются внутри кода странички и взаимодействуют с HTML вашего сайта, выбирая его элементы, а затем манипулируют этими элементами, чтобы обеспечить интерактивный опыт. Скрипты взаимодействуют с каскадным файлом таблицы стилей (CSS), который стилизует отображение страницы. Он диктует, какую работу должен выполнить серверный код, и возвращает данные, которые возвращаются с бэкенда в виде, читаемым браузером.

Например: если существует форма для обновления профиля, то для создания конкретной информации из базы данных берется конкретная информация, в то время как интерфейсные скрипты заполняют форму на клиенте этой информацией.

Клиентские языки программирования и фреймворки

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

HTML и CSS: это основные строительные блоки любого сайта. HTML диктует организацию и контент сайта. CSS содержит код для каждого графического элемента - от фонов до шрифтов - который составляет внешний вид веб-сайта.

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

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

Фреймворки, библиотеки и расширения JavaScript

• AngularJS: невероятно надежная среда JavaScript для сайтов с тяжелыми данными
• JQuery, jQuery Mobile: быстрая, небольшая библиотека объектов JS, которая упрощает управление JavaScript в разных браузерах
• Node.js: серверная платформа, использующая JavaScript, и изменяет способ взаимодействия приложений реального времени с сервером для более быстрого времени отклика и более простого пользовательского взаимодействия. Он работает с другой инфраструктурой JavaScript, Express.js, для создания серверных веб-приложений.
• Bootstrap: платформа для мобильных устройств, использующая HTML, CSS и JavaScript для ускорения разработки быстродействующих приложений React, для дизайна пользовательского интерфейса Express.js, Backbone.js, Ember.js, MeteorJS и другие.
• TypeScript: язык компиляции на JavaScript, который является надмножеством JavaScript, созданным Microsoft
• AJAX (JavaScript + XML) - технология, позволяющая обновлять определенные части сайта без обновления полной страницы путем асинхронного подключения к базе данных и вытягивания фрагментов данных на основе JSON или XML.