Какая польза от Jade или Handlebars при написании приложений AngularJs

113

Я новый (ish) для всех приложений полного стека javascript и совершенно новый для Angular, поэтому я надеялся, что кто-то может записать запись прямо для меня здесь.

Зачем мне нужно использовать структуру шаблонов, такую ​​как Jade или Handlebars, при написании приложений на стороне клиента с помощью AngularJS.

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

Насколько я могу судить, было бы разумно создать шаблоны в Angular, используя надлежащий HTML, а затем сделать все шаблонирование клиентской стороны и объединить это с первым подходом API, используя node и mongo, например.

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

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

Спасибо

Теги:
handlebars.js
pug

10 ответов

55
Лучший ответ

Те, кто, несомненно, одобряют Jade в среде Angular, не понимают, что логика представления принадлежит клиенту и бизнес-логике на сервере, так же, как прокомментировал OP.

Не делай этого, если у тебя нет веских оснований для этого. В технике система с меньшим количеством подвижных частей является более надежной системой, и система, в которой соблюдаются границы интерфейса (клиент/сервер), более долговечна в обслуживании, поэтому по умолчанию простейшая архитектура и чистое разделение труда, если это возможно. Если у вас есть основные причины, сделайте то, что вам нужно, но предостерегайте emptor.

Недавно я просмотрел некоторый код, где прямая Angular templating сделала бы намного лучшую работу, чем смешивание в Jade, просто поддерживая простоту.

Помимо расширения шаблона, Jade не приносит ничего полезного в таблицу, которую Angular не предлагает. Позвольте быть честным: используя звуковой принцип "композиции предпочтения над наследованием" (т.е. Частичные), вам никогда не понадобится расширяемость шаблонов. Джейд вряд ли "легче разобрать", чем HTML. Они тривиально отличаются друг от друга, в то время как Джейд добавляет еще один уровень косвенности - лучше всего избегать.

Существует один действительный специализированный случай для шаблонов на стороне сервера: оптимизация, помня о том, что преждевременная оптимизация обычно является плохим. В тех случаях, когда производительность действительно проблема, и у вас есть емкость сервера, чтобы сэкономить на этом, серверная процедура может помочь. Это относится к таким продуктам, как Twitter и Basecamp, где затраты на работу на стороне сервера компенсируются увеличением количества запросов на сервер.

Что касается Handlebars, нет необходимости заменять шаблоны на стороне клиента AngularJS (удивительные).

Поделиться
  • 4
    Привет, Ник, это ответ, которого я тоже достиг. Я не выразился так прямо, но я согласен!
  • 59
    @ Ник, я не видел много людей, которым нравится писать / читать XML / HTML. Вы, наверное, самый редкий из тех, кого я когда-либо видел, кто на самом деле выступает за что-то более сухое и чистое, как Джейд. Существует множество библиотек, цель которых - избавить людей от написания / чтения XML / HTML.
Показать ещё 13 комментариев
65

Я использую Jade для создания шаблонов, потребляемых AngularJS, потому что я ненавижу писать простой HTML. Это выглядит примерно так:

.control-group(
  ng-form
  name='emailGroup'
  ng-class='{"ng-error": emailGroup.$invalid}'
)
  label.control-label Email
  .controls
    input(
      type='email'
      ng-model='user.email'
      required
      placeholder='[email protected]'
      focus-on='focusEmail'
    )

..., который, по моему мнению, намного чище, чем простой HTML.

Поделиться
  • 12
    Итак, вы используете его только потому, что вам не нравится писать простой HTML? Это главное преимущество для Джейд, есть ли другие победы? Неужели Jade когда-нибудь портит HTML, так что вам нужно настроить его для получения определенного результата? Я вижу опасность добавления еще одного слоя косвенности без реальной необходимости. Но опять же, вот почему я спрашиваю. Я хочу понять ценность здесь.
  • 1
    На самом деле я начал с Jade до того, как ушел с Angular, так что это была привычка, а не осознанный выбор, но до сих пор она работала хорошо. Единственная проблема, с которой я сталкиваюсь с Jade - это то, как она обрабатывает пробелы (я использую pretty = false), поэтому я получаю конечные пробелы в исходных файлах всякий раз, когда мне нужно добавить пробел между тегами. Я нашел полезные функции, такие как включает в себя и mixins.
Показать ещё 6 комментариев
41

