Яка користь від нефриту або руль при написанні програм AngularJs

120

Я новачок (іш) у всіх програмах для повнотекстових стеків javascript і абсолютно нова у Angular, тому я сподівався, що хтось зможе поставити запис мені прямо тут.

Чому мені потрібно використовувати шаблонні рамки, такі як Jade або Handlebars, коли пишуть клієнтські програми за допомогою AngularJS.

Я повинен сказати, що я ніколи не використовував жодної з цих шаблонових рамок. Тому я не знайомий з перевагами повністю. Але, наприклад, коли я дивлюся на руль, він робить багато таких же речей, як і в кутових, таких як циклічність тощо.

Наскільки я можу сказати, було б найрозумніше створити шаблони в Angular за допомогою належного HTML, а потім виконати всі шаблони клієнтської сторони, а також поєднати це з першим підходом API, використовуючи, наприклад, node та mongo.

Причина такої плутанини полягає в тому, що багато прикладів, які я знаходжу на GitHub, використовують Jade, і мені це здається протиінтуїтивним.

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

Дякую

— Джей Піт
джерело

61

Ті, хто беззаперечно віддає перевагу Джейд в кутовому середовищі, не розуміє, що логіка перегляду належить клієнту, а ділова логіка на сервері, як коментує ОП.

Не робіть цього, якщо у вас немає дуже вагомих причин це зробити. В інженерному відношенні система з меншою кількістю рухомих частин є більш надійною системою, а система, де дотримуються межі інтерфейсу (клієнт / сервер), є більш досяжною в довгостроковій перспективі, тому за замовчуванням для найпростішої архітектури та чистого розподілу праці, якщо це можливо. Якщо у вас є найважливіші причини, зробіть все, що вам потрібно, але застережте виправника .

Нещодавно я переглянув деякий код, де прямі кутові шаблони зробили б набагато кращу роботу, ніж змішування в Jade, просто завдяки підтримці простоти.

Крім розширення шаблону, Джейд не приносить нічого гарного столу, який Angular ще не постачає. Будемо чесними: використовуючи звуковий принцип "користь композиції над спадщиною" (тобто частковість), вам ніколи не знадобиться розширюваність шаблону. Джейд навряд чи "простіше розібратися", ніж HTML. Вони, але банально відрізняються, тоді як Джейд додає ще один рівень непрямості - найкраще уникати.

Існує один дійсний, спеціалізований випадок для шаблону на стороні сервера: Оптимізація, пам’ятаючи, що передчасна оптимізація, як правило, погана річ. Якщо продуктивність справді викликає сумніви, і у вас є запас можливостей сервера для вирішення цього питання, може допомогти шаблонування на стороні сервера. Це стосується таких продуктів, як Twitter та Basecamp, де витрати на виконання великої кількості роботи на сервері компенсуються за рахунок збільшення запитів на сервер.

Що стосується рульових панелей, то не потрібно замінювати (дивовижні) шаблони на стороні клієнта AngularJS.

— Інженер
джерело

4

Привіт Нік, до цього я і дійшов відповіді. Я не говорив про це так прямо, але я згоден!

— Джей Піт

60

@Nick, я не бачив багато людей, які люблять писати / читати XML / HTML. Ти, мабуть, найрідкісніший, кого я коли-небудь бачив, хто насправді виступає за те, що на користь чогось набагато сухішого та чистішого, як Джейд. Є багато бібліотек, мета яких - врятувати людей від написання / читання XML / HTML.

— Алекс К

12

Я не ввожу складність там, де вона не потрібна. Проведіть день читання коду C або гірше шаблонів, C ++, і ви швидко зрозумієте , що подумки розбору HTML є дуже тривіальне питання на самому справі .

— Інженер

35

"сміється для будь-якого професіонала, який це стверджує.", "розумовий аналіз HTML - це справді дуже тривіальна справа". Я вважаю ці дуже принизливими коментарями. Ви б краще написали збірку, тому що так легко розібратися? Jade - це в основному YAML для XML, коли ви використовуєте Angular з ним.

