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

31–40 of 59 posts

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

#31

Post by petewailes »

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 updates are handled nicely for you. Dependency management via Gulp is better than nothing, but jeez it still sucks so bad.

Building a nice, RESTful API on a more sensible back end infrastructure is far less complex, has a vastly smaller toolchain (just a small library for routing and db connection handling would do), plus you get the joys of things like Schemas and ACID from a proper RDBMS (because seriously, Mongo? We really still think that's a good idea?).

That's before we even get on to Step 4. ES6 Crash Course. Or, here's things to know about a language that you can't use on the client browser, because it's not actually a thing there, so you can't use all that you'll learn here when you write JS.

It's insane that people think you need to do all this just to get a live updating counter. What's wrong with a tidy back end with ZeroMQ for your pubsub style socket handling to allow real-time event based change publication, and a separate front end?

It feels like you have to do a hell of a lot of work to get JS + your favourite V8-based server to do anything, and none of it easily.

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

#32

Post by Gigablah »

verroq wrote: post #30
Gigablah wrote: post #27

Earlier quoted context omitted.

You included all the spec / unit test files, and in some instances you included the framework.

I've updated with `test|` in the filter now, but the point stands.

Sure, if your only metric is LOC. (Even then the majority is below 500 lines -- code style is an important factor)

Will jQuery suffice if you're creating Asana rather than todoMVC?

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

#33

Post by vkjv »

ssclafani wrote: post #16
wildpeaks wrote: post #11

Swig seems superfluous in that stack given it already has React, one could just use React to prerender the pages.

He provides his rational towards the bottom of the post: > But do we really need a separate template for this? Why not just render everything inside the App component? Yes, you could do it, as long as you are okay with invalid HTML markup and not being able to include inline script tags like Google Analytics directly in the App component. But having said that, invalid markup is probably not relevant to SEO anymore an…

I'm not clear on the "invalid markup" portion. Aren't `data-*` attributes valid for all tags in HTML5? Also, if you really don't want them you can render with `React.renderToStaticMarkup`.

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

#34

Post by hello_there »

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…

Can you elaborate on you stack and toolchain? I'm curious about what's simple and works well with React.

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

#35

Post by verroq »

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't even made your app yet.

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

#36

Post by justinsaccount »

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…

I'm not an expert on either of those, but I don't think that your ERB version does the same thing. If delta is not set, the react version renders something like

    
        title
If it is set, it renders something like

    
         delta 
        title
Your version appears to render

    
        
            title

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

#37

Post by joshuajenkinsyo »

It's great that you're sharing a very practical tutorial, but did it occur to you that women (and generally reasonable people) might not be particularly motivated to learn how to build a woman judging app? Seems like your example project could be less alienating.

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

#39

Post by justinsaccount »

bmelton wrote: post #17
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.

I can't claim to be a Gulp expert, but it's always shocking to me how tools like Gulp and Grunt become so pervasive without strong tutorials. I ignored Grunt for years, always implementing my own hackneyed systems in Python, until I eventually discovered this tutorial[1], which at least got me a good introductory "this is how you use this thing that everybody else already knows how to use, dummy" lesson. [1] - http:/…

Things like http://yeoman.io/ likely have something to do with it.

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

#40

Post by lojack »

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 ? 'text-success' : 'text-danger'}>
            {this.props.delta}
          
      ) : null }() }
      {this.props.title}
Is the same amount of typing. Honestly though, I feel as though this whole argument is a bit of an apples-to-oranges type of argument.
Post reply on HN