Я честно не понимаю, почему люди заботятся о различии между этим:

<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="//angular.js">
 </body>
</html>

и это:

html(ng-app="ng-app")
  // Body tag augmented with ngController directive  
  body(ng-controller="MyController")
    input(ng-model="foo", value="bar")
    // Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup
    button(ng-click="changeFoo()") {{buttonText}}
    script(src="//angular.js")

За исключением того, что я нахожу немного более понятным для человека. Слегка. Я не понимаю, почему люди так горячо относятся к этой теме. Все это bikeshedding. Разница незначительна, и любой компетентный программист может легко перевести один в другой через пять секунд в Google. Используйте то, что вы хотите, и пусть все остальные ссорятся ни с чем. Выбирайте свои битвы и занимайтесь дебатами о вещах, которые действительно имеют значение, например, атомные реакторы;)

Поделиться
  • 2
    Я согласен, хотя, если вы просто добавите 1 Jade, if к уравнению, все вдруг изменится. Смотрите выше о «премиум-пользователях».
  • 14
    Я не согласен, html-страница из 9 строк совершенно нереальна. взяв источник страницы, которую я сейчас просматриваю, преобразует 2320 строк в 1580 (используя html2jade ). Это более 700 строк времени, потраченных впустую для тех, кто написал все шаблоны стека
Показать ещё 9 комментариев
14
  • Вам не нужно использовать Handlebars с AngularJS, поскольку у него есть собственный механизм шаблонов.
  • Причина, по которой они используют Jade, потому что это просто средство отображения сервера, которое будет скомпилировано в html и будет обслуживаться angularJS позже на интерфейсе.

Итак, TL; DR, на сервере, вы можете использовать любой язык [jade, haml,...] для создания только html-структуры для вашего приложения, он не имеет ничего общего с angularJS, поскольку он будет отображать и работать с HTML во время выполнения на интерфейсе.

Вам не нужно использовать Jade на сервере, и я предлагаю не использовать его, поскольку он запутает новых разработчиков. В проектах, которые вы видите, они используют Jade только потому, что они более чистые, и они используются для него, и если он использует с angularJS, то только задание состоит в том, чтобы генерировать простой html без какой-либо логики.

Поделиться
  • 2
    Разве не было бы чище не использовать html, сгенерированный сервером, и полностью отделить логику и представление? Или мне чего-то не хватает? Почему Джейд хорошая идея при написании приложения AngularJS?
  • 0
    Я не говорю, что это хорошая идея для использования с angularJS. Джейд не имеет ничего общего с angularJS. Чтобы было ясно, я обновлю свой ответ.
Показать ещё 4 комментария
8

Принятый ответ несколько односторонний и пренебрегает тем фактом, что любая настройка предварительного компилятора для HTML имеет большое значение для ЛЮБОГО проекта HTML-проекта: состав и гибкость разметки.

Работа только в приложении angular? Попросите Джейд попробовать.

Jade улучшает вашу способность модулизовать HTML, уменьшает количество времени, потраченного на отладку HTML, а также поощряет сборку разметки.

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

Говоря, я признаю общее неприятие смешения angular с нефритом на стадии производства или разработки. Внедрение другого обязательного набора знаний по синтаксису является плохой идеей для большинства команд, и использование нефрита может скрыть неэффективное управление проектами, абстрагировав некоторые работы, которые будут запрещены DRY-принципами (например, ленивы при подготовке разметки).

Поделиться
  • 2
    Понятия не имею, почему у этого был -1, но я противостоял этому.
  • 0
    Это было отвергнуто, потому что это не совсем верно. Jade ничего не делает для модульности HTML. Вы можете буквально сказать то же самое о простом HTML, если он используется правильно с прекомпилятором.
Показать ещё 1 комментарий
7

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

Как уже было сказано, в производстве реалистичные сценарии различий между типизацией raw html и jade на самом деле примечательны, но тем важнее, что мы никогда не должны забывать, так это то, что иногда нам требуется динамически изменено и повторно инициализировано шаблоны углов.

Проще говоря, иногда нам нужно изменить html через innerHTML, а затем заставить AngularJS перекомпилировать содержимое. И это именно тот тип задачи, когда создание таких представлений через нефрит может принести пользу.