— Philipp Gayret

7

Я згоден з @NickWiggill. Для розумового розбору шаблону JADE проти сировини HTML для мене потрібен рівний час процесора "wetware". Я не піду так далеко, щоб сказати, що ти непрофесійний, якщо ти не згоден, але для мене це те саме. @ Філіппе, ваша аналогія розбору C / C ++ до того, що збірка дорівнює синтаксичному розбору JADE на HTML, мало людей, якщо такі є, хто навіть міг би почати розбирати збірку майже в режимі реального часу, тоді як, я вважаю, більшість веб розробники могли проаналізувати HTML так само легко або майже так просто, як JADE.

— номіс

63

Я використовую 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='you@example.com'
      focus-on='focusEmail'
    )

… Що, на мою думку, набагато чистіше, ніж звичайний HTML.

— thatmarvin
джерело

12

Гаразд, ви використовуєте його лише тому, що вам не подобається писати звичайний HTML? Це головна користь для Джейд, чи є інші перемоги? Чи невже Джейд коли-небудь псує HTML, тож вам доведеться налаштувати його, щоб отримати певний вихід? Я бачу небезпеку додати ще один шар непрямості без фактичної потреби. Але знову ж таки, тому я прошу. Я хочу зрозуміти значення тут.

— Джей Піт

1

Я насправді почав з Джейд, перш ніж поїхав з Angular, тому це звичка застрягла, а не свідомий вибір, але це все добре вийшло. Єдине питання, яке я маю з Jade, - це те, як він обробляє білі пробіли (я використовую досить = хибно), тому в кінцевому підсумку я маю пробіли пробілів у вихідних файлах, коли мені потрібно додати пробіл між тегами. Я знайшов такі функції, як включає і міксин дуже корисні.

— thatmarvin

Чи ng-inlude, можливо, що використовується разом із ним ng-src, сильно відрізняється від нефритів і включає і включає?

— Джей Піт

2

Шар @JayPete Джейд абстракції над HTML є тааак тонким. Це один з найбільш інтуїтивних перекладів між синтаксисами, які я коли-небудь використовував. У Jade дуже мало магії, за винятком випадків, коли ви починаєте копатися зі змінними та умовною логікою (як це було б із будь-яким механізмом шаблону). Це насправді не все так різне.

— Шев

6

Просте суб'єктивне.

— Шев

46

Я, чесно кажучи, не розумію, чому люди переймаються різницею між цим:

<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")

За винятком того, що я знаходжу ще одне, легше для людини зрозуміле. Трохи . Я не розумію, чому люди настільки гаряче ставляться до цієї теми. Це все на велосипедах. Різниця незначна, і будь-який компетентний програміст міг би легко перевести одне в інше через п'ять секунд в Google. Використовуйте те, що хочете, і нехай всі інші сваряться ні за що. Вибирайте свої бої та вступайте в дебати про речі, які насправді мають значення, як-от атомні реактори;

— Шев
джерело

2

Я згоден, хоча якщо ви просто додасте ifдо рівняння 1 нефрит , все раптом змінюється. Дивіться вище про "преміальних користувачів".

— TWiStErRob

15

Я не погоджуюсь, що HTML-сторінка на 9 рядків абсолютно нереальна. беручи джерело сторінки, яку я переглядаю, зараз перетворює 2320 рядків у 1580 (за допомогою html2jade ). Це витрачає більше 700 рядків часу для тих, хто написав усі шаблони

— стаціонарного потоку

2

@TWiStErRob Якщо ви переходите від нефриту до HTML, все, що вам потрібно зробити, - це зробити шаблон, хаха. Якщо у вас є ifрозмітка в нефритовому кольорі, то у вас все-таки є необхідність у якомусь двигуні шаблону, і вам доведеться конвертувати його в той ifсинтаксис, який використовується цим двигуном. Я не дуже розумію вашу критику.

— Шев

