Was nützt Jade oder Lenker beim Schreiben von AngularJs-Apps?

120

Ich bin neu (ish) in den gesamten Javascript-Full-Stack-Anwendungen und völlig neu in Angular, also hatte ich gehofft, dass jemand hier den Rekord für mich klarstellen kann.

Warum sollte ich beim Schreiben clientseitiger Apps mit AngularJS ein Vorlagen-Framework wie Jade oder Lenker verwenden müssen?

Ich sollte sagen, dass ich auch nie eines dieser Template-Frameworks verwendet habe. Daher kenne ich die Vorteile nicht vollständig. Aber wenn ich mir zum Beispiel Lenker anschaue, macht es viele der gleichen Dinge wie in Angular, wie z. B. Schleifen usw.

Soweit ich das beurteilen kann, wäre es am sinnvollsten, die Vorlagen in Angular mit geeignetem HTML zu erstellen und dann alle Vorlagen clientseitig zu erstellen und dies mit einem API-First-Ansatz zu kombinieren, der beispielsweise Node und Mongo verwendet.

Der Grund für diese Verwirrung ist, dass viele der Beispiele, die ich auf GitHub finde, Jade verwenden, und es scheint mir nicht intuitiv zu sein.

Bitte erleuchten Sie mich und stellen Sie mich gerade. Ich würde gerne einige Best Practices von Leuten lernen, die viel mehr wissen als ich.

Vielen Dank

node.js mongodb angularjs handlebars.js pug Jay Pete
quelle

61

Diejenigen, die Jade in einer Angular-Umgebung zweifellos bevorzugen, verstehen nicht, dass die Ansichtslogik auf den Client und die Geschäftslogik auf den Server gehört, genau wie das OP es kommentiert hat.

Tun Sie es nicht, es sei denn, Sie haben einen sehr guten Grund dafür. In der Technik ist ein System mit weniger beweglichen Teilen ein zuverlässigeres System, und ein System, bei dem Schnittstellengrenzen (Client / Server) eingehalten werden, kann langfristig besser gewartet werden. Verwenden Sie daher nach Möglichkeit standardmäßig die einfachste Architektur und eine saubere Arbeitsteilung. Wenn Sie zwingende Gründe haben, tun Sie, was Sie müssen, aber Vorbehalt .

Kürzlich habe ich einen Code überprüft, bei dem Straight Angular Templating einen weitaus besseren Job gemacht hätte als das Mischen in Jade, nur weil die Einfachheit beibehalten wurde.

Abgesehen von der Vorlagenerweiterung bringt Jade nichts Wertvolles auf den Tisch, das Angular noch nicht liefert. Seien wir ehrlich: Wenn Sie das Grundprinzip "Komposition gegenüber Vererbung bevorzugen" (dh Teilweise) verwenden, sollten Sie niemals die Erweiterbarkeit von Vorlagen benötigen . Jade ist kaum "einfacher zu analysieren" als HTML. Sie sind nur trivial unterschiedlich, während Jade eine weitere Ebene der Indirektion hinzufügt - am besten vermieden.

Es gibt einen gültigen, speziellen Fall für serverseitiges Templating: Optimierung, wobei zu berücksichtigen ist, dass vorzeitige Optimierung im Allgemeinen eine schlechte Sache ist. Wenn die Leistung wirklich in Frage steht und Sie über die Serverkapazität verfügen, um dies zu bewältigen, kann das serverseitige Templating hilfreich sein. Dies gilt für Produkte wie Twitter und Basecamp, bei denen die Kosten für viel serverseitige Arbeit durch die Vorteile reduzierter Anforderungen an den Server ausgeglichen werden.

Bei Lenkern muss das (erstaunliche) clientseitige Templating von AngularJS nicht ersetzt werden.

Ingenieur
quelle

4

Hallo Nick, das ist auch die Antwort, die ich erreicht habe. Ich habe es nicht ganz so unverblümt ausgedrückt, aber ich stimme zu!

Jay Pete

60

@Nick, ich habe nicht viele Leute gesehen, die gerne XML / HTML schreiben / lesen. Sie sind wahrscheinlich die seltenste, die ich je gesehen habe und die dies tatsächlich zugunsten von etwas viel Trockenerem und Saubererem wie Jade befürwortet. Es gibt Unmengen von Bibliotheken, deren Zweck darin besteht, Menschen das Schreiben / Lesen von XML / HTML zu ersparen.

