Какие движки на javascript для сайта

Javascript-фреймворки/движки для создания сайта, работающего в браузере клиента?

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

У меня есть задача создать «сайт», который должен работать в браузере пользователя.
Принцип действия — отправка/прием запросов и ответов к/от REST API определенного сайта, с последующей визуализацией данных пользователю.

То есть, юзер заходит, допустим на localhost/index.html (к которому подключены jquery, скрипты для общения с API, и др.), попадает на страницу логина. Вводит данные, жмёт Sign in, AJAX отправляет данные серверу, сервер в json присылает ответ (профиль пользователя). Скрипт обрабатывает ответ, «натягивает» данные на шаблон, и отображает шаблон с нужными данными пользователю, скрывая при этом форму логина.

Примерно таков весь принцип действия, серверная часть нужна лишь для доступа к html-кам, css, js.

Вопрос: Что может помощь в реализации этого замысла? Существуют ли готовые Javascript-фреймворки, «cms»-ки?

• Вопрос задан более трёх лет назад
• 1066 просмотров

6 комментариев

Средний 6 комментариев

Какие движки на javascript для сайта

Анастасия Сотула
Редактор блога Serpstat

Тема сайтов на JavaScript-движках и их продвижения сегодня — тренд среди SEO-оптимизаторов. С одной стороны — это расширенные возможности для UX и высокая скорость сайтов, с другой — проблемы с оптимизацией. Так как же быть владельцам сайтов и сеошникам?

Чтобы разобраться в этом спорном вопросе, я решила опросить SEO-экспертов. Специалисты поделились своим опытом о том, какие подводные камни в продвижении сайтов на JavaScript-движках, усложняется ли разработка и каким сайтам стоит переходить на JS.

Кто участвовал в опросе?
Владимир Короленко
Head of SEO в Kite
Алексей Матвийчук
Search Engine Optimizer (SEO) в Ольшанский и партнеры
Дмитрий Севальнев
Руководитель департамента SEO и рекламы в Пиксель Плюс
Алексей Степанов
Руководитель SEO-группы в АлаичЪ и Ко
Елена Камская
Александр Губский
SEO-эксперт в Webhunters.by.
Антон Кишков
Team leader в Empire Team
Алексей Волков
Chief executive officer в Digital Tools
Михаил Вотусь
Александр Алаев
Генеральный директор в АлаичЪ и Ко
Наталья Процюк
Илья Русаков
Руководитель в impulse.guru
Вадим Ивашкевич
Руководитель SEO отдела в Seomarket UA
Сергей Редько
Search Engine Optimizer (SEO) в TAMGA
Как стать экспертом блога и еще 7 способов сотрудничества с Serpstat

Хотите узнать, как стать экспертом блога, дать интервью или принять участье в еще 6 типах информационного сотрудничества? Все уже здесь!

На какие конкретно вопросы они ответили?

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

Какие подводные камни у продвижения таких сайтов?

Алексей Матвейчук

JavaScript и SEO — сегодня очень горячая тема, так как все больше и больше сайтов используют современные JavaScript-фреймворки и библиотеки, такие как Angular, React, Vue.js и Polymer.

Однако реальность такова, что «творение разработчиков» не всегда можно адаптировать под требования поискового робота. Хотя Google и заявляет, что они довольно хороши в рендеринге JavaScript-сайтов, но заявления разнятся с действительным положением дел:

1. JavaScript очень чувствительный к ошибкам. Одна ошибка в вашем коде JavaScript может привести к тому, что Google не сможет отобразить вашу страницу.

2. Проблемы сканирование JS-файлов.

• Разбор, компиляция и запуск JS-файлов занимает очень много времени.

• В случае веб-сайта, который «кишит» JavaScript, Google Bot должен подождать, пока все шаги компоненты JS-файлов будут выполнены, и только потом он сможет проиндексировать контент.

Александр Алаев

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

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

Есть несколько вариантов, как бороться с этой ситуацией:

• Использовать meta name=»fragment» content=»!»

• Добавлять параметр #!

Владимир Короленко

Если говорим об органическом трафике, то главных камня три:

Во-первых, с момента релиза первых полноценных JavaScript-фреймворков прошел уже не один год. Успешных кейсов по переезду статичных проектов на динамичные SPA до сих пор крайне мало. Это наталкивает на мысль, что любой JavaScript-движок заранее обречен на проблемы с индексацией и ранжированием в поисковых системах, хотя это не так. Об одном таком кейсе я буду рассказывать на All in Top 2019.

