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

133 点作者 sahat将近 10 年前

15 条评论

petewailes将近 10 年前

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.

评论 #9923983 未加载

评论 #9924377 未加载

评论 #9924366 未加载

评论 #9923966 未加载

cabirum将近 10 年前

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 tomorrow or introduce some backwards-incompatible change. This trend as a whole looks unreliable, like a wobbly house of cards near a working fan.

评论 #9924169 未加载

TheAceOfHearts将近 10 年前

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] <a href="http://github.com/cesarandreu/web-app" rel="nofollow">http://github.com/cesarandreu/web-app</a>

评论 #9924977 未加载

verroq将近 10 年前

Why is modern webdev this hard?Even the todo-mvcs are all ~500 to 1000+ lines.

评论 #9923374 未加载

评论 #9923516 未加载

评论 #9923375 未加载

评论 #9923388 未加载

评论 #9923379 未加载

评论 #9923380 未加载

renke1将近 10 年前

"I have yet to find any React boilerplate project with an easy to understand webpack.config.js file."I actually think that a simple Webpack configuration for a React project is pretty easy to understand (thanks to Babel). Here is one that I use in one of my projects [1]. Adding Less support is like one additional entry.[1]: <a href="https://github.com/renke/perpetually/blob/master/webpack.config.js" rel="nofollow">https://github.com/renke/perpetually/blob/master/webpack.con...</a>

nothrabannosir将近 10 年前

How long did it take you to write this?

roneesh将近 10 年前

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.

评论 #9924271 未加载

评论 #9923579 未加载

alexggordon将近 10 年前

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]):<pre><code> render() { let delta = this.props.delta ? ( 0 ? 'text-success' : 'text-danger'}> {this.props.delta} ) : null; return ( <div className='card'> {delta} {this.props.title} </div> ); } </code></pre> This is approximately that same function written in ERB and Rails syntax.<pre><code> <div class='card'> <%= content_tag_for(:strong, :class => @delta > 0 ? 'text-success' : 'text-danger' ) do %> <%= @this_props_title %> <% end %> </div> </code></pre> On just a pure typing basis, the ERB would take half as long to type as the react version. Even writing that same function in backbone templates (which I use frequently) would take less text, and be easier to read. Maybe I haven't given react and other js frameworks enough of a chance, but to a person that hasn't learned them, that render function above is a huge deterrent.[0] <a href="https://gist.github.com/alexggordon/820020aab934bf192b81" rel="nofollow">https://gist.github.com/alexggordon/820020aab934bf192b81</a>

评论 #9924112 未加载

评论 #9924058 未加载

raylan_givens将近 10 年前

Really great tutorial, I looked at your other tutorials and you have some really great content. Thanks for sharing.

VeejayRampay将近 10 年前

Standing ovation to you. That is a lot of work and a precious resource. Kudos.

wildpeaks将近 10 年前

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

评论 #9923576 未加载

评论 #9925245 未加载

henryw将近 10 年前

Looks pretty cool! I like the graphics. I think Meteor.js does this too, but with only one resume buzzword.

joshuajenkinsyo将近 10 年前

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.

ngoel36将近 10 年前

Really awesome job

CmonDev将近 10 年前

Is it really a "full-stack" "app"? Sounds more like a set of scripts:> "...using React, Node.js, MongoDB and Socket.IO..."

评论 #9923610 未加载