Thoughts on using jade with Meteor?

1

With 16k installs on Atmosphere i know some of your have some experience using jade…what are your thoughts so far? I would like to be able to use the cleaner syntax without all the <> but am not sure how many issues I might run into by somewhat replacing spacebars…

2

my understanding is Jade is quickly built on top of spacebars and not a huge rewrite. In fact you sometimes have to use Spacebars syntax to work. for example {{{ blah }}} or accessing array members.

It’s not a full port of jade, but it’s certainly better than all that wasted time typing html for 99% of use cases.

1 Like
3

Pretty much no issues. Used in on one project and works really well. Only dynamic attributes are not supported, so you have to write

a(href="{{url}}") Text

sometimes. It does have an equivalent for {{{ unescapedVar }}} though, I just can’t recall it because I hardly use that. (Something like !{unescapedVar} or !#{unescapedVar}.)

Other than that… can’t recall any other issues… it’s quite solid and enjoyable. And I had never used it before I tried it on this project, but that was not a problem.

4

@seeekr Yea pretty sure its !{raw}. Just installed Jade/Jade Snippets plugins so time to give it a run down :sunglasses:

Also, from the docs, couldnt u use input($dyn = attrs) for dynamic attributes? https://atmospherejs.com/mquandalle/jade

5

Complete the trifecta and go with Jade, CoffeeScript, and Stylus. If you want less chrome (unnecessary crap) around your code then you’ll love working with Jade.

2 Likes
6

@manuel Yup, thats what im using atm :sunglasses:. Does anyone know of a syntax highlighter plugin for Jade & Sublime? (and Stylus while were at it)

7

Dunno about Sublime, I use Webstorm.

8

Yes, just search in your package manager in Sublime
One is called ‘jade’ and the other… (drumroll)…'stylus.

Works like a charm in Sublime (3).

9

Have both. Is autocompletion/snippets for Stylus working for you?

10

Well the colouring is working for jade and stylus and coffeescript, so it looks like the packages are operating within normal parameters.
I have turned off the autocomplete, though so don’t know about that.
I do use Sublime 3, not sure if that makes a difference.

11

You turned off autocomplete for coffee or just turned off autocomplete in general? If you turned it off for coffeescript, where is the option?

12

i general, because every time was near a colon and tabbed it would do a autocomplete which is pretty annoying.
In your Preferences/Settings/User you can apply:

{
     "auto_complete": false,
     "auto_complete_delay": [delay in ms],
}
13

Hi There,

Well, I just got tripped by jade and I still haven’t recovered. Having spent so much time to debug what the issue was, I found jade was the culprit.

Below is just an illustration of my code:

template(name="form")
    if Template.subscriptionsReady

       p Hehehe
       
    else
      p  Loading

For some reason eventhough subscriptions are ready I keep seeing Loading. When I convert to html/spacebars, it works fine.

I am either going to find an answer or convert to spacebars. Too bad for me.

14

Hi alex, I’m the meteor-jade author and I don’t think it’s the culprit here.

One rigorous way to check if meteor-jade works correctly is to create one jade template and the equivalent spacebars template and check if they compile to the exact same render function. This is what I’ve done with your example: https://github.com/mquandalle/meteor-jade-issue-4810-11, and they do. Maybe it’s just a problem with your indentation?

15

as mquandalle says below, indentation.
check your indents are all tabs or spaces, consistently. mixing them gives weird results

i use jade all the time and its very stable for basic code at this level

16

Do any of you guys still using mquandalle:jade?

Are some of you using it together with coffeescript and stylus?

Or have all moved on to React, JSX, ES6 and Less in 2016?

To test the practical usability of this wondefully noiseless syntax trio (jade, coffeescript and stylus) with Meteor, I have been trying to rewrite the simplest possible example, the leaderboard example, using these three packages together with the latest 1.4 version of Meteor and the Meteor guide app structure with import/export declarations.

I keep running into problems published in other meteor forums threads that received no answer:

Debugging these problems is particularly difficult because:

  • I am still a newb learning this stack

  • they seem to be build issues (not sure though)

  • the Webstorm Meteor debugger does not work properly with CoffeeScript (not stopping on breakpoints) and the numerous open issues filed concerning these bugs seem to receive zero attention from Webstorm support (not enough votes to be addressed I guess)

  • the VSCode node debugger and the VSCode chrome debugger, in addition to be very hard to configure, are not made to work together to debug Meteor code and they both suffer from the same kind of CoffeeScript+Meteor source map leveraging bugs than Webstorm, making breakpoints in CoffeeScript code unusables

  • there is no way AFAIK in neither of them (Webstorm or VSCode) to put breakpoints in jade templating code

  • the jade template engine does not generate AFAIK any source maps that could be exploited by a debugger.

My idea was to first try with raw Blaze and then try raw Blaze + ViewModel and then Blaze + Riot.js to better understand the pros and cons of these three apparently concise and simple alternative for UI components.

So what is the deal? I am trying near the end of 2015 a still-born obsolete stack that its adopters of 2015 have already abandonned?

Thank you very much in advance for any experienced meteorite insight on these puzzling questions.