Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Create a character voting app using React, Node.js, MongoDB and Socket.io

sahatyalkabov.com

Post reply on HN
Print view View original

41–50 of 59 posts

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#41

Post by Gigablah »

cabirum wrote: post #22

Great tutorial showing how many components work together in node/mongo/react. It also absolutely blows my mind. This just feels wrong. 17 separate packages, some providing really basic stuff like serving favicons and parsing POST requests that must be a part of bigger framework. Each package is of different quality, testing strategy, and depends on a different developer who's completely free to abandon his project to…

> Each package is of different quality, testing strategy, and depends on a different developer who's completely free to abandon his project tomorrow or introduce some backwards-incompatible change

Welcome to OSS! Really though, there's things like forking, community involvement and SemVer.

The project configuration reflects the developer's decision not to use webserver like nginx, otherwise things like serve-favicon and express.static would be unnecessary.

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#42

Post by TheAceOfHearts »

I challenge your assumption that gulp + browserify is more straightforward than webpack. Your setup is not representative of a real application.

I setup a project scaffold [0] with a configuration that supports development, production, and testing environments. It has a heavily commented webpack config.

No tests? No asset cache busting by updating name references? Come on, those are basic requirements for a web project.

On top of that, webpack lets your dependencies be resolved as part of your code, instead of relying on certain files being in certain folders: e.g. your css and images.

[0] http://github.com/cesarandreu/web-app

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#43

Post by TheAceOfHearts »

verroq wrote: post #35
petewailes wrote: post #31

Christ on a bike... I spend a reasonable amount of time developing and maintaining a reasonable sized js based front end to an application, which uses React heavily (40k lines). Looking at this, I can't help but think that isomorphic JS apps make life far more miserable than separate back and front end applications. To get a decent server running on a linux distro - Nginx, Mariadb, PHP/Python/etc. An apt-get and your…

There is just a lot of friction. Want es6, get ready to put gulp in your work flow. Want to sanely include frontend dependencies? Time to add throw in bower. Want those js/css to be injected into the page? Throw in wiredep or bite the bullet and chuck in the wirepack.conf.js. Don't want that and want to use a skeleton? Install yeoman and run the isomorphic js generatior that gives you a 1k+ line project and you haven…

I made a scaffold [0] that tries to give you a reasonable starting point, without tons of extra cruft. It was important to me that the scaffold handle all 3 basic environments: development, testing, and production.

It's basically a single webpack config (that's heavily commented, btw!) and a set of npm run-scripts. You don't need gulp to build an application! And I would not call bower a sane way to include frontend dependencies... Not by a long shot.

[0] https://github.com/cesarandreu/web-app

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#44

Post by Gigablah »

verroq wrote: post #35
petewailes wrote: post #31

Christ on a bike... I spend a reasonable amount of time developing and maintaining a reasonable sized js based front end to an application, which uses React heavily (40k lines). Looking at this, I can't help but think that isomorphic JS apps make life far more miserable than separate back and front end applications. To get a decent server running on a linux distro - Nginx, Mariadb, PHP/Python/etc. An apt-get and your…

There is just a lot of friction. Want es6, get ready to put gulp in your work flow. Want to sanely include frontend dependencies? Time to add throw in bower. Want those js/css to be injected into the page? Throw in wiredep or bite the bullet and chuck in the wirepack.conf.js. Don't want that and want to use a skeleton? Install yeoman and run the isomorphic js generatior that gives you a 1k+ line project and you haven…

It's like people want complexity in their app, then complain when they get it.

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#45

Post by TheAceOfHearts »

roneesh wrote: post #12

Impressive and awesome. This is perfect to catch up on using build tools. I focus on core programming concepts in my own work, and at work most of that stuff is automated to just a few commands, so I appreciate the gulp.js part of your tutorial most. Thanks for the great work.

If you want to check out an alternative for building applications, go look up Webpack.

I strongly believe you can build web applications without having to pull in Gulp or Grunt. And to back up my claim I setup a project [0] that shows how to do it using webpack + npm run-scripts.

I'd argue it solves a large set of problems while maintaining a reasonable level of complexity.

[0] https://github.com/cesarandreu/web-app

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#46

Post by k__ »

petewailes wrote: post #31