Якщо вся ця дискусія стосується того, куди належить умовна логіка (сервер чи клієнт), то я думаю, що це ще дурніше, ніж я спочатку. Є випадки для обох, і ви використовуєте те, що працює, або якщо вони обидва, то залежно від того, хто віддає перевагу. Я витрачав більше часу на такі аргументи, ніж я коли- небудь витрачав на прокляття минулого рішення про те, щоб ввести певну логіку у вид на стороні сервера або навпаки. Якщо ми всі хочемо сперечатися про ефективність, тоді нам слід обговорити достоїнства всієї цієї розмови.

— Шев

3

@Philipp, чи не можна припустити, що більшість вилучених рядків є лише тегами, що закриваються? Оскільки більшість редакторів автоматично додають теги, що закриваються, коли ви пишете вступний тег, я сумніваюся, що це фактично заощадило написання 700 рядків.

— напівколонка

14

Вам не потрібно використовувати рулі з AngularJS, оскільки у нього є власний двигун шаблонів.
Причина, по якій вони використовують Jade, полягає в тому, що це просто серверний рендерінг, який буде зібраний у html та обслуговується angularJS пізніше на фронті.

Тож TL; DR, на сервері, ви можете використовувати будь-яку мову [нефрит, хамль, ...], щоб створити структуру HTML лише для вашої програми, вона не має нічого спільного з angularJS, оскільки вона візуалізує та працюватиме з HTML на Час виконання на фронтенді.

Вам не доведеться використовувати Jade на сервері, і я пропоную не використовувати, оскільки це заплутає нових розробників. У проектах, які ви бачите, вони використовують Jade тільки тому, що вона чистіша, і вони звикли до неї, а якщо вона використовується з angularJS, лише завдання полягає в генерації простого HTML без логіки.

— Джунг Нгуен
джерело

2

Чи не було б чистіше не використовувати html-сервер, створений на сервері, і повністю розділити логіку та вигляд? Або щось мені не вистачає? Чому Джейд є хорошою ідеєю при написанні програми AngularJS?

— Джей Піт

Я не кажу, що це хороша ідея для використання з angularJS. Jade не має нічого спільного з angularJS. Щоб це було зрозуміло, я оновлю свою відповідь.

— Дзунг Нгуен

Я розумію, що Джейд не має нічого спільного з Angular. Я просто намагаюся з'ясувати, у чому полягає Джейд, над тим, як виписати фактичний HTML у партії AngularJS. Я бачу дуже багато людей, які його використовують, і хочу зрозуміти, чому :-)

— Джей Піт

2

Знову ж, Джейд не має нічого спільного з AngularJS. AngularJS використовує частинки HTML і подається зі сторінки HTML. Ви можете використовувати будь-що для створення HTML-сторінок на стороні сервера, включаючи Jade або Haml. Jade / Haml насправді не є шаблонні рамки. Вони більше препроцесори. Правильним питанням було б "Рулі або вуса чи інші мови шаблонів JavaScript"

— Eddie Monge Jr.

@JayPete Перевага використання Jade при розробці angularJS, можливо, синтаксис Jade є більш чистим. Але все-таки, завдяки моєму досвіду, це не дуже допоможе. Тому просто зробіть це з html :)

— Dzung Nguyen

8

Прийнята відповідь дещо однобічна і нехтує тим фактом, що будь-яка установка попереднього компілятора для HTML має велике використання для будь-якого типу HTML-проекту: Склад та гнучкість розмітки.

Робота в самоті над кутовим додатком? Спробуйте Джейд.

Jade покращує вашу здатність до модуляції HTML, зменшує кількість часу, який ви витратили на налагодження HTML, а також заохочує створення запасів розмітки.

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

Як сказано, я визнаю загальну неприязнь до змішування кутового з нефритом на стадії виробництва або розвитку. Введення іншого необхідного набору знань з синтаксису є поганою ідеєю для більшості команд, і використання нефриту може приховати неефективне управління проектами, відмовившись від роботи, забороненої принципами DRY (наприклад, ледачі на підготовці розмітки)

— Мирко
джерело

2

Поняття не маю, чому це було -1, але я йому протистояв.

