A Primer for Building Single Page Applications with React • Hacker News Board

Re: A Primer for Building Single Page Applications with React

#81

Post by nwienert » Tue, Mar 24, 2015, 4:04 PM UTC

fizixer wrote: post #11

Question from a JS layman: React is great in comparison to what? vanilla JS? Angular/Backbone/Ember? JQuery? any other *.JS? Also is this a good direction for "mobile first" approach? What about platform independence? (iOS/Android/Desktop agnostic, etc, etc). (bootstrap? phonegap?)

For me React is great in comparison to anything I've tried before, which was really hand-rolled, jQuery, and Backbone. I tried to get into Ember/Angular in the past, but the learning curve was way too high. I didn't have time to spend a month going slow. With React, I was up and running within a day.

Of course, it took way longer to put together a good stack. I spent months pushing React and trying to learn the best practices there.

I did end up with something relevant though. I built Reapp: http://reapp.io

It's really a bunch of things in one, but I think it's hugely overlooked for being an awesome bootstrapping method for getting a full-featured React app up and running. You can have your app running with hot reloads, ES6, cordova-builds, flux, etc all in minutes with a single command. And of course it includes an awesome (IMO) UI kit to boot.

Re: A Primer for Building Single Page Applications with React

#82

Post by fudgy73 » Tue, Mar 24, 2015, 4:07 PM UTC

mcx wrote: post #2

Author here, the primer is still in the draft phase but feel free to share your feedback / make pull requests!

Great guide. Thanks a bunch. Glad you're feeling better! :-)

Re: A Primer for Building Single Page Applications with React

#83

Post by nwienert » Tue, Mar 24, 2015, 4:09 PM UTC

JDDunn9 wrote: post #5

Can you build an SPA using just React? At the very least it seems like you'll need a URL router, and something like underscore.js to fill in the gaps.

If you'd like an exceptionally easy way to bootstrap a SPA (whether you need mobile or not), try out reapp: https://reapp.io

It includes react-router, and quite a few good libraries/examples for flux, requests, immutable.js, etc.

Re: A Primer for Building Single Page Applications with React

#84

Post by timepiece » Tue, Mar 24, 2015, 4:13 PM UTC

nwienert wrote: post #78

timepiece wrote: post #50

Earlier quoted context omitted.

Absolutely, React is in the wrong here and its methodology is a clear and direct violation of the "separation of concerns" principle. First, they came for the HTML markup and said "come on guys, JSX is just some XML on steroids. You should not worry at all" and we didn't speak up. Then they came for CSS and said "come on guys, they're just small components and the same as placing the CSS declarations via the style at…

I've actually never found myself more productive than with React, by a long shot. The reasons why mixing them together makes sense are above us in the thread, but I'd highly recommend vjeux's presentation on CSS in JS: https://speakerdeck.com/vjeux/react-css-in-js I have apps in production with it you can look at the code to as well: https://github.com/reapp/hacker-news-app

vjeux's presentation only applies to a very specific use case at his org namely FB. I should not imitate him just because of the fact that it fitted or served FB right. We should think on our own and figure what works for us and not blindly follow FB's or any other org's lead.

Re productivity, if it works for you, good for you but please don't attempt to reinterpret/bend the rules that are well established in the industry just to avoid criticism. For me, it's just an act of intellectual dishonesty.

React does violate the principle of separation of concerns and "we're working on a component not a document level" is not fooling anyone.

We should alert and educate people on this issue and then they can decide for themselves if they would go ahead nevertheless or stick to their guns. That's all!

Re: A Primer for Building Single Page Applications with React

#85

Post by TheAceOfHearts » Tue, Mar 24, 2015, 4:15 PM UTC

andrewrice wrote: post #68

This is great. Does anyone know of a similar primer for Angular 1.*?

One problem is that angular 1.x is considerably more complicated than react. There's John Papa's style guide [0], but IMO it's not great.

There's an angular review [1] that I believe hits the nail on the head:

"Angular wants you to build your application in a particular way, but it’s not very explicit about it. Call it “passive-aggressive architecture.”"

After using angular for over ~2 years, I'm far happier with react (and a flux implementation, if doing something more complicated). You end up with far simpler code and more maintainable code.

The fact that the angular team itself is doing a complete rewrite that throws away almost all the fundamentals of angular 1.x shows a clear recognition of the many flaws present in it.

[0] https://github.com/johnpapa/angular-styleguide [1] http://www.letscodejavascript.com/v3/blog/2015/01/angular_re...

Re: A Primer for Building Single Page Applications with React

#86

Post by fiatjaf » Tue, Mar 24, 2015, 4:24 PM UTC

There's a tutorial bubble for these frameworks and languages. Too little to say, too much reexplanation of the basics. You end up reading for days and knowing less than what you would know if you started playing with the tools.

Re: A Primer for Building Single Page Applications with React

#87

Post by rip747 » Tue, Mar 24, 2015, 4:25 PM UTC

it's funny how for years i heard how bad CFML was because of mixing in logic and presentation in custom tags. now for some reason react makes this cool. we've come full circle.

Re: A Primer for Building Single Page Applications with React

#88

Post by uptownJimmy » Tue, Mar 24, 2015, 4:26 PM UTC

timepiece wrote: post #84

nwienert wrote: post #78

Earlier quoted context omitted.

I've actually never found myself more productive than with React, by a long shot. The reasons why mixing them together makes sense are above us in the thread, but I'd highly recommend vjeux's presentation on CSS in JS: https://speakerdeck.com/vjeux/react-css-in-js I have apps in production with it you can look at the code to as well: https://github.com/reapp/hacker-news-app

vjeux's presentation only applies to a very specific use case at his org namely FB. I should not imitate him just because of the fact that it fitted or served FB right. We should think on our own and figure what works for us and not blindly follow FB's or any other org's lead. Re productivity, if it works for you, good for you but please don't attempt to reinterpret/bend the rules that are well established in the ind…

I don't give a hoot about "separation of concerns" unless it makes really, really good sense, which it often does not.

Re: A Primer for Building Single Page Applications with React

#89

Post by BinaryIdiot » Tue, Mar 24, 2015, 4:34 PM UTC

Bahamut wrote: post #74

BinaryIdiot wrote: post #63

Earlier quoted context omitted.

> It turns out that separating logic and presentation in web applications the way you would on web sites is a very bad match. You simply end up putting logic that is very closely tied together in three different places. As a web developer for the past 10 years I can't disagree with this more. It wasn't the easiest thing to accomplish maybe 5 years ago but it was always doable and now with web components it's incredib…

Web Components does what React essentially does, bring them together.

As with all technologies it matters how they are used; I simply stated web components make the separation easier than ever before but that doesn't mean the same can't be done with JSX.

I think it's very important to keep the interface away from the logic. Creating components in React that only drive the user interface isn't bad but it's not as straightforward as something native like dealing directly html and css. I've worked with many designers who are awesome at styling and making pages look great but when they have to edit any type of scripting or something outside of HTML / CSS it's a whole new skill-set they need to learn to be effective (a skill-set they don't really need that the majority do not have).

Re: A Primer for Building Single Page Applications with React

#90

Post by timepiece » Tue, Mar 24, 2015, 4:37 PM UTC

uptownJimmy wrote: post #88

timepiece wrote: post #84

Earlier quoted context omitted.

vjeux's presentation only applies to a very specific use case at his org namely FB. I should not imitate him just because of the fact that it fitted or served FB right. We should think on our own and figure what works for us and not blindly follow FB's or any other org's lead. Re productivity, if it works for you, good for you but please don't attempt to reinterpret/bend the rules that are well established in the ind…

I don't give a hoot about "separation of concerns" unless it makes really, really good sense, which it often does not.

Fair enough but please don't go around telling that mixing content/presentation/logic in a single entity is a valid case of "separation of concerns" but on a micro and not macro level. That's just not right!