Alex K

12

Ich führe Komplexität nicht dort ein, wo sie nicht benötigt wird. Verbringen Sie Ihre Tage damit, C-Code oder schlechter C ++ - Vorlagen zu lesen, und Sie werden schnell feststellen, dass das mentale Parsen von HTML in der Tat eine sehr triviale Angelegenheit ist .

Ingenieur

35

"Es ist lächerlich, wenn ein Profi dies behauptet.", "Das mentale Parsen von HTML ist in der Tat eine sehr triviale Angelegenheit." Ich finde diese sehr erniedrigenden Kommentare. Möchten Sie lieber eine Assembly schreiben, weil das Parsen so einfach ist? Jade ist im Grunde das, was YAML für XML ist, wenn Sie Angular damit verwenden.

Philipp Gayret

7

Ich stimme @NickWiggill zu. Das mentale Parsen einer JADE-Vorlage im Vergleich zu rohem HTML erfordert für mich die gleiche "Wetware" -CPU-Zeit. Ich werde nicht so weit gehen zu sagen, dass Sie unprofessionell sind, wenn Sie nicht einverstanden sind, aber für mich ist es dasselbe. @ Philipp, Ihre Analogie, C / C ++ mit Assembly zu analysieren, ist gleichbedeutend mit dem Parsen von JADE mit HTML. Es gibt nur wenige Leute, wenn überhaupt, die sogar anfangen könnten, Assembly in nahezu Echtzeit zu analysieren, wohingegen, wie ich finde, das meiste Web Entwickler könnten HTML genauso einfach oder fast so einfach analysieren wie JADE.

Nomis

63

Ich verwende Jade, um Vorlagen zu generieren, die von AngularJS verwendet werden, weil ich es hasse, einfaches HTML zu schreiben. Es sieht ungefähr so aus:

.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'
    )

… Was meiner Meinung nach viel sauberer ist als einfaches HTML.

Thatmarvin
quelle

12

OK, Sie verwenden es also nur, weil Sie kein einfaches HTML schreiben möchten? Ist das der Hauptvorteil für Jade, gibt es noch andere Siege? Hat Jade jemals den HTML-Code in irgendeiner Weise durcheinander gebracht, sodass Sie ihn optimieren müssen, um eine bestimmte Ausgabe zu erhalten? Ich sehe die Gefahr, ohne weitere Notwendigkeit eine weitere Indirektionsebene hinzugefügt zu haben . Aber deshalb frage ich auch. Ich möchte den Wert hier verstehen.

Jay Pete

1

Ich habe tatsächlich mit Jade angefangen, bevor ich mich für Angular entschieden habe, also war es eine Gewohnheit, die eher festhielt als eine bewusste Entscheidung, aber es hat bisher gut geklappt. Das einzige Problem, das ich mit Jade habe, ist die Art und Weise, wie Leerzeichen behandelt werden (ich verwende Pretty = False), sodass ich in den Quelldateien Leerzeichen hinterließ, wenn ich ein Leerzeichen zwischen Tags hinzufügen muss. Ich fand Funktionen wie Includes und Mixins sehr nützlich.

Thatmarvin

Does ng-inlude, verwendet möglicherweise zusammen mit ng-srcunterscheiden sich sehr von Jades Mixins und und enthält?

Jay Pete

2

@ JayPete Jades Abstraktionsebene über HTML ist soooo dünn. Es ist eine der intuitivsten Übersetzungen zwischen Syntaxen, die ich je verwendet habe. In Jade passiert nur sehr wenig Magie, es sei denn, Sie beginnen mit Variablen und bedingter Logik (wie bei jeder Template-Engine). Es ist wirklich nicht so anders.

Chev

6

Einfach ist subjektiv.

Chev

46

Ich verstehe ehrlich gesagt nicht, warum sich die Leute für den Unterschied interessieren:

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

und das:

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