— Марк К Коуан

Це було занижене, оскільки це не зовсім правда. Джейд нічого не робить для модуляції HTML. Ви можете буквально сказати ті самі речі про звичайний HTML, якщо він використовується правильно з попереднім компілятором.

— Джастін

1

Ви маєте рацію, те ж саме можна сказати і про всі попередні компілятори. Для Jade Mixins jade-lang.com/reference/mixins може покращити модуляризацію (особливо порівняно з HTML ванілі). Якщо ви зацікавлені в модуляризації HTML, вам також може сподобатися polymer-project.org .

— Мирко

7

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

Як уже було сказано, у виробництві реалістичні сценарії різниці між введенням сирого html та нефриту насправді помітні, але найважливіше, що ми ніколи не повинні забувати, це те, що іноді нам потрібні динамічно змінені та реініціалізовані шаблони angularjs.

Простіше кажучи, іноді нам потрібно змінити html через innerHTML, а потім змусити AngularJS перекомпілювати вміст. І саме такий тип завдання, коли генерування таких поглядів за допомогою нефриту може мати користь.

Також AngularJS добре працює з моделями, структура яких за визначенням добре відома. Власне, трапляється, що ми точно не знаємо точної структури (уявімо, скажімо, рендерінг JSON). AngularJS тут буде досить незграбним (навіть якщо будуватимуть кутовий додаток), тоді як нефрит зробить роботу.

— шабунк
джерело

2

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

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

Що стосується шаблонів кешування, я сприймаю це як набагато менш тендітний, ніж включення втілених шаблонів у файли javascript.

Дивіться: https://docs.angularjs.org/api/ng/service/$templateCache

— Остін Моліться
джерело

2

Джейд, безумовно, набагато ближче до html, ніж скажіть Haml. Отже, перемикач контексту насправді дуже мінімальний. І все-таки вона зовсім не відсутня. Це може не мати значення для розробника. Але коли ваш дизайнер приходить і запитує вас, як змусити вкладений тег працювати належним чином, ви вирішуєте зайву проблему, яку ви створили в першу чергу.

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

Ось шаблон Jade

.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-код є особливо знедоленим, щоб гарантувати перемикання. Звичайно, кутові дужки - це вічко. Але я вважаю за краще мати їх, ніж стикатися з сумнівами дизайнера, чи невдалене мені втручання порушує html. (Можливо, це не так. Але довести це - не гідні зусилля)

— сурясанкар
джерело

0

Перш за все, вам завжди потрібні якісь шаблони на стороні сервера.

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

І добре, в цьому випадку шаблони зручні, хоча люди іноді використовують статичний HTML-генератор на зразок Джекілла.

Є ще одна причина використання Джейд, про яку раніше не згадувалося.

Пробіл.

Якщо ви пишете HTML, що підтримується людиною, з відступами та розривами рядків, кожен окремий рядок призводить до текстового вузла пробілу. Це може в значній мірі накручувати формат вбудованих елементів у деяких випадках і робить код JavaScript більш дивним.

Більш детальну інформацію ви можете прочитати тут: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

Якщо ви пишете код Jade, він збирається в однорядковий HTML, у якого немає цієї проблеми.

— алекс
джерело

> [FasteRender] ( meteorhacks.com/fast-render ) - це рішення, яке не передбачає візуалізацію на стороні сервера. Він надсилає дані, необхідні для візуалізації вашої першої сторінки із початковим HTML, завантаженим з Meteor, тому ця сторінка надається відразу після завантаження JavaScript клієнту. Це дає ідентичний результат, як і серверне рендеринг (SSR), але все ж надсилає дані по дроту, не порушуючи одного з основних принципів Метеора.

— Макс Ходжес

0

Працюючи в команді, передній фактор, ймовірно, віддає перевагу проектуванню своїх сторінок як статичний html. Переклад статичного HTML у динамічні шаблони є джерелом помилок, а додавання нефриту додає такий крок перекладу.

Як і багато інших, я віддаю перевагу простоті!

— Арджан
джерело