Николай Ланец
31 июля 2017 г., 20:07

Современный сайт на javascript.

Всем привет!

Сегодня хотел бы показать нашу новую работу: http://troika-gorod.ru/ (запустили несколько дней назад).

Задача стояла следующая: есть сторонняя работающая система, мобильное приложение, API, и надо было под это все сделать самостоятельный веб-сайт, работающий по API. В итоге получился такой даже не сайт, а веб-приложение. То есть он полностью на javascript/react работает (даже обработка УРЛ страниц), а MODX используется только для обработки API-запросов.

По большей степени здесь веб-сервер вообще не используется. То есть в браузер всегда приходит минимальный HTML-код (ссылки на JS/CSS файлы и один основной div). У данной реализации конечно есть свои минусы (которые позже будут нивелированы за счет ввода node.js-сервера между пользовательским запросом и конечным сайтом (как это работает на сайте MODX-Клуба)), но зато есть весьма весомые плюсы. Один из них - это высокая скорость загрузки и рендеринга страниц. Даже при первом заходе на сайт (без кеша в браузере) полный onLoad страницы - 1-2 сек. Код страницы веб-сервер отдает за 10 мсек (что не удивительно, его node.js отдает как есть из памяти). Многие переходы внутри сайта происходят без перезагрузки страницы, что дает еще один значительный плюс в визуальной скорости сайта. И даже без какой-либо оптимизации PageSpeed Tools дает 85+ баллов из 100.

В общем, теперь мы переходим на такие front-end технологии и скорее всего в ближайшем будущем таки запустим разработку серии компонентов для сайтов, в которых эти технологии бы очень пригодились.
Николай, это круто! Что почитать, чтобы делать такие сайты?)
Читать на самом деле много. webpack, react, material-ui, чистый javascript и т.п. Скоро начну цикл статей по этому направлению.
Здравствуйте Николай. Смотрю вы выбрали react.js, а Angular 2 не рассматривали? Я думаю за такими сайтами (веб-приложениями) будущее, поэтому тоже планирую изучить данные технологии. Я конечно еще совсем "зеленый" "программист", но учиться никогда не поздно. Жду ваших статей на эту тему, они у вас всегда понятные и полезные.
Angular - готовый фреймворк, а я все-таки любитель более низкоуровневых вещей. Скорее всего ангулар покручу, конечно, но более из соображений расширения кругозора.
Идею понял, спасибо.
Бомба) Только вот один момент смущает - как поисковики будут индексировать такой сайт?

А вы посмотрите внимательней на сам сайт MODX-Клуба. Он и без JS рендерится, на стороне сервера. Работает node.js+react-dom. Все отлично индексируется. Тройка тоже чуть позже заработает на такой связке.
Хорошо, косяк в тройке, работает только на ie 11 на ниже нет, ошибка в консоле.

Полифилы потом добавлю. А вообще IE - это косяк)
Здорово! Очень быстро работает!
.block_title .searchform input {padding:0px 20px 0px 60px}



@msk13s, привет! Спасибо)
P.S. верстка не наша, наше только программирование. Верстка предоставлялась заказчиком. Мы ее как есть переносили на JSX.
Очень и очень впечатляет! Как будто прикасаешься к будущему веб-технологий! Безусловное и нужное направление, радует что эти современные технологии внедряете и нас учите! Спасибо за информирование!

Добавить комментарий