Использование JavaScript при разработке web-ресурсов

Using JavaScript to develop web resources

 

Авторы:

Тимошина Надежда Викторовна

кандидат педагогических наук, КГУ им. К.Э. Циолковского, г. Калуга, Россия.

e-mail: TimoshinaNV@tksu.ru 

Timoshina Nadezhda Viktorovna

Candidate of Pedagogical Sciences, KSU named after K.E. Tsiolkovsky, Kaluga, Russia

e-mail: TimoshinaNV@tksu.ru

Журавлев Никита Евгеньевич

магистрант КГУ им. К.Э. Циолковского, г. Калуга, Россия.

e-mail: Zhuravlevne@studklg.ru 

Zhuravlev Nikita Evgenievich

Master student, KSU named after K.E. Tsiolkovsky, Kaluga, Russia

e-mail: Zhuravlevne@studklg.ru 

Аннотация: В статье рассматривается процесс создания web-ресурса с помощью языка JavaScript. Приведены некоторые исторические аспекты развития сети интернет, а так же примеры создания «чистого» web-ресурса с помощью JavaScript.

Abstract: The article describes the process of creating a web resource using the JavaScript language. Some historical aspects of the development of the Internet, as well as examples of creating a "clean" web-resource using JavaScript, are given.

Ключевые слова: web-ресурс, JavaScript, Node.js

Keywords: web resource, JavaScript, Node.js

Тематическая рубрика: IT-технологии и цифровые процессы.

 

Как правильно в своей статье заметили Матвеев А.Г, Якубайлик О.Э, непрерывное развитие технологий и технических характеристик сети Интернет обеспечило плавный переход в способе представления информации – от тривиальной презентации простых статичных гипертекстовых документов до сложнейших интерактивных мультимедийных информационных систем. Методология программирования для Интернета постоянно совершенствуется, нарастающими темпами возникают новые средства разработки.[2]

Всемирная паутина впервые была создана в 1980-х годах и стала широко использоваться после 1993 года, когда появился браузер Mosaic. Тим Бернерс-Ли впервые разработал концепцию HTML в 1989 году. Ранняя концепция была призвана создать платформу, которая позволяла бы исследователям сотрудничать, не беспокоясь о том, где они находятся. Это привело к созданию HTML или языка гипертекстовой разметки в 1990 году. Интернет уже присутствовал в той или иной форме на протяжении многих десятилетий. Глобальная сеть (WAN), созданная в 1960-х годах, и ЛВС в начале 1980-х годов. 

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

Когда текущий Интернет и новые технологии HTML соединились, это помогло в создании современного Интернета. Коммерческие веб-страницы начали разрабатываться к середине 1990-х годов.

Технология HTML позволяет создавать только статичную страницу, без динамических эффектов и интерактивности. Чтобы внедрить интерактивные элементы, необходимо знакомство с технологией скриптов, например, JavaScript. язык веб-программирования включает в себя те управляющие конструкции, что и любой алгоритмический язык: линейную, разветвленную и циклическую.[1]

Традиционно web-ресурсы создавались с использованием HTML и CSS. Со временем, когда web-сайты становились все тяжелее и сложнее, языки сценариев, такие как PHP, Python и Perl, использовались с интерфейсом, разработанным в предыдущих технологиях (HTML и CSS). 

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

Рассмотрим особенности создания ресурсов, начнем данный процесс с «задней части web-приложения» или «back-end».  В качестве платформы для создания back-end части web-приложения выступает node.js. В соответствии с данными GitHub, в то время как PHP за год увеличил свою аудиторию на 47%, JavaScript увеличил размер своей аудитории на 97%. 

Для создания первого web-приложения понадобиться установить саму программу node. Она нужна для «развертывания» локального сервера и работы back-end части приложения. Любое взаимодействие с node осуществляется средствами командной строки для ОС Windows или терминала семейства ОС Linux.   

Такие сервисы, как PayPal с 218 миллионами учетных записей пользователей, Uber, Netflix или eBay являются реальным доказательством эффективности Node. 

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

const http = require('http') // протокол  

const hostname = '127.0.0.1' // адрес локального ресурса, можно использовать localhost 

const port = 3000 // порт работы ресурса

const server = http.createServer((req, res) => {

  res.statusCode = 200

  res.setHeader('Content-Type', 'text/plain')

  res.end('Hello World\n') // текст, который будет отправлен в браузер 

}) 

server.listen(port, hostname, () => {

  console.log(`Server running at http://${hostname}:${port}/`) // текст, который будет отправлен в терминал  

}) 

Указанный код записываем в файл «app.js» и через терминал запускаем командой «node app.js». Если в браузере по адресу «http://localhost:3000» мы увидели «Hello world», а в терминале «Server running at http://127.0.0.1:3000» то все корректно работает.  

Далее мы можем использовать модули и библиотеки какие хотим:

var express = require('express');

var bodyParser = require('body-parser');

var cookieParser = require('cookie-parser');

var needle = require('needle');

const {Pool,Client} = require('pg');

const connectionstring = 'postgressql://postgres:123654@:localhost:5432/example';

var app = express();

app.set('view engine', 'ejs');

app.use(express.static( "public" ) );

app.use(bodyParser.urlencoded({ extended: true}));

app.use(cookieParser('igbghttyj'));

const urlencodedParser = bodyParser.urlencoded({extended: false});

const client = new Client({

   connectionstring:connectionstring // подключение к БД PG

});