Во-вторых, рекомендации ПС Google и Яндекс по вопросам индексации JavaScript сайтов противоположны. Google проиндексирует и обработает большую часть контента. Для обработки JavaScript используется механизм на основе браузера Google Chrome (WRS или, по-другому, CSR). Яндекс же до сих пор обрабатывает динамический контент (JavaScript, AJAX), от слова «никак». Более того, для показа обработанных в HTML динамических страниц Яндекс рекомендует использовать AJAX Crawling Scheme, которая помечена Google как «нежелательная» еще с 2015 года, а с лета 2018 не поддерживается.

В то же время уже давно существуют рабочие решения с использованием SSR и изоморфного JavaScript, сторонних сервисов (например, Prerender.io).

В-третьих, SEO специалисты редко разбираются в архитектуре проекта. А разработка не всегда «дружит» с SEO. Многие разработчики (не все конечно же), считают SEO шаманством, а сеошников необязательными и ненадежными. Хотя, по сути, у них много общего и возможно совмещение таких специалистов на одном проекте, вплоть до совместных команд по SCRUM-методологии.

Алексей Степанов

Все подводные камни, при продвижении таких сайтов, сводятся к тому, как именно поисковые системы индексируют данные из JS.

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

• Если контент загружается через JavaScript около 5 секунд, то поисковики могут вообще его не «увидеть».

• Довольно частая и очень глупая ошибка — в файле /robots.txt блокируются от индексации скрипты, вследствие чего поисковики могут не проиндексировать загружаемый контент.

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

• Индексация контента JS происходит очень долго по сравнению с HTML контентом. Если сайт не написан полностью на JS (что бывает крайне редко), то при посещении страницы поисковым ботом сначала индексируется HTML контент, а к содержимому JS поисковик может подойти только после нескольких таких итераций.

Вадим Ивашкевич

Что касается SEO на JavaScript-сайтах — не будет никаких проблем, если настроен серверный рендеринг всех страниц, и у поисковиков будет доступ к коду (html, css). Если же рендеринг настроен только на стороне клиента — скорее всего будут проблемы, так как в большинстве случаев поисковые роботы увидят только пустую страницу.

Всегда стоит анализировать кэш в Google страниц вашего сайта. Текстовый кэш покажет, видит ли Google bot ваш сайт таким, каким вы его показываете пользователю. В Google Search Console стоит просматривать страницы как Google bot для проверки наличия ошибок.

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

Отдельно стоит упомянуть SPA (Single Page Application) — сайты, построенные по принципу «заходишь на одну страницу, все остальное подгружается во фрейме».
Тут два недостатка:

• невозможность SEO-продвижения без специальных настроек;

• проблемы с аналитикой и отслеживанием трафика, что тоже нужно искусно настроить чтобы все правильно отрабатывало.

Недавно сталкивались с такой проблемой: все пользователи, переходящие со страницы на страницу на таком сайте, засчитывались как пользователь с 0-сек времени на сайте и отказом, так как Google Analytics считает время проведенное на сайте разницей времени перехода на вторую страницу сайта и захода на первую.

Наталья Процюк

Если мы говорим про Google, то для успешного SEO нужны простые и доступные сайты, а с JavaScript все может быть непросто.

Основное правило звучит так:

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

На основе аудитов сайтов, которые приходят к нам можно вывести несколько типичных сложностей для сайтов с JS:

Бесплатные игровые движки на HTML5 и JavaScript

HTML5 вместе с CSS3 и JavaScript дают разработчику широкие возможности создания игр с использованием 3D, анимации, Canvas, математики, цветов, звука, WebGL. Одно из наиболее очевидных преимуществ HTML5 заключается в его независимости и от платформы, и в общем случае от аппаратной начинки.

При детальном рассмотрении можно выявить предоставляемые движками дополнительные возможности: упрощение некоторых часто встречающихся задач или подгрузка ресурсов, оформленный ввод, физика, звук, bitmap’ы (таких, конечно же, немного). Есть и довольно слабо оформленные движки, а есть и те, которые предоставляют в пользование разработчику редактор 2D уровней и инструменты отладки.

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

Итак, вот, собственно, сами движки.

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

Crafty

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

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

Quintus

Quintus – игровой HTML5-движок, разработанный, чтобы быть модульным и легковесным, с четким JavaScript-подобным интерфейсом. Для того, чтобы реализовать основные особенности ООП-игрового движка в HTML5-движке, в Quintus в некотором отношении схож с jQuery, а также поддерживает плагины, управление событиями и гибкую модель наследования, чтобы упростить повторное использование реализованных функций.

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

gameQuery

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

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

GMP

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

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

lycheeJS

