Comment by Klathmon | Hacker News Reader

Comment by Klathmon | Hacker News Reader

Is there any specific reason you are trying to use Vue?

If not, I'd recommend taking a step back, look at the few most popular options, and start with the most "blessed" config/boilerplate with no custom changes.

Like for react, use the create-react-app thing. Don't add anything on top aside from what is needed for the bare minimum of your project you are learning with.

Feel the pain points, feel what you struggle with, make notes about what works well. Then when you have a minimum viable product, start adding "stuff". Maybe try out redux, or mess with webpack yourself, try out that library that you see people on HN bitching about all the time to see if it's really that bad. Just start fixing the worst issues you had with the language/stack, and understand how the additional tooling solves (or doesn't solve) your problem.

Don't worry about size, number of files, performance, how messy it is, how over engineered it feels. Just make something first. You'll have plenty of time to learn that other stuff once you have a good foundation. And at that point you'll know to leave out x, or that y isn't over engineered, it's just engineered.

Rome wasn't built in a day. Expect your first few things to be complete trash, and don't worry about it.

What's wrong with Vue? Sure it isn't as widely used as React or Angular but it isn't a small fry either and growing quickly. Plus it is a great first framework because of the fabulous documentation and learning resources available. I also found it to have a much simpler syntax than Angular (I can't comment on React).

Why can't you comment on React?

I don't really like Vue.js after coming from ReactJS, main reason is how hard is it to create components, which is the main attraction of React.

This is ReactJS code for a List group that has list items which are composed of buttons, can anyone post the Vue.JS equivalent code?

var Button = function(props){

return <button>{props.text}</button>

}

var ListItem = function(props){

return <div>I am a item <Button text="click me" /></div>

}

var ListGroup = React.createClass({

  render: function() {

    return <div>

    	<ListItem name="hello"/>

    </div>;

  }

});

ReactDOM.render(

  <ListGroup />,
  document.getElementById('container')

);

I'm not versed in React but I think this achieves the same thing -

1. Create your custom component:

  var btnComp = {
    props: ['text'],
    template: '<div>I am a button <button v-html="text"></button></div>'
  }

2. Register it:

  new Vue({
    el: 'body',
    components: {
      'custombtn': btnComp
    }
  })

3. Display it:

  <custombtn :text="'hello'"></custombtn>

That's anything but hard. Here: https://jsfiddle.net/v5s77r2x/.

*Updated with simpler code and JSfiddle example

It can even be closer to React than that, especially with JSX render functions. You don't even need the view to name itself:

    export default Vue.extend({
      props: ['text'],
      render() {
        return <div>I am a button <button>{this.text}</button></div>;
      }
    });

Useful to know. Cheers.

PS: This can be cleaned up even more with ES6/ES2015 syntax.

See https://babeljs.io/blog/2015/06/07/react-on-es6-plus

Thank you for that link! I am starting in react and there is a blend of ES6 and ES5 in the tutorials (maybe even within the official react tutorials?). This hits the spot in clearing up some confusion for me.

For React, one step by step complete tutorial for beginners is the https://www.reactjs.co

:-) just sayin;-)

Just a question. Why would you create a new button component when the only thing it does is return a <button> html element with text inside. Why not just do {listitems.map(listitem) => {return (<button> {listitem.text}</button)}}. I think react facilitates unnecessary boiler plate logic like that. When in reality a component should probably do more in order to save code if it's going to be created at all. Just my opinion. Open to other people's thoughts on this.

I remember when I could show a button with nothing but an html element. Things sure have improved since then!

Please stop the fanboyism. OP did not say there was anything wrong with Vue, but asked if there was any specific reason it was chosen, and suggested they try something that comes with good preconfigured defaults to avoid being overwhelmed by all the choices. Which you completely fail to address in your canned sales pitch.

Vue comes with good preconfigured defaults, see vue-cli;

https://github.com/vuejs/vue-cli

Incidentally, vue-cli predates create-react-app.

Great, that's actually useful information.

But you could have safely skipped the "first!" comment. Being first does not make you any more superior in the front-end world than it does in a youtube comment.

I couldn't help it, I'm sorry ;-). Although there is a point that Evan You has put a lot of effort into finessing the "developer experience" of using Vue. That includes vue-cli, "blessed" packages surrounding the main library (e.g. Vuex), being able to start using a script tag include if that's easiest, and clear documentation.

My "getting started" experience with React (which I use every day) was much more rocky. Admittedly this predates create-react-app.

first comment was useful

Recently I have created few tutorials on Vue.js. I comes from Angular JS 1 and 2 background. After few days of Vue.js, it seems very simple to begin with you.

If you are planning to build a side project, or dashboard kind of stuff so you can definitely give it a try. I feel it's like jquery :) little bit more concept to grasp.

Few video tutorials I am creating, you can watch and leave your comments:-

https://www.youtube.com/watch?v=Bv3_eTttgso

https://www.youtube.com/watch?v=WSXN-p7jVIk

https://www.youtube.com/watch?v=VKLUGU7YCFc

https://www.youtube.com/watch?v=FAa7Er_zQcg

https://www.youtube.com/watch?v=k5L2uikYkoc

What about Ember CLI? Predates both of them.

What are you on about? I cited two specific reasons: the excellent documentation and easy syntax which made the learning process go very smoothly. You seem to be doing exactly what you accused me of doing. Are you suggesting that React and Angular both have "good preconfigured defaults" and Vue does not?

Being overwhelmed by all the choices is a valid concern which is why I find it strange for you to be suggesting OP switches to another framework when he has already started with Vue.

I didn't mean to imply anything was wrong with Vue, I also was trying to keep it somewhat framework agnostic using react as an example (react is just what I'm most comfortable with currently, so it was easy to type up). The Vue question was more out of curiosity, and the fact that more popular frameworks are going to have more "help" available in most cases (learning is one area where it kind of is a popularity contest)

My comment probably should have been 2 separate comments.

"Don't add anything on top aside from what is needed for the bare minimum of your project you are learning with"

I believe not following this advice is the reason why so many (of us) are having difficulties in getting started. It very tempting to try to go for the "best-possible-stack" which includes too many neat libraries for solving some specific problems. This leads to endless troubleshooting which kills all the fun.

Reply on news.ycombinator.com