app.listen(3000, function() {

   client.connect(); // Postgres

console.log('Запущен localhost'); // определяем, что вся подготовка выполнена 

});

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

Таблица 1 Мифы и факты о Node

№	Миф о Node.js	Актуальные факты о Node.js
1	Node.js - это фреймворк	Node.js - это сервер, способный выполнять JavaScript
2	Полагается только на двигатель Chrome V8	Это кроссплатформенная система с открытым исходным кодом для создания веб-приложений
3	Он не поддерживает многопоточность	Обеспечивает предоставление асинхронных и управляемых событиями API
4	Начинающие разработчики не могут работать с Node	Любой программист, знакомый с JavaScript, может быстро освоить Node

Node.js работает в серверной части на основе движка Google V8, той же среды выполнения, что и в Google Chrome, для выполнения JavaScript во внешней среде. Что хорошего в этом? Команды разработчиков, борющиеся за продвижение JavaScript, сделали его одним из самых быстрых и динамичных сред выполнения. Сам Google гордо перечисляет Node.js среди других возможностей системного движка, так что это нечто. 

Кроме того, с помощью инструментов разработчика Google вы также можете выполнять задачи отладки. В Chrome 57+ есть функция отладки Node.js по умолчанию, и вы можете использовать ее для устранения ошибок, как в клиентской, так и в серверной части. 

Зачем сходить с ума от разметки XML, когда есть более практичный JSON? Нотация объектов JavaScript (JavaScript Object Notation), таким образом, аббревиатура, является надежным и популярным форматом обмена данными. Это просто и позволяет разработчикам быстро создавать API. На самом деле это один из столпов JavaScript. 

Можно долго описывать преимущества платформы node.js. Далее мы разберем «переднюю часть» или «front-end». 

В качестве «front-end» части будет описан модуль «react.js». Для node.js его можно установить через терминал, введя команду «npx create-react-app». Начнем немного с теории.  

ReactJS - это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательских интерфейсов специально для одностраничных приложений. Он используется для обработки слоя представления для веб-приложений и мобильных приложений. React также позволяет нам создавать повторно используемые компоненты пользовательского интерфейса. React был впервые создан Джорданом Уолке, инженером-программистом, работающим в Facebook. React впервые был размещен на новостной ленте Facebook в 2011 году и на Instagram.com в 2012 году. 

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

В React вместо обычного JavaScript для шаблонов используется JSX. JSX - это простой JavaScript, который позволяет заключать в кавычки HTML и использует этот синтаксис тегов HTML для визуализации подкомпонентов. Синтаксис HTML преобразуется в вызовы JavaScript React Framework. 

Теперь перед нами возникает главный вопрос: зачем использовать ReactJS? Существует так много платформ с открытым исходным кодом для облегчения разработки интерфейсных веб-приложений, таких как Angular. Давайте кратко рассмотрим преимущества React перед другими конкурентными технологиями или средами. В связи с ежедневным изменением переднего мира, трудно посвятить время изучению новой структуры, особенно когда эта структура может в конечном итоге стать тупиком.

ReactJS просто проще понять сразу. Компонентный подход, четко определенный жизненный цикл и использование простого JavaScript делают React очень простым в обучении, создании профессиональных веб-приложений (и мобильных приложений) и их поддержке. React использует специальный синтаксис под названием JSX, который позволяет смешивать HTML с JavaScript. Это не требование; Разработчик все еще может писать простым JavaScript, но JSX намного проще в использовании. 

Любой, кто обладает базовыми знаниями в области программирования, может легко понять React, в то время как Angular и Ember называются «предметно-ориентированным языком», подразумевая, что их трудно изучать.

React можно использовать для создания мобильных приложений (React Native). А React - преданный поклонник возможности повторного использования, что означает, что поддерживается обширное повторное использование кода. Так что в то же время мы можем сделать IOS, Android и веб-приложение. 

React использует одностороннюю привязку данных, а архитектура приложения, называемая Flux, контролирует поток данных к компонентам через одну контрольную точку - диспетчер. Проще отлаживать автономные компоненты больших приложений ReactJS. 

React не предлагает никакой концепции встроенного контейнера для зависимости. Вы можете использовать модули Browserify, Require JS, EcmaScript 6, которые мы можем использовать через Babel, ReactJS-di, чтобы автоматически вводить зависимости. 

Приложения ReactJS очень просты в тестировании. Представления React могут рассматриваться как функции состояния, поэтому мы можем манипулировать с состоянием, которое мы передаем представлению ReactJS, и посмотреть на выходные данные и инициированные действия, события, функции и т. Д. 

Подведя итог, можно сказать, что язык JavaScript не спроста набирает популярность и наращивает аудиторию. Информационные технологии не стоят на месте и выходят такие платформы как io.js как аналог node с встроенной поддержкой ES6. Но, несмотря на это, можно уверенно сказать, что именно node.js и react.js являются лучшими «инструментами» для создания полноценного «web-приложения». Концепция react “Virtual DOM” позволяет быстро менять содержимое сайта, создавая иллюзию «разных страниц ресурса».  

Список литературы:

1. Диков А. В. – Математические алгоритмы на javascript // Известия ПГПУ им. В. Г. БЕЛИНСКОГО. 2009. NO 13 (17). С. 84-88. 

2. Матвеев А.Г., Разработка веб-приложения для обработки и представления пространственных метаданных геопортала// Матвеев А.Г, Якубайлик О.Э./ Вестник Сибирского государственного аэрокосмического университета им. академика М.Ф. Решетнева.- 2012.-№2(42).-С. 48-54.