Nur dass ich eine etwas besser lesbare finde. Etwas . Ich verstehe nicht, warum die Leute so leidenschaftlich über das Thema sind. Es ist alles Bikeshedding. Der Unterschied ist vernachlässigbar und jeder kompetente Programmierer könnte nach fünf Sekunden bei Google leicht ineinander übersetzen. Verwenden Sie, was Sie wollen, und lassen Sie alle anderen über nichts streiten. Wähle deine Schlachten aus und diskutiere über Dinge, die wirklich wichtig sind, wie Atomreaktoren;)

Chev
quelle

2

Ich stimme zu, aber wenn Sie nur 1 Jade ifzur Gleichung hinzufügen , ändert sich plötzlich alles. Siehe oben über "Premium-Benutzer".

TWiStErRob

15

Ich bin anderer Meinung, eine 9-zeilige HTML-Seite ist völlig unrealistisch. Wenn Sie die Quelle der angezeigten Seite verwenden, werden jetzt 2320 Zeilen in 1580 konvertiert (mit html2jade ). Das sind mehr als 700 Zeilen Zeitverschwendung für jeden, der alle Stackoverflow-Vorlagen geschrieben hat

Philipp Gayret

2

@TWiStErRob Wenn Sie von Jade zu HTML wechseln, müssen Sie nur die Vorlage rendern, lol. Wenn Sie ifs in Ihrem Jade-Markup haben, benötigen Sie ohnehin bereits eine Art Template-Engine und müssen diese in ifdie von dieser Engine verwendete Syntax konvertieren . Ich verstehe Ihre Kritik nicht wirklich.

Chev

Wenn es in dieser ganzen Debatte darum geht, wo bedingte Logik hingehört (Server oder Client), dann denke ich, dass es eine noch albernere Debatte ist als ursprünglich. Es gibt Fälle für beide und Sie verwenden, je nachdem, was funktioniert, oder wenn beide, dann je nachdem, was der Einzelne bevorzugt. Ich habe mehr Zeit damit verbracht, solche Argumente zu haben, als jemals zuvor eine Entscheidung verflucht zu haben, eine Logik in eine serverseitige Ansicht zu bringen oder umgekehrt. Wenn wir alle über Effizienz streiten wollen, sollten wir stattdessen die Vorzüge dieses gesamten Gesprächs diskutieren.

Chev

3

@Philipp, ist es nicht sicher anzunehmen, dass die meisten entfernten Zeilen nur Tags schließen? Da die meisten Editoren beim Schreiben eines Eröffnungs-Tags automatisch schließende Tags hinzufügen, bezweifle ich, dass das Schreiben von 700 Zeilen tatsächlich eingespart wurde.

Semikolon

14

Sie müssen Lenker nicht mit AngularJS verwenden, da es eine eigene Vorlagen-Engine hat.
Der Grund, warum sie Jade verwenden, ist, dass es sich nur um einen Server-Renderer handelt, der in HTML kompiliert und später im Frontend von angleJS bereitgestellt wird.

TL; DR, auf dem Server können Sie eine beliebige Sprache [Jade, Haml, ...] verwenden, um nur eine HTML-Struktur für Ihre Anwendung zu generieren. Dies hat nichts mit angleJS zu tun, da es mit HTML gerendert wird und mit HTML arbeitet Laufzeit im Frontend.

Sie müssen Jade nicht auf dem Server verwenden, und ich schlage vor, es nicht zu verwenden, da dies neue Entwickler verwirren wird. In Projekten, die Sie sehen, verwenden sie Jade nur, weil es sauberer ist und sie daran gewöhnt sind. Wenn es mit angleJS verwendet wird, besteht die einzige Aufgabe darin, einfaches HTML ohne Logik zu generieren.

Dzung Nguyen
quelle

2

Wäre es nicht sauberer, das vom Server generierte HTML nicht zu verwenden und die Logik und die Ansicht vollständig zu trennen? Oder fehlt mir etwas? Warum ist Jade eine gute Idee, wenn Sie eine AngularJS-App schreiben?

Jay Pete

Ich sage nicht, dass es eine gute Idee ist, mit angleJS zu arbeiten. Jade hat nichts mit AngularJS zu tun. Um dies zu verdeutlichen, werde ich meine Antwort aktualisieren.

Dzung Nguyen

Ich verstehe, dass Jade nichts mit Angular zu tun hat. Ich versuche nur herauszufinden, was der Wert von Jade ist, indem ich den tatsächlichen HTML-Code in AngularJS-Partials schreibe. Ich sehe viele Leute, die es benutzen, und möchte verstehen, warum :-)

Jay Pete

2

Auch hier hat Jade nichts mit AngularJS zu tun. AngularJS verwendet HTML-Partials und wird von einer HTML-Seite bereitgestellt. Sie können alles verwenden, um die HTML-Seiten auf der Serverseite zu erstellen, einschließlich Jade oder Haml. Jade / Haml sind keine wirklichen Vorlagen für Frameworks. Sie sind mehr Präprozessoren. Die richtige Frage wäre "Lenker oder Schnurrbart oder andere JavaScript-Vorlagensprachen"

Eddie Monge Jr

@ JayPete Der Vorteil der Verwendung von Jade bei der Entwicklung von AngularJS, möglicherweise aufgrund der Jade-Syntax, ist sauberer. Trotzdem ist es aufgrund meiner Erfahrung keine große Hilfe. Also mach es einfach mit HTML :)

Dzung Nguyen

8

Die akzeptierte Antwort ist etwas einseitig und vernachlässigt die Tatsache, dass jedes Setup des Pre-Compilers für HTML für JEDE Art von HTML-Projekt von großem Nutzen ist: Komposition und daraus resultierende Markup-Flexibilität.

Allein an einer eckigen App arbeiten? Probieren Sie Jade aus.

Jade verbessert Ihre Fähigkeit, HTML zu modularisieren, verringert den Zeitaufwand für das Debuggen von HTML und fördert das Erstellen von Markup-Inventaren.

Während der Entwurfszeit kann es zu einer schrecklichen Iteration von HTML-Teilen kommen. Wenn die HTML-Ausgabe auf einer Reihe von Jade-Dateien basiert, kann das Team problemlos auf sich ändernde Anforderungen reagieren. Das Ändern des Markups durch erneutes Zusammenstellen von Jade-Includes ist wesentlich robuster als das erneute Schreiben von reinem HTML.

Davon abgesehen erkenne ich die allgemeine Abneigung gegen das Mischen von Winkel mit Jade in der Produktions- oder Entwicklungsphase. Die Einführung eines weiteren erforderlichen Satzes von Syntaxkenntnissen ist für die meisten Teams eine schlechte Idee, und die Verwendung von Jade kann ineffizientes Projektmanagement verbergen, indem einige Arbeiten abstrahiert werden, die nach DRY-Prinzipien verboten wären (z. B. Faulheit bei der Vorbereitung von Markups).

Mirko
quelle

2

Keine Ahnung, warum dies eine -1 hatte, aber ich habe dem entgegengewirkt.

Mark K Cowan

Es wurde herabgestuft, weil es nicht ganz wahr ist. Jade unternimmt nichts, um HTML zu modularisieren. Sie können buchstäblich dasselbe über einfaches HTML sagen, wenn es mit einem Pre-Compiler richtig verwendet wird.

Justin

1

Sie haben Recht, das gilt auch für alle Pre-Compiler. Für Jade können Mixins jade-lang.com/reference/mixins die Modularisierung verbessern (insbesondere im Vergleich zu Vanille-HTML). Wenn Sie an einer Modularisierung von HTML interessiert sind, könnte Ihnen auch polymer-project.org gefallen .

Mirko

7

Ich habe alle Antworten oben gelesen und war ein bisschen überrascht, dass niemand einen Aspekt erwähnt hat, der die Verwendung von Jade über das Generieren von AngularJS-Vorlagen zu einer sehr nützlichen Sache macht.

Wie bereits erwähnt, ist in der Produktion der Unterschied zwischen der Eingabe von rohem HTML und Jade in realistischen Szenarien tatsächlich bemerkenswert. Wichtiger ist jedoch, dass wir manchmal dynamisch geänderte und neu initialisierte AngularJS-Vorlagen benötigen.

Um es einfach auszudrücken , manchmal müssen wir HTML über innerHTML ändern und dann AngularJS zwingen, Inhalte neu zu kompilieren. Und genau diese Art von Aufgabe, wenn das Generieren solcher Ansichten über Jade Vorteile bringt.

AngularJS funktioniert auch gut mit Modellen, deren Struktur per Definition bekannt ist. Tatsächlich kommt es vor, dass wir die genaue Struktur nicht kennen (stellen Sie sich beispielsweise JSON-Renderer vor). AngularJS wird hier ziemlich ungeschickt sein (selbst wenn eine eckige App erstellt wird), während Jade die Arbeit erledigt.

shabunc
quelle

2

Sie können eckige Vorlagen über Jade einfügen.

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

Für das Zwischenspeichern von Vorlagen halte ich dies für weniger fragil als das Einfügen der maskierten Vorlagen in die Javascript-Dateien.

Siehe: https://docs.angularjs.org/api/ng/service/$templateCache

Austin Bete
quelle

2

Jade ist definitiv viel näher an HTML als Haml zu sagen. Der Kontextwechsel ist also eigentlich sehr minimal. Es fehlt jedoch nicht ganz. Für einen Entwickler ist das möglicherweise überhaupt nicht wichtig. Wenn Ihr Designer Sie jedoch fragt, wie ein verschachteltes Tag ordnungsgemäß funktioniert, lösen Sie ein unnötiges Problem, das Sie ursprünglich erstellt haben.

HTML kann immer noch gut leserlich geschrieben werden und Partials können verwendet werden, um es verständlicher zu machen. 500 Zeilen von allem sind schwer zu lesen - sei es Jade oder HTML.

Hier ist eine Jade-Vorlage

.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

Und das entsprechende 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>

Wenn ich leserlich geschrieben bin, sehe ich HTML nicht als besonders benachteiligt an, um einen Wechsel zu rechtfertigen. Sicher genug, die eckigen Klammern sind ein Dorn im Auge. Aber ich hätte sie lieber, als mich mit den Zweifeln des Designers auseinandersetzen zu müssen, ob die von mir eingeführte Indirektion das HTML bricht. (Es kann nicht. Aber zu beweisen, dass es keine würdige Anstrengung ist)

suryasankar
quelle

0

Zunächst benötigen Sie immer eine Art serverseitiges Templating.

Reines clientseitiges Templating hat große Nachteile in der Ladezeit, daher wird es häufig durch das Rendern einiger statischer Elemente auf dem Server verringert. Auf diese Weise werden beim teilweisen Laden einer Seite durch den Benutzer bereits einige Elemente auf der Seite angezeigt.

Und gut, Vorlagen sind in diesem Fall praktisch, obwohl die Leute manchmal stattdessen einen statischen HTML-Generator wie Jekyll verwenden.

Es gibt einen anderen Grund für die Verwendung von Jade, der hier zuvor nicht erwähnt wurde.

Leerzeichen.

Wenn Sie von Menschen verwaltbares HTML mit Einrückungen und Zeilenumbrüchen schreiben, führt jeder einzelne Zeilenumbruch zu einem Leerzeichen-Textknoten. In einigen Fällen kann dies die Formatierung von Inline-Elementen ziemlich verschrauben und den Javascript-Code seltsamer machen.

Weitere Informationen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

Wenn Sie Jade-Code schreiben, wird dieser in einzeiligen HTML-Code kompiliert, bei dem dieses Problem nicht auftritt.

Alex
quelle

> [FasteRender] ( meteorhacks.com/fast-render ) ist eine Lösung, die kein serverseitiges Rendern umfasst. Es sendet die zum Rendern Ihrer ersten Seite erforderlichen Daten mit dem von Meteor geladenen anfänglichen HTML-Code, sodass die Seite unmittelbar nach dem Laden des JavaScript in den Client gerendert wird. Es liefert das gleiche Ergebnis wie Server Side Rendering (SSR), sendet jedoch weiterhin Daten über das Kabel, ohne eines der Kernprinzipien des Meteors zu verletzen.

Max Hodges

0

Wenn Sie in einem Team arbeiten, zieht es das Front-End wahrscheinlich vor, die Seiten als statisches HTML zu gestalten. Das Übersetzen dieses statischen HTML-Codes in dynamische Vorlagen ist eine Fehlerquelle, und das Hinzufügen von Jade fügt einen solchen Übersetzungsschritt hinzu.

Wie viele andere bevorzuge ich die Einfachheit!

Arjan
quelle

Was nützt Jade oder Lenker beim Schreiben von AngularJs-Apps?

Antworten: