Apa gunanya Jade atau Handlebars saat menulis aplikasi AngularJs

120

Saya baru (ish) untuk seluruh aplikasi javascript full stack, dan benar-benar baru di Angular, jadi saya berharap seseorang dapat memberikan catatan langsung untuk saya di sini.

Mengapa saya perlu menggunakan kerangka kerangka kerja seperti Jade atau Handlebars saat menulis aplikasi sisi klien menggunakan AngularJS.

Saya harus mengatakan bahwa saya tidak pernah menggunakan kerangka kerja template ini juga. Jadi saya tidak terlalu paham dengan kelebihannya. Tetapi ketika saya melihat Handlebars misalnya, ia melakukan banyak hal yang sama seperti yang saya lakukan di Angular, seperti looping, dll.

Sejauh yang saya tahu, akan sangat masuk akal untuk membuat template di Angular menggunakan HTML yang tepat dan kemudian melakukan semua template sisi klien, dan menggabungkan ini dengan pendekatan API pertama menggunakan node dan mongo misalnya.

Alasan kebingungan ini adalah bahwa banyak contoh yang saya temukan di GitHub menggunakan Jade, dan tampaknya berlawanan dengan intuisi bagi saya.

Tolong jelaskan saya, dan luruskan saya. Saya ingin mempelajari beberapa praktik terbaik dari orang yang tahu lebih banyak daripada saya.

Terima kasih

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

Jawaban:

61

Mereka yang tanpa ragu mendukung Jade di lingkungan Angular gagal memahami bahwa logika tampilan ada pada klien, dan logika bisnis di server, seperti yang dikomentari oleh OP.

Jangan lakukan itu kecuali Anda memiliki alasan yang sangat kuat untuk melakukannya. Dalam teknik, sistem dengan lebih sedikit bagian yang bergerak adalah sistem yang lebih andal, dan sistem di mana batas antarmuka (klien / server) dipatuhi lebih dapat dipelihara dalam jangka panjang, jadi default ke arsitektur paling sederhana dan pembagian kerja yang bersih jika memungkinkan. Jika Anda memiliki alasan yang berlebihan, lakukan apa yang harus Anda lakukan, tetapi peringatan emptor .

Baru-baru ini saya meninjau beberapa kode di mana template Angular lurus akan melakukan pekerjaan yang jauh lebih baik daripada mencampurkan di Jade, hanya dengan mempertahankan kesederhanaan.

Selain ekstensi template, Jade tidak membawa apa pun yang berharga ke tabel yang belum disediakan Angular. Jujur saja: Dengan menggunakan prinsip suara "lebih menyukai komposisi daripada warisan" (yaitu parsial), Anda seharusnya tidak memerlukan ekstensibilitas template. Jade hampir tidak "lebih mudah diurai" daripada HTML. Mereka namun sepele yang berbeda, sementara Jade menambah tingkat lain tipuan - terbaik dihindari.

Ada satu kasus khusus yang valid untuk pembuatan template sisi server: Pengoptimalan, mengingat bahwa pengoptimalan prematur umumnya merupakan Hal yang Buruk. Jika kinerja benar-benar menjadi masalah, dan Anda memiliki kapasitas server untuk menangani ini, template sisi server dapat membantu. Ini berlaku untuk produk seperti Twitter dan Basecamp, di mana biaya melakukan banyak pekerjaan sisi server diimbangi dengan keuntungan berkurangnya permintaan ke server.

Adapun Handlebars, tidak perlu mengganti template sisi klien AngularJS (luar biasa).

Insinyur
sumber
4
Hai Nick, itu juga jawaban yang saya dapatkan. Saya tidak mengatakannya secara blak-blakan, tapi saya setuju!
Jay Pete
60
@Nick, saya belum melihat banyak orang yang menikmati menulis / membaca XML / HTML. Anda mungkin yang paling langka yang pernah saya lihat yang benar-benar mendukung hal itu demi sesuatu yang jauh lebih kering dan lebih bersih seperti Jade. Ada banyak sekali perpustakaan yang tujuan utamanya adalah untuk menghindarkan orang dari menulis / membaca XML / HTML.
Alex K
12
Saya tidak memperkenalkan kompleksitas jika tidak diperlukan. Menghabiskan hari Anda membaca kode C atau lebih buruk, C ++ template, dan Anda akan segera menyadari bahwa HTML parsing mental adalah masalah yang sangat sepele memang .
Insinyur
35
"menggelikan bagi setiap profesional untuk mengklaim ini.", "mengurai HTML secara mental adalah masalah yang sangat sepele.". Saya menemukan komentar yang sangat merendahkan ini. Apakah Anda lebih suka menulis assembly karena sangat mudah diurai? Jade pada dasarnya adalah apa YAML itu untuk XML saat Anda menggunakan Angular dengannya.
Philipp Gayret
7
Saya setuju dengan @NickWiggill. Parsing template JADE vs. HTML mentah membutuhkan waktu cpu 'wetware' yang sama untuk saya. Saya tidak akan mengatakan lebih jauh dengan mengatakan Anda tidak profesional jika Anda tidak setuju, tetapi bagi saya itu adalah hal yang sama. @ Philipp, analogi Anda tentang parsing C / C ++ menjadi assembly sama dengan parsing JADE ke HTML adalah buruk, hanya ada sedikit orang, jika ada, yang bahkan dapat mulai mengurai assembly hampir secara real-time, sedangkan, menurut saya, sebagian besar web pengembang dapat mengurai HTML semudah atau hampir semudah JADE.
nomis
63

Saya menggunakan Jade untuk menghasilkan template yang dikonsumsi oleh AngularJS karena saya benci menulis HTML biasa. Itu terlihat seperti:

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

… Yang menurut saya jauh lebih bersih daripada HTML biasa.

thatmarvin
sumber
12
Oke, jadi Anda hanya menggunakannya karena Anda tidak suka menulis HTML biasa? Apakah itu keuntungan utama bagi Jade, apakah ada kemenangan lain? Apakah Jade pernah mengacaukan HTML dengan cara apa pun, jadi Anda harus menyesuaikannya untuk mendapatkan keluaran tertentu? Saya melihat bahaya karena telah menambahkan lapisan tipuan lain tanpa kebutuhan yang sebenarnya. Tapi sekali lagi, itulah mengapa saya bertanya. Saya ingin memahami nilainya di sini.
Jay Pete
1
Saya sebenarnya memulai dengan Jade sebelum menggunakan Angular, jadi itu adalah kebiasaan yang melekat daripada pilihan sadar, tetapi sejauh ini berhasil dengan baik. Satu-satunya masalah yang saya miliki dengan Jade adalah cara menangani spasi putih (saya menggunakan pretty = false) jadi saya berakhir dengan spasi putih tertinggal di file sumber setiap kali saya perlu menambahkan spasi di antara tag. Saya menemukan fitur seperti include dan mixin sangat berguna.
thatmarvin
Apakah ng-inlude, mungkin digunakan bersama ng-src, berbeda jauh dari mixin dan dan termasuk Jades?
Jay Pete
2
Lapisan @JayPete Jade abstraksi lebih HTML adalah soooo tipis. Ini salah satu terjemahan paling intuitif antara sintaks yang pernah saya gunakan. Sangat sedikit keajaiban yang terjadi di Jade kecuali di mana Anda mulai menggali dengan variabel dan logika bersyarat (seperti yang Anda lakukan dengan mesin templat apa pun). Benar-benar tidak jauh berbeda.
Chev
6
Sederhana itu subjektif.
Chev
46

Sejujurnya saya tidak mengerti mengapa orang peduli tentang perbedaan antara ini:

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

dan ini:

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

Kecuali bahwa saya menemukan satu yang sedikit lebih bisa dibaca manusia. Sedikit . Saya tidak mengerti mengapa orang-orang begitu bersemangat tentang topik tersebut. Semuanya bikeshedding. Perbedaannya dapat diabaikan dan setiap programmer yang kompeten dapat dengan mudah menerjemahkan satu sama lain setelah lima detik di Google. Gunakan apa yang Anda inginkan dan biarkan orang lain bertengkar karena tidak ada apa-apa. Pilih pertempuran Anda dan terlibat dalam debat tentang hal-hal yang sebenarnya penting, seperti reaktor atom;)

Chev
sumber
2
Saya setuju, meskipun jika Anda hanya menambahkan 1 Jade ifke persamaan, semuanya tiba-tiba berubah. Lihat di atas tentang "pengguna premium".
TWiStErRob
15
Saya tidak setuju, halaman html 9 baris sama sekali tidak realistis. mengambil sumber halaman yang saya lihat sekarang mengubah 2320 baris menjadi 1580 (Menggunakan html2jade ). Lebih dari 700 baris waktu yang terbuang untuk siapa pun yang menulis semua templat stackoverflow
Philipp Gayret
2
@TWiStErRob Jika Anda beralih dari giok ke HTML yang perlu Anda lakukan adalah membuat template, lol. Jika Anda memiliki ifs di markup giok Anda, maka Anda sudah memiliki kebutuhan untuk beberapa jenis mesin templating dan Anda harus mengubahnya menjadi ifsintaks apa pun yang digunakan oleh mesin itu. Saya tidak begitu mengerti kritik Anda.
Chev
Jika seluruh perdebatan ini tentang di mana logika kondisional berada (server atau klien) maka saya pikir ini adalah debat yang lebih konyol daripada yang saya lakukan pada awalnya. Ada beberapa kasus untuk keduanya dan Anda menggunakan salah satu yang berfungsi atau jika keduanya akan memilih mana yang lebih disukai oleh individu. Saya telah menghabiskan lebih banyak waktu untuk berdebat seperti ini daripada yang pernah saya habiskan untuk mengutuk keputusan masa lalu untuk meletakkan logika dalam tampilan sisi server atau sebaliknya. Jika kita semua ingin berdebat tentang efisiensi, maka kita harus mendiskusikan manfaat dari keseluruhan percakapan ini.
Chev
3
@Philipp, bukankah aman untuk menganggap sebagian besar baris yang dihapus hanyalah tag penutup? Karena sebagian besar editor secara otomatis menambahkan tag penutup saat Anda menulis tag pembuka, saya ragu itu benar-benar menghemat penulisan 700 baris.
Titik koma
14
  1. Anda tidak perlu menggunakan Handlebars dengan AngularJS karena memiliki mesin templatnya sendiri.
  2. Alasan mereka menggunakan Jade, karena itu hanya server renderer yang akan dikompilasi menjadi html dan disajikan oleh angularJS nanti di frontend.

Jadi TL; DR, di server, Anda dapat menggunakan bahasa apa pun [giok, haml, ...] untuk menghasilkan hanya struktur html untuk aplikasi Anda, itu tidak ada hubungannya dengan angularJS karena akan merender dan bekerja dengan HTML di runtime di frontend.

Anda tidak perlu menggunakan Jade di server, dan saya sarankan untuk tidak menggunakan karena akan membingungkan developer baru. Dalam proyek yang Anda lihat, mereka menggunakan Jade hanya karena lebih bersih dan mereka sudah terbiasa, dan jika digunakan dengan angularJS, tugasnya hanyalah menghasilkan html biasa tanpa logika apa pun.

Dzung Nguyen
sumber
2
Bukankah lebih bersih untuk tidak menggunakan html yang dihasilkan server, dan sepenuhnya memisahkan logika dan tampilan? Atau ada sesuatu yang saya lewatkan? Mengapa Jade adalah ide yang bagus saat menulis aplikasi AngularJS?
Jay Pete
Saya tidak mengatakan itu ide yang bagus untuk digunakan dengan angularJS. Jade tidak ada hubungannya dengan angularJS. Untuk memperjelas ini, saya akan memperbarui jawaban saya.
Dzung Nguyen
Saya mengerti bahwa Jade tidak ada hubungannya dengan Angular. Saya hanya mencoba untuk mencari tahu apa nilai Jade, lebih dari menulis HTML yang sebenarnya di sebagian AngularJS. Saya melihat banyak orang menggunakannya, dan ingin memahami alasannya :-)
Jay Pete
2
Sekali lagi, Jade tidak ada hubungannya dengan AngularJS. AngularJS menggunakan sebagian HTML dan disajikan dari halaman HTML. Anda bisa menggunakan apapun untuk membuat halaman HTML di sisi server, termasuk Jade atau Haml. Jade / Haml bukanlah kerangka kerja template. Mereka lebih banyak preprocessor. Pertanyaan yang benar adalah "Setang atau Kumis atau bahasa kerangka JavaScript lainnya"
Eddie Monge Jr
@JayPete Manfaat menggunakan Jade saat mengembangkan angularJS mungkin karena sintaks Jade lebih bersih. Tapi tetap saja, berdasarkan pengalaman saya, itu tidak banyak membantu. Jadi lakukan saja dengan html :)
Dzung Nguyen
8

Jawaban yang diterima agak sepihak dan mengabaikan fakta bahwa setiap pengaturan pra-kompiler untuk HTML memiliki kegunaan yang bagus untuk SETIAP jenis proyek HTML: Komposisi dan fleksibilitas markup yang dihasilkan.

Bekerja sendiri di aplikasi sudut? Cobalah Jade.

Jade meningkatkan kemampuan Anda untuk memodularisasi HTML, mengurangi jumlah waktu yang Anda habiskan untuk men-debug HTML dan juga mendorong pembuatan inventaris markup.

Selama waktu desain, mungkin ada banyak sekali iterasi pada bagian HTML. Jika keluaran HTML didasarkan pada sekumpulan file giok, mudah bagi tim untuk bertindak fleksibel dalam mengubah persyaratan. Selain itu, mengubah markup melalui pembuatan ulang jade secara signifikan lebih kuat daripada menulis ulang HTML murni.

Karena itu, saya menyadari keengganan umum terhadap pencampuran sudut dengan giok dalam tahap produksi atau pengembangan. Memperkenalkan seperangkat pengetahuan sintaksis lain yang diperlukan adalah ide buruk bagi sebagian besar tim dan penggunaan batu giok mungkin menyembunyikan manajemen proyek yang tidak efisien dengan mengabstraksi beberapa pekerjaan yang akan dilarang oleh prinsip KERING (misalnya malas pada persiapan markup)

Mirko
sumber
2
Tidak tahu mengapa ini memiliki -1, tapi saya telah membalasnya.
Mark K Cowan
Itu tidak disukai karena tidak sepenuhnya benar. Jade tidak melakukan apa pun untuk memodularisasi HTML. Anda benar-benar dapat mengatakan hal yang sama tentang HTML biasa jika digunakan dengan cara yang benar dengan pra-kompilator.
Justin
1
Anda benar, hal yang sama dapat dikatakan tentang semua pra-penyusun. Untuk Jade, Mixins jade-lang.com/reference/mixins dapat meningkatkan modularisasi (terutama dibandingkan dengan vanilla HTML). Jika Anda tertarik dengan modularisasi HTML, Anda mungkin juga menyukai polymer-project.org .
Mirko
7

Saya telah membaca semua jawaban di atas dan sedikit terkejut tidak ada yang menyebutkan satu aspek yang membuat penggunaan giok daripada membuat template AngularJS menjadi hal yang sangat berguna.

Seperti yang telah diceritakan, dalam produksi, perbedaan skenario realistis antara mengetik html mentah dan giok sebenarnya penting, tetapi hal yang lebih penting yang tidak boleh kita lupakan adalah bahwa terkadang kita perlu mengubah dan menginisialisasi ulang template angularjs secara dinamis .

Sederhananya, terkadang kita perlu mengubah html melalui innerHTML dan kemudian memaksa AngularJS untuk mengkompilasi ulang konten. Dan inilah jenis tugas yang tepat ketika menghasilkan tampilan seperti itu melalui giok dapat bermanfaat.

Juga, AngularJS bekerja dengan baik dengan model, yang strukturnya menurut definisi terkenal. Sebenarnya, kami sebenarnya tidak mengetahui struktur pastinya (bayangkan, katakanlah, perender JSON). AngularJS akan sangat kikuk di sini (bahkan jika sedang membangun aplikasi sudut), sementara giok akan melakukan pekerjaan itu.

shabunc
sumber
2

Anda dapat menyertakan template sudut melalui Jade.

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

Untuk template caching, saya menganggap ini jauh lebih rapuh daripada menyertakan template yang lolos dalam file javascript.

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

Austin Pray
sumber
2

Jade jelas lebih mirip dengan html daripada yang dikatakan Haml. Jadi pengalih konteks sebenarnya sangat minim. Namun itu tidak sepenuhnya tidak ada. Ini mungkin tidak masalah sama sekali bagi pengembang. Tetapi ketika desainer Anda datang dan menanyakan cara agar tag bersarang berfungsi dengan baik, Anda memecahkan masalah yang tidak perlu yang Anda buat sejak awal.

HTML masih dapat ditulis dengan sangat jelas dan sebagian dapat digunakan untuk membuatnya lebih mudah dipahami. 500 baris apa pun sulit dibaca - baik itu Jade atau HTML.

Ini adalah template 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

Dan HTML yang setara

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

Ketika ditulis dengan jelas, saya tidak melihat HTML menjadi sangat dirugikan sehingga menjamin peralihan. Benar saja, tanda kurung sudut merusak pemandangan. Tapi saya lebih suka memilikinya, daripada harus berurusan dengan keraguan desainer apakah tipuan yang saya perkenalkan melanggar html. (Mungkin tidak. Tapi membuktikan itu bukan upaya yang layak)

suryasankar
sumber
0

Pertama-tama, Anda selalu membutuhkan semacam template sisi server.

Pembuatan template sisi klien murni memiliki kerugian besar dalam waktu pemuatan, sehingga sering kali dikurangi dengan merender beberapa elemen statis di server. Dengan cara ini ketika pengguna memuat sebagian halaman, dia sudah melihat beberapa elemen di halaman.

Dan yah, template berguna dalam kasus ini, meskipun terkadang orang menggunakan generator html statis seperti Jekyll.

Ada alasan lain untuk menggunakan Jade yang tidak disebutkan di sini sebelumnya.

Spasi Putih.

Jika Anda menulis HTML yang dapat dipelihara manusia dengan lekukan dan jeda baris, setiap pemutusan baris akan menghasilkan simpul teks spasi. Ini dapat cukup banyak mengacaukan pemformatan elemen inline dalam beberapa kasus, dan membuat kode javascript lebih aneh.

Anda dapat membaca lebih detail di sini: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

Jika Anda menulis kode Jade, itu dikompilasi menjadi HTML satu baris yang tidak memiliki masalah ini.

alex
sumber
> [FasteRender] ( meteorhacks.com/fast-render ) adalah solusi yang tidak melibatkan rendering sisi server. Ini mengirimkan data yang diperlukan untuk membuat halaman pertama Anda dengan HTML awal yang dimuat dari Meteor, sehingga halaman tersebut ditampilkan tepat setelah JavaScript dimuat ke klien. Ini memberikan hasil yang identik dengan Server Side Rendering (SSR), tetapi tetap mengirimkan data melalui kabel tanpa melanggar salah satu prinsip inti Meteor.
Max Hodges
0

Saat bekerja dalam tim, front-end cenderung lebih suka mendesain halaman mereka sebagai html statis. Menerjemahkan html statis itu ke dalam template dinamis adalah sumber kesalahan, dan menambahkan giok akan menambahkan langkah terjemahan tersebut.

Seperti banyak orang lainnya, saya menyukai kesederhanaan!

Arjan
sumber