Кроме того, AngularJS хорошо работает с моделями, структура которых по определению хорошо известна. На самом деле, случается так, что мы на самом деле не знаем точной структуры (предположим, скажем, JSON renderer). AngularJS будет довольно неуклюжим здесь (даже если они строят приложение angular), в то время как нефрит выполнит эту работу.

Поделиться
2

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

HTML все еще можно писать очень разборчиво, а частичные можно использовать, чтобы сделать его более понятным. 500 строк ничего трудно читать - будь то Jade или HTML.

Вот шаблон нефрита

.product-container

    .input-group.msB.col-md-5.no-padding
        .fnt-light-navyblue.mtB(for='name')
            strong Name the sticker
        input.full-input(type='text', placeholder='Awesome Batman Sticker')
    .clear

    .form-group.mmT
        label.form-label.fnt-light-navyblue
            strong Choose size
        .selector-group(ng-repeat="size in sizes", ng-class="{ 'msT': !$first}")
            - raw
            span.radio
                input.radio(name='choose_sticker_size',
                            ng-model="selectedSize",
                            type='radio',
                            value='{{size}}',
                            id="sticker-{{size}}")
                span.fake-radio
            label(for='sticker-{{size}}') {{size}} inch
            - endraw
    // end form-group
    .clear

И эквивалентный HTML

<div class="product-container">

    <div class="input-group msB col-md-5 no-padding">
        <div for="name" class="fnt-light-navyblue mtB">
            <strong>Name the product</strong>
        </div>
        <input type="text" placeholder="Awesome Batman Sticker" class="full-input" />
    </div>
    <div class="clear"></div>

    <div class="form-group mmT">
        <label class="form-label fnt-light-navyblue">
            <strong>Choose size</strong>
        </label>
        <div
            class="selector-group"
            ng-class="{ 'msT': !$first}"
            ng-repeat="size in sizes">
                {% raw %}
                <span class="radio">
                    <input
                        id="sticker-{{size}}"
                        class="radio"
                        name="choose_sticker_size"
                        ng-model="selectedSize"
                        type="radio"
                        value="{{ size }}" />
                    <span class="fake-radio"></span>
                </span>
                <label for="sticker-{{size}}">{{size}}</label>
                {% endraw %}
        </div>
    </div><!-- end form-group -->
    <div class="clear"></div>
</div>

Когда я читаю разборчиво, я не вижу, чтобы HTML был особенно ущемлен, чтобы гарантировать переход. Разумеется, скобки angular - это бельмо на глазу. Но я предпочел бы иметь их, чем иметь дело с дизайнером, сомнения в том, что введенная косвенность нарушает html. (Возможно, это не так, но доказать это не стоит)

Поделиться
2

Вы можете включить angular шаблоны через Jade.

script(type="text/ng-template", id="admin")
  include partials/admin

Для кэширования шаблонов я воспринимаю это гораздо менее хрупкое, чем включение экранированных шаблонов в файлы javascript.

Смотрите: https://docs.angularjs.org/api/ng/service/$templateCache

Поделиться
0

При работе в команде front-end, вероятно, предпочитает создавать свои страницы как статические html. Перевод этого статического html в динамические шаблоны является источником ошибок, и добавление jade добавляет такой шаг перевода.

Как и многие другие, я выступаю за простоту!

Поделиться
0

Прежде всего, вам всегда нужен какой-то серверный шаблон.

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

И хорошо, в этом случае удобны шаблоны, хотя люди иногда используют статический html-генератор, например, Jekyll.

Существует еще одна причина использования Jade, о которой ранее не упоминалось.

Пробелы.

Если вы пишете человеко-поддерживаемый HTML с углублениями и перерывами, каждый отдельный штрих приведет к пробелу node. В некоторых случаях он может сильно форматировать форматирование встроенных элементов и сделать код javascript более странным.

Подробнее вы можете прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

Если вы пишете Jade-код, он скомпилирован в однострочный HTML-код, который не имеет этой проблемы.

Поделиться
  • 0
    > [FasteRender] ( meteorhacks.com/fast-render ) - это решение, не требующее рендеринга на стороне сервера. Он отправляет данные, необходимые для отображения вашей первой страницы с исходным HTML-кодом, загруженным из Meteor, поэтому страница отображается сразу после загрузки JavaScript-кода клиенту. Он дает тот же результат, что и серверный рендеринг (SSR), но все же отправляет данные по проводам, не нарушая один из основных принципов Метеора.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню