[1.3] react-jade module

help
21

With all due respect @mordrax, I think that’s actually an example of how I not want my code to look like. Also, in my opinion, the size of the components do not depend on the chosen templating language. One can easily break up their app in small components independent of what templating language is used (although React enforces this more unlike Blaze).

@laurentpayot: yes Vue.js is very nice, but it’s not mentioned in the guide or tutorial (sadly). Mindshare / community is a big factor too - I wonder if it will still be actively developed in a few years.

Currently I’m testing to use React with Coffeescript the “Chet Corcos” way. It looks quite nice IMHO and features Jade style indenting. Step 2 of the Meteor tutorial would look like this (just a snippet). I’ll publish the full tutorial in React - Coffeescript when I finish it.

class Task extends Component
  render: ->
    li {}, @props.task.text

Task.propTypes =
  task: PropTypes.object.isRequired

class App extends Component
  getTasks: ->
    [
      { _id: 1, text: 'This is task 1' }
      { _id: 2, text: 'This is task 2' }
      { _id: 3, text: 'This is task 3' }
    ]

  renderTasks: ->
    @getTasks().map (task) =>
      Task key: task._id, task: task

  render: ->
    div className: 'container',
      header {},
        h1 {}, "Todo List"
      ul {}, @renderTasks()
22

As @ccorcos said above in this thread:

23

For the options being at the same level as the content, I circumvent this by putting the options on the same line as the tag / component:

div className: 'container', id: 'main', 
  h1 {}, "This is a header"

Hmm, with Hyperscript you lose the className but you’ll have a “h” on every line. What’s the lesser evil? :smiling_imp: Both are still no Jade…

@ccorcos why is the above way not compatible with other vdom libraries?

24

Wow, after a second look, Vue.js sure looks like a game changer! I’ve decided to dive into that and research if it’s the best solution for me (and my team). Its decisions are so much more logical to me than React! I also see it has more stars on Github than Angular and Ember, so I think it’s here to stay. Big thumbs up to Evan You and its team!

1 Like
25

@morganpattens An easy way to start using Vue + webpack (to get single files components): https://iamlawrence.me/more-vue-and-meteor
What I’m using to integrate Vue to Meteor: https://github.com/almini/vue-meteor

1 Like
26

Look em up:


27

Inevitably people will want to use tools with which they are familiar for a popular node/js framework. To me, saying “you’re doing it wrong,” in response to wanting to use something that’s otherwise-ubiquitous like Jade isn’t a very helpful answer.

There doesn’t seem to be any real philosophical reason React needs to buck and resist something like Jade. The reason is currently a technical hurdle, it sounds like.

I think the most common misconception about Jade and Haml are that their only function is to ‘reduce typing’ or just ‘reduce lines of code.’ Those things are helpful, but to me the most important thing is the reduction of redundant noise. That just plain makes code easier to maintain and read.

No matter how well I know html I still have to mentally sort though the crap to find things like class names, or easily see the structure and flow of the markup with all the extra junk in my way.

No matter how short these lines of code are when they’re very modularized in React, I’d STILL rather read:

header.header-primary
  h1.site-title
    a(href='/') AwesomeSite.com
 .byline The best web site!

than:

<header class ="header-primary">
  <h1 class="site-title">
    <a href="/">AwesomeSite.com</ah>
  </h1>
  <div class="byline">
    The best web site!
  </div>
</header>

… any day of the week.

So how can we get a real solution going?

2 Likes
28

Yes readability is the first quality of good code.

29

I would contribute to a project integrating Pug with React in Meteor, but I honestly have no idea where to begin.

I started reading parts of these code bases, but I’m not one step further yet:

30

@morganpatterns, check out:

You’d need to create a new build plugin to handle say .pjs files. Then adapt the code from the “without browserify” section of the react-jade docs you posted, to call inputFile.addJavascript() in the processFilesForTarget call/loop, rather than writing the out the output to a file.

I wish I had time to help with this :frowning:

There’s also https://github.com/weareoffsider/react-jade-transformer but I didn’t really compare the differences.

2 Likes
31

Thanks man, these docs are quite detailed and just what I was looking for! Yes, I also found react-jade-transfomer. I’d have to research what the best OSS project is to use for my solution.

1 Like
32

Great stuff! Ask for any help you need in the forums and @mention me, I’ll try help out whenever I can.

33

Hello everyone! Jade is a thing I really love! And I miss it a lot after moving to React. However, I do not feel it is a good choice to use react-jade for now as there is no linting/syntax highlight/autocompletion support at the moment. If someone has ideas how to implement it easily for popular editors, please share. But before this is done we have to pay the price of using ugly html constructions…

34

Okay, I have a working prototype, but the simple-todos Meteor tutorial fails at step 4. It seems “this.refs” inside “handleSubmit” is undefined, but is present in “render”. Code created by react-jade seems fine:

React.createElement("input", {                                                                                  
  type: "text",                                                                                                    
  ref: "textInput",                                                                                                
  placeholder: "Type to add new tasks"                                                                             
})

Perhaps this is because react-jade depends on an old version of React (0.14.x), I read some things were changed concerning “refs”. The react-jade repo doesn’t seem to respond to pull requests, so perhaps I will look into adopting “react-jade-transformer”.

Another option is to use my new found knowledge for creating Vue build packages (for templates and single file components). The more time I sink into this, the more it makes sense to support a view layer that actually acknowledges the worth of Jade et al. But it seems the Vue traction is not there… “The world won’t listen”.

@priezz, my plugin in its current state supports separate template files, so that shouldn’t be a problem. “react-jade-transformer” also has instructions for inline highlighting in Atom.

35

I should give it a try then :slight_smile: Thanks!