Игровая библиотека JavaScript, которая предлагает готовое решение для проектирования и реализации HTML5 Canvas и WebGL или нативных OpenGL игр внутри браузера или стационарных платформ. Оптимизирован для Google Chrome.

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

Enchant.js

Фреймворк Enchant.js для HTML5+JavaScript игр был разработан в 2011 году, распространяется с открытым исходным кодом (MIT лицензия) и потому бесплатен.

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

The Render Engine

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

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

GameJS

Большая библиотека на верхнем уровне HTML Canvas. В добавок к функциям рисования в ней имеется растущий ассортимент полезных для разработки игр модулей. Большинство имеющегося API основан на популярной PyGame.

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

CSS Game Engine

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

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

ClanFX

clanfx основан на JavaScript и CSS и использует плиточную графику. Работает на данный момент в Firefox, Epiphany и Opera. Среди реализованных фич: анимированные спрайты, эффекты заклинаний, постройки, плитки/текстуры и базовый искусственный интеллект.

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

gTile

Браузерный движок на чистом JavaScript и DHTML. В gTile плиточная графика была выбрана за ее простоту и доступность. Упор в реализации был сделан на высокий уровень интерактивности и поведении игровых объектов. Меньшее внимание было уделено графике. А потому движок подойдет больше для создания текстовых РПГ, а графических возможностей должно хватить для изображения локаций.

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

J5g3

Графический JS движок с открытым исходным кодом (GPLv3). Легкий в использовании синтаксис предназначен для того, чтобы сделать фреймворк быстрым и расширяемым.

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

Jaws

2D игровая библиотека, основанная на HTML5. Использует и Canvas, и средства DOM.

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

Cocos2D

Портированный с iPhone графический 2D HTML5-движок на JavaScript. Позволяет быстро создавать 2D игры и графические приложения, которые могут работать на всех современных устройствах без установки дополнительных плагинов.

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

CopperLicht

WebGL библиотека и JavaScript 3D движок для создания браузерных игр и 3D приложений. Использует WebGL Canvas, поддерживаемый современными браузерами и способный поддерживать рендеринг 3D моделей, используя аппаратное ускорение без плагинов.

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

Aves

Этот HTML/JavaScript движок – реинкарнация набора инструментов для разработки олдскульных RPG (но с более привлекательной графикой). И все только с помощью HTML и JS. Никаких плагинов. Никакого Flash.

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

LimeJS

HTML5 движок для разработки игр с поддержкой сенсорного ввода. LimeJS создан с использованием Closure Library, созданной Google, и в нем уже реализованы классы и функции для отслеживания времени, событий, обработки форм и анимации. Также фреймворк поддерживает спрайтовые листы (т.е. все используемые изображения могут быть помещены в один файл).

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

Phaser

Ещё один фреймворк для создания мобильных и десктопных игр на HTML5 с применением Canvas и WebGL. Бесплатный и с открытым исходным кодом. Есть быстрые гайды для старта на JavaScript и TypeScript.

Следите за новыми постами по любимым темам

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

Движок сайта: что это и как выбрать

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

Алексей Кодов
Автор статьи
25 сентября 2023 в 9:14

Движок сайта, также известный как система управления контентом (Content Management System, CMS), это инструмент, который позволяет создавать, редактировать и управлять контентом веб-сайта без необходимости знать языки программирования.

�� Что такое движок сайта?

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

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

�� CMS это движок сайта?

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

�� Как выбрать движок сайта?

Выбор движка сайта зависит от множества факторов. Вот несколько вещей, которые стоит учесть при выборе:

1. Цель сайта. Например, если вы создаете блог, то выбор может пасть на WordPress, ведь это один из самых популярных движков для блогов.
2. Бюджет. Некоторые движки сайта являются бесплатными, в то время как другие требуют оплаты.
3. Технические навыки. Некоторые движки сайта требуют от пользователя знания одного или нескольких языков программирования, в то время как другие предназначены для пользователей без технического опыта. Чтобы изучить языки программирования, приходите в Skypro. Например, на курс «Python-разработчик». Python — один из простых и востребованных языков, с которого легко стартовать. За 10 месяцев получите знания, освоите навыки и основные инструменты благодаря помощи опытных преподавателей и кураторов.
4. Будущее развитие сайта. Если вы планируете развивать и масштабировать свой сайт, выберите движок, который сможет справиться с этими задачами.

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

Если вы хотите более глубоко изучить вопрос веб-разработки и в частности работы с CMS, рекомендуем вам пройти курс по веб-разработке в онлайн-университете Skypro. Больше информации можно найти на сайте школы по ссылке: Skypro.