Джанго и клиентские шаблоны JavaScript - PullRequest
Новая
       64

Джанго и клиентские шаблоны JavaScript

31 голосов
/ 15 декабря 2011

Intro

В настоящее время я пишу очень стандартное приложение на основе Django (в основном фантастические CRM / списки контактов).Это своего рода работа, но, поскольку я продолжаю пытаться улучшить интерфейс с помощью все большего и большего количества кода пользовательского интерфейса AJAXy (с использованием jQuery), становится все труднее работать.Я получаю длинные блоки хрупких обработчиков событий jQuery, которые анализируют DOM, отправляют изменения обратно на сервер, возвращают некоторый JSON и пытаются обновить DOM, основываясь на этом.

Я чувствую, что наминимум, я, вероятно, хочу добавить некоторые шаблоны на стороне клиента в смесь.В качестве альтернативы, я мог бы попробовать перейти на JS-фреймворк и просто использовать свое приложение Django в качестве уровня абстракции базы данных.Или, хотя я знаю и люблю Python, я могу отказаться от приложения Django и попробовать использовать решение JS / Node.js или что-то подобное.

Кто-нибудь еще был в такой ситуации?Как ты это решил?

Цели дизайна

  1. СУХОЙ: я не хочу копировать свои модели или шаблоны (или, по крайней мере, больше, чем необходимо).
  2. Я хочу, чтобы посетители, заходящие на страницу, получали результаты для серверной стороны.
  3. Когда посетители нажимают на вещи, я бы хотел обрабатывать их с помощью шаблонов и рендеринга на стороне клиента и обновлять сервер через AJAX.вызовы интерфейса REST.

Итак ... как мне это сделать?Я собрал ссылки на несколько фреймворков и шаблонных систем.Без определенного порядка:

dust.js :

Это, очевидно, , используемый LinkedIn для решения аналогичной проблемы.Он использует Node.js на стороне сервера, который не идеален (я никогда не использовал Node), но, по крайней мере, он не основан на JVM.Похоже, что он неактивен на github - я нашел списки рассылки, где люди задавались вопросом, куда отправился сопровождающий.Звучит довольно неплохо - пост в блоге LinkedIn хорошо продает технологию, особенно возможность ее компилировать.Но, похоже, это просто шаблон.Этого достаточно для того, что я хочу?

Усы :

Этот вариант имеет реализации как на Python, так и на JS, и кажется популярным ... но я никого не могу найтикоторый, кажется, использует шаблоны усов с Django.Это потому, что это слишком легко заслужить сообщение в блоге, или это невозможно или иначе нежелательно?Это также довольно ограничено;как минимум, мне, вероятно, понадобится обратиться к какой-то среде MVC JS, верно?

Магистраль, Spine, KnockoutJS, EmberJS, JavascriptMVC и т. д. фреймворки, это довольно сложно.Все они на первый взгляд кажутся совершенно хорошими.Похоже, мне нужно было бы переписать ЛОТ моего приложения, если бы я пошел по этому пути, и я действительно хотел бы найти кого-то, кто уже сделал что-то подобное.Кроме того, было бы неплохо, если бы у кого-нибудь из Джанго был четкий выбор;Я не хочу изучать полдюжины различных фреймворков для их оценки. DerbyJS

Это выглядит интересно, так как обрабатывает как клиентскую, так и серверную стороны водна упаковка, но немного незрелая.Они предупреждают против использования его в производстве, и если я понимаю документы, он еще не поддерживает какую-либо форму постоянства, которая ... ограничивает.У меня такое ощущение, что если бы оно было закончено, это было бы идеально для того, что я хочу, хотя ...

Так ...

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

Ответы [ 4 ]

6 голосов
/ 15 декабря 2011

Для полной интеграции с шаблонами Django я нашел это: Yz-Javascript-Django-Template-Compiler .Я никогда не использовал его сам, и, к сожалению, он выглядит немного неуправляемым.

Swig - быстрый шаблонный движок, похожий на JS.

Pure isскомпилированный шаблонизатор JS, который, подумав немного, мог бы хорошо работать с Django, я думаю, потому что шаблоны - это просто обычный действительный HTML.

Другие интересные библиотеки шаблонов JS:

4 голосов
/ 02 января 2012

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

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

на стороне клиента

Использование Backbone + (некоторый движок шаблонов здесь)

Серверное

Рендеринг первого набора html, а также рендеринг некоторых данных JSON, которые Backbone может подобрать и работать с ними (например, текущая страница, которая была загружена, максимум страниц и т. Д.)

Пример

Клиент загружает: http://mysite.com/blog/archive/5

Сервер отображает: 

<html>
    <head>
        <script>
            var data = {
                page:5 // Rendered by Server,
                maxPages: 10
            };

            $(function(){
                // Hook up all Backbone stuff, and hook into interaction events
            });
        </script>
    </head>
    <body>
        <!-- Content -->
    </body>
</html>

Это решает вопросы проектирования 2 и 3: ваш сервер загружает исходное состояние вашего веб-приложения, и пользователь может перемещаться по нему на стороне клиента.

С точкой проектирования 1: На стороне клиента все в порядке. Однако для серверной части вам необходим js-движок для отображения ваших шаблонов как есть. LinkedIn упоминает об этом в своей статье:

  • Поддержка на стороне сервера: если у вас есть клиент, который не может выполнить JavaScript, такой как поисковый движок, страница должна быть обработана на стороне сервера. После написания один и тот же шаблон dust.js можно отобразить не только в браузере, но и на сервере, используя node.js или Rhino .

Итак, вы застряли с 2 вариантами:

  • использовать шаблонизатор с node.js, Rhino или
  • найдите движок шаблонов с поддержкой в ​​других технических стеках.

Как ни странно, благодаря посту, приведенному выше, я понял, что Усы , в которых есть библиотеки, доступные для большинства распространенных стеков, отлично справляются с этой задачей, поэтому я начну рассматривать интеграцию с моим проектом , (Не уверен, есть ли какие-либо библиотеки для Handlebars.js). Это должно позволить нам писать шаблоны Mustache.js как для сервера, так и для клиента, и заставлять их рендерить html на обоих концах с одинаковыми шаблонами.

РЕДАКТИРОВАТЬ: не должно, что решение на стороне сервера не обязательно должно быть на вашем языке / стеке выбора. Например, то, что вы используете Dust.js, означает, что вы должны кодировать все приложение в Node.JS. Это можно получить, выполнив сценарии компиляции с помощью команды оболочки.

РЕДАКТИРОВАТЬ: выясняется, что у Mustache, похоже, нет решения «предварительной компиляции», что означает, что шаблоны должны быть отображены непосредственно на странице для рендеринга на стороне клиента (т.е. без кэширования), что не является идеальным на 100%.

2 голосов
/ 18 февраля 2014

Я знаю, что это старый вопрос, но я как-то сюда попал, так что, наверное, другие.

Я также пытаюсь найти решение для создания RIA, которое будет работать на максимально возможном количестве устройств, отзывчивых, производительных и с хорошим UX.Реализован Django в бэкэнде с шаблонами, чтобы иметь возможность изящно отступать при необходимости.

Теперь я просматриваю все эти js-фреймворки и немного волнуюсь, в основном из-за производительности и доступности.

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

Идея взята из: http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/

С уважением, Майк

1 голос
/ 15 декабря 2011

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

Проект, веб-приложение для отладки HTTP-сервисов, находится на GitHub, если вы хотите посмотреть: Spyglass .

...