Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 51
Основная проблема одностраничных сайтов — поисковики, которые будут видеть только одну страницу. Опять же проблемы с прямыми ссылками. А вот для различных админок и прочих инструментов такой подход просто идеален. Думаю, стоит учесть наличие сего инструментария при разработке админки следующего проекта.
Думаю, такой подход скорее удобен для реализации различных сервисов, а не сайтов в привычном понимании. В таком случае индексация поисковиком не играет никакой роли.
Помойму индексация поисковиком в любом случае играет не последнюю роль…
Если вы предоставляете СЕРВИС для пользователя, то как его можно проиндексировать?
XML карты сайта отменили?
— ввести урлы вида domain.com/#/some/path/here для возможности доступа к любому контенту по прямым ссылкам (JS читает хеш (то что после #) и выполяет необходимые действия)
— на стороне сервера стоит проверка на user-agent. если к нам стучится бот, то вместо JS интерфейса выдаем статический html контент для индексации
— создаем динамическую XML карту для наших урлов
— ???????
— PROFIT!
юзер ckald ниже привел вроде как даже ссылку на либу готовую… но я ее не смотрел, да и руками такое закодить не составляет труда
— ввести урлы вида domain.com/#/some/path/here для возможности доступа к любому контенту по прямым ссылкам (JS читает хеш (то что после #) и выполяет необходимые действия)
— на стороне сервера стоит проверка на user-agent. если к нам стучится бот, то вместо JS интерфейса выдаем статический html контент для индексации
— создаем динамическую XML карту для наших урлов
— ???????
— PROFIT!
юзер ckald ниже привел вроде как даже ссылку на либу готовую… но я ее не смотрел, да и руками такое закодить не составляет труда
забыл добавить, что в xml-карте постим урлы без /#/, чтобы параметры передались на сервер, а не зависли в адрес-хеше на стороне браузера… если постучавшийся по урлу не бот, а простой юзер, то его редиректят на аналогичый адрес но уже с /#/
пример такого редиректа есть у твиттера. в гугле все заиндексировано ссылками вида twitter.com/lol при попытке зайти с браузера нас редиректят на twitter.com/#!/lol где нас радостно встречает их новый JS интерфейс
пример такого редиректа есть у твиттера. в гугле все заиндексировано ссылками вида twitter.com/lol при попытке зайти с браузера нас редиректят на twitter.com/#!/lol где нас радостно встречает их новый JS интерфейс
Этот хак мы придумали раньше твитера (см. inthecity.ru). Почему хак? Потому что возникают проблемы с традиционными для рунета системами статистики вроде liveinternet.ru (на который обращают внимание часть рекламодателей). Но для li.ru был придуман свой костыль.
Какой? Поделитесь опытом?
Допустим текущий урл сайта site.ru/#/index.html если подгрузить стандартный код Li.Ru на такой странице получим засчитанный хит для страницы site.ru/. Что бы не терять то что после решетки, то при загрузки такой страницы подгружаем счетчик в iframe'е задавая SRC параметр равный: www.site.ru/index.html по этому адресу тем кто пришел к нам напрямую отдаем перенаправление на аналогичный адрес без www и с #, а для случая когда страничка подгружается через iframe (это можно например определить через доп., параметр или через refferer) генерируем код счетчика LI.ru.
Отличие той библиотеки, ссылку на которую я привел, в том, что она упраздняет хеши для таких целей. Адрес совершенно бото-понятен и индексируем. И сами классические хеши на странице работают (хотя, как заметил мой друг — да кто их сейчас использует?!).
И карта не нужна. Но для браузеров без поддержки pushState сайт выглядит, как и для ботов, статично. Я не говорю, что js не в принципе — но чудеса навигации с поддержкой history устроить не выйдет. На этот случай следует дописать поддержку хеш-навигации с адаптацией, в зависимости от возможностей браузера.
То есть, чтобы человек, пришедший на /#!register в google chrome сразу же оказывался на /register. И наоборот.
Лично я это использовал как раз для плеера музыки. Вспомнил еще пример — prostopleer.com
А насчет комментария Nc_Soft — так я думаю, что он имел в виду, что индексировать сайт вроде prostopleer.com — бессмысленно. Как и какой-нибудь сервис выбора авиабилетов.
И карта не нужна. Но для браузеров без поддержки pushState сайт выглядит, как и для ботов, статично. Я не говорю, что js не в принципе — но чудеса навигации с поддержкой history устроить не выйдет. На этот случай следует дописать поддержку хеш-навигации с адаптацией, в зависимости от возможностей браузера.
То есть, чтобы человек, пришедший на /#!register в google chrome сразу же оказывался на /register. И наоборот.
Лично я это использовал как раз для плеера музыки. Вспомнил еще пример — prostopleer.com
А насчет комментария Nc_Soft — так я думаю, что он имел в виду, что индексировать сайт вроде prostopleer.com — бессмысленно. Как и какой-нибудь сервис выбора авиабилетов.
А как же авторизация, если сервис персонально-личный?
На самом деле подготавливать две версии очень трудоемко. Более того ПС вправе счесть разную выдачу за клоакинг, поэтому мы пошли другим путем — специально для роботов мы интерпретируем яваскрипт на стороне сервера и отдаем им уже готовый для отображения HTML. Вы можете увидеть это если постучитесь к нашему вебсерверу с юзерагентом яндекс или гугл бота.
Спасибо
Для поисковиков есть следующее решение: github.com/defunkt/jquery-pjax. Использует pushState для подмены url. Правда, его не ест, как минимум, ИЕ8 — но я надеюсь дописать поддержку аякса с форматом хеша #!url.
А поисковик, поскольку он при запросе не дает заголовка HTTP_PJAX — получает целиком сформированную страницу, как и любой человек, зашедший по ссылке.
Опробовано на последнем проекте — лично я в восторге.
Ну, еще можно глянуть, как работает плеер Вконтакте — он ведь играет, когда мы по страницам лазим.
А поисковик, поскольку он при запросе не дает заголовка HTTP_PJAX — получает целиком сформированную страницу, как и любой человек, зашедший по ссылке.
Опробовано на последнем проекте — лично я в восторге.
Ну, еще можно глянуть, как работает плеер Вконтакте — он ведь играет, когда мы по страницам лазим.
https://github.com/defunkt/jquery-pjax, а то там точка прилипла :)
Подмена url, что на гитхабе, работает схожим образом?
Расскажите, для чего в твиттере и других подобных сервисах (prostopleer вроде тоже) после хеша перед урлом ставится восклицательный знак? Просто постоянно бросается в глаза, хотя, казалось бы, можно и без него.
Для красоты. Насколько я слышал, такой формат предложил google. Чтобы отличить от классических хешей на странице.
ajaxcrawling называется
code.google.com/web/ajaxcrawling/docs/getting-started.html
code.google.com/web/ajaxcrawling/docs/getting-started.html
Сегодня в RSS ленте наткнулся на запись о socketstream:
Думаю, стоит ознакомиться.
SocketStream is a new full stack web framework built around the Single-page Application paradigm. It embraces websockets, in-memory datastores (Redis), and client-side rendering to provide an ultra-responsive experience that will amaze your users.
Думаю, стоит ознакомиться.
Не могу сообразить, как извернуться, чтобы в Backbone валидацию делать на стороне сервера? Или Backbone для этого не подходит?
А в чем проблема? Бэкбоун ведь посылает JSON массив на сервер, значения которого можно обработать на сервере стандартными средствами.
Не совсем проблема, когда разбиралась с Backnone.js, остановилась на этом вопросе.
Значит надо писать надстройку к Backbone, чтобы автоматически собирать серверный адрес для валидации, а потом автоматически парсить полученный ответ со списком ошибок.
Значит надо писать надстройку к Backbone, чтобы автоматически собирать серверный адрес для валидации, а потом автоматически парсить полученный ответ со списком ошибок.
Никаких надстроек не надо. Для ajax запросов backbone использует jQuery. При вызове метода модели save() создается RESTfull запрос к серверу по адресу указанному в url модели. При желании можно реализовать свою логику переопределив Backbone.sync(). А метод validate() нужен чтобы отсеять модели с некорректными данными еще до отправки на сервер. Вообще, в документации все доступно расписано.
а зачем вам mustache.js? в underscore имхо хорошая потдержка темплейтов
Спасибо за статью, как раз сейчас был озадачен поиском подобных библиотек… а тут как по заказу, статья со ссылочками.
Для построения «правильной архитектуры» на клиенте, еще Knockout.JS вполне достоин внимания.
Для информации — это весьма интересная реализация паттерна MVVM на JS.
Knockout отличная штука. Но его способ связывание модели с видом — прямо в html-разметке, мне не нравиться. Грязновато получается:
<textarea data-bind="value: message, valueUpdate: 'afterkeydown'"></textarea>
<ul data-bind="template: { name: 'itemTmpl', foreach: items, templateOptions: { selected: selectedItem } }">
</ul>
* This source code was highlighted with Source Code Highlighter.Когда как, тут зависит от подхода и задачи — иногда это удобно, иногда нет. С одной стороны, подобное использование атрибутов «data-» похоже на хак и over-use, но свое применение Knockout имеет.
А по-моему очень компактно и очевидно, без лишнего кода. data- аттрибуты очень удобны для этого (имхо это вообще одна из основных задач data- аттрибутов). Зачем громоздить что-то где-то, ведь самое очевидное — указать это прямо в элементе.
Если честно, то я бы всё это заменил Мутулзом. Плюс добавил бы ещё одну свою либу, которая делает что-то вроде тех же моделей, но не абстрактных, а связанных с конкретными элемантами DOM.
Скажите, а использование JS-шаблонизаторов это требование? Просто мне ничто никогда не представлялось настолько бессмысленным как шаблонизация на JS.
Скажите, а использование JS-шаблонизаторов это требование? Просто мне ничто никогда не представлялось настолько бессмысленным как шаблонизация на JS.
Интересно, как обстоит вопрос быстродействия, по сравнению с jQuery/чистым js?
Вообще принципиальных сложностей с реализацией MVC самому не вижу (просто не вижу); как минимум, это доверие к своему коду в плане оптимальности быстродействия.
Вообще принципиальных сложностей с реализацией MVC самому не вижу (просто не вижу); как минимум, это доверие к своему коду в плане оптимальности быстродействия.
В backbone.js всего около 1000 строк, так что в чужом коде не погрязнешь.
Ну и как минимум можно подсмотреть удачные решения для своего велосипеда :)
Ну и как минимум можно подсмотреть удачные решения для своего велосипеда :)
Эта да) Но это явно не прямое назначение backbone, и не предлагаемое автором))
А мой велосипед пока что сам в 1000 строк умещается (что за странный критерий, не могу никак понять: пробельные строки/строки с одной скобкой/с комментами считаются?)
А мой велосипед пока что сам в 1000 строк умещается (что за странный критерий, не могу никак понять: пробельные строки/строки с одной скобкой/с комментами считаются?)
А Вы можете предложить критерий взамен этого? Чтоб так же просто вычислялся (как тут — взглядом в статус редактора) и столько же говорил о навороченности кода?
Просто — вряд ли. Косвенно оценить объём работы можно было бы по такому критерию — сколько строк (а лучше символов) было написано, а не присутствует в коде.
К примеру, мой проект рефакторился раз пять, поэтому код всего в тысячу строк. Но написано было тысячи две-три строк.
Можно также измерить объём файла минимизированного кода — это точнее даст представление об объёме, но не более.
Можно измерять объём уникального кода.
Но это конечно выдуманные критерии, профессиональный подход, вероятно, другие оценки использует. Но с юзабельной точки зрения мне было бы удобнее эти критерии использовать, и они не намного сложнее.
К примеру, мой проект рефакторился раз пять, поэтому код всего в тысячу строк. Но написано было тысячи две-три строк.
Можно также измерить объём файла минимизированного кода — это точнее даст представление об объёме, но не более.
Можно измерять объём уникального кода.
Но это конечно выдуманные критерии, профессиональный подход, вероятно, другие оценки использует. Но с юзабельной точки зрения мне было бы удобнее эти критерии использовать, и они не намного сложнее.
Сколько строк в коде сейчас — посмотреть может каждый, а сколько их было написано — придётся верить туманным прикидкам автора, и не одного. Собирать мнения, суммировать… Минимайзер крда тоже далеко не всегда под рукой. Так что — ИМХО, имеющийся критерий крив, но уникален по доступности и достаточно информативен во многих ситуациях. Другого такого подручного — нет.
>>уникален по доступности — что это значит?
Число написанных строк можно подсчитывать напрямую, если работа ведётся в одном редакторе, либо вычислять на основе системы версий.
В общем случае я уверен также можно придумать костыли, к примеру записывать это число в мета-информацию.
Но подсчет строк действительно очень прост, тем не менее даже его можно было бы модифицировать, к примеру до числа операций. Зачем скобки и комментарии считать? Плюс некоторые строки с тремя-четыремя операциями можно было бы развернуть.
Число написанных строк можно подсчитывать напрямую, если работа ведётся в одном редакторе, либо вычислять на основе системы версий.
В общем случае я уверен также можно придумать костыли, к примеру записывать это число в мета-информацию.
Но подсчет строк действительно очень прост, тем не менее даже его можно было бы модифицировать, к примеру до числа операций. Зачем скобки и комментарии считать? Плюс некоторые строки с тремя-четыремя операциями можно было бы развернуть.
Подход описанный f0rk'ом интересен и актуален, для нас он был актуален еще в '08-мом году когда мы реализовали похожим образом движок inthecity.ru, только клиентская часть — не готовое решение, необходимо также методологически увязать и технически проработать серверную составляющую решения. У нас к примеру ключевые сущности (модуль, инфо-блок, шаблон) имели прямую репрезентацию на клиенте, на сервере и на уровне БД, что позволило сильно автоматизировать процесс сборки конкретного сайта и предоставить заказчику конструктор готовых решений, без потери гибкости в плане его кастомизации.
Еще один туториал по бэкбоуну. Таких море. Все об одном. Гораздо интереснее было бы увидеть реализацию какого-нибудь фильтра объектов по разным параметрам с помощью бэкбоун или чего-то действительно интересного. А стандартный туториал — очень похоже на «пишем блог на rails за 5 минут»
Кстати, в backbone.js начиная с версии 0.5.0 Controller переименован в Router.
Довольно интересная штука. Думаю в связке с Node.js будет отличная. А кто-нибудь использовал это в связке с Django?
Довольно интересная штука. Думаю в связке с Node.js будет отличная. А кто-нибудь использовал это в связке с Django?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Пишем одностраничный клиент на javascript