Christ on a bike... I spend a reasonable amount of time developing and maintaining a reasonable sized js based front end to an application, which uses React heavily (40k lines). Looking at this, I can't help but think that isomorphic JS apps make life far more miserable than separate back and front end applications. To get a decent server running on a linux distro - Nginx, Mariadb, PHP/Python/etc. An apt-get and your…

I think it isn't needed for 99% of all web-apps.

But if you have heavy competition and need a snappier first load experience, it is an option you have.

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#47

Post by testguy34 »

petewailes wrote: post #31

Christ on a bike... I spend a reasonable amount of time developing and maintaining a reasonable sized js based front end to an application, which uses React heavily (40k lines). Looking at this, I can't help but think that isomorphic JS apps make life far more miserable than separate back and front end applications. To get a decent server running on a linux distro - Nginx, Mariadb, PHP/Python/etc. An apt-get and your…

> It's insane that people think you need to do all this just to get a live updating counter.

Dismissing this guy's tutorial because he didn't clone Facebook is kind of short sided. Everything is about trade offs. You don't need to make your React app isomorphic if you don't mind a slower initial load and lack of SEO. You don't need to use Mongo, you can pass data from your RDBMS directly to your components as props when you render server side or have them call your REST API using an isomorphic request library. You don't need to use ES6 if you use something like webpack and babel.

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#48

Post by kentor »

lojack wrote: post #40
alexggordon wrote: post #28

I've been curious about React for awhile now, but every time I step in to play around with it, I get really turned off by the syntax. This is a react render function mentioned in the tutorial (gist with all code here[0]): render() { let delta = this.props.delta ? ( 0 ? 'text-success' : 'text-danger'}> {this.props.delta} ) : null; return ( {delta} {this.props.title} ); } This is approximately that same function writte…

Your ERB function is actually wrong though.... @delta > 0 ? 'text-success' : 'text-danger' ) do %> I'm not a rails developer, so I'm only marginally certain of the correctness of this, and less certain if there's a more verbose way to write it. Likewise, I've only played around with React, so its possible that the React version can be made less verbose. One could just as easily argue: {() => { this.props.delta ? ( 0…

Here's how I would inline it, and I encourage people to do it this way. Intermediate variable is not necessary. Ternary is not necessary since false evaluates to null in jsx.

  render() {
   return (
     
       {this.props.delta > 0 &&
          0 ? 'text-success' : 'text-danger'}>
           {this.props.delta}
         
       }
       {this.props.title}
     
   );
  }

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#49

Post by quicksnap »

TheAceOfHearts wrote: post #43
verroq wrote: post #35

Earlier quoted context omitted.

There is just a lot of friction. Want es6, get ready to put gulp in your work flow. Want to sanely include frontend dependencies? Time to add throw in bower. Want those js/css to be injected into the page? Throw in wiredep or bite the bullet and chuck in the wirepack.conf.js. Don't want that and want to use a skeleton? Install yeoman and run the isomorphic js generatior that gives you a 1k+ line project and you haven…

I made a scaffold [0] that tries to give you a reasonable starting point, without tons of extra cruft. It was important to me that the scaffold handle all 3 basic environments: development, testing, and production. It's basically a single webpack config (that's heavily commented, btw!) and a set of npm run-scripts. You don't need gulp to build an application! And I would not call bower a sane way to include frontend…

I was looking at this a while ago, and it's a really nice starting point! I too am aiming to remove Gulp from my workflow when possible.

Re: Create a character voting app using React, Node.js, MongoDB and Socket.io

#50

Post by renke1 »

TheAceOfHearts wrote: post #42

I challenge your assumption that gulp + browserify is more straightforward than webpack. Your setup is not representative of a real application. I setup a project scaffold [0] with a configuration that supports development, production, and testing environments. It has a heavily commented webpack config. No tests? No asset cache busting by updating name references? Come on, those are basic requirements for a web proje…

Thanks for your project template. It looks really polished.

What is your experience in regard to running tests with Webpack?

* Can you test individual modules that use arbitrary loaders specified in your Webpack config?

* Can you run tests from the command line?

* Can you write your tests in ES6/7 (or anything else supported by Webpack's loaders)?

I was looking into combining jest with Webpack but every solution so far would only compile your module directly with Babel and therefore skipping the power of Webpack.

Post reply on HN